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

Use composition for translation

Browse Source
This commit is contained in:
Pascal
2025-08-14 19:56:49 +02:00
parent 900414727f
commit 24f933fbaa
12 changed files with 111 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/hunt/[huntSlug]/showcase.vue
+24 -23
View File
@@ -7,6 +7,7 @@ definePageMeta({
// middleware: ['admin'],
layout: 'full'
});
const { t, d } = useI18n();
const app = useNuxtApp();
const { name, id } = app.$slugData.huntSlug!;
@@ -51,18 +52,18 @@ const columns = leaderboardColumns.map((c) =>
<div
class="flex flex-col items-center justify-center gap-8 bg-green-300 text-center"
>
<h1 class="text-7xl">{{ $t('page.showcase.showcase_for') }}</h1>
<h1 class="text-7xl">{{ t('page.showcase.showcase_for') }}</h1>
<h1 class="text-9xl font-bold">{{ data.name || name }}</h1>
<p v-if="data.start || data.end" class="flex flex-row gap-4 text-4xl">
<span v-if="data.start">{{
$d(data.start, {
d(data.start, {
dateStyle: 'medium',
timeStyle: 'medium'
})
}}</span
><span v-if="data.start && data.end"> – </span
><span v-if="data.end">{{
$d(data.end, {
d(data.end, {
dateStyle: 'medium',
timeStyle: 'medium'
})
@@ -73,32 +74,32 @@ const columns = leaderboardColumns.map((c) =>
<section id="numbers">
<div class="grid grid-cols-3 gap-4 bg-red-100 p-4">
<NumberCard
:title="$t('page.showcase.crew')"
:title="t('page.showcase.crew')"
:count="data._count.members + 1"
icon="support_agent"
/>
<NumberCard
:title="$t('page.showcase.quests')"
:title="t('page.showcase.quests')"
:count="data._count.quests"
icon="home"
/>
<NumberCard
:title="$t('page.showcase.users')"
:title="t('page.showcase.users')"
:count="data.userCount"
icon="person"
/>
<NumberCard
:title="$t('page.showcase.teams')"
:title="t('page.showcase.teams')"
:count="data._count.teams"
icon="groups"
/>
<NumberCard
:title="$t('page.showcase.total_points')"
:title="t('page.showcase.total_points')"
:count="data.totalScore"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.pictures')"
:title="t('page.showcase.pictures')"
:count="data.pictureCount"
icon="photo"
/>
@@ -141,7 +142,7 @@ const columns = leaderboardColumns.map((c) =>
<section id="leaderboard" v-if="data.leaderboard.length > 3">
<div class="flex flex-col gap-4 bg-indigo-100">
<h1 class="mt-8 text-center text-6xl">
{{ $t('page.showcase.leaderboard') }}
{{ t('page.showcase.leaderboard') }}
</h1>
<VaDataTable
class="h-full text-2xl"
@@ -152,7 +153,7 @@ const columns = leaderboardColumns.map((c) =>
:columns="leaderboardColumns"
>
<template v-for="col in columns" #[col]
><span>{{ $t(`page.showcase.table.${col}`) }}</span></template
><span>{{ t(`page.showcase.table.${col}`) }}</span></template
>
<template #cell(place)="{ rowIndex }">
<strong>{{ rowIndex + 4 }}</strong>
@@ -164,18 +165,18 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#AD8A56]">
<div class="place-left">
<VaIcon name="looks_3" size="10rem" />
<h2>{{ $t('page.showcase.third_place') }}</h2>
<h2>{{ t('page.showcase.third_place') }}</h2>
</div>
<div class="place-right">
<h3>{{ data.leaderboard[2].name }}</h3>
<p>{{ data.leaderboard[2].description }}</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[2].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[2].answers"
icon="question_mark"
/>
@@ -186,18 +187,18 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#B4B4B4]">
<div class="place-left">
<VaIcon name="looks_two" size="10rem" />
<h2>{{ $t('page.showcase.second_place') }}</h2>
<h2>{{ t('page.showcase.second_place') }}</h2>
</div>
<div class="place-right">
<h3>{{ data.leaderboard[1].name }}</h3>
<p>{{ data.leaderboard[1].description }}</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[1].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[1].answers"
icon="question_mark"
/>
@@ -208,7 +209,7 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#C9B037]">
<div class="place-left">
<VaIcon name="looks_one" size="10rem" />
<h2>{{ $t('page.showcase.first_place') }}</h2>
<h2>{{ t('page.showcase.first_place') }}</h2>
</div>
<div class="place-right">
<h3 class="bg-white text-white">{{ data.leaderboard[0].name }}</h3>
@@ -216,12 +217,12 @@ const columns = leaderboardColumns.map((c) =>
{{ data.leaderboard[0].description }}
</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[0].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[0].answers"
icon="question_mark"
/>
@@ -232,18 +233,18 @@ const columns = leaderboardColumns.map((c) =>
<div class="place bg-[#C9B037]">
<div class="place-left">
<VaIcon name="workspace_premium" size="10rem" />
<h2>{{ $t('page.showcase.first_place') }}</h2>
<h2>{{ t('page.showcase.first_place') }}</h2>
</div>
<div class="place-right">
<h3>{{ data.leaderboard[0].name }}</h3>
<p>{{ data.leaderboard[0].description }}</p>
<NumberCard
:title="$t('page.showcase.points')"
:title="t('page.showcase.points')"
:count="data.leaderboard[0].score"
icon="star"
/>
<NumberCard
:title="$t('page.showcase.answers')"
:title="t('page.showcase.answers')"
:count="data.leaderboard[0].answers"
icon="question_mark"
/>