One Square Minesweeper
A game of minesweeper that is easy to complete (or lose). Play at https://onesquareminesweeper.com.
Instructions
- Right click (or crtl + click) is flag
- Normal Click to sweep mines
- Click the face to reset
Attributions
Assets and some styles borrowed from this fantastic open source minesweeper (with more than 1 tile to sweep)
UX: Clicking the face to restart is not obvious
When I first tried this, I had no idea how to reset after winning/losing. Maybe clicking the face is the way the board was reset in classic minesweeper? Regardless, I barely played that, and it was a loong time ago, so the restarting action was not obvious to me.
It would be nice to have some sort of indicator of how to reset. Maybe a small reset icon in the upper right of the face after the game ends? idk of a clean way to indicate this w/o changing the aesthetics.
Maybe a "help" or "how to play" button in the lower right, by the "a useless web project". It could even open a modal with an iframe that points to https://theuselessweb.com/sites/one-square-minesweeper/
Not a big deal, just a suggestion :)
Fixes disabling context menu for right clicking the one square
This fixes https://github.com/tholman/one-square-minesweeper/issues/1, in which the context menu is firing when right clicking the one square.
The existing logic has:
Which should work in theory, but in practice it wasn't. I discovered that, even when clicking the square,
e.target
was the outer div (board-items
). It took me a bit to figure out why, but eventually I noticed howpointer-events: none;
was set on theflagged
class. If I remove that, theoncontextmenu
event target is correctlyone-square
.This is kind of weird, since the right click event precedes adding the
flagged
class. I guessoncontextmenu
fires aftermouseup
, and by the time it fires the class is already applies and the pointer event passes through to the parent div. It's possible that this only happens on faster machines or some modern browser versions, maybe the CSS change parsing was delayed for some reason in your development context? I'm curious how reproducible this issue is.I don't know the initial rationale for setting pointer-events to none for
flagged
, maybe prior logic broke if it was clicked again but you updated it? Regardless, I played around a bit with it after making this change, and I don't notice any changing behavior besides the context menu fix.Anyhow, this is a cool project, and I absolutely love theuselessweb.com.