chess with hooks

in this course, we will build a multiplayer online chess game

we wil use ReactJS (hooks) and firebase

we will code one section in TDD, implement drag-and-drop, but we will largely focus on writing terse effective code in short clear functions.

this course presumes a basic working knowledge of React with hooks - or at least a predisposition to google what you need to learn to get through the day.

Agenda

• 1p Build
  • Board & Pieces
  • making pieces draggable
  • making squares droppable
  • showing the piece while being dragged
  • controlled component: Game -> Board
  • Quick Refactor: App -> Game
  • The Rules of Chess
  • FEN TDD
  • calculating legal moves (chess.js)
  • enforcing legal moves
  • Promotion Widget
  • Displaying legal moves on the Board
• multiplayer online
  • firebase getting started
  • side nav games menu
  • making data on the console
  • SideNav to view / join / create game
  • StaticBoard display
  • flipping the board
  • joining games
  • create game
  • securing moves, joins, and creates
  • game status
  • players display
• openings trainer

remaining ideas:

1p build

remaining ideas for front end:

• check / draw / stalemate / checkmate / illegal

• sounds

• highlight previous move

• draw / remove arrows

• analysis board: connect to engine (api?), add / remove pieces, show eval / moves

• opening trainer: compile ECO moves and evaluations, draw arrows

• endgame trainer: connect to engine (api?), generate legal playable endgames

• improve drag and drop?

• more testing, automate testing on mobile?

• automate turning PGN into gif? FEN -> image api?

multiplayer online

• clock, clock security
• deep link public access any game (allow read on game always)

openings

This project was bootstrapped with Create React App.