September 16, 2014
by The Buddy Group
Building A Happy Hour App on Mithril and Ratchet PHP

It’s the age-old question: Which game do you want to play? Chess, or Global Thermonuclear War? The Developers here at The Buddy Group pondered that very question when it was our turn to host the company Happy Hour. Of course, being the nerds we are, we chose to play a game not on the list: Which Buddy.

 

Which Buddy is a very simple game. Users connect to the app on the device of their choice. Once the game starts, each user gets the same question at the same time: “Which Buddy …?”  Each user then selects a person from the drop down list of currently connected users.  After all the votes are in, the system calculates who got the most votes and divvys up the points. The elected individual with the most votes gets 3 points and each person who voted in the majority gets one point. Players gets shown the winner for that round.  At the end of the game, the person with the most points wins. Up on the big screen, users were able to see the leaderboard and track who was awarded the most points for each question. Sounds simple right?

While the gameplay is pretty straightforward, building it was another story. When we set out to start building the game, we sat down and tried to come up with a plan of attack. We knew we wanted to build it using web sockets and that we wanted to try one of the newer front end javascript frameworks. After doing some research we decided our game would be built upon Mithril js framework and we would utilize Ratchet PHP as our socket server.

We chose Mithril because of its small file size and really simple syntax.  It doesn’t have nearly the bloat of frameworks like Angular and Backbone.  Those frameworks are great, but they were more than what we needed for this project. Mithril was really simple to just jump right in. Their documentation is pretty short, but that’s the point of it, and that’s what we liked about it. There was still a bit of a learning curve but after using it on this project but we’ve decided to keep using it on future javascript intensive projects.

We’ve also been messing around with Ratchet PHP for a while.  It’s a great bit of code that adds web socket functionality to php.  Since we are most familiar with php, this was much easier to get started with than trying to build it in, say, Nodejs.  Ratchet is really simple to use and has pretty good documentation to go along with it. The socket server basically just handled the connections and logging the user into our database. The rest was handled by the javascript admin client.

The front end was built with three different types of users, a game player, an admin, and a leaderboard.  Each one had a different view and while there could be multiple game players, there could only be one admin and one leaderboard. The admin client was the one that controlled everything, from starting the game to sending out questions and calculating the results. The admin kept track of all the users and their rank and score.  One of the best things we did last minute was add the ability for us to create questions on the fly. This worked out perfectly in our Happy Hour since we were nearing the end of our stock questions, but everyone wanted the game to keep going. Crowdsourcing questions from the players made the game that much more fun.

To find out more about how we came up with the Which Buddy app, check out Part I of this blog series: Happy Hour at Work? There’s An App For That.

Join in the conversation!