134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { useTitleStore } from '~/stores/title';
|
|
|
|
definePageMeta({
|
|
layout: 'full'
|
|
});
|
|
const app = useNuxtApp();
|
|
const { loggedIn } = useUserSession();
|
|
const { t } = useI18n();
|
|
const { tKey, hasKey } = useI18nKey();
|
|
|
|
const { name, id } = app.$slugData.huntSlug!;
|
|
|
|
const titleStore = useTitleStore();
|
|
|
|
type Picture = {
|
|
quest: { id: number; title_de: string; title_en: 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_de: '',
|
|
name_en: '',
|
|
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: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name,
|
|
subtitle: t('pages.pictures.head')
|
|
})
|
|
});
|
|
|
|
watch(loggedIn, () => refresh());
|
|
|
|
titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
|
|
</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="`${tKey(pic.quest, 'title')} — ${pic.team.name} — ${pic.picture.creator.name}`"
|
|
/>
|
|
</div>
|
|
<VaAlert
|
|
v-if="data.count <= 0"
|
|
color="warning"
|
|
class="sm:col-span-2 md:col-span-3 lg:col-span-4"
|
|
>{{ t('pages.common.no_pictures') }}</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%]">{{
|
|
t('pages.common.not_revealed')
|
|
}}</VaAlert>
|
|
<VaAlert v-if="error.statusCode !== 403" color="danger" class="w-[90%]">{{
|
|
error
|
|
}}</VaAlert
|
|
><VaButton
|
|
icon="arrow_back"
|
|
:to="$localePath(`/hunt/${sluggy($nuxt.$slugData.huntSlug!)}`)"
|
|
>{{ t('pages.common.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%]">{{
|
|
t('pages.common.not_revealed')
|
|
}}</VaAlert
|
|
><VaButton
|
|
icon="arrow_back"
|
|
:to="$localePath(`/hunt/${sluggy($nuxt.$slugData.huntSlug!)}`)"
|
|
>{{ t('pages.common.back_to_hunt') }}</VaButton
|
|
>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped></style>
|