Pet project: chessboard UI – Day 5/6/7

Last Sunday I went to a meet-up in Stockholm where developers gather in a Starbucks to work on personal projects. By speaking with a more experienced JS developer I realised that it would be nice to improve and refresh my knowledge about the raw JavaScript language. So I spent most of my programming time going through the official documentation and reading through a nice book, Eloquent Javascript. (The YDKJS series is also good, I read it a year ago but I find Eloquent Javascript to be better organised and more practical). Still, some decent progress has been made on the chess project!

Drag & Drop

Moving pieces via Drag & Drop has been successfully implemented. In react-dnd jargon, I decided to make <Piece /> a DragSource and <Square /> a DragTarget.

When a Piece is dropped on a Square, a MOVE action is dispatched to update the game position:

Screen Shot 2018-08-29 at 18.14.00

Move validation

As you might have noticed in the previous screenshot, the MOVE action is actually only dispatched if the index of the destination square is included in the props legalMoves, which is an array of all legal (valid) index moves.

I decided that those legalMoves would be calculated at the square level and passed to each piece as a prop. This way, we always know where a piece can move before it is actually moved by the user, improving the speed and the overall UX. This will also be helpful if we decide to help the user by highlighting the possible moves when a piece is being dragged.

To do so, the <Square /> container gets the legalMoves from the redux store via a selector, getLegalMoves. But since the moves are specific to a square index, I had to pass the square index to the selector. To be sure that everything was correctly memoized, I followed ideas from this article:  Computing Derived Data.

Screen Shot 2018-08-29 at 18.25.28.png
The getLegalMoves selector takes the square index as argument

Then the fun began with writing the logic of the findLegalMoves function. After quite a few Jest tests and calculations, the basic chess rules have been implemented. The code of the chess logic is not completely DRY for now: it would be good to refactor some parts. But at least it is tested, which will facilitates a lot the implementation of more advanced chess rules and the refactoring work.

Screen Shot 2018-08-29 at 18.01.00.png
All green!

There is one part of the code that I was quite satisfied with: the function to find the valid queen moves reuses the functions to find bishop and rook moves. This represents nicely the fact that a queen in chess has the combined abilities of a bishop and a rook:

Screen Shot 2018-08-29 at 18.29.33

Live demo

I deployed a demo of the app on Heroku with this handy buildpack. Feel free to try it out!

Screen Shot 2018-08-29 at 18.36.41

Next steps

I might slow down on this project to continue reading Eloquent Javascript and go through the codebase of my former project (ChineseMe) to prepare some job interviews.

Still, there are some simple ways to improve this app:

  • Complete the chess logic
  • Add basic user actions (start a new game, go to previous / next move)

I’m not that far from completing all the TODOs to achieve the simple vision I had for this pet app. I’ll make an update in the future when significant progress is done. Cheers!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s