Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-03-21 17:54:13 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add a popup dialog when clicking stage images

Browse Source
This commit is contained in:
Matt Isenhower 2022-10-29 13:56:28 -07:00
parent 947e003e51
commit af04cdce39
6 changed files with 84 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0",
"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",
@ -115,6 +116,14 @@
"vue": "^3.2.0"
}
},
"node_modules/@heroicons/vue": {
"version": "2.0.12",
"resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.12.tgz",
"integrity": "sha512-ypuQl/Wei7BoShO65AdRVikXDaSt6hJBRuKs2pVd/6HvxfEz18oXraH+J5G/QPIwObMEVhMb6nkOs9l3WZv/gA==",
"peerDependencies": {
"vue": ">= 3"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@ -4894,6 +4903,12 @@
"integrity": "sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==",
"requires": {}
},
"@heroicons/vue": {
"version": "2.0.12",
"resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.12.tgz",
"integrity": "sha512-ypuQl/Wei7BoShO65AdRVikXDaSt6hJBRuKs2pVd/6HvxfEz18oXraH+J5G/QPIwObMEVhMb6nkOs9l3WZv/gA==",
"requires": {}
},
"@humanwhocodes/config-array": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",

1
package.json
View File

@ -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",

10
src/components/ModalDialog.vue
View File

@ -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>

34
src/components/StageDialog.vue Normal file
View File

@ -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>

13
src/components/StageImage.vue
View File

@ -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>

24
src/stores/schedules.mjs
View File

@ -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,