Validate which moves are allowed and display properly on the board. This should not include the actual movement of the pieces, just the highlighting. Consider using a library or API, tho a library is preferred so that offline capabilities are available.

• JS Chess Engine https://github.com/josefjadrny/js-chess-engine
• Lichesss.org API https://lichess.org/api

Lichess.org has an open database of puzzles, but there are several options to load them. Consider a library to load some puzzles for offline play, and then full API integration for online play.

• Lichess API Refence https://lichess.org/api#tag/Puzzles
• Lichess Open Database https://database.lichess.org/#puzzles
• Lichess Combined Puzzle-Game Database https://github.com/mcognetta/lichess-combined-puzzle-game-db

Would be great to have some visual movement to make the site feel more alive. Some examples of simple animations that could be good:

• Animated Backgrounds: https://alvarotrigo.com/blog/animated-backgrounds-css/
• Floating Squares: https://codepen.io/alvarotrigo/pen/GRvYNax
• Basic Background Color: https://code-boxx.com/css-animation-background-color/

Whoops, looks like a squre.

Notify user of progress as they attempt to solve puzzle. Confirm good moves, reject incorrect moves, and celebrate completion. Ensure that user is always notified of progress. Should wait until #7 is complete.

Cleaning up and simplifying the interface would be great. Remove the "Game by" and credits with an (i) info button in the top or bottom. Could accordion out, or be a modular popup. This could show info initially, and eventually have some basic settings added.

It would be nice to be able to load a specific puzzle based on the URL. Also once themes are created, loading a specific theme would be nice too.

This should be pretty easy with URLSearchParams

// Get the full URL (Example: https://puzzlechess.ca/?puzzle=123456&theme=kenny)
const url = new URL(window.location.href);

// Access the URLSearchParams object
const params = new URLSearchParams(url.search);

// Get values of 'puzzle' and 'theme'
const puzzle = params.get('puzzle'); // This would be '123456' for your example URL
const theme = params.get('theme'); // This would be 'kenny' for your example URL

A long term goal is to have players pick different themes / styles they wish to play with. It would be great if these were all open source or creative commons. Maybe a custom one created for this project eventually?

Allow user to move back one or more moves. Should wait until #6 is complete.

Audit design for color blind support. Consider adding toggle to enable, which could change colors, or add textures to things. Optimal solution would not have a toggle, and simply support color blind mode by default.

Load a board position based on different formats. Based on my brief research, I think that FEN may be the best way to go.

• Chess Notation https://en.wikipedia.org/wiki/Chess_notation
• FEN Notation https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation
• FEN Validator https://github.com/jayasurian123/fen-validator

Ensure that HTML & CSS is capable of displaying all possible board states. Should include highlighting squares that are valid for moves, able to be captured, etc. Look at lichess.org and chess.com for examples of they handle different displays.

Followup to #5, attempt to fetch puzzles from Lichess API.

Currently unable to promote Pawn to Queen in order to solve this puzzle:

Some users may want to jump up or down to a specific rating, so let's allow them to!

Allow the player to make only valid chess moves for pieces. Should wait until #2, #3, #4, #5 are completed.

We should use "tap" instead of "click" when on mobile device.

Keep getting an error because we don't have favicon.ico and it is annoying!

Add "haptic feedback" (iOS term) to slightly vibrate device after each move. Consider adding audio for pieces moving as well, but could be annoying.