Implementiere i18n für Frontend, Admin und Datenbank

2025-11-28 15:36:06 +01:00
parent 9df9a808bf
commit 771d0d06f3
37 changed files with 3717 additions and 560 deletions
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,138 @@
+import Game from '@/components/Game';
+import NewsSection from '@/components/NewsSection';
+import OnboardingTour from '@/components/OnboardingTour';
+import LanguageSwitcher from '@/components/LanguageSwitcher';
+import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
+import { Link } from '@/lib/navigation';
+import { PrismaClient } from '@prisma/client';
+import { getTranslations } from 'next-intl/server';
+import { getLocalizedValue } from '@/lib/i18n';
+
+export const dynamic = 'force-dynamic';
+
+const prisma = new PrismaClient();
+
+export default async function Home({
+    params
+}: {
+    params: { locale: string };
+}) {
+    const { locale } = await params;
+    const t = await getTranslations('Home');
+    const tNav = await getTranslations('Navigation');
+
+    const dailyPuzzle = await getOrCreateDailyPuzzle(null); // Global puzzle
+    const genres = await prisma.genre.findMany({
+        where: { active: true },
+    });
+    const specials = await prisma.special.findMany();
+
+    // Sort in memory
+    genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+    specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+
+    const now = new Date();
+
+    const activeSpecials = specials.filter(s => {
+        const isStarted = !s.launchDate || s.launchDate <= now;
+        const isEnded = s.endDate && s.endDate < now;
+        return isStarted && !isEnded;
+    });
+
+    const upcomingSpecials = specials.filter(s => {
+        return s.launchDate && s.launchDate > now;
+    });
+
+    return (
+        <>
+            <div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
+                    <div style={{ flex: 1 }} />
+                    <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center', flex: 2 }}>
+                        <div className="tooltip">
+                            <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link>
+                            <span className="tooltip-text">{t('globalTooltip')}</span>
+                        </div>
+
+                        {/* Genres */}
+                        {genres.map(g => {
+                            const name = getLocalizedValue(g.name, locale);
+                            const subtitle = getLocalizedValue(g.subtitle, locale);
+                            return (
+                                <div key={g.id} className="tooltip">
+                                    <Link href={`/${name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
+                                        {name}
+                                    </Link>
+                                    {subtitle && <span className="tooltip-text">{subtitle}</span>}
+                                </div>
+                            );
+                        })}
+
+                        {/* Separator if both exist */}
+                        {genres.length > 0 && activeSpecials.length > 0 && (
+                            <span style={{ color: '#d1d5db' }}>|</span>
+                        )}
+
+                        {/* Active Specials */}
+                        {activeSpecials.map(s => {
+                            const name = getLocalizedValue(s.name, locale);
+                            const subtitle = getLocalizedValue(s.subtitle, locale);
+                            return (
+                                <div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                                    <div className="tooltip">
+                                        <Link
+                                            href={`/special/${name}`}
+                                            style={{
+                                                color: '#be185d', // Pink-700
+                                                textDecoration: 'none',
+                                                fontWeight: '500'
+                                            }}
+                                        >
+                                            ★ {name}
+                                        </Link>
+                                        {subtitle && <span className="tooltip-text">{subtitle}</span>}
+                                    </div>
+                                    {s.curator && (
+                                        <span style={{ fontSize: '0.75rem', color: '#666' }}>
+                                            {t('curatedBy')} {s.curator}
+                                        </span>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* Upcoming Specials */}
+                    {upcomingSpecials.length > 0 && (
+                        <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+                            {t('comingSoon')}: {upcomingSpecials.map(s => {
+                                const name = getLocalizedValue(s.name, locale);
+                                return (
+                                    <span key={s.id} style={{ marginLeft: '0.5rem' }}>
+                                        ★ {name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString(locale, {
+                                            day: '2-digit',
+                                            month: '2-digit',
+                                            year: 'numeric',
+                                            timeZone: process.env.TZ
+                                        }) : ''})
+                                        {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>{t('curatedBy')} {s.curator}</span>}
+                                    </span>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+                <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
+                    <LanguageSwitcher />
+                </div>
+            </div>
+
+            <div id="tour-news">
+                <NewsSection locale={locale} />
+            </div>
+
+            <Game dailyPuzzle={dailyPuzzle} genre={null} />
+            <OnboardingTour />
+        </>
+    );
+}