From dc3c21f88532c04c4405b694e1bd8e7b1ff6c488 Mon Sep 17 00:00:00 2001
From: Pascal Syma <p.syma@appfarms.com>
Date: Sat, 9 Aug 2025 19:14:21 +0200
Subject: [PATCH] Add end showcase

---
 app/components/showcase/NumberCard.vue        |  28 ++
 app/lang/de.json                              |  22 ++
 app/lang/en.json                              |  22 ++
 app/layouts/full.vue                          |   5 +
 app/pages/hunt/[huntSlug]/showcase.vue        | 288 ++++++++++++++++++
 .../admin/answer/[answerId]/review.post.ts    |   2 +-
 .../api/admin/hunt/[huntId]/showcase.get.ts   | 181 +++++++++++
 7 files changed, 547 insertions(+), 1 deletion(-)
 create mode 100644 app/components/showcase/NumberCard.vue
 create mode 100644 app/layouts/full.vue
 create mode 100644 app/pages/hunt/[huntSlug]/showcase.vue
 create mode 100644 server/api/admin/hunt/[huntId]/showcase.get.ts

diff --git a/app/components/showcase/NumberCard.vue b/app/components/showcase/NumberCard.vue
new file mode 100644
index 0000000..88eefe5
--- /dev/null
+++ b/app/components/showcase/NumberCard.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  count: number | string;
+  title: string;
+  icon: string;
+}>();
+</script>
+
+<template>
+  <div class="card">
+    <h3>{{ Number(count).toLocaleString('de') }}</h3>
+    <VaIcon :name="icon" size="10rem" />
+    <p>{{ title }}</p>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  @apply m-4 grid grid-cols-2 items-center justify-items-center gap-8 rounded-lg p-4 text-3xl shadow-lg;
+}
+
+.card > *:nth-child(1) {
+  @apply col-span-2 mt-auto text-9xl font-bold;
+}
+.card > *:nth-child(3) {
+  @apply mr-auto text-left text-6xl;
+}
+</style>
diff --git a/app/lang/de.json b/app/lang/de.json
index 7982d00..3be0c85 100644
--- a/app/lang/de.json
+++ b/app/lang/de.json
@@ -53,6 +53,28 @@
       "no_hunt_joined": "Noch keinem Hunt beigetreten!",
       "open_to_join": "Bereit zum Beitreten:",
       "start": "Start: {start}"
