Deviopath › React

Minesweeper Lite

Hard · Games

Build a tiny Minesweeper on a fixed 4x4 board. The mines are given in MINES as [row, col] pairs.

Render 16 <button> cells (row by row) with the class cell and data-row / data-col attributes (0-3). Hidden cells show no text.

Clicking a hidden cell reveals it and adds the class revealed:

- a safe cell shows how many mines are in its 8 neighbouring cells, or no text when that number is 0

- revealing a 0 cell also reveals all its neighbours, and this repeats for every newly revealed 0 cell (flood fill)

- a mine shows * and the game is lost

Show the game status in <p className="status">: "Playing" at the start, "Game over" after a mine was clicked, and "You win!" when every safe cell is revealed. After the game ends, clicking cells does nothing.

Next: Chat with Unread Counts