Implementiere i18n für Frontend, Admin und Datenbank

This commit is contained in:
Hördle Bot
2025-11-28 15:36:06 +01:00
parent 9df9a808bf
commit 771d0d06f3
37 changed files with 3717 additions and 560 deletions

View File

@@ -0,0 +1,125 @@
import Game from '@/components/Game';
import NewsSection from '@/components/NewsSection';
import { getOrCreateSpecialPuzzle } from '@/lib/dailyPuzzle';
import { Link } from '@/lib/navigation';
import { PrismaClient } from '@prisma/client';
import { getLocalizedValue } from '@/lib/i18n';
import { getTranslations } from 'next-intl/server';
export const dynamic = 'force-dynamic';
const prisma = new PrismaClient();
interface PageProps {
params: Promise<{ locale: string; name: string }>;
}
export default async function SpecialPage({ params }: PageProps) {
const { locale, name } = await params;
const decodedName = decodeURIComponent(name);
const tNav = await getTranslations('Navigation');
const allSpecials = await prisma.special.findMany();
const currentSpecial = allSpecials.find(s => getLocalizedValue(s.name, locale) === decodedName);
const now = new Date();
const isStarted = currentSpecial && (!currentSpecial.launchDate || currentSpecial.launchDate <= now);
const isEnded = currentSpecial && (currentSpecial.endDate && currentSpecial.endDate < now);
if (!currentSpecial || !isStarted) {
return (
<div style={{ textAlign: 'center', padding: '2rem' }}>
<h1>Special Not Available</h1>
<p>This special has not launched yet or does not exist.</p>
<Link href="/">{tNav('home')}</Link>
</div>
);
}
if (isEnded) {
return (
<div style={{ textAlign: 'center', padding: '2rem' }}>
<h1>Special Ended</h1>
<p>This special event has ended.</p>
<Link href="/">{tNav('home')}</Link>
</div>
);
}
// Need to handle getOrCreateSpecialPuzzle with localized name or ID
// Ideally pass ID or full object, but existing function takes name string.
// I'll need to update lib/dailyPuzzle.ts to handle this.
const dailyPuzzle = await getOrCreateSpecialPuzzle(currentSpecial);
const genres = await prisma.genre.findMany({
where: { active: true },
});
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
const specials = allSpecials; // Already fetched
specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
const activeSpecials = specials.filter(s => {
const sStarted = !s.launchDate || s.launchDate <= now;
const sEnded = s.endDate && s.endDate < now;
return sStarted && !sEnded;
});
return (
<>
<div style={{ textAlign: 'center', padding: '1rem', background: '#fce7f3' }}>
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
<Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>{tNav('global')}</Link>
{/* Genres */}
{genres.map(g => {
const gName = getLocalizedValue(g.name, locale);
return (
<Link
key={g.id}
href={`/${gName}`}
style={{
color: '#4b5563',
textDecoration: 'none'
}}
>
{gName}
</Link>
);
})}
{/* Separator if both exist */}
{genres.length > 0 && activeSpecials.length > 0 && (
<span style={{ color: '#d1d5db' }}>|</span>
)}
{/* Specials */}
{activeSpecials.map(s => {
const sName = getLocalizedValue(s.name, locale);
return (
<Link
key={s.id}
href={`/special/${sName}`}
style={{
fontWeight: sName === decodedName ? 'bold' : 'normal',
textDecoration: sName === decodedName ? 'underline' : 'none',
color: sName === decodedName ? '#9d174d' : '#be185d'
}}
>
{sName}
</Link>
);
})}
</div>
</div>
<NewsSection locale={locale} />
<Game
dailyPuzzle={dailyPuzzle}
genre={decodedName}
isSpecial={true}
maxAttempts={dailyPuzzle?.maxAttempts}
unlockSteps={dailyPuzzle?.unlockSteps}
/>
</>
);
}