#17Minesweeper
Overview
Implement the full Minesweeper game logic using React hooks, starting from a pre-defined board and utility functions.
Requirements
- Render the game board with the correct number of rows and columns.
- Left-clicking a covered cell reveals it:
- If the cell is a mine, reveal all cells and trigger a loss.
- If the cell is safe, reveal it and continue the game.
- If the cell value is
0, reveal all connected empty cells and their neighbors.
- Right-clicking a covered cell toggles a flag:
- A second right-click on the same cell removes the flag.
- Flags update the visible "mines-left" counter.
- Right-clicking a flagged cell does nothing else (until unflagged).
- Prevent interactions (left or right click) on already revealed cells.
- The timer should:
- Not start before the first click.
- Start only when the player clicks the first safe cell (not when placing a flag).
- Stop when the player loses.
- Win condition:
- The player wins when all non-mine cells are revealed.
- On win, reveal the whole board and stop the timer.
- Reset:
- Clicking the reset button resets the board, timer, mines-left counter, and game state.
Notes
- The UI must reflect the current board state (covered, flagged, revealed numbers, mines, exploded mine).
- Right-click behavior must prevent the browser context menu.
- Clicking a flagged cell must not reveal it unless the flag is removed first.
- When a mine is clicked, visually indicate the exploded mine separately from other mines.
- Ensure the mines-left counter increments/decrements only when flags are toggled and never goes below 0.
- Do not start the timer on the very first action if it is a flag placement — timer starts only after the first safe reveal.
- Make sure heavy operations (like board creation) run only when needed (e.g., on the first click to guarantee the first-click-safe rule).
- Use the provided
createBoardandrevealEmptyCellsutilities (they are available inutils.tsx) to help implement board generation and flood-fill reveals. - Guard all interactions when the game is finished (either won or lost) so no further changes occur.
Tests
- render board
- can flag a cell with right click
- reveals cell and continues game if safe
- reveals all when clicking on a mine (lose)
- resets game when clicking reset button
- starts timer when clicking first safe cell
- reveals all connected empty cells when clicking a 0 cell
- allows winning by revealing all safe cells
- reveals all safe cells and mines without exploding any mine
- does nothing when clicking a flagged cell
- removes a flag on second right click
- does not start timer before first click
- stops timer after losing
- updates mines-left counter when toggling flags