Codenames Online

Developing a real-time board games with node.js and socket.io

Preface (a.k.a grandmother story)

This post is created during a time on uncertainty. Where everyone is stuck at home and it required by law to be stuck at home. Is it the apocalypse? No, is it the zombies? Not either. It's worst, it's a virus outbreak. Worst because at least apocalypse or a zombie attack would have been much cooler (at least in my ungrateful mind) and we could have been allowed to raid NTUC (Is THAT not fun?). But yes, during this time, the worst enemy (at least for those who are not battling the virus that is) is boredom. So in an effort to do what I can to help even a tiny bit in this crisis, I've decided to port a board game that my church wanted to play online (Is it even legal? Probably not, but we did have a proper physical copy of the game... so.... yeah...).

The publisher of the game have a very nice tutorial on how to play the game, so I'll just link their youtuber right here: Codenames: Pictures - Official Rules Video

But in a nutshell, the game is setup with a 4 by 5 grid of interesting pictures on the table. There are two teams and each team has at least 1 spymaster. These spymasters are given a map that maps out which picture card is theirs and the enemy teams. The spymaster must then use a word and a number to try to direct their fellow spies to their own team's pictures. After guessing the picture cards, the next team's spy master can go and this cycle goes on. The first team to gets all their cards first wins. Is that a good explanation? Probably not, but hey, it's the effort that matters :D

Okay, enough of talking, let's talk development

Development thoughts

Originally, my church have planned to play it through a conferencing app like Zoom with someone share screening the image capture of the array of images and manual revealing. Albeit a good enough solution, there are some limitations to this method.

Limitations of a Zoom Codenames session:

  1. Can't have multiple session
  2. Requires a game master to faciliate the game
  3. Game master's reaction time does not provide immediate feedback
  4. Very hard to communicate as they can't point with the fingers (I mean... it is a virtual setting...)

From these limitations, I drew up my requirements:

  1. Accessible to everyone at anytime (not platform specific)
  2. Realtime updates of the game
  3. Multiple room sessions

With these requirements, my solution was a web app running on a node.js server to serve a react frontend with socket.io for communications.

I have deemed that linking up to the website itself would be illegal? Linking it to the source code is also illegal... So I've decided that the best course of action is just to put in pictures!

Implementation

When you go to the hypothetical (cough, cough) site

Sign up page

Sudo sign up page

After you have finish giving yourself a nickname and typing in the room number, you go to team select

Selecting teams

Team Select

Here in the team select, you can decide which team you want to be in and if you want to be the spymaster of the team or not. Once you're ready, you can press on the "I'm ready!" button to ready yourself

Team select UIs

Everyone is getting ready!

When everyone is ready, they then transition to games mode

Spy view

Spy view

If you are the spymaster, you can see more stuff

Spy Master view

Spy master view

You can then click on stuff to annotate it

Annotation

Annotation of picture

And once you are confident that's the picture, the spymaster can reveal the card's identity

Selection

Spy master select the confirmed picture

Reveal

Spy master reveals the identity

This cycle repeats until one of the team wins, then they can either continue to the next board, go back to team select or realised that there is more to life that playing games... maybe start working out... or get a hobby...

Here is the link to prove that it is not a gimmic, and it runs in sudo-real-time:

Codenames online - demo video

Thanks for reading and stay safe :)