424 lines
13 KiB
Vue
424 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { parseError } from '#imports';
|
|
import { findBingo } from '#shared/utils/bingo';
|
|
import TeamAddModal from '~/components/TeamAddModal.vue';
|
|
import TeamSettingsModal from '~/components/TeamSettingsModal.vue';
|
|
import { useHuntStore } from '~/stores/hunt';
|
|
import { useSettingsStore } from '~/stores/settings';
|
|
import { useTitleStore } from '~/stores/title';
|
|
import { fullDate } from '~~/server/utils/date';
|
|
|
|
const app = useNuxtApp();
|
|
const { loggedIn } = useUserSession();
|
|
const { t, d } = useI18n();
|
|
const localePath = useLocalePath();
|
|
const { tKey, hasKey, tSluggy } = useI18nKey();
|
|
const { init } = useToast();
|
|
|
|
const { name, id } = app.$slugData.huntSlug!;
|
|
|
|
const titleStore = useTitleStore();
|
|
const huntStore = useHuntStore();
|
|
|
|
const teamSettingsOpen = ref(false);
|
|
|
|
const { data, pending, refresh, error } = await useFetch(`/api/hunt/${id}`);
|
|
|
|
huntStore.setMembership(id, data.value?.isMember ?? false);
|
|
|
|
const hasBingo = computed(
|
|
() => data.value?.quests?.some((q) => q.isBingo) ?? false
|
|
);
|
|
|
|
const hasBingoDone = computed(() => {
|
|
if (!hasBingo.value || !data.value?.quests) {
|
|
return 0;
|
|
}
|
|
const bingoQuests = data
|
|
.value!.quests!.filter((q) => q.isBingo)
|
|
.map((q) => q.answer?.final ?? false);
|
|
|
|
return findBingo(bingoQuests);
|
|
});
|
|
|
|
const settings = useSettingsStore();
|
|
|
|
useHead({
|
|
title: t('layouts.title', {
|
|
title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
|
|
}),
|
|
meta: [
|
|
{
|
|
property: 'og:title',
|
|
content: hasKey(data.value, 'name')
|
|
? tKey(data.value!, 'name').value
|
|
: name
|
|
},
|
|
{
|
|
property: 'og:description',
|
|
content: hasKey(data.value, 'description')
|
|
? tKey(data.value!, 'description').value
|
|
: name
|
|
},
|
|
{
|
|
property: 'og:image',
|
|
content: data.value?.picture?.url
|
|
}
|
|
]
|
|
});
|
|
|
|
watch(loggedIn, () => refresh());
|
|
|
|
titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
|
|
|
|
async function invite() {
|
|
if (!data.value?.ownTeam) {
|
|
return;
|
|
}
|
|
const clipboardItemData = {
|
|
// TODO: add invite link
|
|
// 'text/plain': `https://pichunt.syma.dev/hunt/${id}/join?id=${data.value.ownTeam.id}&pw=${data.value.ownTeam.password}`
|
|
'text/plain': `${t('page.hunt.invite_toast_text', {
|
|
team: data.value.ownTeam.name,
|
|
code: data.value.ownTeam.password,
|
|
hunt: data.value ? tKey(data.value, 'name').value : name
|
|
})}
|
|
|
|
${document.location.href}`
|
|
};
|
|
const clipboardItem = new ClipboardItem(clipboardItemData);
|
|
await navigator.clipboard.write([clipboardItem]);
|
|
|
|
init({
|
|
title: t('page.hunt.invite_toast_title'),
|
|
message: t('page.hunt.invite_toast_message'),
|
|
color: 'success',
|
|
duration: 2000
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h1 class="text-2xl">
|
|
{{ data ? tKey(data, 'name') : name }}
|
|
|
|
<VaChip v-if="data?.totalScore" class="float-right" color="success">{{
|
|
t('page.hunt.total_points', { score: 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"
|
|
:disabled="pending"
|
|
:title="t('page.common.refresh')"
|
|
@click="refresh"
|
|
>{{ t('page.common.refresh') }}</VaButton
|
|
>
|
|
|
|
<VaButton
|
|
v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
|
|
color="success"
|
|
icon="leaderboard"
|
|
:to="localePath(`/hunt/${tSluggy(data).value}/showcase`)"
|
|
>{{ t('page.hunt.showcase') }}</VaButton
|
|
>
|
|
<VaButton
|
|
v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
|
|
color="success"
|
|
icon="collections"
|
|
:to="localePath(`/hunt/${tSluggy(data).value}/diashow`)"
|
|
>{{ t('page.hunt.diashow') }}</VaButton
|
|
>
|
|
<VaButton
|
|
v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
|
|
color="success"
|
|
icon="auto_awesome_mosaic"
|
|
:to="localePath(`/hunt/${tSluggy(data).value}/pictures`)"
|
|
>{{ t('page.hunt.all_pictures') }}</VaButton
|
|
>
|
|
<VaButton
|
|
v-if="data?.isMember"
|
|
color="danger"
|
|
icon="edit"
|
|
:to="localePath(`/hunt/${tSluggy(data).value}/admin`)"
|
|
>{{ t('page.common.admin') }}</VaButton
|
|
><VaButton
|
|
v-if="data?.isMember"
|
|
color="danger"
|
|
icon="groups"
|
|
:to="localePath(`/hunt/${tSluggy(data).value}/teams`)"
|
|
>{{ t('page.hunt.teams') }}</VaButton
|
|
>
|
|
</div>
|
|
<div v-if="data">
|
|
<div class="my-4 flex flex-col gap-4 md:flex-row">
|
|
<VaCard class="flex-grow">
|
|
<VaCardTitle>
|
|
{{ data ? tKey(data, 'name') : name }}
|
|
</VaCardTitle>
|
|
<ClickableImage
|
|
v-if="data?.picture"
|
|
:src="data?.picture?.url"
|
|
class="h-48"
|
|
:title="data ? tKey(data, 'name').value : name"
|
|
/>
|
|
<VaCardContent>
|
|
<div class="mb-4 flex flex-col gap-2">
|
|
<MultilineString :text="tKey(data, 'description').value" />
|
|
</div>
|
|
<p v-if="data.start" class="text-xl">
|
|
{{
|
|
t('page.home.start', {
|
|
start: d(data.start, fullDate)
|
|
})
|
|
}}
|
|
</p>
|
|
<p v-if="data.end" class="text-xl">
|
|
{{
|
|
t('page.home.end', {
|
|
start: d(data.end, fullDate)
|
|
})
|
|
}}
|
|
</p>
|
|
<p>
|
|
{{
|
|
t(
|
|
data.ownTeam !== null
|
|
? 'page.hunt.team_count_joined'
|
|
: 'page.hunt.team_count',
|
|
data._count.teams
|
|
)
|
|
}}
|
|
</p>
|
|
<div v-if="data.ownTeam" class="mt-4">
|
|
<p>
|
|
{{ t('page.hunt.your_team') }}
|
|
<span class="text-xl font-bold">{{ data.ownTeam.name }}</span>
|
|
</p>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<VaButton size="small" class="group" @click="invite"
|
|
>{{ t('page.hunt.invite') }}
|
|
<span
|
|
class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none group-hover:blur-none"
|
|
>
|
|
{{ data.ownTeam.password }}</span
|
|
></VaButton
|
|
>
|
|
<VaButton
|
|
size="small"
|
|
icon="settings"
|
|
preset="secondary"
|
|
@click="teamSettingsOpen = true"
|
|
>{{ t('page.hunt.team_settings') }}</VaButton
|
|
>
|
|
</div>
|
|
<TeamSettingsModal
|
|
v-model="teamSettingsOpen"
|
|
:hunt-id="data.id"
|
|
@update="refresh"
|
|
/>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard
|
|
v-if="(data.revealQuests || data.isMember) && hasBingo"
|
|
class="mb-auto sm:max-w-[30rem]"
|
|
stripe-color="success"
|
|
:stripe="hasBingoDone > 0"
|
|
>
|
|
<VaCardTitle>{{ t('page.hunt.bingo_board') }}</VaCardTitle>
|
|
<VaCardContent
|
|
v-if="data.isMember"
|
|
class="grid grid-cols-3 gap-1 text-center"
|
|
>
|
|
<VaButton
|
|
v-for="quest in data.quests?.filter((q) => q.isBingo)"
|
|
:key="quest.id"
|
|
class="aspect-square"
|
|
color="danger"
|
|
:preset="(quest.unreviewed || 0) <= 0 ? 'secondary' : undefined"
|
|
:border-color="
|
|
(quest.unreviewed || 0) <= 0 ? 'danger' : undefined
|
|
"
|
|
:to="
|
|
localePath(
|
|
`/hunt/${tSluggy(data).value}/${tSluggy(quest).value}/admin`
|
|
)
|
|
"
|
|
>
|
|
{{ tKey(quest, 'title') }}
|
|
</VaButton>
|
|
</VaCardContent>
|
|
<VaCardContent v-else class="grid grid-cols-3 gap-1 text-center">
|
|
<VaAlert
|
|
v-if="hasBingoDone > 0"
|
|
color="success"
|
|
class="col-span-3 text-3xl"
|
|
>🎉 {{ hasBingoDone > 1 ? `${hasBingoDone}x ` : '' }}BINGO!
|
|
🎉</VaAlert
|
|
>
|
|
<VaButton
|
|
v-for="quest in data.quests?.filter((q) => q.isBingo)"
|
|
:key="quest.id"
|
|
class="aspect-square"
|
|
:color="
|
|
(quest.answer?.review?.score &&
|
|
quest.answer?.review?.score > 0) ||
|
|
quest.answer?.final
|
|
? 'success'
|
|
: !!quest.answer
|
|
? 'warning'
|
|
: undefined
|
|
"
|
|
:to="
|
|
localePath(
|
|
`/hunt/${tSluggy(data).value}/${tSluggy(quest).value}`
|
|
)
|
|
"
|
|
>
|
|
{{ tKey(quest, 'title') }}
|
|
</VaButton>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
</div>
|
|
<VaDivider />
|
|
<VaCard
|
|
v-if="data.ownTeam === null && !data.isMember"
|
|
color="primary"
|
|
class="mb-16 mt-8"
|
|
>
|
|
<VaCardTitle>{{ t('page.hunt.join_this_hunt') }}</VaCardTitle>
|
|
<VaCardContent class="text-2xl">{{
|
|
t('page.hunt.login_to_join')
|
|
}}</VaCardContent>
|
|
<VaCardActions v-if="data.loggedIn">
|
|
<TeamJoinModal :hunt-id="data.id" @update="refresh" />
|
|
<TeamAddModal :hunt-id="data.id" @update="refresh" />
|
|
</VaCardActions>
|
|
<VaCardActions v-else>
|
|
<VaButton
|
|
color="info"
|
|
icon="login"
|
|
:to="localePath(`/login?to=/hunt/${tSluggy(data).value}`)"
|
|
>{{ t('page.common.login_first') }}</VaButton
|
|
>
|
|
</VaCardActions>
|
|
</VaCard>
|
|
<div v-else-if="!data.isMember" class="my-4 flex flex-row gap-2">
|
|
<VaSwitch v-model="settings.hideAnswers" icon="image">{{
|
|
t('page.hunt.hide_answers')
|
|
}}</VaSwitch>
|
|
</div>
|
|
<div
|
|
v-if="data.revealQuests || data.isMember"
|
|
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
|
|
>
|
|
<VaCard
|
|
v-for="quest in data.quests?.filter((q) => !q.isBingo)"
|
|
:key="`q-${quest.id}`"
|
|
stripe
|
|
:stripe-color="
|
|
(quest.answer?.review?.score && quest.answer?.review?.score > 0) ||
|
|
quest.answer?.final
|
|
? 'success'
|
|
: !!quest.answer
|
|
? 'warning'
|
|
: 'primary'
|
|
"
|
|
:color="
|
|
(quest.answer?.review?.score && quest.answer?.review?.score > 0) ||
|
|
quest.answer?.final
|
|
? 'success'
|
|
: !!quest.answer
|
|
? 'warning'
|
|
: undefined
|
|
"
|
|
>
|
|
<VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
|
|
<VaImage
|
|
v-if="!settings.hideAnswers"
|
|
:src="quest?.answer?.picture?.url ?? ''"
|
|
:fallback-text="t('page.hunt.no_picture_uploaded')"
|
|
class="h-32"
|
|
fit="cover"
|
|
lazy
|
|
>
|
|
<template #loader> <VaProgressCircle indeterminate /> </template
|
|
></VaImage>
|
|
<VaCardContent
|
|
v-if="
|
|
!(
|
|
(quest.answer?.review?.score &&
|
|
quest.answer?.review?.score > 0) ||
|
|
quest.answer?.final
|
|
) ||
|
|
(!settings.hideAnswers && quest.answer?.text)
|
|
"
|
|
>
|
|
<p class="line-clamp-4">
|
|
{{ tKey(quest, 'description').value.split('\n')[0] }}
|
|
</p>
|
|
|
|
<div v-if="!settings.hideAnswers && quest.answer?.text">
|
|
<VaDivider />
|
|
<p class="line-clamp-1">{{ quest.answer?.text }}</p>
|
|
</div>
|
|
</VaCardContent>
|
|
<VaCardActions>
|
|
<VaButton
|
|
:to="
|
|
localePath(
|
|
`/hunt/${tSluggy(data).value}/${tSluggy(quest).value}`
|
|
)
|
|
"
|
|
color="primary"
|
|
icon="rate_review"
|
|
class="flex-grow"
|
|
>{{
|
|
t(
|
|
!!quest.answer && !quest.answer.final
|
|
? 'page.hunt.open_finalize'
|
|
: 'page.hunt.open_answer'
|
|
)
|
|
}}</VaButton
|
|
>
|
|
<VaButton
|
|
v-if="data.isMember"
|
|
color="danger"
|
|
:preset="(quest.unreviewed || 0) <= 0 ? 'secondary' : undefined"
|
|
:border-color="
|
|
(quest.unreviewed || 0) <= 0 ? 'danger' : undefined
|
|
"
|
|
:icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
|
|
:to="
|
|
localePath(
|
|
`/hunt/${tSluggy(data).value}/${tSluggy(quest).value}/admin`
|
|
)
|
|
"
|
|
>{{
|
|
t('page.hunt.admin_unreviewed', quest.unreviewed || 0)
|
|
}}</VaButton
|
|
>
|
|
</VaCardActions>
|
|
</VaCard>
|
|
</div>
|
|
<VaCard v-else color="warning" class="mt-4"
|
|
><VaCardTitle>{{ t('page.hunt.quest_not_revealed') }}</VaCardTitle>
|
|
<VaCardContent>{{
|
|
t('page.hunt.quest_soon_reveal', data._count.quests)
|
|
}}</VaCardContent>
|
|
</VaCard>
|
|
</div>
|
|
|
|
<div v-if="error">
|
|
<h1 class="mt-8 text-3xl">{{ t(parseError(error)) }}</h1>
|
|
<VaButton icon="arrow_back" :to="localePath(`/`)">{{
|
|
t('page.common.back_home')
|
|
}}</VaButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|