Pet project: chessboard UI – Day 2

Today was a rather short session. I started by adding a <Game /> component that will be responsible for handling the data of the whole game (mainly the data from the FEN notation). That way we can keep track of the whole game situation, and the <Board /> only has to care about the position.

Then I played a little bit with the chess.js library. I went for a basic test implementation (there are cleaner ways to integrate third party libraries in React components).  Still, this demonstrated the possibilities offered by this library:

Screen Shot 2018-08-24 at 08.47.55
Initiating an instance of Chess in the componentDidMount() method of the <Game /> component.

With this code the board now displays the game, here after the first move ‘e4’:

Screen Shot 2018-08-24 at 08.51.52
One move in!

Now here are a few things I realised and will have in mind for the coming days:

  • Using chess.js sort sof defeat the purpose of this pet project. I’ll learn more by developing the chess logic myself, gradually adding more rules.
  • React DnD (Drag & Drop) looks like a promising option for allowing the user to move pieces. And the official tutorial even showcase this very chess example.
  • I need to start separating the react components between components (responsible for rendering UI elements) and containers (responsible for handling the data and passing it as props to the components). This distinction is sometimes called dumb vs. smart or presentational vs. container components. Here is an explanation from Dan Abramov.
  • I will soon need redux to have the whole state of the app in one place and handle user actions in a more manageable way. This article explains how to add redux.
  • Redux will also allow me to follow a TDD approach when developing the chess logic. For example, I can write a test to see if the game data is updated (using selectors) when a user move a piece (a redux action). This article looks like a good reference.

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