Add first pass at settings page

src/components/NavBar.vue

@@ -86,6 +86,11 @@ export default defineComponent({
               </li>
             </ul>
           </li>
+          <li class="nav-item nav-link">
+            <router-link to="/settings">
+              Settings Help
+            </router-link>
+          </li>
         </ul>
       </div>
     </div>

src/components/SettingInfoCard.vue

@@ -0,0 +1,21 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    name: "",
+  },
+});
+</script>
+
+<template>
+  <div class="card mb-3">
+    <div class="card-header">
+      <b>{{ name }}</b>
+    </div>
+    <div class="m-3">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+

src/data/generator-settings.yaml

@@ -134,6 +134,7 @@ pikit:
   maps: all
   compasses: all
   show_loot_map: all
+  show_loot_hud: all
   show_map: all
   shop_shuffle: all
   drop_shuffle: all

src/data/presets.yaml

@@ -84,6 +84,23 @@ base:
 beta:
   default:
     display: Default
+  bosshunt_keys:
+    display: BossHunt Keys
+    show_map: always
+    show_loot_map: always
+    show_loot_hud: value
+    goal: boss_hunt
+    bosses_ganon: 10of12
+    crystals_gt: 0
+    ganon_item: bee
+    small_keys: wild
+    big_keys: wild
+    maps: wild
+    compasses: wild
+    boots: pseudoboots
+    flute: pseudoflute
+    dark_rooms: always_light_cone
+    book: crystal_switches
   wjb_cross:
     display: wjbCross
     goal: fast_ganon

src/router/index.js

@@ -5,65 +5,71 @@ import GenerateView from "@/views/GenerateView.vue";
 import GenerateMulti from "@/views/GenerateMulti.vue";
 import GenerateMystery from "@/views/GenerateMystery.vue";
 import GenerateApr2025View from "@/views/GenerateApr2025View.vue";
+import SettingsHelp from "@/views/SettingsHelp.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/generate',
-      name: 'generate',
+      path: "/generate",
+      name: "generate",
       component: GenerateView,
-      alias: '/',
+      alias: "/",
       props: { generator: "base", prefix: "" },
     },
     {
-      path: '/multiworld',
-      name: 'multiworld',
+      path: "/multiworld",
+      name: "multiworld",
       component: GenerateMulti,
-      alias: '/multi',
+      alias: "/multi",
       props: { generator: "base", prefix: "" },
     },
     {
-      path: '/generate/apr2025',
+      path: "/generate/apr2025",
       component: GenerateApr2025View,
     },
     {
-      path: '/generate/beta',
+      path: "/generate/beta",
       component: GenerateView,
-      alias: '/generate/beta_test',
+      alias: "/generate/beta_test",
       props: { generator: "beta", prefix: "dungeon-maps-" },
     },
     {
-      path: '/generate/pikit',
+      path: "/generate/pikit",
       component: GenerateView,
       props: { generator: "pikit", prefix: "pikit-" },
     },
     {
-      path: '/multiworld/beta',
+      path: "/multiworld/beta",
       component: GenerateMulti,
-      alias: '/multibeta',
+      alias: "/multibeta",
       props: { generator: "beta", prefix: "dungeon-maps-" },
     },
     {
-      path: '/mystery',
+      path: "/mystery",
       component: GenerateMystery,
       props: { generator: "base", prefix: "" },
     },
     {
-      path: '/mystery/beta',
+      path: "/mystery/beta",
       component: GenerateMystery,
       props: { generator: "beta", prefix: "beta-" },
     },
     {
-      path: '/seed/:id',
-      name: 'seed',
+      path: "/seed/:id",
+      name: "seed",
       component: SeedView,
     },
     {
-      path: '/multi/:id',
-      name: 'multi',
+      path: "/multi/:id",
+      name: "multi",
       component: MultiView,
     },
+    {
+      path: '/settings',
+      name: "settings",
+      component: SettingsHelp,
+    }
   ],
 });
 

src/views/SettingsHelp.vue

