280 lines
8.6 KiB
Vue
280 lines
8.6 KiB
Vue
<script setup lang="ts">
|
|
import TeamAddModal from '~/components/TeamAddModal.vue';
|
|
import { useTitleStore } from '~/stores/title';
|
|
import { fullDate } from '~~/server/utils/date';
|
|
|
|
const app = useNuxtApp();
|
|
const { loggedIn } = useUserSession();
|
|
const { t, d } = useI18n();
|
|
const { tKey, hasKey, tSluggy } = useI18nKey();
|
|
const { init } = useToast();
|
|
|
|
const { name, id } = app.$slugData.huntSlug!;
|
|
|
|
const titleStore = useTitleStore();
|
|
|
|
const { data, pending, refresh, error } = await useFetch(`/api/hunt/${id}`);
|
|
|
|
const hideAnswers = ref(true);
|
|
|
|
useHead({
|
|
title: t('layouts.title', {
|
|
title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
|
|
})
|
|
});
|
|
|
|
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="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">
|
|
<VaCard class="my-4">
|
|
<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">
|
|
<p
|
|
v-for="(line, i) in tKey(data, 'description').value.split('\n')"
|
|
:key="i"
|
|
>
|
|
{{ line }}
|
|
</p>
|
|
</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>
|
|
<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
|
|
>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<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="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"
|
|
:key="`q-${quest.id}`"
|
|
stripe
|
|
:stripe-color="
|
|
(quest.answer?.review?.score && quest.answer?.review?.score > 0) ||
|
|
quest.answer?.final
|
|
? 'success'
|
|
: !!quest.answer
|
|
? 'warning'
|
|
: 'primary'
|
|
"
|
|
>
|
|
<VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
|
|
<VaImage
|
|
v-if="!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>
|
|
<p class="line-clamp-2 h-12">{{ tKey(quest, 'description') }}</p>
|
|
|
|
<div v-if="!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('page.common.open') }}</VaButton
|
|
>
|
|
<VaButton
|
|
v-if="data.isMember"
|
|
color="danger"
|
|
: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>
|