Over the past few weeks, I have built a clone of the popular game Codenames, using React, Express and Socket.IO. I decided on this project as I really enjoy playing the game with friends, and was curious as to what it would take in order to recreate it.

It has been an awesome learning experience, and I have learned a ton about how to use Socket.IO to allow the frontend and backend to interact with each other in real time.

When I first began working on the project, I did not know what I was doing when it came to using sockets. It took a while for me to get my head around how to connect users to a room, and how to broadcast the same event to every client.

I decided to allow players to create their own room codes instead of having them be randomly generated, so that it would be easier for players in the same group to be able to connect with each other.

In this version of Codenames, a room is created when a code is joined for the first time. A room is created with the initial scores, as well as empty arrays for guesses, clues, words and players. This allows for a room to be easily edited as different events take place.

let newRoom = {
        users: [],
        words: [],
        teams: {
            orange: [],
            blue: []
        },
        spymasters: {
            orange: [],
            blue: [],
        },
        scores: {
            orange: 8,
            blue: 7,
            black: 1
        },
        guesses: [],
        clues: []
    }

Once I had rooms figured out, I moved to the game itself, which included the game board and team functionality.

I created a function that took in the official Codenames word list and chose 25 words at random. These words were then assigned a colour, before being shuffled by a function that uses the Durstenfeld Shuffle in order to randomise the words. These words were then added to the room inside the rooms object, alongside the users that were connected to the room.

The rest of the backend was mainly different socket signals that would emit certain data based on different events.

Once the game was in a functioning state, I decided to make it look nicer. I added a brown gradient background to replace the default white, and changed the font to something more playful, Mochiy Pop One and styled the game board as to not make the tiles so boring.

Some screenshots:

The Home Page:

The Game Page - Spymaster View:

The Game Page - Operative View:

Overall, I had a really fun time building this. I'm quite happy with how the final game turned out, and am excited to see what else I can build by utilising Socket.IO.

See the repositories here:

Frontend

Backend