Connect 𝑘 Website

A parallel project with the tic-tac-toe box is a website that allows you to play a wide variety of Connect 4 and tic-tac-toe derivatives, especially when Sam and I aren’t at camp together. The server-side code is written in Typescript, and the client-side code is written in Javascript. Realtime communication is done with the Socket.io library, and the whole project is packaged with Vite. It also uses the Rough.js library to draw the board in a hand-drawn style.

In order to play many different games, the website has two different “engines” that implement their own game logic, configuration screens, and client-side frontend code.

The configuration pages are dynamically generated from a JSON file, which allows each engine to implement its own options, while still using consistent components. To make the inputs more dynamic, the system also allows the output of one control to be linked to the input of another control. For example, when you change the number of players, that change is represented in the turn control.

So far, I have created two different engines for the website. The Standard Engine allows for games like tic-tac-toe, Connect 4, or Gomoku (A game with a 15x15 board where you need 5-in-a-row to win), with a rectangular board and static gravity. The Gravity Engine uses a more elaborate system for gravity, and allows the gravity to move during a game, which allows a player to set up their tokens in a way that then falls into a winning move.

Here is an example of a game using the gravity engine, where the gravity rotates after each round.

I am currently working on implementing an engine to play Ultimate tic-tac-toe. I am also hoping to make an engine to play on a hexagonal board and an engine to play on a higher-dimensional board.