DEV Community: Christian Howard

[Entry] Mafia: A Game About Deduction

Christian Howard — Fri, 25 May 2018 15:25:52 +0000

What I built

Mafia is an online version of the popular icebreaker/party game with the same name. It is also known as Werewolf to some. In this game, players are divided into two groups, the Mafia and the Villagers. Within the Villagers, there are two special roles, the Doctor and the Detective. The game is played in two phases: Day and Night.

During the Day phase, the players tries to deduce which players belong to which group and anyone can put a specific player up for public elimination. If a majority vote succeeds, the player is eliminated. During the Night phase, the Mafia can chat to determine which player they want to eliminate while the Doctor can choose one player to save and the Detective can investigate one player to see which group they belong to.

The game ends when either the Mafia eliminate all the Villagers or the Villagers eliminate the Mafia.

Demo Link

https://app-mafia-game.herokuapp.com

Link to Code

https://github.com/christianhoward/mafia

How I built it

Stack
React.js
Node.js/Express.js
Pusher

When I originally thought of this idea, I thought Pusher would only be used for the chat portion and everything else would be pretty straight forward. That was not the case what-so-ever. I should have realized that Pusher would be needed for just about every part of the app and not just the chat. Manually testing a project of this size was also tough to handle. Knowing what I know now, I would probably opt for something less complex for my first go-around with a technology that is new to me (Pusher).

Additional Resources/Info

Unfortunately, I encountered a road block in the form of a last minute coding challenge that needed to take priority, so this is no where near being as polished as I would like.

This game is hard coded for 7 players, so if you are interested in trying it out, I would recommend having 7 total players (including yourself). I also had to hard code the roles for the game, so the role distribution is never randomized. If I had more time, I would have figured out a way to properly randomize the roles. It can be a little finicky at times, but I'm not sure if this is because of my testing locally or if it's the code itself.

Additionally, there are a few UI bugs in the Mafia Chat that I would have liked to clean up but ran out of time. Styling also fell by the wayside to some extent. Generally, my approach is functionality then styling, so with the time crunch, some styling wasn't completed.

With more time, I would also figure out some way to encrypt the React state, so that tech savvy players couldn't go into the DevTools and spoil the game haha.

Mafia: Feature Building and CSS Distractions

Christian Howard — Sat, 19 May 2018 04:31:10 +0000

In my first post about my Mafia project, I outlined some thoughts and plans. Since then, I have executed on some of those ideas and gotten distracted by other ideas.

Planning

First, I jumped into Trello and set up a scrum board to track the various parts of my build. I try to breakdown my projects into back-end tasks, front-end tasks, database tasks and deployment tasks. For the most part, most things fall into the front-end portion of this project as most of the Pusher logic falls into that area.

Initial Progress

After playing around with Pusher in my sandbox repo, I opted to start a fresh repo and move over pieces of code that I had written to accomplish some of the things I want in this project. After getting everything squared away, I dove into improving the chat by adding styling and admin messages that are announced when players join the game, leave the game or are eliminated from the game. Hopefully players find this helpful once the game is in motion.

After that, I set forward to build out a PlayerPanel component to house all the players in the game. This took longer than expected because I had to figure out how to properly update the players array when either you OR other players joined the room. Once I figured that out it was smooth sailing. I was able to write some CSS to manage what a player icon would look like when they are eliminated and I think it looks pretty slick. Following that, I started working on features in the ActionsPanel.

Feature Building

Feature building is one of the best parts about building web apps, because that is where the bulk of the project is! It's also one of the hardest things to test on your own. Initially, I built a generic Button component that would take in props and be reusable (which is something I had never done in any of my React projects). This led to a lot of refactoring and exploration and rabbit holes. Had this been closer to the deadline, I would have probably cut some corners but I'm happy that it happened at this point in my project.

After that, I worked on building partial elimination functionality to test my elimination css before diving into a Timer component for each round. Since all rounds and parts of the round will be timed, it's important for players to have a sense of how long they have. This was pretty straight-forward, as I had built a countdown timer in a previous tutorial project.

Following that, I jumped into assigning roles randomly to players once the game starts and building out the DoctorsVote and DetectiveVote components for those roles to use. The general ideas behind the DetectiveVote component will apply to some of the other Vote components, so successfully completing the logic behind that component should accelerate the completion of the other components.

A lot of my testing and playing around has been by loading the features into the actions panel and just playing around with them. Once I have the playGame function in place, components will shift in and out of the ActionsPanel when they are needed. Here is a sneak peak of what that looks like (note that a bunch of css is still in play):

Note all the random actions I was testing in the ActionsPanel on the right hand side 😂

Gotchas

One of the big gotchas I ran into was the disabled field in my Button component. I couldn't figure out how to properly pass true/false values into it early on so that once players submitted a vote, they couldn't change it. Once I figured out the proper flow of data through the components, everything seemed to fall into place.

Also, make sure your routes have the / in front of them. I spent a half hour trying to debug a 404 issue only to discover that the / was missing at the beginning of the route lol.

Moving Forward

Next steps are continuing to work on the game architecture and hopefully not get too distracted by the css before things are finished. The mindset for the next couple of days is "Build features now, make it pretty later". I know this was pretty vague. I'm happy to go into more detail if anyone has questions or comments!

Mafia: Initial Thoughts and Moving Forward

Christian Howard — Tue, 15 May 2018 15:19:14 +0000

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