Add diashow and styling

2025-08-17 01:40:30 +02:00
parent 0e4015905c
commit c35fb06830
9 changed files with 480 additions and 74 deletions
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
+definePageMeta({
+  layout: 'full'
+});
+const app = useNuxtApp();
+const { loggedIn } = useUserSession();
+const { t } = useI18n();
+
+const { name, id } = app.$slugData.huntSlug!;
+
+const titleStore = useTitleStore();
+
+type Picture = {
+  quest: { id: number; title: string };
+  team: {
+    name: string;
+    id: number;
+  };
+  picture: {
+    creator: {
+      name: string;
+    };
+    url: string;
+  };
+};
+const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
+  transform: (input) => {
+    if (!input || input.quests.length <= 0)
+      return { id: 0, name: '', pictures: [] as Picture[] };
+    const { quests, ...rest } = input;
+    const pictures: Picture[] = [];
+
+    quests.forEach(({ answers, ...quest }) => {
+      answers.forEach(({ team, picture }) => {
+        if (!picture) return;
+        pictures.push({
+          team,
+          picture,
+          quest
+        });
+      });
+    });
+
+    pictures.sort(() => Math.random() - 0.5);
+    console.log(pictures);
+
+    return { ...rest, pictures };
+  }
+});
+
+useHead({
+  title: t('layouts.two_title', {
+    title: data.value?.name || name,
+    subtitle: 'Diashow'
+  })
+});
+
+watch(loggedIn, () => refresh());
+
+titleStore.title = data.value?.name;
+</script>
+
+<template>
+  <article class="h-dvh w-full">
+    <ClientOnly v-if="data"
+      ><VaCarousel
+        stateful
+        height="100dvh"
+        autoscroll
+        :indicators="false"
+        fallbackIcon="broken_image"
+        infinite
+        color="secondary"
+        :items="data.pictures"
+        style="--va-carousel-background: black"
+      >
+        <template #default="{ item }: { item: Picture }"
+          ><VaImage :src="item.picture.url" fit="contain" lazy />
+          <p
+            class="absolute top-2 mx-auto rounded bg-gray-200/75 px-2 py-1 text-center text-xl font-bold"
+          >
+            {{ item.quest.title }} — {{ item.team.name }} —
+            {{ item.picture.creator.name }}
+          </p></template
+        ></VaCarousel
+      ></ClientOnly
+    >
+    <div
+      v-else-if="error"
+      class="flex h-full w-full flex-col items-center justify-center text-center text-2xl"
+    >
+      <VaAlert color="danger" class="w-[90%]"
+        >Answers are not revealed yet, please wait until the end!</VaAlert
+      >
+      <VaAlert color="danger" class="w-[90%]" v-if="error.statusCode !== 403">{{
+        error
+      }}</VaAlert
+      ><VaButton
+        icon="arrow_back"
+        :to="$localePath(`/hunt/${sluggy($nuxt.$slugData.huntSlug!)}`)"
+        >Back to Hunt</VaButton
+      >
+    </div>
+    <div
+      v-else
+      class="flex h-full w-full flex-col items-center justify-center text-center text-2xl"
+    >
+      <VaAlert color="danger" class="w-[90%]"
+        >Answers are not revealed yet, please wait until the end!</VaAlert
+      ><VaButton
+        icon="arrow_back"
+        :to="$localePath(`/hunt/${sluggy($nuxt.$slugData.huntSlug!)}`)"
+        >Back to Hunt</VaButton
+      >
+    </div>
+  </article>
+</template>
+
+<style scoped></style>