Ultimate Werewolf is a rendition of the popular party game, Werewolf, but given a fun expansion. All players are given a card at the beginning of the game, and each card has a unique ability. Each round, the moderator will allow each of the players to use their unique ability, and at the end of the round players will have a chance to discuss the round and finally vote on who they think is the werewolf. If the majority of players vote for the werewolf, the players win. If the majority of players vote for a villager, the werewolf wins.

The idea behind making this game a web application was that no player would have to be the moderator, and the game could handle the turns automatically. The idea to make it a web application in the first place was because I had been playing the card game version of it with my friends, but one of them was moving away to Perth, and I wanted to make sure that we could still play the game together. I also used Team Fortress 2 assets in place of the original cards, as they were more interesting and quite easy to adapt to the themes of the game.

I definitely began development optimistically in terms of the scope of the application. I had a lot of ideas for features that I wanted to implement, and I was very excited to get started. The first of which was to make online lobbys using a random code generator, and SocketIO rooms in order to keep track of concurrent games.

I added a chatroom feature to the lobbies so that players could chat with one another in the game, and discuss who to vote out. I added a deck feature so that players could customize the cards that were included in their game. All of these features were synchronised across browsers using SocketIO and I learnt a lot about Websockets and sending and receiving data with the server.

With beautiful JavaScript functions like this:

1function drawDeck(active_deck) {
2  cardlist.innerHTML = '';
3
4  for (let i = 0; i < deck.length; i++) {
5    const card = deck[i];
6    var selected = "not-selected";
7
8    if (active_deck.includes(i)) { selected = "" }
9
10    cardlist.innerHTML +=                                 
11      `<li class="card" id="` + i + `" onclick='editDeck(` + i + `)'>
12        <div class="card__container ` + selected + `">
13          <img src="img/` + card.toLowerCase() + `.png" alt="` + card + `" class="card__image">
14          <div class="card__name">`+ card + `</div>
15        </div>
16      </li>`;   
17  }
18
19  card_count.innerHTML = active_deck.length + "/" + (current_lobby.players.length + 3) + " cards"
20}

Clearly I hadn't heard of template literals - and thankfully not; or otherwise I may have tried harder to see this thing through to the end. The idea of doing all of this without type-safety now feels so foreign and illegal. No idea how I managed to get this far.

The only thing I didn't get around to doing was implementing the game loop. Yep, the only thing missing was the game.

I decided at this point that I was interested in learning React and that I would port what I had already made to Next.js. In attempting to do this, I was unable to figure out how to get SocketIO to integrate with Next.js and at that point my interest in the project had waned. Not using the up-to-date technologies that I was interested in learning about was definitely a factor in why I lost interest. I am keen to return to this project in the future, but I think that a better approach would be to start from scratch using a different JavaScript framework.