Yesterday I decided to start a small project to practice my JS skills. The objective is to develop an interactive chessboard UI with React. I decided to give it a week of time, with 2-5 hours of programming every afternoon. Let’s see how far I can go!
I don’t have a clear idea of what degree of complexity I want to reach in terms of features (the existing UIs for popular chess websites are quite advanced, see lichess.org for example), but hopefully I’ll be able to move pieces on the board in the coming days!
The code is public on Github and can be found here: https://github.com/TimAstier/react-redux-chess
Day 1
I expected the first day to be quite a struggle because it had been about two months since I last opened a code editor. Fortunately I spend less time than expected with the initial configuration and soon I was all set up and ready to develop my first React component in the Storybook: an Empty black <Square />! Soon followed by a collection of <Piece />.
From there displaying a <Board /> was straightforward but still quite satisfying!
Displaying chess positions on the board was the funniest part of the day. I discovered that there is a convenient and standard way to store a complete chess position in a string, the FEN notation. For example, this is the initial position of a game of chess:
'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
The first part of the string describes the pieces on the board, row after row. For example, ‘r’ stand for a black rook, and ‘K’ stand for a white king. Digits indicate a series of empty squares. Rows are delimited with ‘/’.
Since my <Board /> component had a renderSquares() method that renders the 64 squares of the board, all I needed was to render the squares based on the position described in FEN notation. I used a util function called positionToArrayOfPieces() to provide every ‘Square’ with its content.
renderSquares(position) {
const squares = [];
let index = 0;
const arrayOfPieces = positionToArrayOfPieces(position);
for (let i = 1; i <= 8; i += 1) {
for (let j = 1; j <= 8; j += 1) {
squares.push(
<Square
key={index}
color={this.coordinatesToColor(i, j)}
content={arrayOfPieces[index]}
/>
);
index += 1;
}
}
return squares;
}
And, voila! We have our starting position:
In the evening I did some research to find a way to avoid having to develop all the chess logic myself (chess is somewhat more complex than tic-tac-toe). It happens that most existing chess websites use a library called chess.js, so I will probably use it as well if I reach a stage where I can start playing a game of chess on this UI.
