This is an implementation of a visualization puzzle that helps build intuition for knight movement. I first heard of this puzzle in one of Ben Finegold's videos.

The puzzle is set up with a knight and an opposing queen on a central square. The goal is to maneuver the knight around the queen and visit every square on the board except the ones attacked by the queen. I've found this to be super challenging, but also very educational.

As far as I could tell, there isn't an app that presents this puzzle with an interactive board (the best option seems to be to use the Board Editor on Lichess or Chess.com and manually set up the puzzle). This app shows which square the knight should target, and also alerts in case the knight is moved onto an attacked square.

The app is deployed to https://knights-tour-game.vercel.app/.

This app uses gchessboard for the board UI and Tailwind for styling. For knight move generation and queen attack detection, I wrote some simple 0x88 move representation logic as an exercise (using the excellent chess.js library as a reference).

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Runs the app (like npm run dev) but with XState Inspector enabled.

Launches the test runner in the interactive watch mode.

Builds the app for production to the build folder.