pastilhasandClaude Opus 5
5d62668883
Top panel: Expert / Intermediate / Beginner. Bottom: that difficulty's saved
games, best first, click to play one on the board.
── the selection lives in the URL ──
`/minesweeper/expert`, not a channel and not panel state. It survives a
refresh, it can be linked, and the two panels never pass anything between
themselves — both read `useParams`. The plugin section route already existed;
nothing had used it.
The side effect hangs off the URL too: an effect on the selected level posts
the difficulty, so arriving at `/minesweeper/expert` by click, deep link or
back button all leave the game on expert. `POST /difficulty` verifies and is
idempotent, so a repeat changes nothing. One `<Navigate replace>` after the
hooks canonicalises both the bare route and a bogus section, and it waits for
`/status` so the URL lands on what the game IS rather than a guess — which is
why `difficulty` is now part of that payload.
Levels are NavLinks so cmd-click works and the active style comes from the
router. Replay rows are buttons, because they do not navigate anywhere, they
make the game do something. That is the line navigation-audit.md draws.
── two things on the server ──
`GET /replays` reads the directory rather than any index, because the filename
IS the metadata — Minesweeper X names a recording `<Lvl> <secs> - <date>.mvr`
and keeps no catalogue. A name that does not parse is skipped rather than
guessed at. Ordering is the server's: a loss is never "best" however short it
was, so wins rank by time and losses fall to the end, still watchable.
`POST /replay` drives Extras > Play Recording... and TYPES the filename into a
file dialog, which is why it only accepts a name `isKnownReplay` just matched
against the directory. An unchecked client string reaching `xdotool type` can
carry a path, a wildcard, or a newline that submits something else. Verified by
the dialog closing, not by the window size — a beginner replay leaves the
window beginner-sized, which is also what nothing-happened looks like.
Verified end to end against the running session: the expert list comes back
ranked 58.63 through 82.06 with losses after, playing 58.63 starts on the
board, and `{"file":"../../../etc/passwd"}` is a 404.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: de3ed4e6-f88a-429c-94e6-a760336ba83b
82 lines
3.7 KiB
TypeScript
82 lines
3.7 KiB
TypeScript
import { useMutation, useQuery } from '@tanstack/react-query';
|
|
import { Loader2, Play, Trophy } from 'lucide-react';
|
|
import { useParams } from 'react-router';
|
|
import { toast } from 'sonner';
|
|
import { useClient } from 'hooks/useClient';
|
|
import { isLevel, type Replay } from './levels';
|
|
|
|
/**
|
|
* The saved games for whichever difficulty the URL names, best first.
|
|
*
|
|
* Rows are BUTTONS, not links, and that is a rule rather than a preference: a row here does not navigate
|
|
* anywhere, it makes the game do something. `docs/navigation-audit.md` draws exactly that line — a control
|
|
* that mutates stays a button, and only one that opens an addressable thing is an anchor. Which difficulty
|
|
* is showing IS addressable, and that is the panel next door.
|
|
*
|
|
* Ordering comes from the server, which is where it belongs: a loss is never "best" however short it was,
|
|
* so wins rank by time and losses fall to the end. Re-sorting here would be a second place to disagree.
|
|
*/
|
|
export const ReplaysPanel = () => {
|
|
const { section } = useParams();
|
|
const client = useClient();
|
|
const level = isLevel(section) ? section : null;
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['minesweeper', 'replays', level],
|
|
queryFn: () => client.get<{ replays: Replay[] }>(`/minesweeper/replays?level=${level}`),
|
|
enabled: !!level,
|
|
});
|
|
|
|
const play = useMutation({
|
|
mutationFn: (file: string) => client.post('/minesweeper/replay', { file }),
|
|
onError: () => toast.error('The game would not open that recording.'),
|
|
});
|
|
|
|
const replays = data?.replays ?? [];
|
|
|
|
return (
|
|
<div className="flex size-full flex-col overflow-hidden">
|
|
<div className="px-3 py-2 text-xs font-medium text-muted-foreground">
|
|
{level ? `${replays.length} saved ${replays.length === 1 ? "game" : "games"}` : "Replays"}
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
|
|
{isLoading ? (
|
|
<p className="px-1 py-2 text-xs text-muted-foreground">Loading…</p>
|
|
) : replays.length === 0 ? (
|
|
<p className="px-1 py-2 text-xs text-muted-foreground">No recordings for this level yet.</p>
|
|
) : (
|
|
replays.map((replay, index) => {
|
|
const pending = play.isPending && play.variables === replay.file;
|
|
return (
|
|
<button
|
|
key={replay.file}
|
|
type="button"
|
|
onClick={() => play.mutate(replay.file)}
|
|
disabled={play.isPending}
|
|
className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-accent/50 disabled:opacity-60"
|
|
>
|
|
{pending ? (
|
|
<Loader2 className="size-3.5 shrink-0 animate-spin text-muted-foreground" />
|
|
) : (
|
|
<Play className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
|
|
)}
|
|
{/* A rank only means anything while the list is ranked, so losses do not get one. */}
|
|
<span className="w-4 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
|
|
{replay.lost ? "" : index + 1}
|
|
</span>
|
|
<span className={`shrink-0 text-sm tabular-nums ${replay.lost ? "text-muted-foreground" : ""}`}>
|
|
{replay.time.toFixed(2)}s
|
|
</span>
|
|
{index === 0 && !replay.lost ? <Trophy className="size-3.5 shrink-0 text-amber-500" /> : null}
|
|
{replay.lost ? <span className="shrink-0 text-[10px] text-muted-foreground">lost</span> : null}
|
|
<span className="ml-auto truncate text-[11px] text-muted-foreground">{replay.played}</span>
|
|
</button>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|