Pet project: chessboard UI – Day 1

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!

Screen Shot 2018-08-23 at 16.00.46
A soon-to-be-full-of-pieces chessboard

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:

Screen Shot 2018-08-23 at 16.07.53

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.

Going beyond ‘ten in a row’ at the cup-and-ball game

Ok. This one is a silly challenge I had in mind for quite some time. The rules are simple. Take the most simple, straightforward, seemingly meaningless game ever created – the French bilboquet – and do ten in a row.


Well, this story is pretty short. I used to play this game a little bit when I was a kid.  But I never did more than eight or so in a row. So I wanted to see if I could break the limit of ten in a row (don’t ask why).

In just two 5-minute sessions, the challenge was completed (hurray! I can now move on with my life).

2018, August 12: Seven in a row!

2018, August 18

This was a bit weird but I was out of my shower and feeling inspired after reading about ‘living in the present moment’ from the book Become what you are. I tried to keep what I had just learnt in mind while trying this silly challenge one more time – and tadaa! – fifteen in a row:

Good-bye, Mr. Bibloquet! I’m done with you… until the next challenge!

 

First try at commenting a chess game while playing live

For quite some time I’ve been following chess commentators on Youtube (John BartholomewChessNetwork and Agadmator are my favourite).

Watching chess videos is sometimes more convenient than reading chess books. Yes, it’s more passive than actively reading and going through the moves on a chessboard. But the nice thing with live commentary is that you can listen to the player’s thoughts live.

I believe recording those videos is also very helpful for the authors to improve their own understanding of how they play the game. So today I challenged myself made my own live commentary while playing a 15+5 game on lichess.org:

NOTE: The audio quality is quite terrible, especially during the first two minutes. I’m currently recording with the embedded mic of a MacbookAir. Any advice on how to improve audio in future videos is welcome.

There will probably more videos of this type in the future:

  • It’s a good way to improve my understanding about how I think when playing chess.
  • I can listen to myself speaking in English and try to catch grammar or pronunciation mistakes that I wasn’t aware of.
  • This prevents me from spending too much time playing chess online. Recording one game is quite demanding in terms of mental energy.
  • It’s quite fun to do!

Flash thinking

I recently decided that I wanted to become better at expressing my ideas and inner thoughts. Yesterday night I was lying on my bed trying to fall asleep when I got an idea: the next time I would come across a topic or question that suddenly interests me, I would spend a few minutes thinking about it and then record myself immediately in a short video.

I was so excited by the idea that I woke up to do a video about this very idea (hehe!), which was a funny way to start the series. The idea of  calling this series Flash thinking came from rock-climbing: completing a rock-climbing project flash means to successful climb it to the top during the first try. Flashing a problem is very satisfying. It proves that my general climbing training and skills allows me to tackle new individual problems.

The rules for those Flash thinking videos are simple:

  • Record the moment
  • No notes, no script
  • One take

Of course, as in rock-climbing, I don’t expect to flash every problem. I learn by failing. And even if you flash a problem, you can always try to do it better the next time. So I intend to make additional research and follow-up writings or videos on topics that really interest me.