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,125 @@
+<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: '', cols: [] as Picture[][], count: 0 };
+    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);
+
+    const cols = pictures.reduce(
+      (c, p, i) => {
+        c[i % 4].push(p);
+        return c;
+      },
+      new Array(4).fill(0).map(() => [] as Picture[])
+    );
+
+    return { ...rest, cols, count: pictures.length };
+  }
+});
+
+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">
+    <div
+      v-if="data"
+      class="m-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+    >
+      <div v-for="(col, i) in data.cols" :key="i" class="grid gap-4">
+        <ClickableImage
+          v-for="pic in col"
+          :key="pic.picture.url"
+          :src="pic.picture.url"
+          class="h-auto max-w-full rounded-lg"
+          :title="`${pic.quest.title} — ${pic.team.name} — ${pic.picture.creator.name}`"
+        />
+      </div>
+      <VaAlert
+        color="warning"
+        v-if="data.count <= 0"
+        class="sm:col-span-2 md:col-span-3 lg:col-span-4"
+        >No pictures has been submitted yet :(</VaAlert
+      >
+    </div>
+    <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>