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

fix(minesweeper): prevent default context menu on right-click for game board

Browse source
This commit is contained in:
Jason Fraley 2026-08-28 20:04:15 -04:00
parent 18e48243b3
commit 6d9b0ed8d8
1 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -504,6 +504,7 @@ export function MinesweeperBoard({
: "flex items-center justify-center p-2", : "flex items-center justify-center p-2",
)} )}
style={{ containerType: "inline-size" }} style={{ containerType: "inline-size" }}
onContextMenu={(event) => event.preventDefault()}
> >
<div <div
className="grid min-w-max grid-cols-[repeat(var(--board-cols),var(--cell-size))] gap-1" className="grid min-w-max grid-cols-[repeat(var(--board-cols),var(--cell-size))] gap-1"
@ -611,7 +612,10 @@ export function MinesweeperBoard({
</LoginLink> </LoginLink>
</div> </div>
)} )}
<div className="flex select-none 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"
onContextMenu={(event) => event.preventDefault()}
>
<div className="flex flex-wrap items-start justify-between gap-4"> <div className="flex flex-wrap items-start justify-between gap-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex items-center gap-2 text-sm font-semibold"> <div className="flex items-center gap-2 text-sm font-semibold">
@ -651,8 +655,13 @@ export function MinesweeperBoard({
/> />
</label> </label>
{phase !== "playing" && ( <fieldset
<> disabled={phase === "playing"}
className={cn(
"m-0 flex min-w-0 flex-col gap-4 border-0 p-0 transition-opacity duration-300",
phase === "playing" && "pointer-events-none opacity-40",
)}
>
<div className="grid gap-2 md:grid-cols-3"> <div className="grid gap-2 md:grid-cols-3">
{DIFFICULTY_KEYS.map((key) => { {DIFFICULTY_KEYS.map((key) => {
const option = DIFFICULTIES[key]; const option = DIFFICULTIES[key];
@ -788,8 +797,7 @@ export function MinesweeperBoard({
Clear all three standard locations to unlock custom minefields. Clear all three standard locations to unlock custom minefields.
</p> </p>
)} )}
</> </fieldset>
)}
<div <div
className={cn( className={cn(