Draw a chess board with CSS flex
This weekend I returned to Florida after spending a few days visiting my friends in New York City. As I saw Instagram stories of NYC folks embracing the -14 Celsius degree weekend 😰, I can’t help but feeling grateful for the lovely weather of where I live in Central Florida 🌤️. I felt like I should do something to be worthy of it, so I started to work on a mini weekend coding project.
This time I wanted to work on something a bit more frontend related because the last project (the Discord stock price bot) is a more backend one. On a side note, I spent the last few years of my software engineering career doing mostly frontend web development. As a result, I feel like I can write quick sort in JavaScript with my eyes blindfolded (hey my future interviewer, please take this with a grain of 🧂). The problem is I still feel bad about CSS skills so I decided that I would work on a more CSS-heavy project: drawing a chess board using mostly CSS (with some HTML and JavaScript, of course!).
Below is what I was able to achieve after a bit more than 2 hours on a Saturday night in the Sunshine State
Here is a quick overview of what I did:
- Use create-react-app to generate the boilerplate for the code
- Enable Sass to make working with CSS a more pleasant experience 🎨
- Use emojis for the chess pieces♟️
- Write the code 🧑🏻💻
- Push to Github at github.com/seanluong/chess-board
- Host on Netlify at css-chess-board.netlify.app
One nice little challenge that I quite enjoyed solving in this project was how to map from a 2-dimensional array in a programming language like JavaScript to the chess board. While this may sound pretty straightforward, the thing is that UI elements, in particular DOM elements, go from top to bottom, so if we have a DOM element for each row on the chess board we will probably be ending up having row 1 on top row 2 on top of row 3 and this keeps going until row 8; meanwhile the conventional way of presenting a chess board on a computer screen is exactly the reverse: rows go from bottom to top as their indices increase.
There are at least 2 options to solve this problem.
Reverse the board
Since we can neither change the way pieces are put on the chess board nor the convention of presenting a chess board on screen, we can just simply reverse the way we store the chess pieces in our 2-dimensional array: dark colored pieces will be put on row 1 and 2 and light colored pieces on row 7 and 8.
The problem with this option is that it makes mapping from the row and column indices of a piece to its coordinate on the chessboard unnatural: the dark colored rook at 8A is now at row 0 column 0 while the knight at 1G is not at row 7 column 6 in our 2-dimensional array. Normally one would expect to map from row 1 on the chess board to row 0 in the 2-dimensional array in JavaScript.
Reverse the flex-direction
If we want to keep the mapping for coordinates on the chess board to row and column indices, and IF we happen to make the chess board a flex container going in the column direction, then we can just simply change the value of flex-direction to column-reverse. Voilà!
Now if you are an avid chess player, you may have noticed that something is missing in my work: the chess board doesn’t have the names of its row and columns, or ranks and files in chess parlance, showing around the board.
As soon as I realized this issue, I figured adding the ranks and files’ names would lead to an overhaul of the layout structure. Besides, all I wanted to do when I started working on this project is to play around with the flex box model. So I decided to defer working on the issue until I have time to re-do this project using a different CSS concept: the grid model.
