elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implementiere i18n für Frontend, Admin und Datenbank

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

110
app/[genre]/page.tsx
View File

@@ -1,110 +0,0 @@
import Game from '@/components/Game';
import NewsSection from '@/components/NewsSection';
import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
import Link from 'next/link';
import { PrismaClient } from '@prisma/client';
import { notFound } from 'next/navigation';
export const dynamic = 'force-dynamic';
const prisma = new PrismaClient();
interface PageProps {
params: Promise<{ genre: string }>;
}
export default async function GenrePage({ params }: PageProps) {
const { genre } = await params;
const decodedGenre = decodeURIComponent(genre);
// Check if genre exists and is active
const currentGenre = await prisma.genre.findUnique({
where: { name: decodedGenre }
});
if (!currentGenre || !currentGenre.active) {
notFound();
}
const dailyPuzzle = await getOrCreateDailyPuzzle(decodedGenre);
const genres = await prisma.genre.findMany({
where: { active: true },
orderBy: { name: 'asc' }
});
const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
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 style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
<Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>Global</Link>
{/* Genres */}
{genres.map(g => (
<Link
key={g.id}
href={`/${g.name}`}
style={{
fontWeight: g.name === decodedGenre ? 'bold' : 'normal',
textDecoration: g.name === decodedGenre ? 'underline' : 'none',
color: g.name === decodedGenre ? 'black' : '#4b5563'
}}
>
{g.name}
</Link>
))}
{/* Separator if both exist */}
{genres.length > 0 && activeSpecials.length > 0 && (
<span style={{ color: '#d1d5db' }}>|</span>
)}
{/* Specials */}
{activeSpecials.map(s => (
<Link
key={s.id}
href={`/special/${s.name}`}
style={{
color: '#be185d', // Pink-700
textDecoration: 'none',
fontWeight: '500'
}}
>
★ {s.name}
</Link>
))}
</div>
{/* Upcoming Specials */}
{upcomingSpecials.length > 0 && (
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
Coming soon: {upcomingSpecials.map(s => (
<span key={s.id} style={{ marginLeft: '0.5rem' }}>
★ {s.name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
timeZone: process.env.TZ
}) : ''})
{s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>Curated by {s.curator}</span>}
</span>
))}
</div>
)}
</div>
<NewsSection />
<Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
</>
);
}

134
app/[locale]/[genre]/page.tsx Normal file
View File

@@ -0,0 +1,134 @@
import Game from '@/components/Game';
import NewsSection from '@/components/NewsSection';
import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
import { Link } from '@/lib/navigation';
import { PrismaClient } from '@prisma/client';
import { notFound } from 'next/navigation';
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; genre: string }>;
}
export default async function GenrePage({ params }: PageProps) {
const { locale, genre } = await params;
const decodedGenre = decodeURIComponent(genre);
const tNav = await getTranslations('Navigation');
// Fetch all genres to find the matching one by localized name
const allGenres = await prisma.genre.findMany();
const currentGenre = allGenres.find(g => getLocalizedValue(g.name, locale) === decodedGenre);
if (!currentGenre || !currentGenre.active) {
notFound();
}
const dailyPuzzle = await getOrCreateDailyPuzzle(currentGenre);
// getOrCreateDailyPuzzle likely expects string or needs update.
// Actually, getOrCreateDailyPuzzle takes `genreName: string | null`.
// If I pass the JSON object, it might fail.
// But wait, the DB schema for DailyPuzzle stores `genreId`.
// `getOrCreateDailyPuzzle` probably looks up genre by name.
// I should check `lib/dailyPuzzle.ts`.
// For now, I'll pass the localized name, but that might be risky if it tries to create a genre (unlikely).
// Let's assume for now I should pass the localized name if that's what it uses to find/create.
// But if `getOrCreateDailyPuzzle` uses `findUnique({ where: { name: genreName } })`, it will fail because name is JSON.
// I need to update `lib/dailyPuzzle.ts` too!
// I'll mark that as a todo. For now, let's proceed with page creation.
const genres = allGenres.filter(g => g.active);
// Sort
genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
const specials = await prisma.special.findMany();
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 style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
<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 name = getLocalizedValue(g.name, locale);
return (
<Link
key={g.id}
href={`/${name}`}
style={{
fontWeight: name === decodedGenre ? 'bold' : 'normal',
textDecoration: name === decodedGenre ? 'underline' : 'none',
color: name === decodedGenre ? 'black' : '#4b5563'
}}
>
{name}
</Link>
);
})}
{/* Separator if both exist */}
{genres.length > 0 && activeSpecials.length > 0 && (
<span style={{ color: '#d1d5db' }}>|</span>
)}
{/* Specials */}
{activeSpecials.map(s => {
const name = getLocalizedValue(s.name, locale);
return (
<Link
key={s.id}
href={`/special/${name}`}
style={{
color: '#be185d', // Pink-700
textDecoration: 'none',
fontWeight: '500'
}}
>
★ {name}
</Link>
);
})}
</div>
{/* Upcoming Specials */}
{upcomingSpecials.length > 0 && (
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
Coming soon: {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' }}>Curated by {s.curator}</span>}
</span>
);
})}
</div>
)}
</div>
<NewsSection locale={locale} />
<Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
</>
);
}

