126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<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>
|