Add remaining settings

src/assets/main.css

@@ -1,4 +1,9 @@
 #app {
+  max-width: 60rem;
+  margin: 0 auto;
+}
+
+.mw-30 {
   max-width: 30rem;
   margin: 0 auto;
 }

src/components/HeartBeepPicker.vue

@@ -6,6 +6,12 @@ import localforage from "localforage";
 export default defineComponent({
   data() {
     return {
+      options: {
+        normal: "Normal",
+        half: "Half",
+        quarter: "Quarter",
+        off: "Off",
+      },
       heartbeep: null,
     };
   },
@@ -46,21 +52,13 @@ export default defineComponent({
   <div>
     Heart Beep Speed:
   </div>
-  <div class="btn-group mt-2" role="group">
-    <input type="radio" class="btn-check" name="heartbeep" id="heartbeep_normal"
-        autocomplete="off" value="normal" v-model="heartbeep" @change="change" />
-    <label class="btn btn-outline-primary" for="heartbeep_normal">Normal</label>
-
-    <input type="radio" class="btn-check" name="heartbeep" id="heartbeep_half"
-        autocomplete="off" value="half" v-model="heartbeep" @change="change" />
-    <label class="btn btn-outline-primary" for="heartbeep_half">Half</label>
-
-    <input type="radio" class="btn-check" name="heartbeep" id="heartbeep_quarter"
-        autocomplete="off" value="quarter" v-model="heartbeep" @change="change" />
-    <label class="btn btn-outline-primary" for="heartbeep_quarter">Quarter</label>
-
-    <input type="radio" class="btn-check" name="heartbeep" id="heartbeep_off"
-        autocomplete="off" value="off" v-model="heartbeep" @change="change" />
-    <label class="btn btn-outline-primary" for="heartbeep_off">Off</label>
+  <div class="nav nav-pills nav-justified mt-2">
+    <template v-for="value of Object.keys(options)">
+      <input type="radio" class="btn-check" :name="heartbeep" :id="`heartbeep_${value}`"
+          autocomplete="off" :value="value" v-model="heartbeep" @change="change" />
+      <label class="btn btn-outline-primary nav-item m-1" :for="`heartbeep_${value}`">
+        {{ options[value] }}
+      </label>
+    </template>
   </div>
 </template>

src/components/HeartColorPicker.vue

@@ -6,6 +6,12 @@ import localforage from "localforage";
 export default defineComponent({
   data() {
     return {
+      options: {
+        red: {display: "Red", class: "btn-outline-danger"},
+        blue: {display: "Blue", class: "btn-outline-primary"},
+        green: {display: "Green", class: "btn-outline-success"},
+        yellow: {display: "Yellow", class: "btn-outline-warning"},
+      },
       heartcolor: null,
     };
   },
@@ -43,21 +49,13 @@ export default defineComponent({
   <div>
     Heart Color:
   </div>
-  <div class="btn-group mt-2" role="group">
-    <input type="radio" class="btn-check" name="heartcolor" id="heartcolor_red"
-        autocomplete="off" value="red" v-model="heartcolor" @change="change" />
-    <label class="btn btn-outline-danger" for="heartcolor_red">Red</label>
-
-    <input type="radio" class="btn-check" name="heartcolor" id="heartcolor_blue"
-        autocomplete="off" value="blue" v-model="heartcolor" @change="change" />
-    <label class="btn btn-outline-primary" for="heartcolor_blue">Blue</label>
-
-    <input type="radio" class="btn-check" name="heartcolor" id="heartcolor_green"
-        autocomplete="off" value="green" v-model="heartcolor" @change="change" />
-    <label class="btn btn-outline-success" for="heartcolor_green">Green</label>
-
-    <input type="radio" class="btn-check" name="heartcolor" id="heartcolor_yellow"
-        autocomplete="off" value="yellow" v-model="heartcolor" @change="change" />
-    <label class="btn btn-outline-warning" for="heartcolor_yellow">Yellow</label>
+  <div class="nav nav-pills nav-justified mt-1">
+    <template v-for="value of Object.keys(options)">
+      <input type="radio" class="btn-check" :name="heartcolor" :id="`heartcolor_${value}`"
+          autocomplete="off" :value="value" v-model="heartcolor" @change="change" />
+      <label :class="`btn ${options[value].class} nav-item m-1`" :for="`heartcolor_${value}`">
+        {{ options[value].display }}
+      </label>
+    </template>
   </div>
 </template>

src/components/Seed.vue

@@ -163,61 +163,63 @@ export default defineComponent({
 </script>
 
 <template>
-  <div v-if="patch" class="card content-div m-3">
-    <div class="card-header">
-      Permalink: <a :href="permalink">{{ permalink }}</a>
-    </div>
-    <ul class="list-group list-group-flush">
-      <li v-if="!baserom" class="list-group-item">
-        <div class="mb-2">
-          <label for="rom-input" class="form-label">
-            The Legend of Zelda: A Link to the Past (JP 1.0) Rom:
-          </label>
-          <input id="rom-input" class="form-control" type="file" accept=".sfc,.smc" @change="uploadBaseRom($event.target.files[0])" />
-          <div v-if="baserom_error" class="invalid">
-            {{ baserom_error }}
+  <div class="mw-30">
+    <div v-if="patch" class="card content-div m-3">
+      <div class="card-header">
+        Permalink: <a :href="permalink">{{ permalink }}</a>
+      </div>
+      <ul class="list-group list-group-flush">
+        <li v-if="!baserom" class="list-group-item">
+          <div class="mb-2">
+            <label for="rom-input" class="form-label">
+              The Legend of Zelda: A Link to the Past (JP 1.0) Rom:
+            </label>
+            <input id="rom-input" class="form-control" type="file" accept=".sfc,.smc" @change="uploadBaseRom($event.target.files[0])" />
+            <div v-if="baserom_error" class="invalid">
+              {{ baserom_error }}
+            </div>
           </div>
-        </div>
-      </li>
-      <li v-if="settings" class="list-group-item">
-        <SeedSettings :settings="settings" />
-      </li>
-      <li class="list-group-item">
-        <div class="mb-2">
-          <SpritePicker @spriteUpdate="spriteUpdate" />
-        </div>
-      </li>
-      <li class="list-group-item">
-        <div class="mb-2">
-          <HeartBeepPicker ref="heartbeep" />
-        </div>
-      </li>
-      <li class="list-group-item">
-        <div class="mb-2">
-          <HeartColorPicker ref="heartcolor" />
-        </div>
-      </li>
-      <li class="list-group-item">
-        <div>
-          <BackgroundMusicPicker ref="bgm" />
-          <MsuResumePicker ref="msu_resume" />
-          <ReduceFlashingPicker ref="reduce_flashing" />
-          <QuickswapPicker ref="quickswap" />
-        </div>
-      </li>
-      <li class="list-group-item">
-        <button type="submit" class="btn btn-primary submit-btn" :disabled="!baserom || !patch" @click="patchRom">
-          Download Seed!
-        </button>
-        <a id="downloader" style="display: none;" />
-      </li>
-    </ul>
-  </div>
-  <div v-else-if="error" class="error-message">
-    {{ error }}
-  </div>
-  <div v-else>
-    <img class="center" src="/bludormspinbig.gif" />
+        </li>
+        <li v-if="settings" class="list-group-item">
+          <SeedSettings :settings="settings" />
+        </li>
+        <li class="list-group-item">
+          <div class="mb-2">
+            <SpritePicker @spriteUpdate="spriteUpdate" />
+          </div>
+        </li>
+        <li class="list-group-item">
+          <div class="mb-2">
+            <HeartBeepPicker ref="heartbeep" />
+          </div>
+        </li>
+        <li class="list-group-item">
+          <div class="mb-2">
+            <HeartColorPicker ref="heartcolor" />
+          </div>
+        </li>
+        <li class="list-group-item">
+          <div>
+            <BackgroundMusicPicker ref="bgm" />
+            <MsuResumePicker ref="msu_resume" />
+            <ReduceFlashingPicker ref="reduce_flashing" />
+            <QuickswapPicker ref="quickswap" />
+          </div>
+        </li>
+        <li class="list-group-item">
+          <button type="submit" class="btn btn-primary submit-btn" :disabled="!baserom || !patch" @click="patchRom">
+            Download Seed!
+          </button>
+          <a id="downloader" style="display: none;" />
+        </li>
+      </ul>
+    </div>
+    <div v-else-if="error" class="error-message">
+      {{ error }}
+    </div>
+    <div v-else>
+      <img class="center" src="/bludormspinbig.gif" />
+    </div>
   </div>
 </template>
 

src/components/SettingPicker.vue

@@ -15,6 +15,7 @@ export default defineComponent({
   props: {
     modelValue: null,
     name: null,
+    color: "primary",
     settings: {},
   },
   mounted() {
@@ -35,7 +36,7 @@ export default defineComponent({
     <template v-for="value of Object.keys(settings.values)">
       <input type="radio" class="btn-check" :name="name" :id="`${name}_${value}`"
           autocomplete="off" :value="value" v-model="selected" @change="change" />
-      <label class="btn btn-outline-primary nav-item m-1" :for="`${name}_${value}`">
+      <label :class="`btn btn-outline-${color} nav-item m-1`" :for="`${name}_${value}`">
         {{ settings.values[value].display }}
       </label>
     </template>

src/data/settings.yaml

@@ -127,6 +127,8 @@ base:
       independent:
         display: Independent
   boss_shuffle:
+    display: Boss Shuffle
+    default: vanilla
     values:
       vanilla:
         display: None
@@ -139,12 +141,16 @@ base:
       prize_unique:
         display: Prize Unique
   enemy_shuffle:
+    display: Enemy Shuffle
+    default: vanilla
     values:
       vanilla:
         display: None
       shuffled:
         display: Shuffled
   small_keys:
+    display: Small Key Shuffle
+    default: dungeon
     values:
       dungeon:
         display: In Dungeon
@@ -155,6 +161,8 @@ base:
       universal:
         display: Universal
   big_keys:
+    display: Big Key Shuffle
+    default: dungeon
     values:
       dungeon:
         display: In Dungeon
@@ -163,6 +171,8 @@ base:
       nearby:
         display: Nearby
   maps:
+    display: Map Shuffle
+    default: dungeon
     values:
       dungeon:
         display: In Dungeon
@@ -171,6 +181,8 @@ base:
       nearby:
         display: Nearby
   compasses:
+    display: Compass Shuffle
+    default: dungeon
     values:
       dungeon:
         display: In Dungeon
@@ -179,12 +191,16 @@ base:
       nearby:
         display: Nearby
   shop_shuffle:
+    display: Shop Shuffle
+    default: vanilla
     values:
       vanilla:
         display: None
       shuffled:
         display: Shuffled
   drop_shuffle:
+    display: Drop Shuffle
+    default: vanilla
     values:
       vanilla:
         display: None
@@ -193,6 +209,8 @@ base:
       underworld:
         display: All Underworld Enemies
   pottery:
+    display: Pottery Shuffle
+    default: vanilla
     values:
       vanilla:
         display: None
@@ -213,6 +231,8 @@ base:
       lottery:
         display: Lottery
   prize_shuffle:
+    display: Prize Shuffle
+    default: vanilla
     values:
       vanilla:
         display: On Boss
@@ -223,6 +243,8 @@ base:
       wild:
         display: Wild
   boots:
+    display: Boots
+    default: normal
     values:
       normal:
         display: No Starting Boots

src/views/GenerateView.vue

@@ -12,14 +12,7 @@ export default defineComponent({
   },
   data() {
     return {
-      mode: null,
-      goal: null,
-      weapons: null,
-      crystals_ganon: null,
-      crystals_gt: null,
-      entrance_shuffle: null,
-      skull_woods: null,
-      linked_drops: null,
+      set: {},
     };
   },
   computed: {
@@ -30,8 +23,8 @@ export default defineComponent({
   methods: {
     async generate(race) {
       const settings = { race: race ? "race" : "normal" };
-      for (const setting of Object.keys(this.$data)) {
-        settings[setting] = this.$data[setting];
+      for (const setting of Object.keys(this.set)) {
+        settings[setting] = this.set[setting];
       }
       await axios.post("/generate", settings)
         .then(response => {
@@ -53,21 +46,40 @@ export default defineComponent({
     </div>
     <ul class="list-group list-group-flush">
       <li class="list-group-item">
-        <SettingPicker v-model="mode" name="mode" :settings="settings.mode" />
-        <SettingPicker v-model="weapons" name="weapons" :settings="settings.weapons" />
+        <SettingPicker color="primary" v-model="set.mode" name="mode" :settings="settings.mode" />
+        <SettingPicker color="primary" v-model="set.weapons" name="weapons" :settings="settings.weapons" />
       </li>
       <li class="list-group-item">
-        <SettingPicker v-model="goal" name="goal" :settings="settings.goal" />
-        <SettingPicker v-if="['ganon', 'fast_ganon'].includes(this.goal)" 
-            v-model="crystals_ganon" name="crystals_ganon" :settings="settings.crystals_ganon" />
-        <SettingPicker v-model="crystals_gt" name="crystals_gt" :settings="settings.crystals_gt" />
+        <SettingPicker color="success" v-model="set.goal" name="goal" :settings="settings.goal" />
+        <SettingPicker color="success" v-if="['ganon', 'fast_ganon'].includes(this.set.goal)" 
+            v-model="set.crystals_ganon" name="crystals_ganon" :settings="settings.crystals_ganon" />
+        <SettingPicker color="success" v-model="set.crystals_gt" name="crystals_gt" :settings="settings.crystals_gt" />
       </li>
       <li class="list-group-item">
-        <SettingPicker v-model="entrance_shuffle" name="entrance_shuffle" :settings="settings.entrance_shuffle" />
-        <SettingPicker v-if="this.entrance_shuffle != 'vanilla'"
-            v-model="skull_woods" name="skull_woods" :settings="settings.skull_woods" />
-        <SettingPicker v-if="this.entrance_shuffle != 'vanilla'"
-            v-model="linked_drops" name="linked_drops" :settings="settings.linked_drops" />
+        <SettingPicker color="warning" v-model="set.entrance_shuffle" name="entrance_shuffle" :settings="settings.entrance_shuffle" />
+        <SettingPicker color="warning" v-if="this.set.entrance_shuffle != 'vanilla'"
+            v-model="set.skull_woods" name="skull_woods" :settings="settings.skull_woods" />
+        <SettingPicker color="warning" v-if="this.set.entrance_shuffle != 'vanilla'"
+            v-model="set.linked_drops" name="linked_drops" :settings="settings.linked_drops" />
+      </li>
+      <li class="list-group-item">
+        <SettingPicker color="danger" v-model="set.boss_shuffle" name="boss_shuffle" :settings="settings.boss_shuffle" />
+        <SettingPicker color="danger" v-model="set.enemy_shuffle" name="enemy_shuffle" :settings="settings.enemy_shuffle" />
+      </li>
+      <li class="list-group-item">
+        <SettingPicker color="primary" v-model="set.small_keys" name="small_keys" :settings="settings.small_keys" />
+        <SettingPicker color="primary" v-model="set.big_keys" name="big_keys" :settings="settings.big_keys" />
+        <SettingPicker color="primary" v-model="set.maps" name="maps" :settings="settings.maps" />
+        <SettingPicker color="primary" v-model="set.compasses" name="compasses" :settings="settings.compasses" />
+      </li>
+      <li class="list-group-item">
+        <SettingPicker color="success" v-model="set.shop_shuffle" name="shop_shuffle" :settings="settings.shop_shuffle" />
+        <SettingPicker color="success" v-model="set.drop_shuffle" name="drop_shuffle" :settings="settings.drop_shuffle" />
+        <SettingPicker color="success" v-model="set.pottery" name="pottery" :settings="settings.pottery" />
+        <SettingPicker color="success" v-model="set.prize_shuffle" name="prize_shuffle" :settings="settings.prize_shuffle" />
+      </li>
+      <li class="list-group-item">
+        <SettingPicker color="warning" v-model="set.boots" name="boots" :settings="settings.boots" />
       </li>
     </ul>
     <div class="card-footer">