Deviopath › React

Shortest Path Finder

Hard · Games

Build a shortest-path finder on a 5x5 grid.

Render 25 <button> cells (row by row) with the class cell and data-row / data-col attributes (0-4). The start cell (0, 0) also has the class start, the end cell (4, 4) the class end, and wall cells the class wall. The walls start as INITIAL_WALLS (strings like "1-2", meaning row 1, column 2).

- Clicking a cell toggles a wall there. The start and end cells can never become walls.

- A "Find path" button runs a breadth-first search (BFS) from start to end, moving up, down, left or right and never through walls. It shows the number of moves in <p className="result">: "Shortest path: 8 steps", or "No path" when the end cannot be reached.

- Changing a wall clears the result (the <p className="result"> stays but is empty) until "Find path" is clicked again.