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:
With this code the board now displays the game, here after the first move ‘e4’:
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.