Create a Chess Game with ReactJS - Part 22: Preview Moves

Опубликовано: 18 Март 2026
на канале: Frontend Coding
1,446
30

Adding a preview for the moves of the pawn is what we are going to create in this episode of creating a chess game with React using TypeScript.

The code in this video can be found on the Frontend Coding GitHub repository:
https://github.com/FrontendCodingYT/c...

Timestamps:
0:00 Welcome! Demo of what we are going to create.
0:40 Coding! GetValidMoves method in Referee.
5:10 Coding! Implementing GetPossiblePawnMoves.
7:32 Coding! Modifying Piece interface.
9:11 Coding! Calculating possible moves.
11:37 Coding! Refactoring it to its own function.
12:25 Coding! Determine if tile is a possible move.
14:26 Coding! Adding highlight prop to Tile.tsx
14:41 Coding! Refactoring the class name of the tile.
17:04 Explaining! How does this work?
20:35 Coding! Styling the highlighted tile.
22:58 Coding! Only show possible moves of active piece.
24:27 Coding! Adding the 2-tile move as a possible move.
27:27 Thanks for watching! See you next time :)