Grid LightsLoading saved progress…

Grid Lights

Build a grid where clicking a cell lights it up, and then the lit cells switch off one by one in the reverse order they were activated — last on, first off. The key is to record the order of activation in an array, and let a timer peel cells off the end of that array.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A grid of cells; click to light, then watch them unwind.

Examples

click 0, then 4, then 7   → cells 0, 4, 7 lit (order = [0, 4, 7])
timer ticks               → 7 off, then 4 off, then 0 off  (reverse / LIFO)
clicking an already-lit cell does nothing;
clicking while cells are unwinding just extends the order again.

Notes

  • Order matters. Keep an order array of clicked indices; "lit" = index is in order.
  • Reverse = pop the end. Each timer tick removes the last element, so deactivation is LIFO.
  • One timer. Schedule the next removal whenever order is non-empty.
  • Out of scope. Configurable delays, a "deactivate all at once" mode — plain reverse unwind here.
Loading editor…
Loading preview…