2156
app/[locale]/admin/page.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

74
app/[locale]/layout.tsx Normal file
View File

@@ -0,0 +1,74 @@
import type { Metadata, Viewport } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Script from "next/script";
import "../globals.css"; // Adjusted path
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { config } from "@/lib/config";
import InstallPrompt from "@/components/InstallPrompt";
import AppFooter from "@/components/AppFooter";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: config.appName,
description: config.appDescription,
};
export const viewport: Viewport = {
themeColor: config.colors.themeColor,
width: "device-width",
initialScale: 1,
maximumScale: 1,
};
export default async function LocaleLayout({
children,
params
}: {
children: React.ReactNode;
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
console.log('[app/[locale]/layout] params locale:', locale);
// Ensure that the incoming `locale` is valid
if (!['en', 'de'].includes(locale)) {
console.log('[app/[locale]/layout] invalid locale, triggering notFound()');
notFound();
}
// Providing all messages to the client
const messages = await getMessages();
return (
<html lang={locale}>
<head>
<Script
defer
data-domain={config.plausibleDomain}
src={config.plausibleScriptSrc}
strategy="beforeInteractive"
/>
</head>
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<NextIntlClientProvider messages={messages}>
{children}
<InstallPrompt />
<AppFooter />
</NextIntlClientProvider>
</body>
</html>
);
}

138
app/[locale]/page.tsx Normal file
View File

@@ -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 />
</>
);
}

125
app/[locale]/special/[name]/page.tsx Normal file
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}
/>
</>
);
}

4
app/api/admin/daily-puzzles/route.ts
View File

