139 lines
6.5 KiB
TypeScript
139 lines
6.5 KiB
TypeScript
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 />
|
|
</>
|
|
);
|
|
}
|