122 lines
3.0 KiB
Vue
122 lines
3.0 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: '', 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>
|