Initial hidden11 MVP

2026-05-02 20:50:36 +02:00
commit fa04b20e30
42 changed files with 8728 additions and 0 deletions
@@ -0,0 +1,57 @@
+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>
+        <img src="/logo.svg?v=2" alt="hidden11" 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>
+  );
+}