alexandrev-tibco
66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import Image from "next/image";
|
|
import { MAX_ATTEMPTS, getPuzzleNumber } from "@/lib/game-engine";
|
|
import { getDictionary, type Dictionary } from "@/lib/i18n";
|
|
import { formatElapsed } from "@/lib/time";
|
|
|
|
type HeaderProps = {
|
|
attemptsUsed: number;
|
|
dateKey: string;
|
|
elapsedSeconds: number;
|
|
solved: boolean;
|
|
t?: Dictionary;
|
|
};
|
|
|
|
function attemptColor(remaining: number, solved: boolean) {
|
|
if (solved) return "bg-emerald-300 text-pitch-950 shadow-emerald-300/25";
|
|
if (remaining <= 1) return "bg-red-400 text-white shadow-red-400/25";
|
|
if (remaining <= 2) return "bg-orange-400 text-pitch-950 shadow-orange-400/25";
|
|
if (remaining <= 3) return "bg-yellow-300 text-pitch-950 shadow-yellow-300/25";
|
|
return "bg-emerald-400 text-pitch-950 shadow-emerald-400/25";
|
|
}
|
|
|
|
export default function Header({ attemptsUsed, dateKey, elapsedSeconds, solved, t: dictionary }: HeaderProps) {
|
|
const remaining = Math.max(0, MAX_ATTEMPTS - attemptsUsed);
|
|
const t = dictionary ?? getDictionary("en");
|
|
|
|
return (
|
|
<header className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3">
|
|
<div className="rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2">
|
|
<p className="text-xs uppercase text-white/50">{t.puzzle}</p>
|
|
<p className="text-lg font-black">#{getPuzzleNumber(dateKey)}</p>
|
|
</div>
|
|
|
|
<div className="min-w-0 text-center sm:text-left">
|
|
<h1 className="sr-only">hidden11</h1>
|
|
<Image
|
|
src="/logo.svg?v=2"
|
|
alt="hidden11"
|
|
width={220}
|
|
height={56}
|
|
priority
|
|
className="mx-auto h-12 w-auto max-w-[220px] sm:mx-0 sm:h-14"
|
|
/>
|
|
<p className="mt-1 text-xs text-white/60 sm:text-sm">{t.dailySubtitle}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2 text-right">
|
|
<p className="text-[10px] font-black uppercase text-white/45">{t.time}</p>
|
|
<p className="text-sm font-black text-white">{formatElapsed(elapsedSeconds)}</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`flex h-16 w-16 flex-col items-center justify-center rounded-full shadow-xl transition ${attemptColor(
|
|
remaining,
|
|
solved,
|
|
)}`}
|
|
title={solved ? t.puzzleFinished : t.left(remaining)}
|
|
>
|
|
<span className="text-2xl font-black leading-none">{solved ? "✓" : remaining}</span>
|
|
<span className="mt-0.5 text-[10px] font-black uppercase leading-none opacity-70">{t.tries}</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|