The four of us have shared in weekly game nights for well over a year now, and it's done wonders to keep us connected while we haven't been able to spend time together in person. We have each grown a personal fondness for being able to play our favorite games over the web while at home as a great excuse to partake in each other's company. But as luck would have it, one of our go-to card games had yet to have a solid digital adaptation, so we decided to make it for ourselves and our other friends so we can finally enjoy this incredible game until we can once again meet up for our game nights.

What it does

Kabam in its current state allows players to host and join their own private lobbies and connect to the joint game room over the internet to play the game with 4 players. Players are then each given a unique game interface so they can each see their personal information such as the cards in their hand and their secret role and winning objective. As they play, players are dealt cards that they can play on their opponents, their opponents are given an opportunity to respond using cards from their own hand until one team has been eliminated and the other is crowned the victor!

How we built it

Our project is a web app primarily written in Javascript and based on Node.js.

For our backend, we are using Firebase to store data in the cloud, an Express server to host the game lobbies, to serve the information from the servers to our players.

On our front end, we use React.js to build the UI and UX and perform client-side functions and Sass to help unify the design across our webpages and interactive components.

Challenges we ran into

The card game we used as our inspiration is rather complicated and adapting it to a digital format proved to be a very interesting challenge. We had to take care to highly optimize our backend code because any extra calls to our database or sending sockets over the internet very quickly leads to latency. Adapting game mechanics such as the hidden roles and player range which are designed for an in-person experience to our online format was also an enjoyable obstacle to overcome.

Accomplishments that we're proud of

Getting the game up and running is a major accomplishment. In order to just be playable, Kabam had to have support for creating, managing, and removing private player lobbies, socket support between the players and the database for real-time updates shared with all players, and a complicated user interface to display not just the information of yourself and your opponents, but that also makes interacting with the game intuitive and seamless. We knew going in creating this game would not be an easy task, and we are thrilled that we've accomplished as much as we have in such a short amount of time!

What we learned

Our team came into this project prepared, with most of our design work picked out before hacking began, and it has served us very well in our work on such an ambitious project. Being able to properly delegate tasks among the team and communicate our own work was essential in our successful delivery of the project.

That being said, we had planned to accomplish much more than we did, and falling short of our planned MVP can be attributed to too much planning involving libraries and processes we had little experience with. I think we can all safely agree that next time we need to do some more prototyping and being more comfortable with evolving our requirements throughout the process.

What's next for Kabam! Western Card Game

We have lots of plans for the future of this project! We hope in the future to be able to use this game to play with friends, and in order to do that we have much more to implement to play the game in its entirety including support for 5-7 players, the full deck of ability cards, and unique characters assigned at the start granting special player abilities. We also plan to overhaul the game with our own custom art assets and support for lobby settings to customize the way you play!

Share this project: