68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
const app = useNuxtApp();
|
|
const { user } = useUserSession();
|
|
const localePath = useLocalePath();
|
|
|
|
const { name, id } = app.$slugData.huntSlug!;
|
|
|
|
const { data, pending } = await useFetch(`/api/hunt/${id}`);
|
|
|
|
const hideAnswers = ref(true);
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="text-2xl">
|
|
{{ data?.name || name }}
|
|
<VaChip v-if="data?.totalScore" class="float-right" color="success"
|
|
>Total points: {{ data!!.totalScore }}</VaChip
|
|
>
|
|
</h1>
|
|
<div v-if="data">
|
|
<p>{{ data.description }}</p>
|
|
<p v-if="data.start">Start: {{ $d(data.start) }}</p>
|
|
<p v-if="data.end">End: {{ $d(data.end) }}</p>
|
|
<p>
|
|
{{ data._count.teams }} teams joined{{
|
|
data.ownTeam !== null ? ', just like you' : ', unlike you'
|
|
}}!
|
|
</p>
|
|
<div class="flex flex-row gap-2" v-if="data.ownTeam !== null">
|
|
<VaSwitch v-model="hideAnswers" icon="image">Hide answers</VaSwitch>
|
|
</div>
|
|
<VaDivider />
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<VaCard
|
|
v-for="quest in data.quests"
|
|
:key="`q-${quest.id}`"
|
|
:to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
|
|
:stripe="quest.answer !== null"
|
|
:stripe-color="
|
|
quest.answer?.score && quest.answer?.score > 0 ? 'success' : 'primary'
|
|
"
|
|
>
|
|
<VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
|
|
<VaImage
|
|
v-if="!hideAnswers && quest?.answer?.picture"
|
|
:src="quest?.answer?.picture"
|
|
class="h-32"
|
|
fit="cover"
|
|
lazy
|
|
>
|
|
<template #loader> <VaProgressCircle indeterminate /> </template
|
|
></VaImage>
|
|
<VaCardContent>
|
|
<p class="line-clamp-1">{{ quest.description }}</p>
|
|
<div v-if="!hideAnswers && quest.answer?.text">
|
|
<VaDivider />
|
|
<p class="line-clamp-1">
|
|
{{ quest.answer?.text }}
|
|
</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|