Add hash icons for seed display

public/sample_mystery.yaml

@@ -64,15 +64,14 @@ triforce_pieces:
   125of175: 0  # be careful, there may not be enough checks in the pool to support this
   400of500: 0  # be careful, there may not be enough checks in the pool to support this
 crystals_gt:
-  "7": 10
-  "6": 10
+  "7": 5
+  "6": 5
   "5": 10
-  "4": 10
-  "3": 10
-  "2": 10
+  "4": 15
+  "3": 15
+  "2": 15
   "1": 10
   "0": 10
-  random: 20
 ganon_item:
   silver: 60
   boomerang: 3

src/assets/main.css

@@ -22,6 +22,14 @@
   display: block;
 }
 
+.inline {
+  display: inline;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
 .center {
   margin: 0 auto;
 }
@@ -35,6 +43,10 @@
   margin-top: 0.35em;
 }
 
+.v-middle {
+  vertical-align: middle;
+}
+
 .btn-outline-warning {
   --bs-btn-color: #880;
   --bs-btn-active-color: #550;

src/components/Seed.vue

@@ -13,6 +13,7 @@ import UltraFastJunkPicker from "@/components/UltraFastJunkPicker.vue";
 import Spoiler from "@/components/Spoiler.vue";
 
 import SeedSettings from "@/components/SeedSettings.vue";
+import SeedHash from "@/components/SeedHash.vue";
 
 import { Base64 } from "js-base64";
 import * as bps from "bps";
@@ -33,6 +34,7 @@ export default defineComponent({
     CollectionRatePicker,
     UltraFastJunkPicker,
     Spoiler,
+    SeedHash,
   },
   data() {
     return {
@@ -221,7 +223,7 @@ export default defineComponent({
         <b>Permalink</b>: <router-link :to="permalink">{{ permalink }}</router-link>
       </div>
       <div class="card-header" v-if="meta.hash">
-        <b>Hash</b>: {{ meta.hash }}
+        <span class="v-middle"><b>Hash</b>:</span> <SeedHash :hash="meta.hash" />
       </div>
       <ul class="list-group list-group-flush">
         <li v-if="!baserom" class="list-group-item">

src/components/SeedHash.vue

@@ -0,0 +1,32 @@
+<script>
+import { defineComponent } from "vue";
+
+import HashIcons from "@/data/hash_icons.yaml";
+
+export default defineComponent({
+  props: {
+    hash: "",
+  },
+  computed: {
+    icons() {
+      const bits = this.hash.split(",").map(bit => bit.trim());
+      return bits.map(bit => { return {icon: HashIcons[bit], name: bit} });
+    },
+  },
+});
+</script>
+
+<template>
+  <div class="inline-block">
+    <template v-for="icon in icons">
+      <img class="hash_icon" :src="`/hash-icons/${icon.icon}`" :alt="icon.name" />
+    </template>
+  </div>
+</template>
+
+<style>
+.hash_icon {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+</style>

src/components/SettingsPage.vue

@@ -167,7 +167,7 @@ export default defineComponent({
       <SettingPicker color="primary" v-model="set.hints" name="hints" :generator="generator" :prefix="prefix" />
       <SettingPicker color="primary" v-model="set.show_map" name="show_map" :generator="generator" :prefix="prefix" />
       <SettingPicker color="primary" v-model="set.show_loot" name="show_loot" :generator="generator" :prefix="prefix" />
-      <SettingPicker color="primary" v-if="set.show_loot != 'never'" v-model="set.show_loot_hud" name="show_loot_hud" :generator="generator" :prefix="prefix" />
+      <SettingPicker color="primary" v-model="set.show_loot_hud" name="show_loot_hud" :generator="generator" :prefix="prefix" />
     </AccordionItem>
     <AccordionItem :expanded="true">
       <template #header>

src/data/hash_icons.yaml

@@ -0,0 +1,32 @@
+Bow: bow.png
+Boomerang: boomerang_blue.png
+Hookshot: hookshot.png
+Bomb: bomb.png
+Mushroom: mushroom.png
+Powder: powder.png
+Ice Rod: icerod.png
+Green Pendant: green_pendant.png
+Bombos: bombos.png
+Ether: ether.png
+Quake: quake.png
+Lamp: lamp.png
+Hammer: hammer.png
+Shovel: shovel.png
+Ocarina: flute.png
+Bug Net: bugnet.png
+Book: book.png
+Bottle: bottle.png
+Green Potion: green_potion.png
+Somaria: somaria.png
+Cape: cape.png
+Mirror: mirror.png
+Boots: boots.png
+Gloves: glove_1.png
+Flippers: flippers.png
+Pearl: pearl.png
+Shield: shield_3.png
+Green Tunic: tunic_1.png
+Heart: heart_container.png
+Map: map.png
+Compass: compass.png
+Key: bigkey.png

src/data/spoiler-translation.yaml

@@ -15,7 +15,7 @@ entrance_interiors:
   Skull Woods Second Section Exit (East): Skull Woods (Middle Right)
   Skull Woods Second Section Exit (West): Skull Woods (Middle Left)
   Skull Woods Final Section Exit: Skull Woods (Back)
-  Thieves Town Exit: Thieves Town
+  Thieves Town Exit: Thieves' Town
   Ice Palace Exit: Ice Palace
   Misery Mire Exit: Misery Mire
   Turtle Rock Exit (Front): Turtle Rock (Front)
@@ -75,6 +75,7 @@ entrance_interiors:
 entrance_exteriors:
   Ganons Tower: Ganon's Tower
   Agahnims Tower: Castle Tower
+  Thieves Town: Thieves' Town
   Links House: Link's House
   Spectacle Rock Cave: Spectacle Rock (Right)
   Spectacle Rock Cave Peak: Spectacle Rock (Top)