jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

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

Browse source
This commit is contained in:
Jason Fraley 2026-08-26 23:24:24 -04:00
parent a247e61fa9
commit 7a34c3901e
3 changed files with 429 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app/(frontend)/eod/actions.ts
View file

@ -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";

3
src/app/(frontend)/eod/page.tsx
View file

@ -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 (

517
src/components/frontend/eod/MinesweeperBoard.tsx
View file

@ -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) => {
const option = DIFFICULTIES[key];
return (
<Button
key={key}
type="button"
variant={difficulty === key ? "default" : "outline"}
className="h-auto justify-start px-3 py-2 text-left"
disabled={submitting}
aria-pressed={difficulty === key}
onClick={() => reset(key)}
>
<span className="flex flex-col items-start gap-0.5">
<span>{option.label}</span>
<span className="text-[10px] font-normal opacity-75">
{option.rows}×{option.cols} grid · {option.mines} charges
<>
<div className="grid gap-2 md:grid-cols-3">
{DIFFICULTY_KEYS.map((key) => {
const option = DIFFICULTIES[key];
return (
<Button
key={key}
type="button"
variant={difficulty === key ? "default" : "outline"}
className="h-auto justify-start px-3 py-2 text-left"
disabled={submitting}
aria-pressed={difficulty === key}
onClick={() => reset(key)}
>
<span className="flex flex-col items-start gap-0.5">
<span>{option.label}</span>
<span className="text-[10px] font-normal opacity-75">
{option.rows}×{option.cols} grid · {option.mines} charges
</span>
</span>
</span>
</Button>
);
})}
</div>
</Button>
);
})}
</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">
<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 &&
{!isLargeCustomGame && (
<div className="overflow-x-auto rounded-lg border border-border bg-background p-2 items-center justify-center flex">
<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 &&
!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") {
(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);
}
}}
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>
);
})}
}}
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>
</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>