Create a Chess Game with ReactJS - Part 18: Queen finished
In this part of creating a chess game with ReactJS using TypeScript we add the diagonal movement for the queen.
In the previous episode we left off with the horizontal and vertical movement of the queen. In this episode we will create the diagonal movement and we are going to refactor it as well.
At first we manually create the top right, bottom right, bottom left and top left movements. After some refactoring we only program one diagonal and apply the logic to every diagonal using a for loop.
Then to finish it off we combine the diagonal, horizontal and the vertical logic into one for loop and I explain to you how this works.
The code in this video can be found on the Frontend Coding GitHub repository:
https://github.com/FrontendCodingYT/c...
Timestamps:
0:00 Welcome! Recap of what we have!
1:10 Coding! Logic for the top right movement.
1:25 Challenge! Why + for x and y?
3:40 Coding! Logic for the other diagonals.
3:47 Challenge! Try it out yourself
5:08 Challenge! Refactor into 1 if statement.
5:46 Coding! Refactoring diagonal logic into 1 statement.
8:36 Explaining! How did we do this?
9:45 Challenge! Combining vertical with diagonal.
10:00 Coding! Combining vertical with diagonal.
12:13 Explaining! How does this work?
14:30 Coding! Adding horizontal movement.
15:25 Thank you for watching! Next video will be the king.