15 JUL, 2023

The making of Hexchess

It all started when I saw CGP Grey's latest video on "Can Chess, With Hexagons?" Of course, the answer is yes, as hexagons are the bestagons.

A point of contention in the video regarded the acquisition of suitable hexagonal tiles for construction a physical hexchessboard, as they needed to be appropriately sized, yet with three distinct colours (it takes three colours to tile without having two of the same next to each other when using hexagons). Thusly, I immediately recognised this as an opportunity to build an accessible version: a web app!

My good friend has been working on their own hex-based web app for many years (check it out: hexfriend.net, it's awesome!), and I have been tweaking and polishing bits and pieces in the past year or so. Thusly I have been inspired with desire to create my own self-contained web project for the masses, and I too understand that hexagons are the bestagons, hence the birth of...

Domain name

The name was a no-brainer. However, securing a domain name was not so simple. Initially, I wanted to be somewhat companionable to my companion's web app, and utilise hexchess.net. However, despite Google Domains listing it as available when I first checked, after a few hours of consideration I decided to purchase it. At which time I discovered it was not available. Approximately 2 hours before I had the idea to buy it (and one hour before I tried to do so), someone else had acquired it.

Not to worry, there was another option: hexchess.org! Google Domains listed it as available, and thus I clicked the "Add to cart" button with great excitement... which was immediately dashed as I learnt it had been purchased an hour before hexchess.net had!

Foiled again, I sought other options...

South Sudan

My aforementioned friend had an excellent idea, after hearing about these setbacks: why not try for something like hexche.ss? Do .ss domains even exist?
Yes.
Yes, they do!

Thanks to the recently established independence of South Sudan, they have been offering .ss domains since 2019-ish. However, their registration address (as listed by IANA) of nic.ss does not connect anymore. After an email to the listed Technical Support address (with no response), I started poking around in the Wayback Machine, I found a list of accredited registrars!

So now we're off to the races, right? Sadly, no. The top-level domain of .ss is not available to directly register, your domain must include a categorizing subdomain, such as .com.ss or .org.ss or .edu.ss. Thus concludes my exciting diversion to South Sudan.

The solution

Ultimately, I have settled for an equally suitable, although less common, option: hexchess.dev.

Enough about domain names though, let's talk implementation!

The board

From the get-go, I knew I wanted to make it in native HTML / CSS / JS, and even without the use of <canvas>, as I wanted the built-in accessibility and antialiasing, etc. native features of the browser.

Hex tiles?

How do you make something hexagonal-shaped with just CSS? Actually, it's pretty easy: just use a clip-path. Then you can just chuck any background-color on it and it'll look perfect.

clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);

Hex board?

This was tricky at first, as I tried following a guide from CSS-Tricks. I was successful in following the guide and adapting it to my uses, however it didn't work well for making a hexagonal-shaped board with well-defined paramters.

Thus I adapted my own solution: create a series of rows, offset odd-even accordingly so that they fit together. However, this leaves you with a rectangle of hexagons... until you hide the corners, revealing the hexagon-shaped board of hexagons!

A grid of hexagon-shaped tiles with red hexagons in the corners, revealing a hexagon-shaped group of tiles in the centre.

Chess pieces?

Oh yeah, no they're just part of Unicode. So you can just chuck them into a regular <p> tag, set whatever font you like, and adjust font-size as per usual.

const whiteKing = "♔";
const whiteQueen = "♕";
const whiteRook = "♖";
const whiteBishop = "♗";
const whiteKnight = "♘";
const whitePawn = "♙";

const blackKing = "♚";
const blackQueen = "♛";
const blackRook = "♜";
const blackBishop = "♝";
const blackKnight = "♞";
const blackPawn = "♟︎";

Movement

The only other tricky part was movement. Hexagonal chess has a reasonably tricky movement system, not the least complicated by me not having a proper tile indexing system. However, after a lot of experimentation, I got something working, and then rewrote it after I reworked the board (as mentioned above). The hardest piece to do was the pawn: pawns are so much more complicated than anything else.

Sheesh, that's a lot of tricky stuff to keep track of. Ensuring it is stateless (or at least minimally stateful) and bug-free was also non-trivial, as evidenced by the continual feature implementations and bug-fixes throughout Hexchess' development. Speaking of which...

Development

From inception (viewing CGP Grey's video on the topic) to version 0.9.9 (effectively feature-complete release) was three days. I'm quite proud of that, especially given my confidence in the quality of the implementation, as well as this being my first ever actual web app, and the first project I've written in JavaScript.

A few of the things I learnt along the way:

With all that being said, I hope you'll find some intrigue or enjoyment out of trying it for yourself, available at hexchess.dev right now!