Create a Chess Game with ReactJS - Part 19: The king
In this part of creating a chess game with ReactJS using TypeScript we refactor the logic for the queen and add the movement king.
In the previous episode we finished the movement for the queen. She can now move a maximum of 8 tiles horizontally, vertically and diagonally. In this episode we refactor this logic and we implement the logic for the king.
We start by adding logging when we move the king. We then modify the movement for the queen by setting the maximum for the loop to 2 instead of 8. Before we do this for the king we refactor the multiplierX and multiplierY logic. We do this by using a ternary operator.
Then we add the logic for moving the king and refactor the code by using the samePosition method. To finish it off we write down the next steps we need to implement to have a working chess game.
The code in this video can be found on the Frontend Coding GitHub repository:
https://github.com/FrontendCodingYT/c...
Timestamps:
0:00 Welcome! Resetting the queen position.
0:45 Explaining! How does the king move.
1:35 Coding! Creating the KingMove method.
4:45 Challenge! Changing if else with a ternary operator.
6:05 Explaining! Ternary operator for multiplierX and Y.
9:00 Challenge! Apply it to multiplierY.
10:00 Coding! Apply it to the king.
10:45 Coding! Apply samePosition method.
12:15 Demo! Testing out what we have so far.
13:15 Explaining! Creating the to do list.
18:50 Thanks for watching! See you next time :)