@@ -0,0 +1,221 @@
+<script>
+import { defineComponent } from "vue";
+
+import AccordionItem from "@/components/AccordionItem.vue";
+import SettingInfoCard from "@/components/SettingInfoCard.vue";
+
+export default defineComponent({
+  components: {
+    AccordionItem,
+    SettingInfoCard,
+  },
+  mounted() {
+    document.title = "ALttPRandomizer Seed Settings"
+  },
+});
+</script>
+
+<template>
+  <div class="mw-60">
+    <div class="card content-div m-3">
+      <div class="card-header text-center">
+        Seed Options
+      </div>
+      <div id="settings" class="accordion accordion-flush">
+        <AccordionItem :expanded="true">
+          <template #header>
+            <b>Map and HUD Settings</b>
+          </template>
+
+          <SettingInfoCard name="Show Dungeon Maps">
+            <p>This setting controls how the dungeon map will display rooms within a dungeon:</p>
+            <ul>
+              <li><b>Visited Tiles Only:</b> Unvisited tiles will be shown as undetailed blue squares; tiles that have been visited at least once will display as a rough outline of the room(s) with some features marked.</li>
+              <li><b>Visited + Map:</b> Same as above, but unvisited tiles are also shown as rough outlines within dungeons for which the player has obtained the dungeon map.</li>
+              <li><b>Always:</b> All tiles are shown as outlines of the contained room(s).</li>
+            </ul>
+            Note: Regardless of setting, quadrants of tiles that have been visited will be displayed in a lighter blue color than quadrants that have not been visited.
+          </SettingInfoCard>
+
+          <SettingInfoCard name="Show Dungeon Checks on Map">
+            <p>This setting controls how icons for uncollected checks on the dungeon map will be displayed:</p>
+            <ul>
+              <li><b>Never:</b> No icons will be displayed on the dungeon map for uncollected checks.</li>
+              <li><b>Uncollected:</b> A dot icon will show on the dungeon map on every tile with at least one uncollected check.</li>
+              <li><b>Value With Compass:</b> For dungeons in which the player has the compass, an icon will show on the dungeon map in every tile with at least one uncollected check. The displayed icon depends on the highest tier of uncollected item within that tile (see below for details). In dungeons where the player does not have the compass, tiles with uncollected checks will show either a compass icon if there is a compass in that tile, or a dot if none of the remaining checks in that tile are compasses.</li>
+              <li><b>Value Always:</b> An icon will show on the dungeon map in every tile with at least one uncollected check. The displayed icon depends on the highest tier of uncollected item within that tile (see below for details).</li>
+            </ul>
+            Note: Regardless of setting, a skull icon will be displayed on the dungeon map in the room with the boss if the player has the compass for that dungeon.
+          </SettingInfoCard>
+
+          <SettingInfoCard name="Show Underworld Checks on HUD">
+            <p>This setting controls how icons for uncollected checks on the current underworld tile will be displayed on the HUD:</p>
+            <ul>
+              <li><b>Never:</b> No icon will be displayed on the HUD for uncollected checks. If enemy drop shuffle is set to "All Underworld Enemies", a blue square will appear in the HUD when there is at least one enemy whose drop has not yet been obtained.</li>
+              <li><b>Uncollected:</b> A dot icon will show on the HUD when there is at least one uncollected check in the current tile. Additionally, a speech bubble will show where there is an NPC on the current tile with a turn-in that has not been obtained.</li> 
+              <li><b>Value:</b> An icon will show on the HUD where there is at least one uncollected check in the current tile. The displayed icon depends on the highest tier of uncollected item within that tile (see below for details).</li>
+              <li><b>Value in Dungeons, Presence in Caves:</b> An icon will show on the HUD where there is at least one uncollected check in the current tile. In non-dungeon underworld areas, the icon will simply be a dot; in dungeons, the displayed icon depends on the highest tier of uncollected item within that tile (see below for details).</li>
+              <li><b>Value in Caves, Presence in Dungeons:</b> An icon will show on the HUD where there is at least one uncollected check in the current tile. In dungeons, the icon will simply be a dot; in other underworld tiles, the displayed icon depends on the highest tier of uncollected item within that tile (see below for details).</li>
+            </ul>
+            Note: For any setting other than "Never", a speech bubble will additionally appear in tiles where there is an NPC on the current tile with a turn-in that has not been obtained. (This applies to Magic Bat, Sick Kid, Sahasrahla, the Potion Shop, and the Blacksmith.)
+          </SettingInfoCard>
+
+          <SettingInfoCard name="Iconography">
+            <table class="table icon-table">
+              <thead>
+                <tr>
+                  <th scope="col">Name</th>
+                  <th scope="col">Map Icon</th>
+                  <th scope="col">HUD Icon</th>
+                  <th scope="col">Possible Items</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">Triforce</th>
+                  <td><img class="map-icon" src="/loot-icons/triforce.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_triforce.png" /></td>
+                  <td>The Triforce! Instantly wins the game. Not usually placed other than on the pedestal or Ganon, depending on the mode.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Triforce Piece</th>
+                  <td><img class="map-icon" src="/loot-icons/triforce_piece.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_triforce_piece.png" /></td>
+                  <td>Triforce pieces when the target number of pieces is 100 or less.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Crystal</th>
+                  <td><img class="map-icon" src="/loot-icons/crystal.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_crystal.png" /></td>
+                  <td>Crystal dungeon prizes, when prizes are shuffled off bosses and collecting crystals is part of the goal.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Pendant</th>
+                  <td><img class="map-icon" src="/loot-icons/pendant.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_pendant.png" /></td>
+                  <td>Pendant dungeon prizes, when prizes are shuffled off bosses and collecting pendants is part of the goal.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Major Item</th>
+                  <td><img class="map-icon" src="/loot-icons/major_item.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_major_item.png" /></td>
+                  <td>Swords, Moon Pearl, Flippers, Boots, Gloves, Bomb Bag, and most Y-Items: Bows, Hookshot, Fire Rod, Ice Rod, Bombos, Ether, Quake, Lamp, Hammer, Flute, Book, Cane of Somaria, and Mirror.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Big Key</th>
+                  <td><img class="map-icon" src="/loot-icons/big_key.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_big_key.png" /></td>
+                  <td>Big Keys.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Small Key</th>
+                  <td><img class="map-icon" src="/loot-icons/small_key.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_small_key.png" /></td>
+                  <td>Small Keys.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Map</th>
+                  <td><img class="map-icon" src="/loot-icons/map.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_map.png" /></td>
+                  <td>Dungeon Maps.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Compass</th>
+                  <td><img class="map-icon" src="/loot-icons/compass.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_compass.png" /></td>
+                  <td>Dungeon Compasses.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Minor Item</th>
+                  <td><img class="map-icon" src="/loot-icons/minor_item.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_minor_item.png" /></td>
+                  <td>Armor, Progressive Shields, Red Shield, Mirror Shield, Capacity Upgrades, and remaining Y-Items: Boomerangs, Mushroom, Powder, Shovel, Bug Net, Bottles, Cane of Byrna, and Magic Cape. Also includes shuffled dungeon prizes (crystals and pendants) that are not part of the goal.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Health</th>
+                  <td><img class="map-icon" src="/loot-icons/health.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_health.png" /></td>
+                  <td>Heart Containers, Pieces of Heart, and Potion Refills.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Triforce Piece</th>
+                  <td><img class="map-icon" src="/loot-icons/triforce_piece.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_triforce_piece.png" /></td>
+                  <td>Triforce pieces when the target number of pieces is more than 100.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Universal Key</th>
+                  <td><img class="map-icon" src="/loot-icons/small_key.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_small_key.png" /></td>
+                  <td>Small Keys when small key shuffle is set to Universal.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Junk</th>
+                  <td><img class="map-icon" src="/loot-icons/junk.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_junk.png" /></td>
+                  <td>Heart, bomb, magic, and arrow refills, blue shields, and rupees. Also contains bee traps, bees, apples, fairies, and chickens for mode that include those.</td>
+                </tr>
+                <tr>
+                  <th scope="row">Unknown Tier</th>
+                  <td><img class="map-icon" src="/loot-icons/indicator.png" /></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_indicator.png" /></td>
+                  <td>Shown when the settings do not permit you to see what tier of item is present.</td>
+                </tr>
+                <tr>
+                  <th scope="row">NPC Item</th>
+                  <td></td>
+                  <td><img class="hud-icon" src="/loot-icons/hud_npc.png" /></td>
+                  <td>An NPC (Blacksmith, Witch, Sick Kid, Magic Bat, or Sahasrahla) has an unclaimed item which is not otherwise included in the icon in the HUD. All other NPCs' items will show in the main HUD indicator icon.</td>
+                </tr>
+              </tbody>
+            </table>
+          </SettingInfoCard>
+        </AccordionItem>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.map-icon {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  width: 48px;
+  height: 48px;
+}
+
+.hud-icon {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  width: 24px;
+  height: 24px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.icon-table {
+  background-color: #DDD !important;
+  border-radius: 12px;
+  margin-bottom: 0 !important;
+}
+
+.icon-table td,th {
+  background-color: inherit !important;
+}
+
+.icon-table tbody td,th {
+  border-bottom: none !important;
+}
+
+.icon-table tbody tr:not(:last-child) {
+  border-bottom: 1px solid gray;
+}
+
+.icon-table thead tr,td,th {
+  border-top: none !important;
+}
+
+.icon-table thead tr {
+  border-bottom: 1px solid gray;
+}
+</style>