Add remaining settings

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>