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

feat(eod): add high-contrast toggle, improved leaderboard, new effects on bad-flag cells

Browse source
This commit is contained in:
Jason Fraley 2026-08-26 22:36:06 -04:00
parent b99520bc64
commit a247e61fa9
8 changed files with 19274 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -59,7 +59,14 @@ const BEST_TIME_FIELDS = {
supplyRoad: "bestSupplyRoadTime",
} as const;
const BEST_FLAGS_FIELDS = {
training: "bestTrainingFlags",
perimeter: "bestPerimeterFlags",
supplyRoad: "bestSupplyRoadFlags",
} as const;
type EodTimeField = (typeof BEST_TIME_FIELDS)[EodDifficulty];
type EodFlagsField = (typeof BEST_FLAGS_FIELDS)[EodDifficulty];
function isEodDifficulty(value: string): value is EodDifficulty {
return Object.prototype.hasOwnProperty.call(DIFFICULTIES, value);
@ -85,6 +92,7 @@ async function authenticate() {
export async function submitEodResult(input: {
difficulty: EodDifficulty;
seconds: number;
flags: number;
won: boolean;
}): Promise<ActionResult<EodStats>> {
try {
@ -104,6 +112,9 @@ export async function submitEodResult(input: {
) {
return { success: false, error: "Invalid result." };
}
if (!Number.isInteger(input.flags) || input.flags < 0 || input.flags > difficultyConfig.mines) {
return { success: false, error: "Invalid result." };
}
const profileRes = await payload.find({
collection: "profiles",
@ -129,6 +140,9 @@ export async function submitEodResult(input: {
bestTrainingTime?: number;
bestPerimeterTime?: number;
bestSupplyRoadTime?: number;
bestTrainingFlags?: number;
bestPerimeterFlags?: number;
bestSupplyRoadFlags?: number;
};
};
};
@ -143,11 +157,16 @@ export async function submitEodResult(input: {
const bestScore = Math.max(current.bestScore ?? 0, score);
const eodXp = (current.xpEarned ?? 0) + runXp;
const bestTimeField: EodTimeField = BEST_TIME_FIELDS[difficulty];
const bestFlagsField: EodFlagsField = BEST_FLAGS_FIELDS[difficulty];
const previousBestTime = current[bestTimeField] ?? 0;
const bestTime =
input.won && (previousBestTime === 0 || input.seconds < previousBestTime)
? input.seconds
: previousBestTime;
const previousBestFlags = current[bestFlagsField] ?? 0;
const isBestRun =
input.won &&
(previousBestTime === 0 ||
input.seconds < previousBestTime ||
(input.seconds === previousBestTime && input.flags < previousBestFlags));
const bestTime = isBestRun ? input.seconds : previousBestTime;
const bestFlags = isBestRun ? input.flags : previousBestFlags;
const { xp: _xp, ...progressionRest } = progression;
@ -168,7 +187,11 @@ export async function submitEodResult(input: {
bestTrainingTime: current.bestTrainingTime ?? 0,
bestPerimeterTime: current.bestPerimeterTime ?? 0,
bestSupplyRoadTime: current.bestSupplyRoadTime ?? 0,
bestTrainingFlags: current.bestTrainingFlags ?? 0,
bestPerimeterFlags: current.bestPerimeterFlags ?? 0,
bestSupplyRoadFlags: current.bestSupplyRoadFlags ?? 0,
[bestTimeField]: bestTime,
[bestFlagsField]: bestFlags,
},
},
},
@ -192,6 +215,7 @@ export async function submitEodResult(input: {
data: {
difficulty,
seconds: input.seconds,
flags: input.flags,
score,
xpEarned: runXp,
},

18
src/collections/users/Profiles.ts
View file

@ -347,6 +347,24 @@ export const Profiles: CollectionConfig = {
type: "number",
defaultValue: 0,
},
{
name: "bestTrainingFlags",
label: "Flags on Best Training Pad Run",
type: "number",
defaultValue: 0,
},
{
name: "bestPerimeterFlags",
label: "Flags on Best FOB Perimeter Run",
type: "number",
defaultValue: 0,
},
{
name: "bestSupplyRoadFlags",
label: "Flags on Best Main Supply Road Run",
type: "number",
defaultValue: 0,
},
],
},
],

68
src/components/frontend/eod/EodLeaderboard.tsx
View file

@ -1,7 +1,14 @@
"use client";
import { useEffect, useState } from "react";
import { Trophy } from "lucide-react";
import { Flag, Trophy } from "lucide-react";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import type { PresenceParticipant } from "@/hooks/useRealtimePresence";
@ -23,6 +30,12 @@ interface ApiProfile {
wins?: number | null;
bestScore?: number | null;
xpEarned?: number | null;
bestTrainingTime?: number | null;
bestPerimeterTime?: number | null;
bestSupplyRoadTime?: number | null;
bestTrainingFlags?: number | null;
bestPerimeterFlags?: number | null;
bestSupplyRoadFlags?: number | null;
} | null;
} | null;
} | null;
@ -35,6 +48,8 @@ interface LeaderboardRow {
wins: number;
bestScore: number;
xpEarned: number;
bestTime: number;
bestFlags: number;
isCurrentUser: boolean;
isOutsideTopTen?: boolean;
}
@ -57,6 +72,7 @@ export function EodLeaderboard({
currentUserId,
activeTeams = [],
}: EodLeaderboardProps) {
const [difficulty, setDifficulty] = useState<"training" | "perimeter" | "supplyRoad">("training");
const [rows, setRows] = useState<LeaderboardRow[] | null>(null);
const [failed, setFailed] = useState(false);
@ -64,11 +80,20 @@ export function EodLeaderboard({
let cancelled = false;
setFailed(false);
const difficultyLabel =
difficulty === "training"
? "Training"
: difficulty === "perimeter"
? "Perimeter"
: "SupplyRoad";
const timeField = `progression.minigames.eodMinesweeper.best${difficultyLabel}Time`;
const flagsField = `progression.minigames.eodMinesweeper.best${difficultyLabel}Flags`;
const params = new URLSearchParams({
sort: "-progression.minigames.eodMinesweeper.bestScore",
sort: `${timeField},${flagsField}`,
limit: "100",
depth: "1",
});
params.set(`where[${timeField}][greater_than]`, "0");
fetch(`/api/profiles?${params.toString()}`)
.then((res) => {
@ -89,10 +114,14 @@ export function EodLeaderboard({
wins: eod.wins ?? 0,
bestScore: eod.bestScore ?? 0,
xpEarned: eod.xpEarned ?? 0,
bestTime: eod[`best${difficultyLabel}Time` as keyof typeof eod] ?? 0,
bestFlags: eod[`best${difficultyLabel}Flags` as keyof typeof eod] ?? 0,
isCurrentUser: user ? String(user.id) === String(currentUserId) : false,
};
});
const scored = mapped.filter((row) => row.bestScore > 0);
const scored = mapped
.filter((row) => row.bestTime > 0)
.sort((a, b) => a.bestTime - b.bestTime || a.bestFlags - b.bestFlags);
const visible = scored.slice(0, 10);
const current = mapped.find((row) => row.isCurrentUser);
if (current && !visible.some((row) => row.id === current.id)) {
@ -107,20 +136,37 @@ export function EodLeaderboard({
return () => {
cancelled = true;
};
}, [refreshKey, currentUserId]);
}, [difficulty, refreshKey, currentUserId]);
return (
<div className="w-full max-w-[520px] rounded-xl border border-border bg-card">
<div className="flex items-center gap-2 border-b border-border px-4 py-3">
<Trophy className="size-4 text-amber-400" />
<h2 className="text-sm font-semibold">Minefield Clearance Leaderboard</h2>
<span className="ml-auto text-xs text-muted-foreground">Top 10 · best clearance</span>
<div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
<Select
value={difficulty}
onValueChange={(value) => setDifficulty(value as typeof difficulty)}
>
<SelectTrigger aria-label="Leaderboard sector" className="h-8 w-[150px] text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="training">Training Pad</SelectItem>
<SelectItem value="perimeter">FOB Perimeter</SelectItem>
<SelectItem value="supplyRoad">Main Supply Road</SelectItem>
</SelectContent>
</Select>
<span>Top 10 · fastest clear</span>
</div>
</div>
<div
className="border-b border-border px-4 py-2 text-xs text-muted-foreground"
aria-live="polite"
>
<span className="font-medium text-emerald-400">{activeTeams.length} defusal teams on site</span>
<span className="font-medium text-emerald-400">
{activeTeams.length} defusal teams on site
</span>
{activeTeams.length > 0 && (
<span className="ml-1 text-foreground">
({activeTeams.map((team) => team.name).join(", ")})
@ -149,7 +195,10 @@ export function EodLeaderboard({
<th className="px-2 py-2 font-medium">Operator</th>
<th className="px-2 py-2 text-right font-medium">Games</th>
<th className="px-2 py-2 text-right font-medium">Wins</th>
<th className="px-2 py-2 text-right font-medium">Best</th>
<th className="px-2 py-2 text-right font-medium">Time</th>
<th className="px-2 py-2 text-right font-medium">
<Flag className="ml-auto size-3" aria-label="Flags" />
</th>
<th className="px-4 py-2 text-right font-medium">XP</th>
</tr>
</thead>
@ -199,7 +248,10 @@ export function EodLeaderboard({
{row.wins}
</td>
<td className="px-2 py-2 text-right font-semibold tabular-nums">
{row.bestScore}
{row.bestTime}s
</td>
<td className="px-2 py-2 text-right font-semibold tabular-nums">
{row.bestFlags}
</td>
<td className="px-4 py-2 text-right tabular-nums text-muted-foreground">
{row.xpEarned}

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

@ -3,9 +3,10 @@
// allow: SIZE_OK — the board is a single interactive game state machine required by the route contract.
import { useCallback, useEffect, useRef, useState, type PointerEvent } from "react";
import { Bomb, Flag, RotateCcw, ShieldCheck, Timer } from "lucide-react";
import { Bomb, Flag, RotateCcw, ShieldCheck, Timer, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { submitEodResult, type EodDifficulty, type EodStats } from "@/app/(frontend)/eod/actions";
import { PROFILE_UPDATE_EVENT } from "@/hooks/useGameTick";
import { cn } from "@/lib/utils";
@ -19,6 +20,7 @@ type Cell = {
readonly revealed: boolean;
readonly flagged: boolean;
readonly exploded: boolean;
readonly incorrectFlagged: boolean;
};
type Board = readonly Cell[];
@ -59,7 +61,7 @@ const NUMBER_CLASSES: Readonly<Record<number, string>> = {
2: "text-green-400",
3: "text-red-400",
4: "text-purple-400",
5: "text-rose-700",
5: "text-rose-400",
6: "text-teal-400",
7: "text-slate-200",
8: "text-gray-400",
@ -72,6 +74,7 @@ function emptyBoard(size: number): Board {
revealed: false,
flagged: false,
exploded: false,
incorrectFlagged: false,
}));
}
@ -126,6 +129,7 @@ function revealFrom(start: number, board: Board, rows: number, cols: number): Bo
function cellLabel(cell: Cell, row: number, col: number): string {
const position = `row ${row + 1} col ${col + 1}`;
if (cell.incorrectFlagged) return `${position} incorrect flag`;
if (cell.flagged) return `${position} flagged`;
if (!cell.revealed) return `${position} hidden`;
if (cell.mine) return `${position} mine`;
@ -156,6 +160,7 @@ export function MinesweeperBoard({
const [phase, setPhase] = useState<Phase>("ready");
const [board, setBoard] = useState<Board>(() => emptyBoard(81));
const [seconds, setSeconds] = useState(0);
const [highContrast, setHighContrast] = useState(true);
const [stats, setStats] = useState<EodStats>(serverStats);
const [lastRun, setLastRun] = useState<LastRun | null>(null);
const [submitting, setSubmitting] = useState(false);
@ -165,6 +170,7 @@ export function MinesweeperBoard({
const longPressRef = useRef(false);
const longPressTimerRef = useRef<number | null>(null);
const config = DIFFICULTIES[difficulty];
const flaggedCount = board.reduce((count, cell) => count + (cell.flagged ? 1 : 0), 0);
const setPhaseSafe = useCallback(
(nextPhase: Phase) => {
@ -207,12 +213,17 @@ export function MinesweeperBoard({
);
const recordResult = useCallback(
async (won: boolean, elapsedSeconds: number) => {
async (won: boolean, elapsedSeconds: number, flags: number) => {
if (submittingRef.current) return;
submittingRef.current = true;
setSubmitting(true);
const resultSeconds = Math.max(1, Math.min(elapsedSeconds, config.maxSeconds));
const result = await submitEodResult({ difficulty, seconds: resultSeconds, won });
const result = await submitEodResult({
difficulty,
seconds: resultSeconds,
flags,
won,
});
submittingRef.current = false;
setSubmitting(false);
const score = won ? config.baseScore + Math.max(0, config.parSeconds - resultSeconds) : 0;
@ -262,12 +273,13 @@ export function MinesweeperBoard({
: cell
: cell.mine
? { ...cell, revealed: true }
: cell,
: { ...cell, incorrectFlagged: cell.flagged },
),
);
if (won) playClear();
else playExplosion();
void recordResult(won, seconds);
const flags = finalBoard.reduce((count, cell) => count + (cell.flagged ? 1 : 0), 0);
void recordResult(won, seconds, flags);
},
[phase, recordResult, seconds, setPhaseSafe],
);
@ -321,7 +333,10 @@ export function MinesweeperBoard({
}
}, []);
const flaggedCount = board.reduce((count, cell) => count + (cell.flagged ? 1 : 0), 0);
const incorrectFlagCount = board.reduce(
(count, cell) => count + (cell.incorrectFlagged ? 1 : 0),
0,
);
const statusClass =
phase === "over"
? lastRun?.won
@ -357,6 +372,20 @@ export function MinesweeperBoard({
</div>
</div>
<label className="flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-background/50 px-3 py-2 text-xs">
<span className="flex flex-col gap-0.5">
<span className="font-medium text-foreground">High-contrast cells</span>
<span className="text-muted-foreground">
Use stronger grass-and-dirt colors to distinguish untouched and revealed cells.
</span>
</span>
<Switch
checked={highContrast}
onCheckedChange={setHighContrast}
aria-label="Use high-contrast cell colors"
/>
</label>
{phase !== "playing" && (
<div className="grid gap-2 md:grid-cols-3">
{DIFFICULTY_KEYS.map((key) => {
@ -398,7 +427,13 @@ export function MinesweeperBoard({
Sector clear. {config.label} defused in {lastRun.seconds}s.
</span>
)}
{phase === "over" && !lastRun?.won && lastRun && <span>The charge went off. MIA.</span>}
{phase === "over" && !lastRun?.won && lastRun && (
<span>
The charge went off. MIA.
{incorrectFlagCount > 0 &&
` ${incorrectFlagCount} incorrect flag${incorrectFlagCount === 1 ? "" : "s"} marked with an X.`}
</span>
)}
{phase === "over" && !lastRun && <span>Recording clearance…</span>}
{lastRun?.won && (
<span className="text-xs text-emerald-500">
@ -442,12 +477,22 @@ export function MinesweeperBoard({
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 && "border-border/60 bg-muted/70",
!cell.revealed && "border-border bg-card hover:bg-accent",
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 &&
"border-amber-500/50 bg-amber-500/10 text-amber-400",
revealedMine && "border-destructive/60 bg-destructive/20 text-destructive",
!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],
@ -481,7 +526,10 @@ export function MinesweeperBoard({
onPointerUp={clearLongPress}
onPointerCancel={clearLongPress}
>
{cell.flagged && !revealedMine ? <Flag className="size-3.5" /> : null}
{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>

19079
src/migrations/20260827_022334_add_eod_minesweeper_best_flags.json Normal file
View file

File diff suppressed because it is too large Load diff

15
src/migrations/20260827_022334_add_eod_minesweeper_best_flags.ts Normal file
View file

@ -0,0 +1,15 @@
import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
await db.execute(sql`
ALTER TABLE "profiles" ADD COLUMN "progression_minigames_eod_minesweeper_best_training_flags" numeric DEFAULT 0;
ALTER TABLE "profiles" ADD COLUMN "progression_minigames_eod_minesweeper_best_perimeter_flags" numeric DEFAULT 0;
ALTER TABLE "profiles" ADD COLUMN "progression_minigames_eod_minesweeper_best_supply_road_flags" numeric DEFAULT 0;`)
}
export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
await db.execute(sql`
ALTER TABLE "profiles" DROP COLUMN "progression_minigames_eod_minesweeper_best_training_flags";
ALTER TABLE "profiles" DROP COLUMN "progression_minigames_eod_minesweeper_best_perimeter_flags";
ALTER TABLE "profiles" DROP COLUMN "progression_minigames_eod_minesweeper_best_supply_road_flags";`)
}

8
src/migrations/index.ts
View file

@ -3,6 +3,7 @@ import * as migration_20260825_220000 from './20260825_220000';
import * as migration_20260826_050000_repair_shims_auxiliary_tables from './20260826_050000_repair_shims_auxiliary_tables';
import * as migration_20260826_060000_add_game_servers_event_target from './20260826_060000_add_game_servers_event_target';
import * as migration_20260827_005757 from './20260827_005757';
import * as migration_20260827_022334_add_eod_minesweeper_best_flags from './20260827_022334_add_eod_minesweeper_best_flags';
export const migrations = [
{
@ -28,6 +29,11 @@ export const migrations = [
{
up: migration_20260827_005757.up,
down: migration_20260827_005757.down,
name: '20260827_005757'
name: '20260827_005757',
},
{
up: migration_20260827_022334_add_eod_minesweeper_best_flags.up,
down: migration_20260827_022334_add_eod_minesweeper_best_flags.down,
name: '20260827_022334_add_eod_minesweeper_best_flags'
},
];

6
src/payload-types.ts
View file

@ -1686,6 +1686,9 @@ export interface Profile {
bestTrainingTime?: number | null;
bestPerimeterTime?: number | null;
bestSupplyRoadTime?: number | null;
bestTrainingFlags?: number | null;
bestPerimeterFlags?: number | null;
bestSupplyRoadFlags?: number | null;
};
};
};
@ -3477,6 +3480,9 @@ export interface ProfilesSelect<T extends boolean = true> {
bestTrainingTime?: T;
bestPerimeterTime?: T;
bestSupplyRoadTime?: T;
bestTrainingFlags?: T;
bestPerimeterFlags?: T;
bestSupplyRoadFlags?: T;
};
};
};