Component

KnightTour

Choose any first cell, then visit every remaining cell by legal L-shaped moves without revisiting one. The board numbers the real route, rejects illegal jumps visibly and keeps the completed tour until Restart tour is pressed.

Possible use

It could let a reviewer route through handoff fields by an ornate L-shaped inspection path, or let a presenter make an agenda audience visit every item as if the slide were a chessboard. The route adds difficulty without adding coverage.

Reasonable alternative

A reasonable local alternative is normal reading order or a checklist that records actual review progress. A knight’s tour is a puzzle, not a document workflow.

01 / Preview

Try it yourself.

Note 1

Note 2

Note 3

Note 4

Note 5

Note 6

Note 7

Note 8

Note 9

Note 10

Note 11

Note 12

Note 13

Note 14

Note 15

Note 16

Note 17

Note 18

Note 19

Note 20

Note 21

Note 22

Note 23

Note 24

Note 25

Mechanism

1: Choose any first square on the five-by-five board.
2: Continue only with an untouched cell one chess knight move away.
3: Watch each legal stop receive its real route number.
4: Restart the tour when the L-shaped inspection has concluded.

02 / Usage

Put it somewhere.

example.tsxTSX

import { KnightTour } from "gra-ui";
import "gra-ui/styles.css";

export function TouredNotes() {
  return (
    <KnightTour>
      {Array.from({ length: 25 }, (_, index) => <span key={index}>Note {index + 1}</span>)}
    </KnightTour>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe cells that must be visited in a legal knight-move route.