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

34
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,9 +655,14 @@ export function MinesweeperBoard({
/> />
</label> </label>
{phase !== "playing" && ( <fieldset
<> disabled={phase === "playing"}
<div className="grid gap-2 md:grid-cols-3"> 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">
{DIFFICULTY_KEYS.map((key) => { {DIFFICULTY_KEYS.map((key) => {
const option = DIFFICULTIES[key]; const option = DIFFICULTIES[key];
return ( return (
@ -675,8 +684,8 @@ export function MinesweeperBoard({
</Button> </Button>
); );
})} })}
</div> </div>
{customUnlocked ? ( {customUnlocked ? (
<div className="rounded-lg border border-emerald-500/40 bg-emerald-500/5 p-3"> <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-wrap items-end gap-3">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@ -783,13 +792,12 @@ export function MinesweeperBoard({
{CUSTOM_MAX_SIZE}×{CUSTOM_MAX_SIZE} field. {CUSTOM_MAX_SIZE}×{CUSTOM_MAX_SIZE} field.
</p> </p>
</div> </div>
) : ( ) : (
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
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(