Add a popup dialog when clicking stage images

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.3",
+    "@heroicons/vue": "^2.0.12",
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "console-stamp": "^3.0.6",
     "cron": "^2.1.0",

src/components/ModalDialog.vue

@@ -7,12 +7,12 @@
       </TransitionChild>
 
       <div class="fixed inset-0 z-20 overflow-y-auto">
-        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div class="flex min-h-full justify-center p-4 text-center items-center">
           <TransitionChild as="template" enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+            enter-from="opacity-0 translate-y-0 scale-95"
+            enter-to="opacity-100 translate-y-0 scale-100" leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 scale-100"
+            leave-to="opacity-0 translate-y-0 scale-95">
             <DialogPanel :class="innerClass">
               <slot />
             </DialogPanel>

src/components/StageDialog.vue

@@ -0,0 +1,34 @@
+<template>
+  <ModalDialog inner-class="-rotate-1 relative">
+    <div class="bg-zinc-100 p-2">
+      <button class="text-zinc-300 bg-zinc-600/50 rounded-full p-1 absolute top-3 right-3" @click="$emit('close')">
+        <span class="sr-only">Close</span>
+        <XMarkIcon class="h-4 w-4" aria-hidden="true" />
+      </button>
+      <img :src="imgUrl" v-if="imgUrl" />
+    </div>
+
+    <div class="absolute -top-8 w-full text-center">
+      <img class="w-56 -rotate-1 inline-block" src="@/assets/img/tape/tape-1.png" />
+    </div>
+
+    <div class="absolute -bottom-6 w-full text-center">
+      <img class="w-80 inline-block rotate-2" src="@/assets/img/stickers/sticker-12.png" />
+      <div class="absolute inset-0 flex items-center justify-center text-black font-splatoon2">
+        {{ stage.name }}
+      </div>
+    </div>
+  </ModalDialog>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import ModalDialog from './ModalDialog.vue';
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+  stage: Object,
+});
+
+const imgUrl = computed(() => props.stage?.image.url);
+</script>

src/components/StageImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <button class="relative" @click.prevent="open = true">
     <div class="bg-zinc-700 aspect-[2/1] overflow-hidden" :class="imgClass">
       <img :src="lowRes" v-if="lowRes" />
       <div class="bg-zinc-500 animate-pulse h-full" :class="imgClass" v-else>&nbsp;</div>
@@ -20,11 +20,14 @@
       font-splatoon2
       px-2
     " :class="textSize" v-if="!hideLabel && stage">{{ $t(`splatnet.stages.${stage.id}.name`, stage.name) }}</div>
-  </div>
+
+    <StageDialog :stage="stage" :show="open" @close="open = false" />
+  </button>
 </template>
 
 <script setup>
-import { computed } from '@vue/reactivity';
+import { computed, ref } from 'vue';
+import StageDialog from './StageDialog.vue';
 
 const props = defineProps({
   stage: Object,
@@ -36,5 +39,7 @@ const props = defineProps({
   hideLabel: Boolean,
 });
 
-const lowRes = computed(() => props.stage?.image.url);
+const open = ref(false);
+
+const lowRes = computed(() => props.stage?.thumbnailImage.url);
 </script>

src/stores/schedules.mjs

@@ -6,10 +6,20 @@ import { useTimeStore } from "./time.mjs";
 // Schedule store definition (used for each type of schedule)
 function defineScheduleStore(id, options) {
   return defineStore(`schedules/${id}`, () => {
-    const transform = node => ({
-      ...node,
-      settings: options.settings(node),
-    });
+    const transform = (node) => {
+      node = {
+        ...node,
+        settings: options.settings(node),
+      };
+
+      // Move the thumbnail image to "thumbnailImage" and pull in the high-res image for the stage
+      for (let stage of node.settings.vsStages || []) {
+        stage.thumbnailImage = stage.image;
+        stage.image = findStageImage(stage.id) || stage.image;
+      }
+
+      return node;
+    };
 
     const time = useTimeStore();
     const schedules = computed(() => options.nodes()?.map(n => transform(n)));
@@ -22,6 +32,12 @@ function defineScheduleStore(id, options) {
   });
 }
 
+function findStageImage(id) {
+  return useSchedulesDataStore().data
+    ?.vsStages.nodes.find(s => s.id === id)
+    ?.originalImage;
+}
+
 // Regular Battle
 export const useRegularSchedulesStore = defineScheduleStore('regular', {
   nodes: () => useSchedulesDataStore().data?.regularSchedules.nodes,