Add playthrough spoiler

src/components/Seed.vue

@@ -9,6 +9,7 @@ import ReduceFlashingPicker from "@/components/ReduceFlashingPicker.vue";
 import BackgroundMusicPicker from "@/components/BackgroundMusicPicker.vue";
 import MsuResumePicker from "@/components/MsuResumePicker.vue";
 import CollectionRatePicker from "@/components/CollectionRatePicker.vue";
+import Spoiler from "@/components/Spoiler.vue";
 
 import SeedSettings from "@/components/SeedSettings.vue";
 
@@ -29,6 +30,7 @@ export default defineComponent({
     BackgroundMusicPicker,
     MsuResumePicker,
     CollectionRatePicker,
+    Spoiler,
   },
   data() {
     return {
@@ -38,7 +40,9 @@ export default defineComponent({
       patch: null,
       error: null,
       settings: {},
+      spoiler: {},
       multi: null,
+      show_spoiler: false,
     };
   },
   props: {
@@ -73,6 +77,7 @@ export default defineComponent({
       this.patch = patch;
       this.settings = seedData.settings;
       this.multi = seedData.parent;
+      this.spoiler = seedData.spoiler;
     },
     async fetchSeed() {
       await axios.get(`/seed/${this.id}`)
@@ -167,7 +172,15 @@ export default defineComponent({
       link.href = URL.createObjectURL(blob);
       link.download = `GK_${this.id}.sfc`;
       link.click();
-    }
+    },
+    async downloadSpoiler() {
+      const spoiler = JSON.stringify(this.spoiler, null, 2);
+      const blob = new Blob([spoiler], { type: 'application/json' });
+      const link = document.getElementById('downloader');
+      link.href = URL.createObjectURL(blob);
+      link.download = `GK_${this.id}_spoiler.json`;
+      link.click();
+    },
   }
 });
 </script>
@@ -223,6 +236,15 @@ export default defineComponent({
           <button type="submit" class="btn btn-primary submit-btn" :disabled="!baserom || !patch" @click="patchRom">
             Download Seed!
           </button>
+          <template v-if="spoiler">
+            <button type="button" class="btn btn-secondary ms-3" @click="downloadSpoiler">
+              Download Spoiler
+            </button>
+            <button type="button" class="btn btn-secondary" @click="show_spoiler = !show_spoiler" style="float: right;">
+              <i v-if="show_spoiler" class="bi bi-chevron-up"></i>
+              <i v-else class="bi bi-chevron-down"></i>
+            </button>
+          </template>
           <a id="downloader" style="display: none;" />
         </li>
       </ul>
@@ -234,6 +256,9 @@ export default defineComponent({
       <img class="center" src="/bludormspinbig.gif" />
     </div>
   </div>
+  <div v-if="patch && spoiler && show_spoiler" class="mw-60">
+    <Spoiler :spoiler="spoiler" />
+  </div>
 </template>
 
 <style scoped>

src/components/Spoiler.vue

@@ -0,0 +1,70 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    spoiler: {},
+  },
+});
+</script>
+
+<template>
+  <div class="card content-div m-3">
+    <div class="card-header">
+      Playthrough
+    </div>
+    <table class="table table-striped table-hover">
+      <template v-for="(items, sphere) in spoiler.playthrough">
+        <template v-if="sphere == '0' && items.length > 0">
+          <thead>
+            <tr>
+              <th colspan="2">Starting Items:</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, location) in items">
+              <td></td>
+              <td>{{ item }}</td>
+            </tr>
+          </tbody>
+        </template>
+        <template v-if="sphere != '0'">
+          <thead>
+            <tr>
+              <th colspan="2">Sphere {{ sphere }}:</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, location) in items">
+              <td>{{ location }}</td>
+              <td>{{ item }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </template>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table {
+  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.04);
+  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.2);
+}
+
+.table th, .table td {
+  border-top: none;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-bottom: 1px dotted #ccc;
+}
+
+.table th {
+  border-bottom: 1px solid #bbb;
+  padding-top: 0.75rem;
+}
+
+.table tr:last-child td {
+  border-bottom: none;
+}
+</style>

src/views/GenerateMulti.vue

@@ -118,11 +118,11 @@ export default defineComponent({
       <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
+          Generate Race Multiworld
         </button>
         <button type="button" class="m-1 nav-item btn btn-outline-primary"
             @click="generate(false);">
-          Generate ROM
+          Generate Multiworld
         </button>
       </div>
     </div>