Checkers

javascript node git html css react express aws Github Live View

This project was built upon many past skills I have learned. I used React, Node, Express, and Socket.IO. Also, I used an EC2 instance on AWS to deploy it. It was a great learning experience.

I installed Express and took a crash course on setting up a simple Node server. Then I started to learn how Socket.IO worked. I started very simple and learned to emit a message from one client browser to another. Then I learned how clients could join rooms and share information with other clients in the same room.

I wanted a proof of concept, so I started to research hosting a Node server. I ended up choosing AWS. I was able to get an EC2 instance working with all the specifications I needed. I tested my React build on the server and was able to use web sockets with the hosted server. Great! Now that I had laid the foundation, I felt confident that I could build the rest with those fundamentals in mind.

Now it was time to officially create my checkers game. I took what I had learned from my chess app and didn't make the same mistakes again. One thing I always regretted about my chess app was that it didn't have a code it interpreted to set a position. This time I made a 64-bit string that I called a FEN number. Each position in the string represented a square on the board. A 0 represented an empty square, a 1 represented a red piece, 2 a red king, etc. This was useful because now I could send and receive just a simple string to the server, and the client could interpret it into a position.

A problem I encountered was how to actually execute a double jump. Should the user just click to the final end spot, and the app just automatically calculate which squares in between were captures? The problem I saw with this is what if two different jumping paths converged on the same end square? We would need some way to delineate which path we wanted to take. So I decided that the app should visualize all possible paths, and the user could manually move the piece for each jump. This way, the user would be giving the input of which path to take.

The hardest part of this project was probably the recursive function that determines all possible jumps. One of the problems I had was that in some cases, the recursive function's first branch endpoint could actually be the first jump point of another branch. This caused the square not to be clickable as a first jump. I was able to fix it by making sure the initial squares around a piece that were jumpable were marked the very first time the recursive function was called. It was very interesting seeing recursion visualized in this way.

All in all, I was very happy with how this project turned out. It was a great learning experience, and I had a lot of fun doing it!