Code Walkthrough

Six steps from empty component to interruptible reverse animation. Expand a step to read the reasoning and copy the snippet.

1. 01Declare state−

   A Set gives O(1) membership checks for the coloured squares; an array preserves the click order.

   selected tracks active squares, sequence tracks the order of selections only, isReverting blocks input while the animation runs.

   ReactCopy

   const [selected, setSelected] = useState(new Set());
   const [sequence, setSequence] = useState([]);
   const [isReverting, setIsReverting] = useState(false);

2. 02Generate the grid+
3. 03Hollow out the centre+
4. 04Conditional styling+
5. 05Click handling+
6. 06Asynchronous reverse+