+    },
+    "showcase": {
+      "showcase_for": "Abschluss für",
+      "crew": "Crew",
+      "quests": "Quests",
+      "users": "Spieler",
+      "teams": "Teams",
+      "total_points": "Punkte erzielt",
+      "pictures": "Bilder",
+      "leaderboard": "Rangliste",
+      "third_place": "Dritter Platz",
+      "second_place": "Zweiter Platz",
+      "first_place": "Erster Platz",
+      "points": "Punkte",
+      "answers": "Antworten",
+      "table": {
+        "answers": "Antworten",
+        "place": "Platz",
+        "name": "Name",
+        "description": "Beschreibung",
+        "score": "Punkte"
+      }
     }
   },
   "validation": {
diff --git a/app/lang/en.json b/app/lang/en.json
index 1e3aaea..4a1acac 100644
--- a/app/lang/en.json
+++ b/app/lang/en.json
@@ -53,6 +53,28 @@
       "no_hunt_joined": "No hunt joined yet!",
       "open_to_join": "Open to join hunts:",
       "start": "Start: {start}"
+    },
+    "showcase": {
+      "showcase_for": "Showcase for",
+      "crew": "Crew",
+      "quests": "Quests",
+      "users": "Users",
+      "teams": "Teams",
+      "total_points": "Total points earned",
+      "pictures": "Pictures",
+      "leaderboard": "Leaderboard",
+      "third_place": "Third place",
+      "second_place": "Second place",
+      "first_place": "First place",
+      "points": "Points",
+      "answers": "Answers",
+      "table": {
+        "answers": "Answers",
+        "place": "Place",
+        "name": "Name",
+        "description": "Description",
+        "score": "Score"
+      }
     }
   },
   "validation": {
diff --git a/app/layouts/full.vue b/app/layouts/full.vue
new file mode 100644
index 0000000..53998b1
--- /dev/null
+++ b/app/layouts/full.vue
@@ -0,0 +1,5 @@
+<template>
+  <Suspense>
+    <slot />
+  </Suspense>
+</template>
diff --git a/app/pages/hunt/[huntSlug]/showcase.vue b/app/pages/hunt/[huntSlug]/showcase.vue
new file mode 100644
index 0000000..a65d97a
--- /dev/null
+++ b/app/pages/hunt/[huntSlug]/showcase.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import type { DataTableColumnSource } from 'vuestic-ui';
+import NumberCard from '~/components/showcase/NumberCard.vue';
+
+definePageMeta({
+  // TODO: re-enable perms
+  // middleware: ['admin'],
+  layout: 'full'
+});
+
+const app = useNuxtApp();
+const { name, id } = app.$slugData.huntSlug!;
+const { data } = await useFetch(`/api/admin/hunt/${id}/showcase`);
+
+const { toggle, isFullscreen, isSupported } = useFullscreen();
+
+const leaderboardColumns: DataTableColumnSource[] = [
+  'place',
+  'name',
+  'description',
+  {
+    key: 'score',
+    displayFormatFn: (data: number) => Number(data).toLocaleString('de')
+  },
+  'answers'
+];
+const columns = leaderboardColumns.map((c) =>
+  typeof c === 'string' ? c : c.key
+);
+// TODO: colors
+</script>
+
+<template>
+  <div
+    v-if="isSupported"
+    class="fixed left-2 top-2 opacity-25 transition-opacity hover:opacity-100"
+  >
+    <VaButton
+      round
+      border-color="primary"
+      color="onPrimary"
+      :icon="isFullscreen ? 'fullscreen_exit' : 'fullscreen'"
+      @click="toggle"
+    />
+  </div>
+  <article
+    class="h-dvh w-full snap-y snap-mandatory overflow-y-scroll scroll-smooth"
+    v-if="data"
+  >
+    <section id="title">
+      <div
+        class="flex flex-col items-center justify-center gap-8 bg-green-300 text-center"
+      >
+        <h1 class="text-7xl">{{ $t('page.showcase.showcase_for') }}</h1>
+        <h1 class="text-9xl font-bold">{{ data.name || name }}</h1>
+        <p v-if="data.start || data.end" class="flex flex-row gap-4 text-4xl">
+          <span v-if="data.start">{{
+            $d(data.start, {
+              dateStyle: 'medium',
+              timeStyle: 'medium'
+            })
+          }}</span
+          ><span v-if="data.start && data.end"> – </span
+          ><span v-if="data.end">{{
+            $d(data.end, {
+              dateStyle: 'medium',
+              timeStyle: 'medium'
+            })
+          }}</span>
+        </p>
+      </div>
+    </section>
+    <section id="numbers">
+      <div class="grid grid-cols-3 gap-4 bg-red-100 p-4">
+        <NumberCard
+          :title="$t('page.showcase.crew')"
+          :count="data._count.members + 1"
+          icon="support_agent"
+        />
+        <NumberCard
+          :title="$t('page.showcase.quests')"
+          :count="data._count.quests"
+          icon="home"
+        />
+        <NumberCard
+          :title="$t('page.showcase.users')"
+          :count="data.userCount"
+          icon="person"
+        />
+        <NumberCard
+          :title="$t('page.showcase.teams')"
+          :count="data._count.teams"
+          icon="groups"
+        />
+        <NumberCard
+          :title="$t('page.showcase.total_points')"
+          :count="data.totalScore"
+          icon="star"
+        />
+        <NumberCard
+          :title="$t('page.showcase.pictures')"
+          :count="data.pictureCount"
+          icon="photo"
+        />
+      </div>
+    </section>
+    <section v-for="quest in data.quests" :key="quest.id" :id="sluggy(quest)">
+      <div class="flex flex-col gap-4 bg-yellow-100 p-4">
+        <div class="my-8 flex w-full flex-row justify-around">
+          <h3 class="text-3xl">{{ quest.title }}</h3>
+          <p class="text-xl font-bold">{{ quest.question }}</p>
+          <p v-if="quest.textSolution" class="text-3xl">
+            {{ quest.textSolution }}
+          </p>
+        </div>
+        <ClientOnly>
+          <VaCarousel
+            stateful
+            :items="quest.answers"
+            arrows
+            indicators
+            lazy
+            color="onPrimary"
+            indicator-trigger="hover"
+            class="w-full flex-grow"
+            style="--va-carousel-background: none"
+          >
+            <template #default="{ item }"
+              ><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"
+              >
+                {{ item.team.name }} — "{{ item.text }}" —
+                {{ item.picture.creator.name }}
+              </p></template
+            ></VaCarousel
+          ></ClientOnly
+        >
+      </div>
+    </section>
+    <section id="leaderboard" v-if="data.leaderboard.length > 3">
+      <div class="flex flex-col gap-4 bg-indigo-100">
+        <h1 class="mt-8 text-center text-6xl">
+          {{ $t('page.showcase.leaderboard') }}
+        </h1>
+        <VaDataTable
+          class="h-full text-2xl"
+          virtual-scroller
+          striped
+          sticky-header
+          :items="data.leaderboard.slice(3)"
+          :columns="leaderboardColumns"
+        >
+          <template v-for="col in columns" #[col]
+            ><span>{{ $t(`page.showcase.table.${col}`) }}</span></template
+          >
+          <template #cell(place)="{ rowIndex }">
+            <strong>{{ rowIndex + 4 }}</strong>
+          </template>
+        </VaDataTable>
+      </div>
+    </section>
+    <section id="leaderboard-third" v-if="data.leaderboard[2]">
+      <div class="place bg-[#AD8A56]">
+        <div class="place-left">
+          <VaIcon name="looks_3" size="10rem" />
+          <h2>{{ $t('page.showcase.third_place') }}</h2>
+        </div>
+        <div class="place-right">
+          <h3>{{ data.leaderboard[2].name }}</h3>
+          <p>{{ data.leaderboard[2].description }}</p>
+          <NumberCard
+            :title="$t('page.showcase.points')"
+            :count="data.leaderboard[2].score"
+            icon="star"
+          />
+          <NumberCard
+            :title="$t('page.showcase.answers')"
+            :count="data.leaderboard[2].answers"
+            icon="question_mark"
+          />
+        </div>
+      </div>
+    </section>
+    <section id="leaderboard-second" v-if="data.leaderboard[1]">
+      <div class="place bg-[#B4B4B4]">
+        <div class="place-left">
+          <VaIcon name="looks_two" size="10rem" />
+          <h2>{{ $t('page.showcase.second_place') }}</h2>
+        </div>
+        <div class="place-right">
+          <h3>{{ data.leaderboard[1].name }}</h3>
+          <p>{{ data.leaderboard[1].description }}</p>
+          <NumberCard
+            :title="$t('page.showcase.points')"
+            :count="data.leaderboard[1].score"
+            icon="star"
+          />
+          <NumberCard
+            :title="$t('page.showcase.answers')"
+            :count="data.leaderboard[1].answers"
+            icon="question_mark"
+          />
+        </div>
+      </div>
+    </section>
+    <section id="leaderboard-winner-teaser" v-if="data.leaderboard[0]">
+      <div class="place bg-[#C9B037]">
+        <div class="place-left">
+          <VaIcon name="looks_one" size="10rem" />
+          <h2>{{ $t('page.showcase.first_place') }}</h2>
+        </div>
+        <div class="place-right">
+          <h3 class="bg-white text-white">{{ data.leaderboard[0].name }}</h3>
+          <p class="bg-white text-white">
+            {{ data.leaderboard[0].description }}
+          </p>
+          <NumberCard
+            :title="$t('page.showcase.points')"
+            :count="data.leaderboard[0].score"
+            icon="star"
+          />
+          <NumberCard
+            :title="$t('page.showcase.answers')"
+            :count="data.leaderboard[0].answers"
+            icon="question_mark"
+          />
+        </div>
+      </div>
+    </section>
+    <section id="leaderboard-winner" v-if="data.leaderboard[0]">
+      <div class="place bg-[#C9B037]">
+        <div class="place-left">
+          <VaIcon name="workspace_premium" size="10rem" />
+          <h2>{{ $t('page.showcase.first_place') }}</h2>
+        </div>
+        <div class="place-right">
+          <h3>{{ data.leaderboard[0].name }}</h3>
+          <p>{{ data.leaderboard[0].description }}</p>
+          <NumberCard
+            :title="$t('page.showcase.points')"
+            :count="data.leaderboard[0].score"
+            icon="star"
+          />
+          <NumberCard
+            :title="$t('page.showcase.answers')"
+            :count="data.leaderboard[0].answers"
+            icon="question_mark"
+          />
+        </div>
+      </div>
+    </section>
+  </article>
+  <article v-else>pending...</article>
+</template>
+
+<style scoped>
+section {
+  @apply mt-6 h-dvh snap-center p-6 first:mt-0;
+}
+
+section > div {
+  @apply h-full w-full rounded-lg;
+}
+
+.place {
+  @apply grid h-full w-full grid-cols-4 items-center p-4;
+}
+
+.place-left {
+  @apply flex h-full flex-col justify-center gap-4 text-center text-white;
+}
+
+.place-right {
+  @apply col-span-3 grid h-full grid-cols-2 gap-4 text-center text-white;
+}
+
+.place-right h3 {
+  @apply mt-auto text-6xl font-bold;
+}
+.place-right p {
+  @apply mt-auto text-3xl font-bold;
+}
+
+.place h2 {
+  @apply text-5xl font-bold;
+}
+</style>
diff --git a/server/api/admin/answer/[answerId]/review.post.ts b/server/api/admin/answer/[answerId]/review.post.ts
index 3638e0f..1c2dd0a 100644
--- a/server/api/admin/answer/[answerId]/review.post.ts
+++ b/server/api/admin/answer/[answerId]/review.post.ts
@@ -48,7 +48,7 @@ export default defineEventHandler(async (event) => {
   const { score, review } = await useValidatedBody(
     event,
     z.object({
-      score: z.number().min(0).nullable(),
+      score: z.int().min(0).max(32767).nullable(),
       review: z.string().max(256).nullable()
     })
   );
diff --git a/server/api/admin/hunt/[huntId]/showcase.get.ts b/server/api/admin/hunt/[huntId]/showcase.get.ts
new file mode 100644
index 0000000..b3a64f0
--- /dev/null
+++ b/server/api/admin/hunt/[huntId]/showcase.get.ts
@@ -0,0 +1,181 @@
+import { useValidatedParams, z, zh } from 'h3-zod';
+import prisma from '~~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  // TODO: re-enable perms
+  // const user = await requireUserSession(event);
+  //
+  // if (user.user.role !== 'ADMIN') {
+  //   throw createError({
+  //     status: 403,
+  //     statusText: 'Not allowed!'
+  //   });
+  // }
+  // const userId = user.user.id;
+  const { huntId } = await useValidatedParams(
+    event,
+    z.object({
+      huntId: zh.numAsString
+    })
+  );
+
+  const _hunt = await prisma.hunt.findUnique({
+    where: {
+      id: huntId
+      // OR: [
+      //   {
+      //     creatorId: userId
+      //   },
+      //   {
+      //     members: {
+      //       some: {
+      //         memberId: userId
+      //       }
+      //     }
+      //   }
+      // ]
+    },
+    select: {
+      id: true,
+      name: true,
+      start: true,
+      end: true,
+
+      _count: {
+        select: {
+          teams: true,
+          members: true,
+          quests: true
+        }
+      },
+
+      teams: {
+        select: {
+          _count: {
+            select: {
+              members: true,
+              answers: {
+                where: {
+                  score: { gt: 0 }
+                }
+              }
+            }
+          },
+          id: true,
+          name: true,
+          description: true,
+          answers: {
+            select: {
+              score: true
+            },
+            where: {
+              score: { not: null }
+            }
+          }
+        }
+      },
+
+      quests: {
+        select: {
+          id: true,
+          title: true,
+          question: true,
+          textSolution: true,
+          points: true,
+          extraPoints: true,
+
+          answers: {
+            select: {
+              id: true,
+              text: true,
+              score: true,
+
+              picture: {
+                select: {
+                  url: true,
+                  createdAt: true,
+                  creator: {
+                    select: {
+                      id: true,
+                      name: true
+                    }
+                  }
+                }
+              },
+              team: {
+                select: {
+                  id: true,
+                  name: true
+                }
+              }
+            },
+            where: {
+              showcase: true
+            },
+            orderBy: [
+              { rankingValue: { sort: 'asc', nulls: 'last' } },
+              { score: { sort: 'asc', nulls: 'last' } },
+              { createdAt: 'asc' }
+            ]
+          }
+        },
+        where: {
+          OR: [
+            {
+              answers: {
+                some: {
+                  showcase: true
+                }
+              }
+            }
+            // TODO: showcase solutions to quests
+            // {
+            //   textSolution: { not: null }
+            // }
+          ]
+        }
+      }
+    }
+  });
+
+  if (!_hunt) {
+    throw createError({ status: 404, statusText: 'Not found!' });
+  }
+
+  const { teams, ...hunt } = _hunt;
+
+  const userCount = teams.reduce(
+    (sum, team) => sum + team._count.members + 1,
+    0
+  );
+
+  const leaderboard = teams
+    .map(({ name, id, description, answers, _count }) => ({
+      name,
+      id,
+      description,
+      answers: _count.answers,
+      score: answers.reduce((sum, a) => sum + (a.score || 0), 0)
+    }))
+    .toSorted((a, b) => b.score - a.score);
+
+  const totalScore = leaderboard.reduce((sum, team) => sum + team.score, 0);
+
+  const pictureCount = await prisma.file.count({
+    where: {
+      answer: {
+        quest: {
+          huntId
+        }
+      }
+    }
+  });
+
+  return {
+    userCount,
+    pictureCount,
+    totalScore,
+    leaderboard,
+    ...hunt
+  };
+});