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

Switch to translatable data

Browse Source
This commit is contained in:
Pascal
2025-08-20 23:18:40 +02:00
parent c35fb06830
commit cc544322b2
36 changed files with 431 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/docker.yml
+14
View File
@@ -6,7 +6,21 @@ on:
branches: ['main']
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install bun
uses: oven-sh/setup-bun@v2
- name: Install dependencies
run: bun install --include=dev
- name: Check formatting
run: bun run check
- name: Run tests
run: bun run test
deploy:
needs: test
permissions:
contents: read
packages: write
TODO.md
+1 -1
View File
@@ -31,7 +31,7 @@
- [x] Image Diashow
- **Hunt User**
- [x] View all images on one page
- [ ] i18n data
- [x] i18n data
- [ ] Mark image as private
- [ ] How-to/Guide/Good explanation
- [ ] Leave/Remove/Edit team
app/components/QuestTags.vue
+6 -2
View File
@@ -1,7 +1,10 @@
<script setup lang="ts">
import { useI18nKey } from '~/composables/useI18nKey';
const props = defineProps<{
quest: {
title: string;
title_de: string;
title_en: string;
textRequired: boolean;
pictureRequired: boolean;
optional: boolean;
@@ -12,12 +15,13 @@ const props = defineProps<{
} | null;
};
}>();
const { tKey } = useI18nKey();
</script>
<template>
<span>{{ quest.pictureRequired ? '📸' : '📷' }}</span>
<span title="aaa">{{ quest.textRequired ? '❓' : '❔' }}</span>
<span class="mx-2">{{ quest.title }}</span>
<span class="mx-2">{{ tKey(quest, 'title') }}</span>
<VaChip v-if="quest.answer?.review?.score" color="success" class="float-right"
>{{ quest.answer?.review?.score || 0 }} / {{ quest.points
}}{{ quest.extraPoints ? `+${quest.extraPoints}` : '' }}</VaChip
app/components/admin/Answer.vue
+21 -4
View File
@@ -1,7 +1,10 @@
<script setup lang="ts">
import { getFlagEmoji } from '#shared/utils/flag';
import { fullDate } from '~~/server/utils/date';
const { d, t } = useI18n();
const { d, t, locale } = useI18n();
const { tKey } = useI18nKey();
const props = defineProps<{
answer: {
id: number;
@@ -9,6 +12,7 @@ const props = defineProps<{
updatedAt: string;
team: { id: number; name: string };
final: boolean;
lang: string;
review: {
internalNote: string | null;
rankingValue: number | null;
@@ -25,12 +29,14 @@ const props = defineProps<{
} | null;
};
quest: {
title: string;
title_de: string;
title_en: string;
pictureRequired: boolean;
textRequired: boolean;
points: number;
extraPoints: number | null;
extraText: string | null;
extraText_de: string | null;
extraText_en: string | null;
textSolution: string | null;
};
}>();
@@ -139,7 +145,7 @@ async function submit() {
<ClickableImage
v-if="answer.picture?.url"
:src="answer.picture.url"
:title="`${quest.title} – ${answer.team.name}`"
:title="`${tKey(quest, 'title')} – ${answer.team.name}`"
class="h-48"
/>
<h3 v-if="quest.textSolution">Solution:</h3>
@@ -172,6 +178,17 @@ async function submit() {
messages="Special showcase at the end, before the final leaderboard"
/>
</div>
<p
v-if="answer.lang"
:class="answer.lang !== locale ? 'py-2 text-xl text-red-500' : ''"
>
Users language is {{ t(`locales.${answer.lang}`) }}
{{
getFlagEmoji(
answer.lang.toLowerCase() === 'en' ? 'GB' : answer.lang
)
}}
</p>
<VaTextarea
v-model="formData.cloned.value.review"
label="Review"
app/components/admin/Team.vue
+3
View File
@@ -69,6 +69,7 @@ async function kick(member: Team['members'][number]) {
init({
title: 'Error while kicking',
color: 'danger',
// @ts-expect-error weird error stuff
message: e?.message || e?.statusMessage || t(parseError(e))
});
}
@@ -97,6 +98,7 @@ async function addUser() {
init({
title: 'Error while adding',
color: 'danger',
// @ts-expect-error weird error stuff
message: e?.message || e?.statusMessage || t(parseError(e))
});
}
@@ -135,6 +137,7 @@ async function deleteTeam() {
init({
title: 'Error while deleting',
color: 'danger',
// @ts-expect-error weird error stuff
message: e?.message || e?.statusMessage || t(parseError(e))
});
}
app/composables/useI18nKey.ts
+51
View File
@@ -0,0 +1,51 @@
import type { Locale } from '@intlify/core-base';
export const useI18nKey = () => {
const { locale, locales } = useI18n();
function tKey<K extends string>(
obj: Record<`${K}_${Locale}`, string>,
key: K
) {
return computed(() => obj[`${key}_${locale.value}`]);
}
function tSluggy(
obj: { id: number | string } & (
| Record<`name_${Locale}`, string | null | undefined>
| Record<`title_${Locale}`, string | null | undefined>
)
) {
return computed(() =>
sluggy({
id: obj.id,
title: hasKey(obj, 'title') ? tKey(obj, 'title').value : undefined,
name: hasKey(obj, 'name') ? tKey(obj, 'name').value : undefined
})
);
}
function hasKey<K extends string>(
obj:
| Record<`${K}_${Locale}`, string | null | undefined>
| null
| undefined
| {},
key: K
): obj is Record<`${K}_${Locale}`, string> {
return (
!!obj &&
locales.value.every(
(l) =>
typeof obj === 'object' &&
Object.prototype.hasOwnProperty.call(obj, `${key}_${l.code}`) &&
// @ts-expect-error this is a type check
typeof obj[`${key}_${l.code}`] === 'string' &&
// @ts-expect-error this is a type check
obj[`${key}_${l.code}`]
)
);
}
return { tKey, hasKey, tSluggy };
};
app/lang/de.json
+1 -1
View File
@@ -160,4 +160,4 @@
"uploadFile": "Datei hochladen",
"voteRating": "vote rating {value} of {max}"
}
}
}
app/lang/en.json
+1 -1
View File
@@ -160,4 +160,4 @@
"uploadFile": "Upload file",
"voteRating": "vote rating {value} of {max}"
}
}
}
app/pages/hunt/[huntSlug]/[questSlug]/admin.vue
+10 -5
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { useI18nKey } from '~/composables/useI18nKey';
import { useTitleStore } from '~/stores/title';
definePageMeta({
@@ -9,6 +10,7 @@ const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t } = useI18n();
const { tKey, hasKey, tSluggy } = useI18nKey();
const router = useRouter();
const { huntSlug } = app.$slugData;
@@ -21,7 +23,7 @@ const { data, pending, refresh, error } = await useFetch(
useHead({
title: t('layouts.title', {
title: data.value?.title || name
title: hasKey(data.value, 'title') ? tKey(data.value!, 'title').value : name
})
});
@@ -31,8 +33,7 @@ watch(loggedIn, (isLoggedIn) => {
}
});
titleStore.title = data.value?.title;
// TODO: handle data!
titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
</script>
<template>
@@ -40,7 +41,11 @@ titleStore.title = data.value?.title;
<VaButtonGroup>
<VaButton
icon="arrow_back"
:to="$localePath(`/hunt/${sluggy(data?.hunt || huntSlug!)}`)"
:to="
$localePath(
`/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
)
"
>Back to Hunt</VaButton
>
<VaButton icon="replay" color="success" @click="refresh">Refresh</VaButton>
@@ -54,7 +59,7 @@ titleStore.title = data.value?.title;
<div v-if="data">
<p>{{ data.points }} Points</p>
<p v-if="data.extraPoints">{{ data.extraPoints }} Extra points</p>
<p v-if="data.extraText">Extra: {{ data.extraText }}</p>
<p v-if="hasKey(data, 'extraText')">Extra: {{ tKey(data, 'extraText') }}</p>
</div>
<div v-if="data && data.answers.length > 0">
<VaAccordion multiple stateful>
app/pages/hunt/[huntSlug]/[questSlug]/index.vue
+34 -17
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import ClickableImage from '~/components/ClickableImage.vue';
import { useI18nKey } from '~/composables/useI18nKey';
import { useTitleStore } from '~/stores/title';
import { fullDate } from '~~/server/utils/date';
@@ -12,7 +13,8 @@ const app = useNuxtApp();
const { user } = useUserSession();
const { huntSlug, questSlug } = app.$slugData;
const { t, d } = useI18n();
const { t, d, locale } = useI18n();
const { tKey, hasKey, tSluggy } = useI18nKey();
const titleStore = useTitleStore();
@@ -20,13 +22,18 @@ const { data, pending, refresh, error } = await useFetch(
`/api/quest/${questSlug?.id}`
);
titleStore.title = data.value?.title;
titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
useHead({
title: t('layouts.title', {
title:
[
data.value?.title || questSlug?.name,
data.value?.hunt?.name || huntSlug?.name
hasKey(data.value, 'title')
? tKey(data.value, 'title').value
: questSlug?.name,
hasKey(data.value?.hunt, 'name')
? tKey(data.value?.hunt, 'name').value
: huntSlug?.name
]
.filter((s) => s && s?.length > 0)
.join(' | ') || t('layouts.default_tile')
@@ -52,6 +59,7 @@ async function submit() {
submitError.value = '';
const body = new FormData();
body.set('lang', locale.value);
if (data.value?.answer?.updatedAt) {
body.set('updatedAt', data.value?.answer?.updatedAt);
@@ -100,7 +108,11 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
<VaButtonGroup>
<VaButton
icon="arrow_back"
:to="$localePath(`/hunt/${sluggy(data?.hunt || huntSlug!)}`)"
:to="
$localePath(
`/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
)
"
>Back to Hunt</VaButton
>
<VaButton
@@ -118,7 +130,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
color="danger"
:to="
$localePath(
`/hunt/${sluggy(data?.hunt || huntSlug!)}/${sluggy(data || questSlug)}/admin`
`/hunt/${data?.hunt ? tSluggy(data.hunt).value : sluggy(huntSlug!)}/${data ? tSluggy(data).value : sluggy(questSlug!)}}/admin`
)
"
>Admin</VaButton
@@ -138,19 +150,21 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
<ClickableImage
v-if="data?.picture"
:src="data?.picture?.url"
:title="data?.title || questSlug?.name || ''"
:title="(data ? tKey(data, 'title').value : questSlug?.name) || ''"
/>
<VaCardContent>
<div class="flex flex-col gap-4">
<p class="text-lg">{{ data.description }}</p>
<p v-if="data.question" class="text-xl font-bold">
{{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
<p class="text-lg">{{ tKey(data, 'description') }}</p>
<p v-if="hasKey(data, 'question')" class="text-xl font-bold">
{{ data.textRequired ? '❓' : '❔' }}:
{{ tKey(data, 'question') }}
</p>
<p v-if="data.question">
<p v-if="hasKey(data, 'question')">
🖋: {{ t(`enums.text_type.${data.textType}`) }}
</p>
<p v-if="data.extraText">
<span class="uppercase">Extra points:</span> {{ data.extraText }}
<p v-if="hasKey(data, 'extraText')">
<span class="uppercase">Extra points:</span>
{{ tKey(data, 'extraText') }}
</p>
</div>
</VaCardContent>
@@ -166,7 +180,10 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
{{ d(data.answer.review.updatedAt, fullDate) }}</span
>
</p>
<div class="flex max-h-[60dvh] flex-col gap-2 overflow-y-auto pr-4">
<div
class="flex max-h-[60dvh] flex-col gap-2 overflow-y-auto pr-4"
v-if="data.answer.review.review"
>
<p
v-for="(line, i) in data.answer.review.review.split('\n')"
:key="i"
@@ -186,9 +203,9 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
<VaCardContent>
<div class="flex flex-col gap-4">
<VaInput
:label="data.question"
:label="tKey(data, 'question').value"
:disabled="uploading || data.answer?.final"
v-if="data.question"
v-if="hasKey(data, 'question')"
placeholder="Your answer"
:required-mark="data.textRequired"
v-model="answer"
@@ -198,7 +215,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
:type="textType[data.textType]"
:messages="[
t(`enums.text_type.${data.textType}`),
data.textRequired ? 'Required Answer' : undefined
data.textRequired ? 'Required Answer' : ''
]"
>
<template v-if="data.textUnit" #appendInner>
app/pages/hunt/[huntSlug]/admin.vue
+26 -8
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import superjson, { type SuperJSONResult } from 'superjson';
import { useI18nKey } from '~/composables/useI18nKey';
import { useTitleStore } from '~/stores/title';
import { fullDate } from '~~/server/utils/date';
@@ -11,6 +12,7 @@ const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t, d } = useI18n();
const { tKey, hasKey } = useI18nKey();
const router = useRouter();
const { confirm } = useModal();
@@ -36,7 +38,7 @@ const formData = useCloned(data, {
useHead({
title: t('layouts.title', {
title: data.value?.name || name
title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
})
});
@@ -46,7 +48,7 @@ watch(loggedIn, (isLoggedIn) => {
}
});
titleStore.title = data.value?.name;
titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
const loading = ref(false);
@@ -114,6 +116,7 @@ async function kick(member: {
init({
title: 'Error while kicking',
color: 'danger',
// @ts-expect-error weird error stuff
message: e?.message || e?.statusMessage || t(parseError(e))
});
}
@@ -143,6 +146,7 @@ async function addUser() {
init({
title: 'Error while adding',
color: 'danger',
// @ts-expect-error weird error stuff
message: e?.message || e?.statusMessage || t(parseError(e))
});
}
@@ -157,17 +161,31 @@ async function addUser() {
<h1>admin</h1>
<VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
<VaInput
label="Name"
v-model="formData.cloned.value.name"
label="Name DE"
v-model="formData.cloned.value.name_de"
clearable
:clear-value="data.name"
:clear-value="data.name_de"
clearable-icon="replay"
/>
<VaInput
label="Name EN"
v-model="formData.cloned.value.name_en"
clearable
:clear-value="data.name_en"
clearable-icon="replay"
/>
<VaTextarea
label="Description"
v-model="formData.cloned.value.description"
label="Description DE"
v-model="formData.cloned.value.description_de"
clearable
:clear-value="data.description"
:clear-value="data.description_de"
clearable-icon="replay"
/>
<VaTextarea
label="Description EN"
v-model="formData.cloned.value.description_en"
clearable
:clear-value="data.description_en"
clearable-icon="replay"
/>
<VaCheckbox label="Virtual" v-model="formData.cloned.value.virtual" />
app/pages/hunt/[huntSlug]/diashow.vue
+3 -2
View File
@@ -7,13 +7,14 @@ definePageMeta({
const app = useNuxtApp();
const { loggedIn } = useUserSession();
const { t } = useI18n();
const { tKey } = useI18nKey();
const { name, id } = app.$slugData.huntSlug!;
const titleStore = useTitleStore();
type Picture = {
quest: { id: number; title: string };
quest: { id: number; title_de: string; title_en: string };
team: {
name: string;
id: number;
@@ -81,7 +82,7 @@ titleStore.title = data.value?.name;
<p
class="absolute top-2 mx-auto rounded bg-gray-200/75 px-2 py-1 text-center text-xl font-bold"
>
{{ item.quest.title }} — {{ item.team.name }} —
{{ tKey(item.quest, 'title') }} — {{ item.team.name }} —
{{ item.picture.creator.name }}
</p></template
></VaCarousel
app/pages/hunt/[huntSlug]/index.vue
+27 -16
View File
@@ -5,8 +5,8 @@ import { fullDate } from '~~/server/utils/date';
const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t, d } = useI18n();
const { tKey, hasKey, tSluggy } = useI18nKey();
const { name, id } = app.$slugData.huntSlug!;
@@ -18,13 +18,13 @@ const hideAnswers = ref(true);
useHead({
title: t('layouts.title', {
title: data.value?.name || name
title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
})
});
watch(loggedIn, () => refresh());
titleStore.title = data.value?.name;
titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
async function invite() {
if (!data.value?.ownTeam) {
@@ -34,7 +34,7 @@ async function invite() {
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': `Join team ${data.value.ownTeam.name} with code "${data.value.ownTeam.password}" on hunt "${data.value.name || name}"!`
'text/plain': `Join team ${data.value.ownTeam.name} with code "${data.value.ownTeam.password}" on hunt "${data.value ? tKey(data.value, 'name').value : name}"!`
};
const clipboardItem = new ClipboardItem(clipboardItemData);
await navigator.clipboard.write([clipboardItem]);
@@ -43,7 +43,7 @@ async function invite() {
<template>
<h1 class="text-2xl">
{{ data?.name || name }}
{{ data ? tKey(data, 'name') : name }}
<VaChip v-if="data?.totalScore" class="float-right" color="success"
>Total points: {{ data!!.totalScore }}</VaChip
@@ -58,40 +58,43 @@ async function invite() {
v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
color="success"
icon="leaderboard"
:to="$localePath(`/hunt/${sluggy(data)}/showcase`)"
:to="$localePath(`/hunt/${tSluggy(data).value}/showcase`)"
>Showcase</VaButton
>
<VaButton
v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
color="success"
icon="collections"
:to="$localePath(`/hunt/${sluggy(data)}/diashow`)"
:to="$localePath(`/hunt/${tSluggy(data).value}/diashow`)"
>Diashow</VaButton
>
<VaButton
v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
color="success"
icon="auto_awesome_mosaic"
:to="$localePath(`/hunt/${sluggy(data)}/pictures`)"
:to="$localePath(`/hunt/${tSluggy(data).value}/pictures`)"
>All pictures</VaButton
>
<VaButton
v-if="data?.isMember"
color="danger"
icon="edit"
:to="$localePath(`/hunt/${sluggy(data)}/admin`)"
:to="$localePath(`/hunt/${tSluggy(data).value}/admin`)"
>Admin</VaButton
><VaButton
v-if="data?.isMember"
color="danger"
icon="groups"
:to="$localePath(`/hunt/${sluggy(data)}/teams`)"
:to="$localePath(`/hunt/${tSluggy(data).value}/teams`)"
>Teams</VaButton
>
</div>
<div v-if="data">
<div class="flex flex-col gap-2">
<p v-for="(line, i) in data.description.split('\n')" :key="i">
<p
v-for="(line, i) in tKey(data, 'description').value.split('\n')"
:key="i"
>
{{ line }}
</p>
</div>
@@ -99,7 +102,7 @@ async function invite() {
v-if="data?.picture"
:src="data?.picture?.url"
class="h-48"
:title="data?.name || name"
:title="data ? tKey(data, 'name').value : name"
/>
<p v-if="data.start">
Start:
@@ -142,7 +145,7 @@ async function invite() {
<VaButton
color="info"
icon="login"
:to="$localePath(`/login?to=/hunt/${sluggy(data)}`)"
:to="$localePath(`/login?to=/hunt/${tSluggy(data).value}`)"
>Login first</VaButton
>
</VaCardActions>
@@ -180,7 +183,7 @@ async function invite() {
<template #loader> <VaProgressCircle indeterminate /> </template
></VaImage>
<VaCardContent>
<p class="line-clamp-2 h-12">{{ quest.description }}</p>
<p class="line-clamp-2 h-12">{{ tKey(quest, 'description') }}</p>
<div v-if="!hideAnswers && quest.answer?.text">
<VaDivider />
@@ -189,7 +192,11 @@ async function invite() {
</VaCardContent>
<VaCardActions>
<VaButton
:to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
:to="
$localePath(
`/hunt/${tSluggy(data).value}/${tSluggy(quest).value}`
)
"
color="primary"
icon="rate_review"
class="flex-grow"
@@ -199,7 +206,11 @@ async function invite() {
v-if="data.isMember"
color="danger"
:icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
:to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}/admin`)"
:to="
$localePath(
`/hunt/${tSluggy(data).value}/${tSluggy(quest).value}/admin`
)
"
>Admin ({{ quest.unreviewed || 0 }} unreviewed)</VaButton
>
</VaCardActions>
app/pages/hunt/[huntSlug]/pictures.vue
+6 -5
View File
@@ -7,13 +7,14 @@ definePageMeta({
const app = useNuxtApp();
const { loggedIn } = useUserSession();
const { t } = useI18n();
const { tKey, hasKey } = useI18nKey();
const { name, id } = app.$slugData.huntSlug!;
const titleStore = useTitleStore();
type Picture = {
quest: { id: number; title: string };
quest: { id: number; title_de: string; title_en: string };
team: {
name: string;
id: number;
@@ -47,7 +48,7 @@ const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
const cols = pictures.reduce(
(c, p, i) => {
c[i % 4].push(p);
c[i % 4]!.push(p);
return c;
},
new Array(4).fill(0).map(() => [] as Picture[])
@@ -59,14 +60,14 @@ const { data, refresh, error } = await useFetch(`/api/hunt/${id}/diashow`, {
useHead({
title: t('layouts.two_title', {
title: data.value?.name || name,
title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name,
subtitle: 'Diashow'
})
});
watch(loggedIn, () => refresh());
titleStore.title = data.value?.name;
titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
</script>
<template>
@@ -81,7 +82,7 @@ titleStore.title = data.value?.name;
:key="pic.picture.url"
:src="pic.picture.url"
class="h-auto max-w-full rounded-lg"
:title="`${pic.quest.title} — ${pic.team.name} — ${pic.picture.creator.name}`"
:title="`${tKey(pic.quest, 'title')} — ${pic.team.name} — ${pic.picture.creator.name}`"
/>
</div>
<VaAlert
app/pages/hunt/[huntSlug]/showcase.vue
+13 -4
View File
@@ -7,6 +7,7 @@ definePageMeta({
layout: 'full'
});
const { t, d } = useI18n();
const { tKey, hasKey, tSluggy } = useI18nKey();
const app = useNuxtApp();
const { name, id } = app.$slugData.huntSlug!;
@@ -52,7 +53,9 @@ const columns = leaderboardColumns.map((c) =>
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-9xl font-bold">{{ data.name || name }}</h1>
<h1 class="text-9xl font-bold">
{{ hasKey(data, 'name') ? tKey(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, fullDate) }}</span
><span v-if="data.start && data.end"> – </span
@@ -94,11 +97,17 @@ const columns = leaderboardColumns.map((c) =>
/>
</div>
</section>
<section v-for="quest in data.quests" :key="quest.id" :id="sluggy(quest)">
<section
v-for="quest in data.quests"
:key="quest.id"
:id="tSluggy(quest).value"
>
<div class="flex flex-col gap-4 bg-yellow-100 p-4">
<div class="my-8 flex w-full flex-row justify-around">
<h3 class="text-3xl">{{ quest.title }}</h3>
<p class="text-xl font-bold">{{ quest.question }}</p>
<h3 class="text-3xl">{{ tKey(quest, 'title') }}</h3>
<p class="text-xl font-bold" v-if="hasKey(quest, 'question')">
{{ tKey(quest, 'question') }}
</p>
<p v-if="quest.textSolution" class="text-3xl">
{{ quest.textSolution }}
</p>
app/pages/hunt/[huntSlug]/teams.vue
+3 -2
View File
@@ -10,6 +10,7 @@ const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t } = useI18n();
const { tKey, hasKey } = useI18nKey();
const router = useRouter();
const { name, id } = app.$slugData.huntSlug!;
@@ -21,7 +22,7 @@ const { data, pending, refresh } = await useFetch(
useHead({
title: t('layouts.title', {
title: data.value?.name || name
title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
})
});
@@ -31,7 +32,7 @@ watch(loggedIn, (isLoggedIn) => {
}
});
titleStore.title = data.value?.name;
titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
type Data = NonNullable<(typeof data)['value']>;
export type Team = Data['teams'][number];
app/pages/index.vue
+12 -10
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { useI18nKey } from '~/composables/useI18nKey';
import { fullDate } from '~~/server/utils/date';
const { loggedIn } = useUserSession();
const { data, pending, refresh } = await useFetch('/api/home');
const { t, d } = useI18n();
const { tKey, tSluggy } = useI18nKey();
watch(loggedIn, () => refresh());
</script>
@@ -23,18 +25,18 @@ watch(loggedIn, () => refresh());
v-for="hunt in data.own"
:key="hunt.id"
stripe
:to="$localePath(`/hunt/${sluggy(hunt)}`)"
:to="$localePath(`/hunt/${tSluggy(hunt).value}`)"
>
<VaCardTitle>{{ hunt.name }}</VaCardTitle>
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
<ClickableImage
v-if="hunt.picture"
:src="hunt.picture?.url"
:title="hunt.name"
:title="tKey(hunt, 'name').value"
/>
<VaCardContent>
<h3 class="text-xl">{{ hunt.name }}</h3>
{{ hunt.description }}
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
{{ tKey(hunt, 'description') }}
<VaDivider />
<div class="flex flex-col gap-2">
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
@@ -78,17 +80,17 @@ watch(loggedIn, () => refresh());
<VaCard
v-for="hunt in data.others"
:key="hunt.id"
:to="$localePath(`/hunt/${sluggy(hunt)}`)"
:to="$localePath(`/hunt/${tSluggy(hunt).value}`)"
>
<VaCardTitle>{{ hunt.name }}</VaCardTitle>
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
<ClickableImage
v-if="hunt.picture"
:src="hunt.picture?.url"
:title="hunt.name"
:title="tKey(hunt, 'name').value"
/>
<VaCardContent>
<h3 class="text-xl">{{ hunt.name }}</h3>
{{ hunt.description }}
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
{{ tKey(hunt, 'description') }}
<VaDivider />
<div class="flex flex-col gap-2">
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
app/pages/profile.vue
+9 -6
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { useI18nKey } from '~/composables/useI18nKey';
definePageMeta({
middleware: ['auth']
});
@@ -8,6 +10,7 @@ const { t } = useI18n();
const { loggedIn, fetch } = useUserSession();
const localePath = useLocalePath();
const validation = useValidation();
const { tKey, tSluggy } = useI18nKey();
watch(loggedIn, (isLoggedIn) => {
if (!isLoggedIn) {
router.push(localePath('/login'));
@@ -234,9 +237,8 @@ async function submitPassword() {
</VaCard>
<VaCard stripe stripe-color="primary">
<VaCardTitle>Uploaded pictures</VaCardTitle>
<VaCardContent>
<VaCardContent v-if="data && data.uploadedFiles.length > 0">
<VaCarousel
v-if="data"
stateful
:items="data.uploadedFiles"
arrows
@@ -248,22 +250,23 @@ async function submitPassword() {
<template #default="{ item }"
><ClickableImage
:src="item.url"
:title="`${item.answer.quest.title} — ${item.answer.quest.hunt.name}`"
:title="`${tKey(item.answer.quest, 'title').value} — ${tKey(item.answer.quest.hunt, 'name').value}`"
/>
<NuxtLink
:to="
$localePath(
`/hunt/${sluggy(item.answer.quest.hunt)}/${sluggy(item.answer.quest)}`
`/hunt/${tSluggy(item.answer.quest.hunt).value}/${tSluggy(item.answer.quest).value}`
)
"
class="absolute top-2 mx-auto rounded bg-gray-200/75 px-2 py-1 text-center text-xl hover:underline"
>
{{ item.answer.quest.title }} —
{{ item.answer.quest.hunt.name }}
{{ tKey(item.answer.quest, 'title') }} —
{{ tKey(item.answer.quest.hunt, 'name') }}
</NuxtLink></template
>
</VaCarousel>
</VaCardContent>
<VaCardContent v-else> No pictures uploaded yet. </VaCardContent>
</VaCard>
</div>
</template>
nuxt.config.ts
+1 -1
View File
@@ -74,4 +74,4 @@ export default defineNuxtConfig({
}
}
}
});
});
package.json
+1
View File
@@ -10,6 +10,7 @@
"postinstall": "nuxt prepare",
"format": "prettier --write .",
"check": "prettier --check .",
"test": "bun test",
"dev:up": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d",
"dev:down": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml down"
},
prisma/migrations/20250820190359_add_i18n_to_models/migration.sql
+57
View File
@@ -0,0 +1,57 @@
-- AlterTable
ALTER TABLE "public"."Hunt"
ADD COLUMN "description_de" TEXT NOT NULL DEFAULT '',
ADD COLUMN "description_en" TEXT NOT NULL DEFAULT '',
ADD COLUMN "name_de" TEXT NOT NULL DEFAULT '',
ADD COLUMN "name_en" TEXT NOT NULL DEFAULT '';
update "public"."Hunt"
set description_en = description,
description_de = description,
name_en = name,
name_de = name
where description_de = '';
ALTER TABLE "public"."Hunt"
DROP COLUMN "description",
DROP COLUMN "name",
ALTER COLUMN name_de drop default,
ALTER COLUMN name_en drop default,
ALTER COLUMN description_de drop default,
ALTER COLUMN description_en drop default;
-- AlterTable
ALTER TABLE "public"."HuntQuest"
ADD COLUMN "description_de" TEXT NOT NULL DEFAULT '',
ADD COLUMN "description_en" TEXT NOT NULL DEFAULT '',
ADD COLUMN "extraText_de" TEXT,
ADD COLUMN "extraText_en" TEXT,
ADD COLUMN "question_de" TEXT,
ADD COLUMN "question_en" TEXT,
ADD COLUMN "title_de" TEXT NOT NULL DEFAULT '',
ADD COLUMN "title_en" TEXT NOT NULL DEFAULT '';
update "public"."HuntQuest"
set description_en = description,
description_de = description,
title_en = title,
title_de = title,
"extraText_en" = "extraText",
"extraText_de" = "extraText",
question_en = question,
question_de = question
where description_de = '';
ALTER TABLE "public"."HuntQuest"
DROP COLUMN "description",
DROP COLUMN "title",
DROP COLUMN question,
DROP COLUMN "extraText",
ALTER COLUMN title_de drop default,
ALTER COLUMN title_en drop default,
ALTER COLUMN description_de drop default,
ALTER COLUMN description_en drop default;
-- AlterTable
ALTER TABLE "public"."QuestAnswer"
ADD COLUMN "lang" CHAR(2) NOT NULL DEFAULT 'de';
prisma/schema.prisma
+20 -12
View File
@@ -64,9 +64,11 @@ model File {
}
model Hunt {
id Int @id @default(autoincrement())
name String
description String
id Int @id @default(autoincrement())
name_en String
name_de String
description_en String
description_de String
virtual Boolean @default(false)
start DateTime? @db.Timestamptz(3)
@@ -154,12 +156,15 @@ enum TextType {
}
model HuntQuest {
id Int @id @default(autoincrement())
title String
description String @default("")
question String?
location String?
locationLink String?
id Int @id @default(autoincrement())
title_en String
title_de String
description_en String @default("")
description_de String @default("")
question_en String?
question_de String?
location String?
locationLink String?
picture File? @relation(fields: [pictureId], references: [id], onUpdate: Cascade, onDelete: Cascade)
pictureId Int?
@@ -172,9 +177,10 @@ model HuntQuest {
textUnit String?
textSolution String?
points Int @default(10) @db.SmallInt
extraPoints Int? @db.SmallInt
extraText String?
points Int @default(10) @db.SmallInt
extraPoints Int? @db.SmallInt
extraText_en String?
extraText_de String?
hunt Hunt @relation(fields: [huntId], references: [id], onUpdate: Cascade, onDelete: Cascade)
huntId Int
@@ -194,6 +200,8 @@ model QuestAnswer {
lon Decimal? @db.Decimal(10, 8)
final Boolean @default(false)
lang String @default("de") @db.Char(2)
team HuntTeam @relation(fields: [teamId], references: [id], onUpdate: Cascade, onDelete: Cascade)
teamId Int
prisma/seed/hunt.ts
+40 -18
View File
@@ -110,8 +110,10 @@ async function main() {
}
},
data: {
name: 'Bremer Stadtrallye!',
description: 'DIE Rallye durch Bremen!',
name_de: 'Bremer Stadtrallye!',
name_en: 'Bremer Stadtrallye!',
description_de: 'DIE Rallye durch Bremen!',
description_en: 'THE Rallye trough Bremen!',
start: new Date('2025-08-23T10:00:00.000Z'),
end: new Date('2025-08-30T10:00:00.000Z'),
allowJoin: true,
@@ -120,9 +122,12 @@ async function main() {
quests: {
create: [
{
title: 'MOIN!',
description: 'Finde das größte MOIN',
question: 'Wo steht es?',
title_de: 'MOIN!',
title_en: 'MOIN!',
description_de: 'Finde das größte MOIN',
description_en: 'Find the largest MOIN',
question_de: 'Wo steht es?',
question_en: 'Where is it?',
order: 0,
optional: false,
pictureRequired: true,
@@ -132,12 +137,18 @@ async function main() {
points: 10
},
{
title: 'Die Musikanten',
description:
title_de: 'Die Musikanten',
title_en: 'The Musikanten',
description_de:
'Dort wo die vier Bremer Tiere musizieren, müsst ihr ihre Beine anfassen!',
question: 'Wie viele Beine haben die Musikanten zusammen?',
extraText:
'Mehr Punkte, je mehr unterschiedliche Beine ihre berührt!',
description_en:
'Where the four Bremen music animals are, you have to touch their legs!',
question_de: 'Wie viele Beine haben die Musikanten zusammen?',
question_en: 'How many legs do the musicians have altogether?',
extraText_de:
'Mehr Punkte, je mehr unterschiedliche Beine ihr berührt!',
extraText_en:
'The more different legs you touch, the more points you get!',
points: 10,
extraPoints: 5,
pictureRequired: true,
@@ -148,32 +159,43 @@ async function main() {
order: 1
},
{
title: 'Tolle Aussicht',
description:
title_de: 'Tolle Aussicht',
title_en: 'Great view',
description_de:
'Mache ein Bild aus einem Gebäude der Hochschule, von so weit oben wie möglich!',
description_en:
'Take a picture of a university building from as high up as possible!',
points: 10,
extraPoints: 10,
extraText:
extraText_de:
'Wenn ihr das einzige Team in diesem Gebäude/Standort oder die Höchsten wart!',
extraText_en:
'If you were the only team in that building/location or on the highest floor!',
optional: false,
pictureRequired: true,
textRequired: false,
question: 'In welchem Gebäude und Stockwerk wart ihr?',
question_de: 'In welchem Gebäude und Stockwerk wart ihr?',
question_en: 'Which building and floor were you in?',
textType: 'TEXT',
order: 2
},
{
title: 'Einfach mal abhauen',
description:
title_de: 'Einfach mal abhauen',
title_en: 'Just get away',
description_de:
'Fahrt so weit ihr wollt und macht ein Foto vom Haltestellenschild!',
question: 'An welcher Haltestelle wart ihr?',
description_en:
'Drive as far as you want and take a photo of the bus stop sign!',
question_de: 'An welcher Haltestelle wart ihr?',
question_en: 'Which stop were you at?',
order: 3,
pictureRequired: true,
textRequired: true,
textType: 'TEXT',
points: 3,
extraPoints: 30,
extraText: 'Je weiter weg'
extraText_de: 'Je weiter weg',
extraText_en: 'The further away'
}
]
},
server/api/admin/hunt/[huntId]/index.get.ts
+4 -2
View File
@@ -37,8 +37,10 @@ export default defineEventHandler(async (event) => {
},
select: {
id: true,
name: true,
description: true,
name_de: true,
name_en: true,
description_de: true,
description_en: true,
virtual: true,
start: true,
end: true,
server/api/admin/hunt/[huntId]/index.post.ts
+4 -2
View File
@@ -19,8 +19,10 @@ export default defineEventHandler(async (event) => {
event,
z
.object({
name: z.string().min(1).max(256).trim(),
description: z.string().min(1).max(1000).trim(),
name_de: z.string().min(1).max(256).trim(),
name_en: z.string().min(1).max(256).trim(),
description_de: z.string().min(1).max(1000).trim(),
description_en: z.string().min(1).max(1000).trim(),
virtual: z.boolean(),
start: z.iso.datetime(),
end: z.iso.datetime(),
server/api/admin/hunt/[huntId]/teams.get.ts
+2 -1
View File
@@ -36,7 +36,8 @@ export default defineEventHandler(async (event) => {
},
select: {
id: true,
name: true,
name_de: true,
name_en: true,
teams: {
omit: {
huntId: true,
server/api/admin/quest/[questId]/index.get.ts
+3 -1
View File
@@ -43,7 +43,8 @@ export default defineEventHandler(async (event) => {
include: {
hunt: {
select: {
name: true,
name_de: true,
name_en: true,
id: true
}
},
@@ -53,6 +54,7 @@ export default defineEventHandler(async (event) => {
text: true,
final: true,
updatedAt: true,
lang: true,
team: {
select: {
id: true,
server/api/admin/team/[teamId]/kick.post.ts
+1 -1
View File
@@ -26,7 +26,7 @@ export default defineEventHandler(async (event) => {
);
try {
await prisma.teamMember.delete({
await prisma.teamMember.delete({
where: {
memberId_teamId: {
memberId: userId,
server/api/auth/profile.get.ts
+4 -2
View File
@@ -18,11 +18,13 @@ export default defineEventHandler(async (event) => {
quest: {
select: {
id: true,
title: true,
title_de: true,
title_en: true,
hunt: {
select: {
id: true,
name: true
name_de: true,
name_en: true
}
}
}
server/api/home.get.ts
+8 -4
View File
@@ -7,8 +7,10 @@ async function getOwnHunts(userId: number | undefined) {
return prisma.hunt.findMany({
select: {
id: true,
name: true,
description: true,
name_de: true,
name_en: true,
description_de: true,
description_en: true,
picture: {
select: {
url: true
@@ -60,8 +62,10 @@ export default defineEventHandler(async (event) => {
const others = await prisma.hunt.findMany({
select: {
id: true,
name: true,
description: true,
name_de: true,
name_en: true,
description_de: true,
description_en: true,
picture: {
select: {
url: true
server/api/hunt/[huntId]/diashow.get.ts
+4 -2
View File
@@ -48,11 +48,13 @@ export default defineEventHandler(async (event) => {
},
select: {
id: true,
name: true,
name_de: true,
name_en: true,
quests: {
select: {
id: true,
title: true,
title_de: true,
title_en: true,
answers: {
select: {
team: {
server/api/hunt/[huntId]/index.get.ts
+8 -4
View File
@@ -19,7 +19,10 @@ export default defineEventHandler(async (event) => {
},
select: {
id: true,
name: true,
name_de: true,
name_en: true,
description_de: true,
description_en: true,
revealAnswers: true,
revealQuests: true,
picture: {
@@ -27,7 +30,6 @@ export default defineEventHandler(async (event) => {
url: true
}
},
description: true,
createdAt: true,
start: true,
end: true,
@@ -80,13 +82,15 @@ export default defineEventHandler(async (event) => {
quests: {
select: {
id: true,
title: true,
title_de: true,
title_en: true,
description_de: true,
description_en: true,
picture: {
select: {
url: true
}
},
description: true,
textRequired: true,
pictureRequired: true,
points: true,
server/api/hunt/[huntId]/showcase.get.ts
+6 -3
View File
@@ -48,7 +48,8 @@ export default defineEventHandler(async (event) => {
},
select: {
id: true,
name: true,
name_de: true,
name_en: true,
start: true,
end: true,
@@ -97,8 +98,10 @@ export default defineEventHandler(async (event) => {
quests: {
select: {
id: true,
title: true,
question: true,
title_de: true,
title_en: true,
description_de: true,
description_en: true,
textSolution: true,
points: true,
extraPoints: true,
server/api/quest/[questId]/index.get.ts
+10 -5
View File
@@ -18,14 +18,17 @@ export default defineEventHandler(async (event) => {
},
select: {
id: true,
title: true,
description: true,
title_de: true,
title_en: true,
description_de: true,
description_en: true,
picture: {
select: {
url: true
}
},
question: true,
question_de: true,
question_en: true,
optional: true,
pictureRequired: true,
textRequired: true,
@@ -33,11 +36,13 @@ export default defineEventHandler(async (event) => {
textUnit: true,
points: true,
extraPoints: true,
extraText: true,
extraText_de: true,
extraText_en: true,
hunt: {
select: {
id: true,
name: true,
name_de: true,
name_en: true,
revealQuests: true
}
},
server/api/quest/[questId]/submit.post.ts
+9 -4
View File
@@ -89,6 +89,7 @@ export default defineEventHandler(async (event) => {
.object({
updatedAt: z.iso.datetime().optional(),
answer: z.string().optional(),
lang: z.enum(['de', 'en']).default('de'),
image: z
.file()
.mime(['image/png', 'image/jpeg', 'image/jpg'])
@@ -160,7 +161,8 @@ export default defineEventHandler(async (event) => {
memberId: userId,
text: data.answer,
pictureId: file.id,
final: data.final
final: data.final,
lang: data.lang
}
});
} else {
@@ -170,7 +172,8 @@ export default defineEventHandler(async (event) => {
memberId: userId,
questId: quest.id,
text: data.answer,
final: data.final
final: data.final,
lang: data.lang
},
select: { id: true }
});
@@ -194,7 +197,8 @@ export default defineEventHandler(async (event) => {
data: {
memberId: userId,
text: data.answer,
final: data.final
final: data.final,
lang: data.lang
}
});
} else {
@@ -204,7 +208,8 @@ export default defineEventHandler(async (event) => {
memberId: userId,
questId: quest.id,
text: data.answer,
final: data.final
final: data.final,
lang: data.lang
}
});
}
shared/utils/flag.ts
+8
View File
@@ -0,0 +1,8 @@
// Source: https://dev.to/jorik/country-code-to-flag-emoji-a21
export function getFlagEmoji(countryCode: string) {
const codePoints = countryCode
.toUpperCase()
.split('')
.map((char) => 127397 + char.charCodeAt(0));
return String.fromCodePoint(...codePoints);
}