Project Overview

The goal of project Zukertort was to make a tool that can render chess positions in HTML format that can be viewed and interacted with in a web browser. Zukertort is specifically designed to work with websites and apps that feature interactive chess positions. Zukertort can also take in the FEN format of chess notation and output an HTML chess board.

Board and Piece Representation

The 8x8 chess board is represented by a 64 membered JS string. Each member of this string encodes for the pieces and spaces of the chess board. Each of these string members has an assigned variable that holds a <div> element which is rendered as the pieces and empty squares. The variable boardTemplate holds the HTML structure for the chessboard which is a long string of <div> elements.

Board and Piece Rendering Functions

The core of the Zukertort tool is the two functions renderBoard() and renderPieces(). To render a desired chess position, two steps should be followed.
1. The renderBoard() function is called from the HTML file where the board should be displayed, the board made of HTML elements is inserted into the file.
2.The renderPieces() function is called with the JS string as the argument, like this renderPieces(position_1).

FEN Reading Feature

Zukertort is capable of taking in a board position in FEN notation format and render it to an HTML board. Forsyth–Edwards Notation (FEN) is a standard notation for describing a particular board position of a chess game. The purpose of FEN is to provide all the necessary information to restart a game from a particular position. Here's an example of FEN notation, which represents the starting position of a chess game.

rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR

The capital letters represent white pieces and small letters the black. While handling a FEN notation, what Zukertort is doing is to convert it in to the Zukertort format of notation first and then continue with the rendering process.

Design Sprints

Zukertort is made in four design sprints. Each sprint lasted for 2-3 days. The second sprint of Board Representation lasted for 5 days since another option of array was experimented with to represent a board, before deciding for the string data type to be used.

Zukertort in Action

Zukertort can be easily integrated with any website or app that needs to display interactive chess positions. Shown below is an example where Zukertort is used as part of a Chrome Extension.