Gifs Against Humanity

Inspiration

Cards Against Humanity is pretty cool, but what if it had gifs? We wanted to create this new take on the classic card game, and thought we could make things interesting by randomizing reaction gifs to create a "hand" that will be used to answer a prompt!

What it does

Players join the room and are dealt a hand of gifs. A player clicks "Start judging" to be the judge for the round. Our central coordinator sends out relevant notifications to signify that the round has started. A prompt then appears on the screen and players choose which gif they will submit. The judge picks his/her favorite submission out of the gifs and the winner is announced! The winner is the next judge and hands are reset :)

We added a real-time chat window so you can talk with your friends and receive messages from the server. It also supports HTML tags so you can embed images and stuff.

Players can also hover over individual gifs to see interesting descriptions! The Microsoft computer vision API recognizes and labels each gif in your hand, which is usually funny/accurate.

How we built it

Our back end uses NodeJS and Socket.io and our front end is built using Bootstrap. We knew the theme of the hackathon was to do stuff we've never done before, so this is our first exploration into JavaScript and NodeJS. Clients pull gifs from the Giphy API, pass them to the Microsoft computer vision API to label each and then display them to the user.

All coordination is done through multicast messaging using sockets between clients and the server. Our server is almost completely stateless, holding only the current list of group members which is passed to new clients to update the group view.

Challenges we ran into

We knew the theme of the hackathon was to work with new technologies, so we decided to learn JavaScript/NodeJS/Meteor. It was a lot harder to work with than we anticipated, especially because we're more familiar with sequential code execution rather than complex, asynchronous socket systems. Also HTML/CSS are super wonky.

We couldn't find a way to differentiate the user avatars in the game, so we were looking for ways to make our users look unique.

Accomplishments that we're proud of

We're new to all of this and it actually works! All the coordination between the clients and server were done through multicast messaging which we've only just been exposed to through classes. It was super cool to see real-time chat, sophisticated computer vision and our own version of multicast group management come together to make our idea a reality.

We decided to display each user with a unique cat photo that you can enjoy while playing the game :)

What we learned

For JavaScript, its probably better to use a framework such as Angular as opposed to plain coding in JS/HTML/CSS. Also, Meteor is the Rails of JS. Also, async is really weird/unintuitive.

What's next for GAH

We need to make it more pretty and sophisticate the rules and mechanics.

First, we're going to try to add animated dragging (like Hearthstone), we're going to add timers for the round, we're going to try to add session saving for groups and we're going to try to diversify our gif pool over time.

We hope you all get to play a full version of Gifs Against Humanity one day!