Grid Lights
Build the Grid Lights game: a 3 by 3 grid with the centre missing. Clicking a cell lights it green. When every cell is lit, the cells switch off one at a time, in the reverse of the order they were lit, 300 ms apart.
Requirements
- A lit cell stays lit when clicked again; nothing else changes.
- While the cells are switching off, clicks are ignored (the buttons are disabled).
- The status line shows how many cells are lit, or that the grid is switching off.
- Timers are cleaned up if the component unmounts mid-sequence.
- The gap renders as an invisible cell so the layout stays a grid.
Hints
Hint 1
Keep the lit cells as an array of indices in click order; the reverse order is then free.
Hint 2
Drive the switch-off with an effect: while draining and the array is non-empty, set one timeout that drops the last index, and return a cleanup that clears it. The state change re-runs the effect for the next step.