Building Jason Chess — Part 1: Rendering the Board and Pieces

An ongoing series about building a React app called Jason Chess, a version of chess where if your name is Jason, you can’t lose.

Jason Melton
Level Up Coding

--

What Is All This?

Over quarantine, I’ve become very addicted to chess. I like how random chance plays a small role in the game. Instead, better players manifest from hours of obsessive study. Getting better at chess has been a great distraction from the world crumbling all around me, lol.

As an engineer, it’s my job to build solutions to problems, right? Right. Well I’ll identify one problem that exists: whenever I lose at chess. It’s my job to fix this. My solution: Jason Chess.

Jason Chess is a version of chess where if your name is “Jason”, you can’t lose.

This blog will follow the development of Jason Chess. It’s my goal to provide you with something instructive or at minimum, I hope you find the some humor in the idea.

I’m a junior developer so please forgive my imprecisions. If you have any feedback, please comment or to email me at jason.melton2@gmail.com.

jump to the GitHub

Rendering the Board and Pieces

Table of Contents

  • Preliminary Junk
  • Basic Layout and Menu
  • Rendering the Board
  • Rendering the Pieces
  • Conclusion

Preliminary Junk

To get this bad boy started, I set up a create-react-app, deleted default junk, and created a GitHub repository. Before going further, I spent some time planning. I like to write as I plan so I’ll keep some commented out notes in the readme until the project is finished.

I think of the work in two parts: the logic and the render — very similar to the divide between a front and back end. However, in this case, I won’t have a true back end.

The logic of the chess board will be an array of eight arrays. Each array will have a length of eight to represent the 64 spaces of a chess board. Pieces will be coded with two character strings.

The render will consist of mapping boardArr into the corresponding components.

Basic Layout and Menu

For now, I’m going to keep the page simple. There will be two main elements: a chessboard and a menu.

Later, I will also add a box above and below for entering the player’s name. Remember, if you enter the name “Jason”, then you cannot be checkmated.

I picked out some colors from Coolors.co and added height and width to the App component. I also created a class called .cfb (standing for center flex box) that I use to center things throughout the project.

The menu is a simple component, Navbar:

I’ll cover the chessboard in the next two sections.

Rendering the Board

My plan for the board is this: I will map my boardArr into 64 divs that will be evenly displayed using CSS grid.

I’ll show the whole Board component and CSS file and explain my work:

Board gets the boardArr as props. The function renderBoard() maps each rank of boardArr and then each square of each rank to return a div. That way we get our 64 divs.

I use the function squareClass() to determine the classnames for each square. Light squares get a class of cfb and dark squares get a class of cfb dark. As previously mentioned, cfb adds a centering flex box and dark adds a light blue background-color.

squareClass() also determines which squares are dark squares. I use the helper function isEven() to do this. Starting from 0, even ranks and odd files are dark while on odd rows, even squares are dark. I find the rank and file of each square and add dark to the appropriate divs.

Rendering the Pieces

I render the pieces in two steps:

  1. I create a picture library that can be accessed via an object.
  2. I create a dynamic function that plugs in the correct image for the string code in the boardArr.

I found this great site for chess piece svgs. I threw the images in a folder and created a file called index.js. There I created an object called pieceObject that accesses the image based on a key corresponding to the string codes in the array.

Next, I feed this object to a component called PieceImg.

PieceImg takes props of piece that will be a code like bp for black pawn or wn for white knight. The pieceObject looks up the corresponding image. Also, if there isn’t a piece code on the square, piece will point be false and I will return an empty div.

Look again at the renderBoard() function in Board. Here you can see the PieceImg is being fed the props of a piece code or false.

Conclusion

Thanks a ton for reading. Again, I assume there are some great ways to make chess games. I came up with this off the top of my head and grinding out bugs. I’m sure there are better ways so I’d love your feedback. Hit me with a comment or an email — jason.melton2@gmail.com.

This will be an ongoing project so I may be inconsistent with the blogs, but I appreciate you reading.

Best, Jason

--

--