Add diashow and styling

app/pages/hunt/[huntSlug]/diashow.vue

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

app/pages/hunt/[huntSlug]/index.vue

@@ -44,38 +44,57 @@ async function invite() {
 <template>
   <h1 class="text-2xl">
     {{ data?.name || name }}
-    <VaButton
-      icon="replay"
-      @click="refresh"
-      :disabled="pending"
-      title="Refresh"
-    />
-    <VaButtonGroup v-if="data?.isMember">
-      <VaButton
-        color="danger"
-        icon="edit"
-        :to="$localePath(`/hunt/${sluggy(data)}/admin`)"
-        >Admin</VaButton
-      ><VaButton
-        color="danger"
-        icon="groups"
-        :to="$localePath(`/hunt/${sluggy(data)}/teams`)"
-        >Teams</VaButton
-      >
-      <VaButton
-        color="success"
-        icon="leaderboard"
-        :to="$localePath(`/hunt/${sluggy(data)}/showcase`)"
-        >Showcase</VaButton
-      >
-    </VaButtonGroup>
 
     <VaChip v-if="data?.totalScore" class="float-right" color="success"
       >Total points: {{ data!!.totalScore }}</VaChip
     >
   </h1>
+  <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
+    <VaButton icon="replay" @click="refresh" :disabled="pending" title="Refresh"
+      >Refresh</VaButton
+    >
+
+    <VaButton
+      v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
+      color="success"
+      icon="leaderboard"
+      :to="$localePath(`/hunt/${sluggy(data)}/showcase`)"
+      >Showcase</VaButton
+    >
+    <VaButton
+      v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
+      color="success"
+      icon="collections"
+      :to="$localePath(`/hunt/${sluggy(data)}/diashow`)"
+      >Diashow</VaButton
+    >
+    <VaButton
+      v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
+      color="success"
+      icon="auto_awesome_mosaic"
+      :to="$localePath(`/hunt/${sluggy(data)}/pictures`)"
+      >All pictures</VaButton
+    >
+    <VaButton
+      v-if="data?.isMember"
+      color="danger"
+      icon="edit"
+      :to="$localePath(`/hunt/${sluggy(data)}/admin`)"
+      >Admin</VaButton
+    ><VaButton
+      v-if="data?.isMember"
+      color="danger"
+      icon="groups"
+      :to="$localePath(`/hunt/${sluggy(data)}/teams`)"
+      >Teams</VaButton
+    >
+  </div>
   <div v-if="data">
-    <p>{{ data.description }}</p>
+    <div class="flex flex-col gap-2">
+      <p v-for="(line, i) in data.description.split('\n')" :key="i">
+        {{ line }}
+      </p>
+    </div>
     <ClickableImage
       v-if="data?.picture"
       :src="data?.picture?.url"
@@ -139,7 +158,6 @@ async function invite() {
       <VaCard
         v-for="quest in data.quests"
         :key="`q-${quest.id}`"
-        :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
         stripe
         :stripe-color="
           (quest.answer?.review?.score && quest.answer?.review?.score > 0) ||
@@ -152,8 +170,9 @@ async function invite() {
       >
         <VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
         <VaImage
-          v-if="!hideAnswers && quest?.answer?.picture"
-          :src="quest?.answer?.picture?.url"
+          v-if="!hideAnswers"
+          :src="quest?.answer?.picture?.url ?? ''"
+          fallback-text="No picture uploaded"
           class="h-32"
           fit="cover"
           lazy
@@ -161,17 +180,23 @@ async function invite() {
           <template #loader> <VaProgressCircle indeterminate /> </template
         ></VaImage>
         <VaCardContent>
-          <p class="line-clamp-1">{{ quest.description }}</p>
+          <p class="line-clamp-2 h-12">{{ quest.description }}</p>
 
           <div v-if="!hideAnswers && quest.answer?.text">
             <VaDivider />
-            <p class="line-clamp-1">
-              {{ quest.answer?.text }}
-            </p>
+            <p class="line-clamp-1">{{ quest.answer?.text }}</p>
           </div>
         </VaCardContent>
-        <VaCardActions v-if="data.isMember">
+        <VaCardActions>
           <VaButton
+            :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
+            color="primary"
+            icon="rate_review"
+            class="flex-grow"
+            >Open</VaButton
+          >
+          <VaButton
+            v-if="data.isMember"
             color="danger"
             :icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
             :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}/admin`)"

app/pages/hunt/[huntSlug]/pictures.vue

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

app/pages/hunt/[huntSlug]/showcase.vue

@@ -4,15 +4,13 @@ import NumberCard from '~/components/showcase/NumberCard.vue';
 import { fullDate } from '~~/server/utils/date';
 
 definePageMeta({
-  // TODO: re-enable perms
-  // middleware: ['admin'],
   layout: 'full'
 });
 const { t, d } = useI18n();
 
 const app = useNuxtApp();
 const { name, id } = app.$slugData.huntSlug!;
-const { data } = await useFetch(`/api/admin/hunt/${id}/showcase`);
+const { data, error } = await useFetch(`/api/hunt/${id}/showcase`);
 
 const { toggle, isFullscreen, isSupported } = useFullscreen();
 
@@ -243,7 +241,23 @@ const columns = leaderboardColumns.map((c) =>
       </div>
     </section>
   </article>
-  <article v-else>pending...</article>
+
+  <article
+    v-else-if="error"
+    class="flex h-dvh 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
+    >
+  </article>
 </template>
 
 <style scoped>