Checkers
08-02-2019
A checkers game made using React and Redux.
When I decided to learn React, like most people I ended up following along with the tutorial on their website. The result is also publicly available here, but it is rather dull and unoriginal.
Because I wanted to have some fun when learning the React basics, I decided to make a checkers game. This has been a very educational project when it came to React and even Redux (which was new to me).
Playing the game
The rules and color scheme are based on this wikipedia page. The white player (player A) is the first to make a move. Each player can move their pieces by selecting them and then clicking/tapping the square they want to move/jump to.
React
A JavaScript library for building user interfaces.
To build the interface (current player label, board and squares) I used React and Sass. This combination makes for a really comfortable development environment.
Splitting up the application into multiple smaller reusable components became a breeze and a lot of fun.
It is possible to take it all a step further and make everything less hardcoded. For example, the game currently only allows for an 8x8 board size. For the purposes of getting to know React however, I felt it wasn't necessary.
Redux
A predictable state container for JavaScript apps.
At first, all the game's rules were managed by the checkers component. And to a certain extent, they still are, but when I learned about Redux I had to implement it.
Redux manages the state and all state changes. That means the code can be split in two parts, React knows how to display a checkers game, Redux knows what information is required for the game. Redux will tell React how many pieces are on the board, whether they are kings or men, whether they must jump and whether they are selected. The React side will just take that data (state) and display it.
Whenever a square is clicked, React will tell Redux what needs to happen and Redux will tell React what has changed in the state.
It took some adjusting in the way I approached the application but it's nice and clear once it's set up properly.