Typy is a browser based typing game. It was based on a game I saw two people play on a google docs document one time. About a month ago I was sitting bored at home with nothing to do and remembered it. I decided to make it into a real online multiplayer game. This project was pretty fun and I learned a lot from it. So here’s the write up.

Technologies

This webapp uses a handful of things. For starters, it’s a Firebase App. It’s built entirely on static front end code using the Firebase API to interact with Firebase’s backend services. The result of that is months of work turned into 1 month of work (It took me a month because Destiny and other totally important things). You can read about why I think Firebase is great in this post on BaaS. I mainly used Firebase because I needed its realtime functionalities, the other stuff it came with was great too though. I have no idea if anything I did was right or not, but hey, it works and that’s what’s important.

A lot of this app is built on AngularJS, but I didn’t use Angular’s templating this time. I’m sure there’s some reason I decided not to do that but I don’t remember what it is. I used Angular because the game heavily relies on the ability for users to edit form fields in realtime, and it seemed like Angular was the best way to handle this. Plus Angular looks good in any portfolio. On top of that, I was using an addon made by Firebase called AngularFire, which allows for tighter integration between my Firebase and Angular JavaScript code.

The entire site and application was developed and prototyped using HarpJS, which I have written about before. This made development very simple as I was able to template everything using EJS and style everything in SCSS and then easily compile it into plain HTML/CSS/JS.

Moving on.

Design

Unlike some of my other projects, I didn’t spend that much time designing this one. I set up a custom implementation of Skeleton, which is amazing by the way. Half way through I thought about switching to Bootstrap or Materialize, but decided that both were way to bloated for my needs. I only needed the simple stuff that came with Skeleton.

I wanted to go for that material-esque flat design thing that’s in a lot of my projects and that’s what happened. I spent almost no time on colors and pretty much used the default Skeleton blue colors. I’ll probably change them eventually but for now they’ll just stay like that.

As for the logo, it’s just something I made really fast in Sketch 3. Everyone seems to think its okay, so I’m just going to leave it. Every app needs some sort of icon to identify it by and that’s the one I made for Typy. It might be a little generic, but it’s still fine for what I need it for.

Gameplay

Typy is a typing game. Lots of typing happens in Typy. I thought a lot on how the game should function but in the end I decided that simple was the way to go for now. The way gameplay actually works is described here.

From a technical standpoint, Typy works using three objects. The Library, the Profiles, and the Games. Two Profiles are matched together to form a Game and then a phrase is taken from the Library and fed into the Game object. The game object contains two strings which both players can edit simultaneously. That’s how the game works.

That pretty much wraps the whole thing up. Now go play Typy at https://typy.firebaseapp.com.