# Minesweeper

> Implement the full Minesweeper game logic using React hooks, starting from a pre-defined board and utility functions.

- Difficulty: advanced
- Tags: useState, useEffect, customHook, game
- Estimated time: 90 minutes
- Tests: 14
- Requires subscription: yes

## 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 `createBoard` and `revealEmptyCells` utilities (they are available in `utils.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

01. render board
02. can flag a cell with right click
03. reveals cell and continues game if safe
04. reveals all when clicking on a mine (lose)
05. resets game when clicking reset button
06. starts timer when clicking first safe cell
07. reveals all connected empty cells when clicking a 0 cell
08. allows winning by revealing all safe cells
09. reveals all safe cells and mines without exploding any mine
10. does nothing when clicking a flagged cell
11. removes a flag on second right click
12. does not start timer before first click
13. stops timer after losing
14. updates mines-left counter when toggling flags