Pascal/pichunt
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hunt): Add bingo board to hunts

Browse Source
This commit is contained in:
Pascal
2026-08-07 18:59:24 +02:00
parent 8e5e60da87
commit 28714a8cbc
15 changed files with 251 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/hunt/[huntSlug]/index.vue
+146 -68
View File
@@ -1,5 +1,6 @@
<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';
@@ -25,6 +26,21 @@ 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({
@@ -136,74 +152,136 @@ ${document.location.href}`
>
</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">
<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 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>
<TeamSettingsModal
v-model="teamSettingsOpen"
:hunt-id="data.id"
@update="refresh"
/>
</div>
</VaCardContent>
</VaCard>
<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"
@@ -237,7 +315,7 @@ ${document.location.href}`
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
>
<VaCard
v-for="quest in data.quests"
v-for="quest in data.quests?.filter((q) => !q.isBingo)"
:key="`q-${quest.id}`"
stripe
:stripe-color="