Pet project: chessboard UI – Day 4

Today was a short programming session. The objective was to move pieces on the board by dispatching MOVE actions.

Handle MOVE actions in the game reducer

This is the first implementation of a move. I update the position as well as the fullMoveNumber. Note that I use a function called calculateNextPosition() to find the next position based on the origin (from) and destination (to) squares.

Screen Shot 2018-08-25 at 11.55.13

The calculateNextPosition() function was not existing yet. So I wrote a test for it:

Screen Shot 2018-08-25 at 11.53.44

Thanks to the two util functions developed yesterday (positionToArrayOfPieces() and arrayOfPiecesToPosition()), making this test pass wasn’t too difficult:

Screen Shot 2018-08-25 at 11.54.02

And with that in place, all the tests are now passing!

Screen Shot 2018-08-25 at 12.08.29

Playing around in Redux devtools

According to the tests everything should be working properly. Still, it’s fun to see the pieces moving on the board! Below is a small demo recorded live.

Note: don’t try this in an actual chessgame…

Tomorrow I’ll try to implement moves via Drag & Drop using React DnD.

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