When I saw the Pusher Contest email land in my inbox a few weeks ago, I saw the opportunity to challenge myself to build a product within a limited timeframe and use a technology that I do not have much experience with. I leapt at the opportunity and started thinking about what I could build and how I would go about doing that. First, I dove into Pusher to really figure out what it does and how it works.

First Experience with Pusher

My first thought was to think of building a simple game that implemented a chat feature, so that players could talk to each other. Thus, I started diving into Pusher tutorials to see how to use Pusher Channels to accomplish this. Once I felt I had a good understanding of the data flow, I opted to dive right into some sandbox style tests to see how the rest of the application would work. It was in this sandbox that I discovered that Pusher would be needed not only for the chat aspect, but likely every other aspect as well (but more on that later). With this realization, I discovered that I could definitely implement my idea for a web based version of the game Mafia.

Mafia

My Mafia game will be a web based version of the popular icebreaker/party game Mafia (also known as Werewolf in some areas). Users will be able to provide a username and room name to join a room that other players are in. In that room, every player would be able to chat with other players and make decisions based on their role in the game. Once a player is eliminated, they would no longer be able to chat or make decisions that would influence the game.

For those not familiar with the game, there are two categories a player can be grouped into: Mafia or Villager. Players that are part of the Mafia know who the other members of the Mafia are. Each night, members of the Mafia will eliminate one person from the game. Everyone else is a Villager. Within the group of Villagers, there are two special roles: Doctor and Detective.

The Doctor has the ability to save one member each turn, including the Doctor, but they can not pick the same player in back to back turns. The Detective has the ability to learn what role a player has each turn. Villagers and Mafia will not know who has these specific roles, and neither the Doctor nor the Detective will know who has the other special role. Whoever is not Mafia, the Doctor or the Detective is a regular villager. They have no special powers but do have the ability to vote whether accused townspeople are Mafia or not. If a vote is held on an individual, all players left in the game will vote and the majority rules.

The beauty of the game is the art of deduction!

Architecture

My strongest skills lie in full stack JavaScript, so this project will be built using React on the front-end and Node/Express on the back-end. Pusher will be providing all the action updates within the application.

I think the use of React components and state will be incredibly helpful in managing all aspects of the game. I have prior experience building a game in a personal project of mine, and found that managing game elements in the state was incredibly helpful.

My initial wireframe has the game laid out in three areas, a Players Panel to show all the players in the game, a Chat Panel to show the conversation throughout the game, and an Actions Panel to execute the various actions throughout the game.

In my next post, I hope to share my progress, including hiccups and gotchas.

• Part 2: Feature Building and CSS Distractions