Add navbar

src/views/GenerateApr2025View.vue

@@ -4,10 +4,12 @@ import { defineComponent } from "vue";
 import axios from "axios";
 
 import SettingPicker from "@/components/SettingPicker.vue";
+import GeneratorName from "@/components/GeneratorName.vue";
 
 export default defineComponent({
   components: {
     SettingPicker,
+    GeneratorName,
   },
   data() {
     return {
@@ -41,39 +43,42 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="card content-div m-3">
-    <div class="card-header">
-      Generate Seed
-    </div>
-    <ul class="list-group list-group-flush">
-      <li class="list-group-item">
-        <SettingPicker color="primary" v-model="set.mode" name="mode" generator="apr2025" />
-        <SettingPicker color="primary" v-model="set.weapons" name="weapons" generator="apr2025" />
-        <SettingPicker color="primary" v-model="set.hints" name="hints" generator="apr2025" />
-      </li>
-      <li class="list-group-item">
-        <SettingPicker color="success" v-model="set.crystals_ganon" name="crystals_ganon" generator="apr2025" />
-      </li>
-      <li class="list-group-item">
-        <SettingPicker color="warning" v-model="set.entrance_shuffle" name="entrance_shuffle" generator="apr2025" />
-      </li>
-      <li class="list-group-item">
-        <SettingPicker color="danger" v-model="set.small_keys" name="dungeon_item_shuffle" generator="apr2025" />
-      </li>
-      <li class="list-group-item">
-        <SettingPicker color="primary" v-model="set.boots" name="boots" generator="apr2025" />
-      </li>
-    </ul>
-    <div class="card-footer">
-      <div class="nav nav-pills nav-fill" role="group">
-        <button type="button" class="m-1 nav-item btn btn-outline-danger"
-            @click="generate(true);">
-          Generate Race ROM
-        </button>
-        <button type="button" class="m-1 nav-item btn btn-outline-primary"
-            @click="generate(false);">
-          Generate ROM
-        </button>
+  <div class="mw-60">
+    <div class="card content-div m-3">
+      <div class="card-header">
+        Generate Seed
+        <GeneratorName generator="apr2025" class="float-right" />
+      </div>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">
+          <SettingPicker color="primary" v-model="set.mode" name="mode" generator="apr2025" />
+          <SettingPicker color="primary" v-model="set.weapons" name="weapons" generator="apr2025" />
+          <SettingPicker color="primary" v-model="set.hints" name="hints" generator="apr2025" />
+        </li>
+        <li class="list-group-item">
+          <SettingPicker color="success" v-model="set.crystals_ganon" name="crystals_ganon" generator="apr2025" />
+        </li>
+        <li class="list-group-item">
+          <SettingPicker color="warning" v-model="set.entrance_shuffle" name="entrance_shuffle" generator="apr2025" />
+        </li>
+        <li class="list-group-item">
+          <SettingPicker color="danger" v-model="set.small_keys" name="dungeon_item_shuffle" generator="apr2025" />
+        </li>
+        <li class="list-group-item">
+          <SettingPicker color="primary" v-model="set.boots" name="boots" generator="apr2025" />
+        </li>
+      </ul>
+      <div class="card-footer">
+        <div class="nav nav-pills nav-fill" role="group">
+          <button type="button" class="m-1 nav-item btn btn-outline-danger"
+              @click="generate(true);">
+            Generate Race ROM
+          </button>
+          <button type="button" class="m-1 nav-item btn btn-outline-primary"
+              @click="generate(false);">
+            Generate ROM
+          </button>
+        </div>
       </div>
     </div>
   </div>

src/views/GenerateMulti.vue

@@ -6,10 +6,12 @@ import localforage from "localforage";
 import { Tab } from "bootstrap";
 
 import SettingsPage from "@/components/SettingsPage.vue";
+import GeneratorName from "@/components/GeneratorName.vue";
 
 export default defineComponent({
   components: {
     SettingsPage,
+    GeneratorName,
   },
   props: {
     prefix: null,
@@ -24,14 +26,25 @@ export default defineComponent({
   async mounted() {
     document.title = "ALttPR Multiworld"
 
-    await new Promise(r => setTimeout(r, 100));
-
     for (var i = 0; i < this.worldCount; i++) {
-      this.worlds[i].player_name = await localforage.getItem(`${this.prefix}world_${i + 1}_setting_player_name`);
       new Tab(this.$refs.tabs[i]);
     }
+
+    await new Promise(r => setTimeout(r, 100));
+
+    await this.loadPlayerNames();
+  },
+  watch: {
+    async generator(oldValue, newValue) {
+      await this.loadPlayerNames();
+    },
   },
   methods: {
+    async loadPlayerNames() {
+      for (var i = 0; i < this.worldCount; i++) {
+        this.worlds[i].player_name = await localforage.getItem(`${this.prefix}world_${i + 1}_setting_player_name`);
+      }
+    },
     async addWorld() {
       const newname = await localforage.getItem(`${this.prefix}world_${this.worldCount + 1}_setting_player_name`);
       this.worlds.push({player_name: newname});
@@ -82,59 +95,62 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="card content-div m-3">
-    <div class="card-header">
-      Generate Multiworld
-    </div>
-    <ul class="nav nav-tabs ps-3 pt-3 pe-3">
-      <li v-for="(n, idx) in worldCount" class="nav-item" role="presentation">
-        <button class="nav-link" :class="{active: idx == 0}" data-bs-toggle="tab"
-            :data-bs-target="`#world_page_${n}`" type="button" role="tab" ref="tabs">
-          <template v-if="worlds[idx] && worlds[idx].player_name && worlds[idx].player_name.length">
-            {{ worlds[idx].player_name }}
-          </template>
-          <template v-else>
-            {{ n }}
-          </template>
-          <div v-if="n == worldCount && n > 2" class="delete-player-button">
-            <button @click="removeWorld" class="badge btn rounded-pill text-bg-danger">
-              <i class="bi bi-trash"></i>
-            </button>
-          </div>
+  <div class="mw-60">
+    <div class="card content-div m-3">
+      <div class="card-header">
+        Generate Multiworld
+        <GeneratorName :generator="generator" class="float-right" />
+      </div>
+      <ul class="nav nav-tabs ps-3 pt-3 pe-3">
+        <li v-for="(n, idx) in worldCount" class="nav-item" role="presentation">
+          <button class="nav-link" :class="{active: idx == 0}" data-bs-toggle="tab"
+              :data-bs-target="`#world_page_${n}`" type="button" role="tab" ref="tabs">
+            <template v-if="worlds[idx] && worlds[idx].player_name && worlds[idx].player_name.length">
+              {{ worlds[idx].player_name }}
+            </template>
+            <template v-else>
+              {{ n }}
+            </template>
+            <div v-if="n == worldCount && n > 2" class="delete-player-button">
+              <button @click="removeWorld" class="badge btn rounded-pill text-bg-danger">
+                <i class="bi bi-trash"></i>
+              </button>
+            </div>
+          </button>
+        </li>
+        <button class="nav-link" type="button" role="tab" @click="addWorld">
+          <i class="bi bi-plus"></i>
         </button>
-      </li>
-      <button class="nav-link" type="button" role="tab" @click="addWorld">
-        <i class="bi bi-plus"></i>
-      </button>
-    </ul>
-    <div class="tab-content">
-      <template v-for="(n, idx) in worldCount">
-        <div :id="`world_page_${n}`" class="tab-pane fade"
-            :class="{show: idx == 0, active: idx == 0}" role="tabpanel">
-          <div class="input-group ms-3 me-3 mt-3" style="width: inherit;">
-            <label class="input-group-text" :for="`player_${n}_name`">
-              Player {{ n }} Name:
-            </label>
-            <input type="text" class="form-control" :placeholder="`Player ${n}`"
-                id="`player_${n}_name`" v-model="worlds[idx].player_name"
-                @change="playerNameUpdated(idx)" />
-          </div>
-          <div id="settings" class="accordion accordion-flush">
-            <SettingsPage v-model="worlds[idx]" :prefix="`${prefix}world_${n}_`" :generator="generator" />
+      </ul>
+      <div class="tab-content">
+        <template v-for="(n, idx) in worldCount">
+          <div :id="`world_page_${n}`" class="tab-pane fade"
+              :class="{show: idx == 0, active: idx == 0}" role="tabpanel">
+            <div class="input-group ms-3 me-3 mt-3" style="width: inherit;">
+              <label class="input-group-text" :for="`player_${n}_name`">
+                Player {{ n }} Name:
+              </label>
+              <input type="text" class="form-control" :placeholder="`Player ${n}`"
+                  id="`player_${n}_name`" v-model="worlds[idx].player_name"
+                  @change="playerNameUpdated(idx)" />
+            </div>
+            <div id="settings" class="accordion accordion-flush">
+              <SettingsPage v-model="worlds[idx]" :prefix="`${prefix}world_${n}_`" :generator="generator" />
+            </div>
           </div>
+        </template>
+      </div>
+      <div class="card-footer">
+        <div class="nav nav-pills nav-fill" role="group">
+          <button type="button" class="m-1 nav-item btn btn-outline-danger"
+              @click="generate(true);">
+            Generate Race Multiworld
+          </button>
+          <button type="button" class="m-1 nav-item btn btn-outline-primary"
+              @click="generate(false);">
+            Generate Multiworld
+          </button>
         </div>
-      </template>
-    </div>
-    <div class="card-footer">
-      <div class="nav nav-pills nav-fill" role="group">
-        <button type="button" class="m-1 nav-item btn btn-outline-danger"
-            @click="generate(true);">
-          Generate Race Multiworld
-        </button>
-        <button type="button" class="m-1 nav-item btn btn-outline-primary"
-            @click="generate(false);">
-          Generate Multiworld
-        </button>
       </div>
     </div>
   </div>

src/views/GenerateMystery.vue

@@ -10,9 +10,12 @@ import generatorSettings from "@/data/generator-settings.yaml";
 
 import VueMarkdown from "vue-markdown-render";
 
+import GeneratorName from "@/components/GeneratorName.vue";
+
 export default defineComponent({
   components: {
     VueMarkdown,
+    GeneratorName,
   },
   props: {
     prefix: null,
@@ -135,11 +138,12 @@ export default defineComponent({
     <div class="card content-div m-3">
       <div class="card-header">
         Generate Mystery Seed
+        <GeneratorName :generator="generator" class="float-right" />
       </div>
       <ul class="list-group list-group-flush">
         <li class="list-group-item">
           Upload Mystery YAML:
-          <a class="example-yaml-link" href="/sample_mystery.yaml">(example)</a>
+          <a class="float-right" href="/sample_mystery.yaml">(example)</a>
           <div class="input-group mt-2 mb-2">
             <input id="yaml-input" class="form-control" type="file" accept=".yaml,.yml" @change="uploadYaml($event.target.files[0], true)" />
           </div>
@@ -164,11 +168,3 @@ export default defineComponent({
     </div>
   </div>
 </template>
-
-<style>
-.example-yaml-link {
-  position: absolute;
-  right: 0;
-  padding-right: var(--bs-list-group-item-padding-x);
-}
-</style>

src/views/GenerateView.vue

@@ -5,10 +5,12 @@ import axios from "axios";
 import { Modal } from "bootstrap";
 
 import SettingsPage from "@/components/SettingsPage.vue";
+import GeneratorName from "@/components/GeneratorName.vue";
 
 export default defineComponent({
   components: {
     SettingsPage,
+    GeneratorName,
   },
   props: {
     prefix: null,
@@ -45,23 +47,26 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="card content-div m-3">
-    <div class="card-header">
-      Generate Seed
-    </div>
-    <div id="settings" class="accordion accordion-flush">
-      <SettingsPage v-model="set" :generator="generator" :prefix="prefix" />
-    </div>
-    <div class="card-footer">
-      <div class="nav nav-pills nav-fill" role="group">
-        <button type="button" class="m-1 nav-item btn btn-outline-danger"
-            @click="generate(true);">
-          Generate Race ROM
-        </button>
-        <button type="button" class="m-1 nav-item btn btn-outline-primary"
-            @click="generate(false);">
-          Generate ROM
-        </button>
+  <div class="mw-60">
+    <div class="card content-div m-3">
+      <div class="card-header">
+        Generate Seed
+        <GeneratorName :generator="generator" class="float-right" />
+      </div>
+      <div id="settings" class="accordion accordion-flush">
+        <SettingsPage v-model="set" :generator="generator" :prefix="prefix" />
+      </div>
+      <div class="card-footer">
+        <div class="nav nav-pills nav-fill" role="group">
+          <button type="button" class="m-1 nav-item btn btn-outline-danger"
+              @click="generate(true);">
+            Generate Race ROM
+          </button>
+          <button type="button" class="m-1 nav-item btn btn-outline-primary"
+              @click="generate(false);">
+            Generate ROM
+          </button>
+        </div>
       </div>
     </div>
   </div>