feat(eod): add best times tracking for training, perimeter, and supply road games

src/app/(frontend)/eod/actions.ts

@@ -19,6 +19,9 @@ export interface EodStats {
   bestScore: number;
   eodXp: number;
   xpEarned: number;
+  bestTrainingTime: number;
+  bestPerimeterTime: number;
+  bestSupplyRoadTime: number;
 }
 
 const DIFFICULTIES = {
@@ -224,7 +227,20 @@ export async function submitEodResult(input: {
 
     return {
       success: true,
-      data: { gamesPlayed, wins, losses, bestScore, eodXp, xpEarned: runXp },
+      data: {
+        gamesPlayed,
+        wins,
+        losses,
+        bestScore,
+        eodXp,
+        xpEarned: runXp,
+        bestTrainingTime:
+          bestTimeField === "bestTrainingTime" ? bestTime : (current.bestTrainingTime ?? 0),
+        bestPerimeterTime:
+          bestTimeField === "bestPerimeterTime" ? bestTime : (current.bestPerimeterTime ?? 0),
+        bestSupplyRoadTime:
+          bestTimeField === "bestSupplyRoadTime" ? bestTime : (current.bestSupplyRoadTime ?? 0),
+      },
     };
   } catch (error) {
     const message = error instanceof Error ? error.message : "Unknown error";

src/app/(frontend)/eod/page.tsx

@@ -42,6 +42,9 @@ export default async function EodPage() {
     bestScore: eod.bestScore ?? 0,
     eodXp: eod.xpEarned ?? 0,
     xpEarned: 0,
+    bestTrainingTime: eod.bestTrainingTime ?? 0,
+    bestPerimeterTime: eod.bestPerimeterTime ?? 0,
+    bestSupplyRoadTime: eod.bestSupplyRoadTime ?? 0,
   };
 
   return (

src/components/frontend/eod/MinesweeperBoard.tsx

@@ -6,6 +6,14 @@ import { useCallback, useEffect, useRef, useState, type PointerEvent } from "rea
 import { Bomb, Flag, RotateCcw, ShieldCheck, Timer, X } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { submitEodResult, type EodDifficulty, type EodStats } from "@/app/(frontend)/eod/actions";
 import { PROFILE_UPDATE_EVENT } from "@/hooks/useGameTick";
@@ -13,6 +21,22 @@ import { cn } from "@/lib/utils";
 import { playClear, playExplosion, playFlag, playReveal, playXp } from "./sounds";
 
 type Phase = "ready" | "playing" | "over";
+type GameMode = EodDifficulty | "custom";
+
+type GameConfig = {
+  label: string;
+  rows: number;
+  cols: number;
+  mines: number;
+  baseScore: number;
+  parSeconds: number;
+  maxSeconds: number;
+};
+
+const CUSTOM_MIN_SIZE = 9;
+const CUSTOM_MAX_SIZE = 500;
+const CUSTOM_MAX_SAFE_MINES_BUFFER = 9;
+const CUSTOM_FULLSCREEN_CELL_THRESHOLD = 900;
 
 type Cell = {
   readonly mine: boolean;
@@ -95,7 +119,7 @@ function neighbors(index: number, rows: number, cols: number): number[] {
   return nearby;
 }
 
-function createBoard(config: (typeof DIFFICULTIES)[EodDifficulty], safeIndex: number): Board {
+function createBoard(config: GameConfig, safeIndex: number): Board {
   const size = config.rows * config.cols;
   const safe = new Set([safeIndex, ...neighbors(safeIndex, config.rows, config.cols)]);
   const mines = new Set<number>();
@@ -156,7 +180,16 @@ export function MinesweeperBoard({
   onPhaseChange: (phase: Phase) => void;
 }) {
   const router = useRouter();
-  const [difficulty, setDifficulty] = useState<EodDifficulty>("training");
+  const [difficulty, setDifficulty] = useState<GameMode>("training");
+  const [customConfig, setCustomConfig] = useState<GameConfig>({
+    label: "Custom Minefield",
+    rows: 9,
+    cols: 9,
+    mines: 10,
+    baseScore: 0,
+    parSeconds: 0,
+    maxSeconds: 3600,
+  });
   const [phase, setPhase] = useState<Phase>("ready");
   const [board, setBoard] = useState<Board>(() => emptyBoard(81));
   const [seconds, setSeconds] = useState(0);
@@ -169,7 +202,11 @@ export function MinesweeperBoard({
   const statsRef = useRef<EodStats>(serverStats);
   const longPressRef = useRef(false);
   const longPressTimerRef = useRef<number | null>(null);
-  const config = DIFFICULTIES[difficulty];
+  const config: GameConfig = difficulty === "custom" ? customConfig : DIFFICULTIES[difficulty];
+  const customUnlocked =
+    stats.bestTrainingTime > 0 && stats.bestPerimeterTime > 0 && stats.bestSupplyRoadTime > 0;
+  const isLargeCustomGame =
+    difficulty === "custom" && config.rows * config.cols > CUSTOM_FULLSCREEN_CELL_THRESHOLD;
   const flaggedCount = board.reduce((count, cell) => count + (cell.flagged ? 1 : 0), 0);
 
   const setPhaseSafe = useCallback(
@@ -199,9 +236,9 @@ export function MinesweeperBoard({
   }, []);
 
   const reset = useCallback(
-    (nextDifficulty: EodDifficulty = difficulty) => {
+    (nextDifficulty: GameMode = difficulty) => {
       if (submittingRef.current) return;
-      const nextConfig = DIFFICULTIES[nextDifficulty];
+      const nextConfig = nextDifficulty === "custom" ? customConfig : DIFFICULTIES[nextDifficulty];
       setDifficulty(nextDifficulty);
       setBoard(emptyBoard(nextConfig.rows * nextConfig.cols));
       generatedRef.current = false;
@@ -209,12 +246,51 @@ export function MinesweeperBoard({
       setLastRun(null);
       setPhaseSafe("ready");
     },
-    [difficulty, setPhaseSafe],
+    [customConfig, difficulty, setPhaseSafe],
   );
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key.toLowerCase() !== "r" ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.altKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+
+      const target = event.target;
+      if (
+        target instanceof HTMLElement &&
+        (target.matches('input, textarea, select, [contenteditable="true"]') ||
+          target.closest('[role="combobox"]'))
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      reset();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [reset]);
+
   const recordResult = useCallback(
     async (won: boolean, elapsedSeconds: number, flags: number) => {
       if (submittingRef.current) return;
+      if (difficulty === "custom") {
+        setLastRun({
+          won,
+          seconds: elapsedSeconds,
+          score: 0,
+          xpEarned: 0,
+          best: 0,
+        });
+        return;
+      }
       submittingRef.current = true;
       setSubmitting(true);
       const resultSeconds = Math.max(1, Math.min(elapsedSeconds, config.maxSeconds));
@@ -344,9 +420,100 @@ export function MinesweeperBoard({
         : "border-destructive/40 bg-destructive/10"
       : "border-border bg-card";
 
+  const renderGrid = (modal = false) => (
+    <div
+      className={cn(
+        "overflow-auto rounded-lg border border-border bg-background",
+        modal
+          ? "min-h-full min-w-full items-start justify-start p-2"
+          : "flex items-center justify-center p-2",
+      )}
+    >
+      <div
+        className="grid min-w-max gap-1"
+        style={{ gridTemplateColumns: `repeat(${config.cols}, 1.75rem)` }}
+        role="grid"
+        aria-label={`${config.label} minefield`}
+      >
+        {board.map((cell, index) => {
+          const row = Math.floor(index / config.cols);
+          const col = index % config.cols;
+          const revealedMine = cell.revealed && cell.mine;
+          return (
+            <button
+              key={`${difficulty}-${index}`}
+              type="button"
+              role="gridcell"
+              aria-label={cellLabel(cell, row, col)}
+              aria-rowindex={row + 1}
+              aria-colindex={col + 1}
+              disabled={phase === "over" || cell.revealed}
+              className={cn(
+                "flex size-7 items-center justify-center rounded-sm border text-xs font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                cell.revealed &&
+                  !cell.mine &&
+                  (highContrast
+                    ? "border-yellow-900/40 bg-yellow-950/15 text-amber-50 shadow-inner"
+                    : "border-border/60 bg-muted/70"),
+                !cell.revealed &&
+                  (highContrast
+                    ? "border-emerald-500 bg-emerald-800/90 text-emerald-50 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.12),0_1px_2px_rgb(0_0_0_/_0.35)] hover:border-emerald-400 hover:bg-emerald-700"
+                    : "border-border bg-card hover:bg-accent"),
+                cell.incorrectFlagged &&
+                  "border-destructive bg-destructive/25 text-red-200 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.12),0_1px_2px_rgb(0_0_0_/_0.35)] animate-pulse",
+                cell.flagged &&
+                  !cell.revealed &&
+                  !cell.incorrectFlagged &&
+                  "border-amber-300 bg-amber-500/25 text-amber-200 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.14),0_1px_2px_rgb(0_0_0_/_0.35)]",
+                revealedMine && "border-destructive bg-destructive/30 text-red-300",
+                cell.exploded && "border-destructive bg-destructive text-destructive-foreground",
+                cell.revealed && cell.adjacent > 0 && NUMBER_CLASSES[cell.adjacent],
+              )}
+              onClick={() => {
+                if (longPressRef.current) {
+                  longPressRef.current = false;
+                  return;
+                }
+                reveal(index);
+              }}
+              onContextMenu={(event) => {
+                event.preventDefault();
+                toggleFlag(index);
+              }}
+              onKeyDown={(event) => {
+                if (event.key.toLowerCase() === "f") {
+                  event.preventDefault();
+                  toggleFlag(index);
+                }
+              }}
+              onPointerDown={(event: PointerEvent<HTMLButtonElement>) => {
+                if (event.pointerType !== "touch" || phase === "over") return;
+                longPressRef.current = false;
+                clearLongPress();
+                longPressTimerRef.current = window.setTimeout(() => {
+                  longPressRef.current = true;
+                  toggleFlag(index);
+                }, 350);
+              }}
+              onPointerUp={clearLongPress}
+              onPointerCancel={clearLongPress}
+            >
+              {cell.incorrectFlagged ? <X className="size-3.5" /> : null}
+              {cell.flagged && !cell.incorrectFlagged && !revealedMine ? (
+                <Flag className="size-3.5" />
+              ) : null}
+              {revealedMine ? <Bomb className="size-3.5" /> : null}
+              {cell.revealed && !cell.mine && cell.adjacent > 0 ? cell.adjacent : null}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+
   return (
     <div className="flex w-full max-w-5xl flex-col gap-4">
-      <div className="flex flex-col gap-4 rounded-xl border border-border bg-card p-4 shadow">
+      <div className="flex select-none flex-col gap-4 rounded-xl border border-border bg-card p-4 shadow">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2 text-sm font-semibold">
@@ -387,29 +554,143 @@ export function MinesweeperBoard({
         </label>
 
         {phase !== "playing" && (
-          <div className="grid gap-2 md:grid-cols-3">
+          <>
-            {DIFFICULTY_KEYS.map((key) => {
+            <div className="grid gap-2 md:grid-cols-3">
-              const option = DIFFICULTIES[key];
+              {DIFFICULTY_KEYS.map((key) => {
-              return (
+                const option = DIFFICULTIES[key];
-                <Button
+                return (
-                  key={key}
+                  <Button
-                  type="button"
+                    key={key}
-                  variant={difficulty === key ? "default" : "outline"}
+                    type="button"
-                  className="h-auto justify-start px-3 py-2 text-left"
+                    variant={difficulty === key ? "default" : "outline"}
-                  disabled={submitting}
+                    className="h-auto justify-start px-3 py-2 text-left"
-                  aria-pressed={difficulty === key}
+                    disabled={submitting}
-                  onClick={() => reset(key)}
+                    aria-pressed={difficulty === key}
-                >
+                    onClick={() => reset(key)}
-                  <span className="flex flex-col items-start gap-0.5">
+                  >
-                    <span>{option.label}</span>
+                    <span className="flex flex-col items-start gap-0.5">
-                    <span className="text-[10px] font-normal opacity-75">
+                      <span>{option.label}</span>
-                      {option.rows}×{option.cols} grid · {option.mines} charges
+                      <span className="text-[10px] font-normal opacity-75">
+                        {option.rows}×{option.cols} grid · {option.mines} charges
+                      </span>
                     </span>
-                  </span>
+                  </Button>
-                </Button>
+                );
-              );
+              })}
-            })}
+            </div>
-          </div>
+            {customUnlocked ? (
+              <div className="rounded-lg border border-emerald-500/40 bg-emerald-500/5 p-3">
+                <div className="flex flex-wrap items-end gap-3">
+                  <div className="flex flex-col gap-1">
+                    <label htmlFor="custom-rows" className="text-xs font-medium">
+                      Rows
+                    </label>
+                    <Input
+                      id="custom-rows"
+                      type="number"
+                      min={CUSTOM_MIN_SIZE}
+                      max={CUSTOM_MAX_SIZE}
+                      value={customConfig.rows}
+                      onChange={(event) =>
+                        setCustomConfig((current) => {
+                          const rows = Math.max(
+                            CUSTOM_MIN_SIZE,
+                            Math.min(
+                              CUSTOM_MAX_SIZE,
+                              Number(event.target.value) || CUSTOM_MIN_SIZE,
+                            ),
+                          );
+                          return {
+                            ...current,
+                            rows,
+                            mines: Math.min(
+                              current.mines,
+                              rows * current.cols - CUSTOM_MAX_SAFE_MINES_BUFFER,
+                            ),
+                          };
+                        })
+                      }
+                      className="w-24"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <label htmlFor="custom-cols" className="text-xs font-medium">
+                      Columns
+                    </label>
+                    <Input
+                      id="custom-cols"
+                      type="number"
+                      min={CUSTOM_MIN_SIZE}
+                      max={CUSTOM_MAX_SIZE}
+                      value={customConfig.cols}
+                      onChange={(event) =>
+                        setCustomConfig((current) => {
+                          const cols = Math.max(
+                            CUSTOM_MIN_SIZE,
+                            Math.min(
+                              CUSTOM_MAX_SIZE,
+                              Number(event.target.value) || CUSTOM_MIN_SIZE,
+                            ),
+                          );
+                          return {
+                            ...current,
+                            cols,
+                            mines: Math.min(
+                              current.mines,
+                              current.rows * cols - CUSTOM_MAX_SAFE_MINES_BUFFER,
+                            ),
+                          };
+                        })
+                      }
+                      className="w-24"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <label htmlFor="custom-mines" className="text-xs font-medium">
+                      Mines
+                    </label>
+                    <Input
+                      id="custom-mines"
+                      type="number"
+                      min={1}
+                      max={customConfig.rows * customConfig.cols - CUSTOM_MAX_SAFE_MINES_BUFFER}
+                      value={customConfig.mines}
+                      onChange={(event) =>
+                        setCustomConfig((current) => ({
+                          ...current,
+                          mines: Math.max(
+                            1,
+                            Math.min(
+                              current.rows * current.cols - CUSTOM_MAX_SAFE_MINES_BUFFER,
+                              Number(event.target.value) || 1,
+                            ),
+                          ),
+                        }))
+                      }
+                      className="w-24"
+                    />
+                  </div>
+                  <Button
+                    type="button"
+                    variant={difficulty === "custom" ? "default" : "outline"}
+                    disabled={submitting}
+                    aria-pressed={difficulty === "custom"}
+                    onClick={() => reset("custom")}
+                  >
+                    Start custom
+                  </Button>
+                </div>
+                <p className="mt-2 text-xs text-muted-foreground">
+                  Custom mode is unranked. Choose a {CUSTOM_MIN_SIZE}×{CUSTOM_MIN_SIZE} to{" "}
+                  {CUSTOM_MAX_SIZE}×{CUSTOM_MAX_SIZE} field.
+                </p>
+              </div>
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                Clear all three standard locations to unlock custom minefields.
+              </p>
+            )}
+          </>
         )}
 
         <div
@@ -455,95 +736,115 @@ export function MinesweeperBoard({
           )}
         </div>
 
-        <div className="overflow-x-auto rounded-lg border border-border bg-background p-2 items-center justify-center flex">
+        {!isLargeCustomGame && (
-          <div
+          <div className="overflow-x-auto rounded-lg border border-border bg-background p-2 items-center justify-center flex">
-            className="grid min-w-max gap-1"
+            <div
-            style={{ gridTemplateColumns: `repeat(${config.cols}, 1.75rem)` }}
+              className="grid min-w-max gap-1"
-            role="grid"
+              style={{ gridTemplateColumns: `repeat(${config.cols}, 1.75rem)` }}
-            aria-label={`${config.label} minefield`}
+              role="grid"
-          >
+              aria-label={`${config.label} minefield`}
-            {board.map((cell, index) => {
+            >
-              const row = Math.floor(index / config.cols);
+              {board.map((cell, index) => {
-              const col = index % config.cols;
+                const row = Math.floor(index / config.cols);
-              const revealedMine = cell.revealed && cell.mine;
+                const col = index % config.cols;
-              return (
+                const revealedMine = cell.revealed && cell.mine;
-                <button
+                return (
-                  key={`${difficulty}-${index}`}
+                  <button
-                  type="button"
+                    key={`${difficulty}-${index}`}
-                  role="gridcell"
+                    type="button"
-                  aria-label={cellLabel(cell, row, col)}
+                    role="gridcell"
-                  aria-rowindex={row + 1}
+                    aria-label={cellLabel(cell, row, col)}
-                  aria-colindex={col + 1}
+                    aria-rowindex={row + 1}
-                  disabled={phase === "over" || cell.revealed}
+                    aria-colindex={col + 1}
-                  className={cn(
+                    disabled={phase === "over" || cell.revealed}
-                    "flex size-7 items-center justify-center rounded-sm border text-xs font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    className={cn(
-                    cell.revealed &&
+                      "flex size-7 items-center justify-center rounded-sm border text-xs font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                      !cell.mine &&
+                      cell.revealed &&
-                      (highContrast
+                        !cell.mine &&
-                        ? "border-yellow-900/40 bg-yellow-950/15 text-amber-50 shadow-inner"
+                        (highContrast
-                        : "border-border/60 bg-muted/70"),
+                          ? "border-yellow-900/40 bg-yellow-950/15 text-amber-50 shadow-inner"
-                    !cell.revealed &&
+                          : "border-border/60 bg-muted/70"),
-                      (highContrast
-                        ? "border-emerald-500 bg-emerald-800/90 text-emerald-50 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.12),0_1px_2px_rgb(0_0_0_/_0.35)] hover:border-emerald-400 hover:bg-emerald-700"
-                        : "border-border bg-card hover:bg-accent"),
-                    cell.incorrectFlagged &&
-                      "border-destructive bg-destructive/25 text-red-200 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.12),0_1px_2px_rgb(0_0_0_/_0.35)] animate-pulse",
-                    cell.flagged &&
                       !cell.revealed &&
-                      !cell.incorrectFlagged &&
+                        (highContrast
-                      "border-amber-300 bg-amber-500/25 text-amber-200 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.14),0_1px_2px_rgb(0_0_0_/_0.35)]",
+                          ? "border-emerald-500 bg-emerald-800/90 text-emerald-50 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.12),0_1px_2px_rgb(0_0_0_/_0.35)] hover:border-emerald-400 hover:bg-emerald-700"
-                    revealedMine && "border-destructive bg-destructive/30 text-red-300",
+                          : "border-border bg-card hover:bg-accent"),
-                    cell.exploded &&
+                      cell.incorrectFlagged &&
-                      "border-destructive bg-destructive text-destructive-foreground",
+                        "border-destructive bg-destructive/25 text-red-200 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.12),0_1px_2px_rgb(0_0_0_/_0.35)] animate-pulse",
-                    cell.revealed && cell.adjacent > 0 && NUMBER_CLASSES[cell.adjacent],
+                      cell.flagged &&
-                  )}
+                        !cell.revealed &&
-                  onClick={() => {
+                        !cell.incorrectFlagged &&
-                    if (longPressRef.current) {
+                        "border-amber-300 bg-amber-500/25 text-amber-200 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.14),0_1px_2px_rgb(0_0_0_/_0.35)]",
-                      longPressRef.current = false;
+                      revealedMine && "border-destructive bg-destructive/30 text-red-300",
-                      return;
+                      cell.exploded &&
-                    }
+                        "border-destructive bg-destructive text-destructive-foreground",
-                    reveal(index);
+                      cell.revealed && cell.adjacent > 0 && NUMBER_CLASSES[cell.adjacent],
-                  }}
+                    )}
-                  onContextMenu={(event) => {
+                    onClick={() => {
-                    event.preventDefault();
+                      if (longPressRef.current) {
-                    toggleFlag(index);
+                        longPressRef.current = false;
-                  }}
+                        return;
-                  onKeyDown={(event) => {
+                      }
-                    if (event.key.toLowerCase() === "f") {
+                      reveal(index);
+                    }}
+                    onContextMenu={(event) => {
                       event.preventDefault();
                       toggleFlag(index);
-                    }
+                    }}
-                  }}
+                    onKeyDown={(event) => {
-                  onPointerDown={(event: PointerEvent<HTMLButtonElement>) => {
+                      if (event.key.toLowerCase() === "f") {
-                    if (event.pointerType !== "touch" || phase === "over") return;
+                        event.preventDefault();
-                    longPressRef.current = false;
+                        toggleFlag(index);
-                    clearLongPress();
+                      }
-                    longPressTimerRef.current = window.setTimeout(() => {
+                    }}
-                      longPressRef.current = true;
+                    onPointerDown={(event: PointerEvent<HTMLButtonElement>) => {
-                      toggleFlag(index);
+                      if (event.pointerType !== "touch" || phase === "over") return;
-                    }, 350);
+                      longPressRef.current = false;
-                  }}
+                      clearLongPress();
-                  onPointerUp={clearLongPress}
+                      longPressTimerRef.current = window.setTimeout(() => {
-                  onPointerCancel={clearLongPress}
+                        longPressRef.current = true;
-                >
+                        toggleFlag(index);
-                  {cell.incorrectFlagged ? <X className="size-3.5" /> : null}
+                      }, 350);
-                  {cell.flagged && !cell.incorrectFlagged && !revealedMine ? (
+                    }}
-                    <Flag className="size-3.5" />
+                    onPointerUp={clearLongPress}
-                  ) : null}
+                    onPointerCancel={clearLongPress}
-                  {revealedMine ? <Bomb className="size-3.5" /> : null}
+                  >
-                  {cell.revealed && !cell.mine && cell.adjacent > 0 ? cell.adjacent : null}
+                    {cell.incorrectFlagged ? <X className="size-3.5" /> : null}
-                </button>
+                    {cell.flagged && !cell.incorrectFlagged && !revealedMine ? (
-              );
+                      <Flag className="size-3.5" />
-            })}
+                    ) : null}
+                    {revealedMine ? <Bomb className="size-3.5" /> : null}
+                    {cell.revealed && !cell.mine && cell.adjacent > 0 ? cell.adjacent : null}
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        </div>
+        )}
 
         <p className="text-center text-xs text-muted-foreground">
           Left click or tap to reveal · right click,{" "}
-          <kbd className="rounded border border-border px-1">F</kbd>, or long-press to flag
+          <kbd className="rounded border border-border px-1">F</kbd>, or long-press to flag · press{" "}
+          <kbd className="rounded border border-border px-1">R</kbd> to restart
         </p>
       </div>
 
+      {isLargeCustomGame && (
+        <Dialog open>
+          <DialogContent
+            showCloseButton={false}
+            className="flex h-[100dvh] max-h-[100dvh] max-w-none flex-col gap-3 rounded-none p-4"
+          >
+            <DialogHeader>
+              <DialogTitle>{config.label}</DialogTitle>
+              <DialogDescription>
+                Large custom field · {config.rows}×{config.cols} · press R to restart
+              </DialogDescription>
+            </DialogHeader>
+            <div className="min-h-0 flex-1 overflow-auto">{renderGrid(true)}</div>
+          </DialogContent>
+        </Dialog>
+      )}
+
       <div className="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
         <div className="flex items-center gap-1.5">
           <span>Games</span>