Pixel Editor: Undo and Redo

statehard

40:00starts when you type

Guide

Challenge mode

# Requirements status

not runstarts with an empty board and nothing to undo or redo
not runpaints a cell with the selected color
not runUndo takes back the last change
not runUndo brings back the color a cell had before
not runRedo brings back the boards you undid, one at a time
not runenables Undo and Redo only when there is something to undo or redo
not runClear empties the board in one change that Undo takes back
not runforgets the oldest changes when there are more than 10
not runpainting a cell with the color it already has is not a change
not runClear on an empty board is not a change

# Edge cases

They are shown when you run the tests. Until then they appear as a hidden requirement.

hiddenHidden requirement
hiddenHidden requirement

# Statement

Goal

Make Undo and Redo work in a small pixel editor, keeping the drawing and its history in a reducer. You practice useReducer and state that has to stay coherent.

What you already have

The interface: the color picker, the Undo, Redo and Clear buttons (they stay in view while the board scrolls) and the 8×8 board (cells A1 to H8).
The buttons already send actions to a reducer with useReducer: { type: "paint", row, column, color } when a cell is clicked, { type: "clear" }, { type: "undo" } and { type: "redo" }. The reducer is empty: it returns the state as it is.
emptyBoard() returns a new empty board: 8 rows of 8 cells, each null or a color name.
Your job is the logic: the reducer, its initial state, and what the board and the buttons show.
Keep the cell labels (C4: Red, C4: empty), the Board section and the texts of the buttons and the colors: the tests use them.

Requirements

Clicking a cell paints it with the selected color.
Undo takes the board back one change; Redo brings back the board you undid, one change at a time.
Undo is disabled when there is nothing to undo, and Redo when there is nothing to redo.
Clear empties the whole board as a single change: one Undo brings the drawing back.
A click that changes nothing (painting a cell with the color it already has, or Clear on an empty board) is not a change: Undo and Redo behave as if it never happened.
Undo remembers the last 10 changes; older ones can no longer be undone.

Example

You paint A1 and B1 and press Undo → only A1 is painted, and Redo is enabled.
You press Redo → B1 is painted again.
You press Clear and then Undo → the whole drawing comes back.

Hints

Hint 1

Keep three things in the reducer: the boards before the current one, the current board, and the boards you undid. Whether Undo and Redo are enabled follows from them.

Hint 2

A board that is in the history must never change afterwards. Build each new board with map, row by row.

Hint 3

When you record a change, think about what Redo should still offer once you draw something new.

Concepts

useReducer: one function that handles every change of the state.
State that keeps a history.
Values derived from state.

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.