Let's talk about the Chessboard

In this DevLog, I want to cover how I go about designing the chessboard. This log will touch on various subjects from research, issues I encountered and my current approach to addressing these problems. Bear in mind that all the processes I mention here are subject to change.

I think the chessboard deserves a dedicated log as it is the centrepiece of this project. After all, users will be looking at this during their play sessions, and it will likely be one of the primary focuses when evaluating their experience with this application. Another primary focus will certainly be the input experience, which I will cover in the upcoming log.

If you are not familiar with how a chessboard should look, here is a quick summary of its characteristics:

• A board with 64 squares, with 8 rows and 8 columns
• Standard design features alternating colours between squares, also known as a chequer pattern
• The chequer pattern should have a distinct contrast so that both players should be able to identify chess pieces on the board easily
• According to international standards, the term 'Rank' refers to the horizontal row of the board and the term 'File' refers to the vertical column of the board

The Square problem

When designing the chessboard, I discovered early on that it is actually quite difficult to create a square in a terminal setting. This is due to the fact that each character space is rectangular by default, and depending on which font type you use, your output may differ.

I know there are terminal applications out there that use a graphical interface plugin, and that images can be loaded as texture maps, but that's out of the scope for this project, and it is not the visual outcome I am after.

So what visuals am I after? I want a retro, text-based look that features mainly unicode characters. With that in mind, I looked up many different character sets within the unicode library and drafted my first layout. This design focuses on establishing the 'square' structure, board presentation and providing helpful coordinate markers. Here is a screenshot of the output on terminal.

This board design is published as a gist, feel free to adopt this in your project.

The Chequer Pattern problem

Whilst the design above certainly gets the job done, it has a problem that unfortunately led me to change my design. Take a pause here and guess what the problem is. When you are ready, read on.

Although my initial design managed to create a close to perfect square, each square can't be filled with background colour via ANSI sequence without affecting the adjacent squares. The visual result is choppy and looks buggy, and that's not going to be appealing from a user's point of view.

So I am left with two options: stick with the choppy look or simply leave the board unpainted. The latter will still look great if I am after a minimalistic approach, as terminal apps have many great theme settings that can make elegant text-based designs speak for themselves.

Introducing the third option, aka back to the drawing board.

Accessibility-first design

My current chessboard iteration embraces the use of whitespace. Instead of relying on unicode box-drawing characters, I realised that the easiest way to create a chequer pattern is simply by colouring the background of a whitespace and letting the colour form a grid by itself. This approach also solves a few other issues.

Firstly, the end presentation can be controlled. Due to the fact that terminal settings can neither be controlled by a program nor is it a good idea to alter the user's device, colouring the background as well as the chess pieces can ensure most devices will share a similar experience.

Secondly, the size of the chessboard can now be changed more easily. I noticed that with extra space added, a square structure can still be achieved, with smaller chess pieces being the main trade-off. Whilst this design may not feature the most perfect square, I think the benefit of having the chequer pattern displayed properly outweighs in this setting, but it is still early for me to draw a conclusion.

I hope you enjoy reading this log. Stay tuned for my next update.

---