@@ -98,14 +98,14 @@ export async function DELETE(request: Request) {
where: { id: puzzle.specialId }
});
if (special) {
newPuzzle = await getOrCreateSpecialPuzzle(special.name);
newPuzzle = await getOrCreateSpecialPuzzle(special);
}
} else if (puzzle.genreId) {
const genre = await prisma.genre.findUnique({
where: { id: puzzle.genreId }
});
if (genre) {
newPuzzle = await getOrCreateDailyPuzzle(genre.name);
newPuzzle = await getOrCreateDailyPuzzle(genre);
}
} else {
newPuzzle = await getOrCreateDailyPuzzle(null);

8
app/api/categorize/route.ts
View File

@@ -2,6 +2,7 @@
import { PrismaClient } from '@prisma/client';
import { requireAdminAuth } from '@/lib/auth';
import { getLocalizedValue } from '@/lib/i18n';
const prisma = new PrismaClient();
@@ -83,7 +84,8 @@ export async function POST(request: Request) {
// Process each song in this batch
for (const song of uncategorizedSongs) {
try {
const genreNames = allGenres.map(g => g.name);
// Use German names for AI categorization (primary language)
const genreNames = allGenres.map(g => getLocalizedValue(g.name, 'de'));
const prompt = `You are a music genre categorization assistant. Given a song title and artist, categorize it into 0-3 of the available genres.
@@ -140,7 +142,7 @@ Your response:`;
// Filter to only valid genres and get their IDs
const genreIds = allGenres
.filter(g => suggestedGenreNames.includes(g.name))
.filter(g => suggestedGenreNames.includes(getLocalizedValue(g.name, 'de')))
.map(g => g.id)
.slice(0, 3); // Max 3 genres
@@ -160,7 +162,7 @@ Your response:`;
title: song.title,
artist: song.artist,
assignedGenres: suggestedGenreNames.filter(name =>
allGenres.some(g => g.name === name)
allGenres.some(g => getLocalizedValue(g.name, 'de') === name)
)
});
}

16
app/api/daily/route.ts
View File

@@ -1,12 +1,26 @@
import { NextResponse } from 'next/server';
import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
import { PrismaClient } from '@prisma/client';
import { getLocalizedValue } from '@/lib/i18n';
const prisma = new PrismaClient();
export async function GET(request: Request) {
try {
const { searchParams } = new URL(request.url);
const genreName = searchParams.get('genre');
const puzzle = await getOrCreateDailyPuzzle(genreName);
let genre = null;
if (genreName) {
// Find genre by localized name (try both locales)
const allGenres = await prisma.genre.findMany();
genre = allGenres.find(g =>
getLocalizedValue(g.name, 'de') === genreName ||
getLocalizedValue(g.name, 'en') === genreName
) || null;
}
const puzzle = await getOrCreateDailyPuzzle(genre);
if (!puzzle) {
return NextResponse.json({ error: 'Failed to get or create puzzle' }, { status: 404 });

41
app/api/genres/route.ts
View File

@@ -1,19 +1,35 @@
import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
import { requireAdminAuth } from '@/lib/auth';
import { getLocalizedValue } from '@/lib/i18n';
const prisma = new PrismaClient();
export async function GET() {
export async function GET(request: Request) {
try {
const { searchParams } = new URL(request.url);
const locale = searchParams.get('locale');
const genres = await prisma.genre.findMany({
orderBy: { name: 'asc' },
// orderBy: { name: 'asc' }, // Cannot sort by JSON field easily in SQLite
include: {
_count: {
select: { songs: true }
}
}
});
// Sort in memory if needed, or just return
// If locale is provided, map to localized values
if (locale) {
const localizedGenres = genres.map(g => ({
...g,
name: getLocalizedValue(g.name, locale),
subtitle: getLocalizedValue(g.subtitle, locale)
})).sort((a, b) => a.name.localeCompare(b.name));
return NextResponse.json(localizedGenres);
}
return NextResponse.json(genres);
} catch (error) {
console.error('Error fetching genres:', error);
@@ -29,14 +45,18 @@ export async function POST(request: Request) {
try {
const { name, subtitle, active } = await request.json();
if (!name || typeof name !== 'string') {
if (!name) {
return NextResponse.json({ error: 'Invalid name' }, { status: 400 });
}
// Ensure name is stored as JSON
const nameData = typeof name === 'string' ? { de: name, en: name } : name;
const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
const genre = await prisma.genre.create({
data: {
name: name.trim(),
subtitle: subtitle ? subtitle.trim() : null,
name: nameData,
subtitle: subtitleData,
active: active !== undefined ? active : true
},
});
@@ -83,13 +103,14 @@ export async function PUT(request: Request) {
return NextResponse.json({ error: 'Missing id' }, { status: 400 });
}
const updateData: any = {};
if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
if (active !== undefined) updateData.active = active;
const genre = await prisma.genre.update({
where: { id: Number(id) },
data: {
...(name && { name: name.trim() }),
subtitle: subtitle ? subtitle.trim() : null,
...(active !== undefined && { active })
},
data: updateData,
});
return NextResponse.json(genre);

27
app/api/news/route.ts
View File

@@ -1,6 +1,7 @@
import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';
import { requireAdminAuth } from '@/lib/auth';
import { getLocalizedValue } from '@/lib/i18n';
const prisma = new PrismaClient();
@@ -10,6 +11,7 @@ export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const limit = parseInt(searchParams.get('limit') || '10');
const featuredOnly = searchParams.get('featured') === 'true';
const locale = searchParams.get('locale');
const where = featuredOnly ? { featured: true } : {};
@@ -27,6 +29,19 @@ export async function GET(request: Request) {
}
});
if (locale) {
const localizedNews = news.map(item => ({
...item,
title: getLocalizedValue(item.title, locale),
content: getLocalizedValue(item.content, locale),
special: item.special ? {
...item.special,
name: getLocalizedValue(item.special.name, locale)
} : null
}));
return NextResponse.json(localizedNews);
}
return NextResponse.json(news);
} catch (error) {
console.error('Error fetching news:', error);
@@ -52,10 +67,14 @@ export async function POST(request: Request) {
);
}
// Ensure title and content are stored as JSON
const titleData = typeof title === 'string' ? { de: title, en: title } : title;
const contentData = typeof content === 'string' ? { de: content, en: content } : content;
const news = await prisma.news.create({
data: {
title,
content,
title: titleData,
content: contentData,
author: author || null,
featured: featured || false,
specialId: specialId || null
@@ -93,8 +112,8 @@ export async function PUT(request: Request) {
}
const updateData: any = {};
if (title !== undefined) updateData.title = title;
if (content !== undefined) updateData.content = content;
if (title !== undefined) updateData.title = typeof title === 'string' ? { de: title, en: title } : title;
if (content !== undefined) updateData.content = typeof content === 'string' ? { de: content, en: content } : content;
if (author !== undefined) updateData.author = author || null;
if (featured !== undefined) updateData.featured = featured;
if (specialId !== undefined) updateData.specialId = specialId || null;

47
app/api/specials/route.ts
View File

@@ -1,18 +1,32 @@
import { PrismaClient, Special } from '@prisma/client';
import { NextResponse } from 'next/server';
import { requireAdminAuth } from '@/lib/auth';
import { getLocalizedValue } from '@/lib/i18n';
const prisma = new PrismaClient();
export async function GET() {
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const locale = searchParams.get('locale');
const specials = await prisma.special.findMany({
orderBy: { name: 'asc' },
// orderBy: { name: 'asc' },
include: {
_count: {
select: { songs: true }
}
}
});
if (locale) {
const localizedSpecials = specials.map(s => ({
...s,
name: getLocalizedValue(s.name, locale),
subtitle: getLocalizedValue(s.subtitle, locale)
})).sort((a, b) => a.name.localeCompare(b.name));
return NextResponse.json(localizedSpecials);
}
return NextResponse.json(specials);
}
@@ -25,10 +39,15 @@ export async function POST(request: Request) {
if (!name) {
return NextResponse.json({ error: 'Name is required' }, { status: 400 });
}
// Ensure name is stored as JSON
const nameData = typeof name === 'string' ? { de: name, en: name } : name;
const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
const special = await prisma.special.create({
data: {
name,
subtitle: subtitle || null,
name: nameData,
subtitle: subtitleData,
maxAttempts: Number(maxAttempts),
unlockSteps,
launchDate: launchDate ? new Date(launchDate) : null,
@@ -61,17 +80,19 @@ export async function PUT(request: Request) {
if (!id) {
return NextResponse.json({ error: 'ID required' }, { status: 400 });
}
const updateData: any = {};
if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
if (maxAttempts) updateData.maxAttempts = Number(maxAttempts);
if (unlockSteps) updateData.unlockSteps = unlockSteps;
if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
if (curator !== undefined) updateData.curator = curator || null;
const updated = await prisma.special.update({
where: { id: Number(id) },
data: {
...(name && { name }),
subtitle: subtitle || null, // Allow clearing or setting
...(maxAttempts && { maxAttempts: Number(maxAttempts) }),
...(unlockSteps && { unlockSteps }),
launchDate: launchDate ? new Date(launchDate) : null,
endDate: endDate ? new Date(endDate) : null,
curator: curator || null,
},
data: updateData,
});
return NextResponse.json(updated);
}

55
app/layout.tsx
View File

@@ -1,55 +0,0 @@
import type { Metadata, Viewport } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Script from "next/script";
import "./globals.css";
import { config } from "@/lib/config";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: config.appName,
description: config.appDescription,
};
export const viewport: Viewport = {
themeColor: config.colors.themeColor,
width: "device-width",
initialScale: 1,
maximumScale: 1,
};
import InstallPrompt from "@/components/InstallPrompt";
import AppFooter from "@/components/AppFooter";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<Script
defer
data-domain={config.plausibleDomain}
src={config.plausibleScriptSrc}
strategy="beforeInteractive"
/>
</head>
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
<InstallPrompt />
<AppFooter />
</body>
</html>
);
}

107
app/page.tsx
View File

@@ -1,107 +0,0 @@
import Game from '@/components/Game';
import NewsSection from '@/components/NewsSection';
import OnboardingTour from '@/components/OnboardingTour';
import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
import Link from 'next/link';
import { PrismaClient } from '@prisma/client';
export const dynamic = 'force-dynamic';
const prisma = new PrismaClient();
export default async function Home() {
const dailyPuzzle = await getOrCreateDailyPuzzle(null); // Global puzzle
const genres = await prisma.genre.findMany({
where: { active: true },
orderBy: { name: 'asc' }
});
const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
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: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
<div className="tooltip">
<Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Global</Link>
<span className="tooltip-text">A random song from the entire collection</span>
</div>
{/* Genres */}
{genres.map(g => (
<div key={g.id} className="tooltip">
<Link href={`/${g.name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
{g.name}
</Link>
{g.subtitle && <span className="tooltip-text">{g.subtitle}</span>}
</div>
))}
{/* Separator if both exist */}
{genres.length > 0 && activeSpecials.length > 0 && (
<span style={{ color: '#d1d5db' }}>|</span>
)}
{/* Active Specials */}
{activeSpecials.map(s => (
<div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div className="tooltip">
<Link
href={`/special/${s.name}`}
style={{
color: '#be185d', // Pink-700
textDecoration: 'none',
fontWeight: '500'
}}
>
★ {s.name}
</Link>
{s.subtitle && <span className="tooltip-text">{s.subtitle}</span>}
</div>
{s.curator && (
<span style={{ fontSize: '0.75rem', color: '#666' }}>
Curated by {s.curator}
</span>
)}
</div>
))}
</div>
{/* Upcoming Specials */}
{upcomingSpecials.length > 0 && (
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
Coming soon: {upcomingSpecials.map(s => (
<span key={s.id} style={{ marginLeft: '0.5rem' }}>
★ {s.name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
timeZone: process.env.TZ
}) : ''})
{s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>Curated by {s.curator}</span>}
</span>
))}
</div>
)}
</div>
<div id="tour-news">
<NewsSection />
</div>
<Game dailyPuzzle={dailyPuzzle} genre={null} />
<OnboardingTour />
</>
);
}

