Add navbar

src/App.vue

@@ -1,5 +1,14 @@
-<script setup>
+<script>
+import { defineComponent } from "vue";
 import { RouterView } from "vue-router";
+
+import NavBar from "@/components/NavBar.vue";
+
+export default defineComponent({
+  components: {
+    NavBar,
+  }
+});
 </script>
 
 <template>
@@ -8,6 +17,8 @@ import { RouterView } from "vue-router";
     </div>
   </header>
 
+  <NavBar />
+
   <RouterView />
 </template>
 

src/assets/main.css

@@ -1,4 +1,4 @@
-#app {
+.mw-60 {
   max-width: 60rem;
   margin: 0 auto;
 }
@@ -8,8 +8,11 @@
   margin: 0 auto;
 }
 
-.center {
+.block {
   display: block;
+}
+
+.center {
   margin: 0 auto;
 }
 

src/components/GeneratorName.vue

@@ -0,0 +1,22 @@
+<script>
+import { defineComponent } from "vue";
+
+import settingsDisplay from "@/data/settings-display.yaml";
+
+export default defineComponent({
+  props: {
+    generator: "",
+  },
+  computed: {
+    display() {
+      return settingsDisplay.randomizer_generator[this.generator];
+    }
+  },
+});
+</script>
+
+<template>
+  <span v-if="display">
+    {{ display }}
+  </span>
+</template>

src/components/Multi.vue

@@ -109,7 +109,7 @@ export default defineComponent({
       </div>
     </div>
     <div v-else>
-      <img class="center" src="/bludormspinbig.gif" />
+      <img class="block center" src="/bludormspinbig.gif" />
     </div>
   </div>
 </template>

src/components/NavBar.vue

@@ -0,0 +1,99 @@
+<script>
+import { defineComponent } from "vue";
+import { Collapse } from "bootstrap";
+
+export default defineComponent({
+  data() {
+    return {
+      navbar: null,
+    };
+  },
+  async mounted() {
+    this.navbar = Collapse.getOrCreateInstance(this.$refs.navbar, {toggle: false});
+  },
+  methods: {
+    collapse() {
+      this.navbar.hide();
+    },
+  },
+});
+</script>
+
+<template>
+  <nav class="navbar navbar-expand-sm bg-dark-subtle pt-1 px-2">
+    <div class="container-fluid px-1">
+      <a class="navbar-brand ps-1 py-0 me-2">
+        <img class="brand-logo" src="/gwaa_logo.png" />
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle Navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div id="navbar" class="collapse navbar-collapse" ref="navbar">
+        <ul class="navbar-nav center">
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Seed
+            </a>
+            <ul class="dropdown-menu">
+              <li>
+                <router-link to="/generate" class="dropdown-item" @click="collapse">
+                  Base Randomizer
+                </router-link>
+              </li>
+              <li>
+                <router-link to="/generate/beta" class="dropdown-item" @click="collapse">
+                  Beta Randomizer
+                </router-link>
+              </li>
+              <li>
+                <router-link to="/generate/apr2025" class="dropdown-item" @click="collapse">
+                  April 2025 Randomizer
+                </router-link>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Multiworld
+            </a>
+            <ul class="dropdown-menu">
+              <li>
+                <router-link to="/multiworld" class="dropdown-item" @click="collapse">
+                  Base Randomizer
+                </router-link>
+              </li>
+              <li>
+                <router-link to="/multiworld/beta" class="dropdown-item" @click="collapse">
+                  Beta Randomizer
+                </router-link>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Mystery
+            </a>
+            <ul class="dropdown-menu">
+              <li>
+                <router-link to="/mystery" class="dropdown-item" @click="collapse">
+                  Base Randomizer
+                </router-link>
+              </li>
+              <li>
+                <router-link to="/mystery/beta" class="dropdown-item" @click="collapse">
+                  Beta Randomizer
+                </router-link>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style>
+.brand-logo {
+  height: 28px;
+}
+</style>

src/components/Seed.vue

@@ -291,7 +291,7 @@ export default defineComponent({
       </div>
     </div>
     <div v-else>
-      <img class="center" src="/bludormspinbig.gif" />
+      <img class="block center" src="/bludormspinbig.gif" />
     </div>
   </div>
   <div v-if="patch && spoiler && show_spoiler" class="mw-60">

src/components/SettingPicker.vue

@@ -27,6 +27,9 @@ export default defineComponent({
       this.selected = newValue;
       await this.updateLocalForage();
     },
+    async generator(newValue, oldValue) {
+      await this.loadSaved(true);
+    },
   },
   computed: {
     settings() {
@@ -47,17 +50,7 @@ export default defineComponent({
   },
   async mounted() {
     this.$refs.tips?.forEach(el => new Tooltip(el));
-    if (this.settings) {
-      const saved = await localforage.getItem(`${this.prefix}setting_${this.name}`) ?? this.settings.default;
-      if (this.modelValue) {
-        this.selected = this.modelValue;
-      } else if (this.settings.values[saved]) {
-        this.selected = saved;
-      } else {
-        this.selected = this.settings.default;
-      }
-      this.change();
-    }
+    await this.loadSaved(false);
   },
   methods: {
     async change() {
@@ -67,6 +60,19 @@ export default defineComponent({
     async updateLocalForage() {
       await localforage.setItem(`${this.prefix}setting_${this.name}`, this.selected);
     },
+    async loadSaved(override) {
+      if (this.settings) {
+        const saved = await localforage.getItem(`${this.prefix}setting_${this.name}`) ?? this.settings.default;
+        if (this.modelValue && !override) {
+          this.selected = this.modelValue;
+        } else if (this.settings.values[saved]) {
+          this.selected = saved;
+        } else {
+          this.selected = this.settings.default;
+        }
+        this.change();
+      }
+    },
   },
 });
 </script>

src/components/SettingsPage.vue

@@ -53,7 +53,19 @@ export default defineComponent({
         this.$emit("update:modelValue", this.set);
       },
       deep: true,
+    },
+    async generator(newValue, oldValue) {
+      for (const setting of Object.keys(this.set)) {
+        if (setting == "player_name") {
+          continue;
         }
+
+        if (!(setting in this.settings)) {
+          delete this.set[setting];
+        }
+      }
+      this.$refs.preset.settingChanged(this.set);
+    },
   },
   methods: {
     ...mapActions(usePresetStore, ["fetchLocalPresets"]),

src/data/settings-display.yaml

@@ -1,3 +1,7 @@
+randomizer_generator:
+  beta: Beta Randomizer
+  apr2025: April 2025 Special Randomizer
+  pikit: Special Pikit Randomizer
 randomizer:
   apr2025: April 2025 Special Randomizer
   pikit: Special Pikit Randomizer

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,9 +43,11 @@ export default defineComponent({
 </script>
 
 <template>
+  <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">
@@ -77,4 +81,5 @@ export default defineComponent({
         </div>
       </div>
     </div>
+  </div>
 </template>

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,9 +95,11 @@ export default defineComponent({
 </script>
 
 <template>
+  <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">
@@ -138,6 +153,7 @@ export default defineComponent({
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style>

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,9 +47,11 @@ export default defineComponent({
 </script>
 
 <template>
+  <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" />
@@ -65,4 +69,5 @@ export default defineComponent({
         </div>
       </div>
     </div>
+  </div>
 </template>