Create a Chess Game with ReactJS - Part 20: Refactoring referee
In this part of creating a chess game with ReactJS using TypeScript we refactor the referee. We do this by putting all the logic for moving the pieces in a new folder named rules.
In the previous episode we added the logic for moving the king. The king can move 1 step in any direction each turn. In this episode we are going to refactor the referee. The 345 lines file will be reduced to a solid 79 lines file after the refactoring!
We start by creating the rules folder where all our rules will go to. The first rule that we are adding is for moving the pawn. We add a PawnRules.ts file inside of the rules folder and it contains the logic for moving a pawn.
We also do this for the bishop, knight, rook, queen and king rules. Each of them in their own Rules.ts file. In order to do this we need to remove the this. occurrences because we aren't using a single class anymore.
Then we create a GeneralRules.ts file where the general rules will be stored. The rules inside of here are the tileIsOccupied, tileIsOccupiedByOpponent, tileIsEmptyOrOccupiedByOpponnent.
To finish it of we create an index.ts file which exports the rules that the referee needs to use. By exporting them explicitly inside of the index.ts file we control which rules the referee can and cannot use.
The code in this video can be found on the Frontend Coding GitHub repository:
https://github.com/FrontendCodingYT/c...
Timestamps:
0:00 Welcome! Inspecting the referee.
1:05 Coding! Creating the pawn rules.
5:35: Coding! Creating the general rules.
8:45: Demo! Does it still work?
9:15 Challenge! Refactoring the other pieces.
11:55 Challenge! How to fix the error?
17:00 Tip! Copy over imports.
18:50 Challenge! Import rules from a single file.
20:10 Explaining! How is this possible?
20:45 Coding! Adding the other rules.
23:20 Thank you for watching! See you next time :)