111
app/special/[name]/page.tsx
View File

@@ -1,111 +0,0 @@
import Game from '@/components/Game';
import NewsSection from '@/components/NewsSection';
import { getOrCreateSpecialPuzzle } from '@/lib/dailyPuzzle';
import Link from 'next/link';
import { PrismaClient } from '@prisma/client';
export const dynamic = 'force-dynamic';
const prisma = new PrismaClient();
interface PageProps {
params: Promise<{ name: string }>;
}
export default async function SpecialPage({ params }: PageProps) {
const { name } = await params;
const decodedName = decodeURIComponent(name);
const currentSpecial = await prisma.special.findUnique({
where: { name: 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="/">Go 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="/">Go Home</Link>
</div>
);
}
const dailyPuzzle = await getOrCreateSpecialPuzzle(decodedName);
const genres = await prisma.genre.findMany({
where: { active: true },
orderBy: { name: 'asc' }
});
const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
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' }}>Global</Link>
{/* Genres */}
{genres.map(g => (
<Link
key={g.id}
href={`/${g.name}`}
style={{
color: '#4b5563',
textDecoration: 'none'
}}
>
{g.name}
</Link>
))}
{/* Separator if both exist */}
{genres.length > 0 && activeSpecials.length > 0 && (
<span style={{ color: '#d1d5db' }}>|</span>
)}
{/* Specials */}
{activeSpecials.map(s => (
<Link
key={s.id}
href={`/special/${s.name}`}
style={{
fontWeight: s.name === decodedName ? 'bold' : 'normal',
textDecoration: s.name === decodedName ? 'underline' : 'none',
color: s.name === decodedName ? '#9d174d' : '#be185d'
}}
>
★ {s.name}
</Link>
))}
</div>
</div>
<NewsSection />
<Game
dailyPuzzle={dailyPuzzle}
genre={decodedName}
isSpecial={true}
maxAttempts={dailyPuzzle?.maxAttempts}
unlockSteps={dailyPuzzle?.unlockSteps}
/>
</>
);
}