Coffee, Coding and Conferences – a story of our winning hackathon entry at PHPUK14. phpukconf

So the other weekend the PHP UK Conference happened, and Tom, Jon and myself (Kris) were there to soak it all in. There were some great talks but the highlight for me has to be winning the Hackathon competition!

From https://www.facebook.com/media/set/?set=a.596747743736095

From https://www.facebook.com/media/set/?set=a.596747743736095

What is a hackathon?

A Hackathon is a competition in which people have a short amount of time to ‘hack’ something together based on a topic or set of rules that are often not disclosed to entrants until the hackathon starts.

At the PHP conference, this year’s hackathon (sponsored by JetBrains) was about the Sochi Winter Olympics, and the task was to use an API (or data-feed) and to build something web-based that used the live olympic games data. Data which included country information (number of medals, medal history), athelete information (pictures, stats like height and weight) and so on.

From https://www.facebook.com/media/set/?set=a.596747743736095

Above: The hackerthon space. Source: https://www.facebook.com/media/set/?set=a.596747743736095

What did we do?

After not being able to come up with any sort of killer idea, inspiration came to me during an afternoon talk.

We would build a game about the Olympic games!

Sochimon, gotta catch ’em all!

sochimon

It’s your job to collect all of the winning medals from each Olympic Country. As a fantastically rich PHP developer, you have a private jet at your disposal

  1. You will gain points for every medal you pick up.
  2. Unfortunately, the athletes also want to come along for a ride, so you have to bring them with you.
  3. Athletes will weigh down your jet, so you have to spend your points on fuel!
  4. You can fly whatever route you want, but you must collect all the medals.

Score as many points as you can by choosing the best route!

How do you play the game?

We displayed a list of countries, and every time you clicked, a plane would trace a line on a world map showing your route. Your score would then increase as you get points for each medal at that country, but the score would decreased by the amount of points you had to spend on fuel based on your current weight.

A simple enough task, but it is reasonably complex!

  • Since athletes from different countries weigh different amounts, you should pick up lighter people first to save on fuel.
  • You want to finish at the country which weighs the most so you don’t have to use any fuel

sochimon_game

Building it

We stuck to what we knew, and used ZF2 as the PHP framework (well, Tom and Jon knew ZF2, I am still learning!) For the UI, we went with Bootstrap for HTML/CSS and Leaflet for OpenStreetMap. I had an idea of how I wanted it to look so I drew it all down on paper for the other guys to comment on. The deployed version was tweaked only slightly from my original designs.

We divided the work into Framework Skeleton, Backend Data gathering and Front-end UI.

Without a framework and skeleton to base things on, it’s easy for developers to put things in the wrong area or to get the wrong end of an idea, so we sorted the base architecture out first. After that, I looked at sorting out the data feeds, Jon started implementing the mapping UI, and Tom started to build the route building UI.

At 11pm we had the basics done – a list of countries, being able to add them to a route, and a map that would put markers at the locations. We were due to be evicted from the venue, so we packed up and then bundled into my room at the Travelodge, which actually had a decent amount of desk space to cater for all 3 of us!

We then refined the UI a little, Jon added path drawing between the map points, whilst Tom and I tried to sort out the game mechanics. At 1:30am we were done – we actually had a game that was fully playable in 7 hours!

Next Morning

After trying the game for a few rounds, we realised that we were mostly ending up with negative points, so we tweaked the scoring mechanics. Our original version also didn’t show your score until the very end, as we had thought that it would be really easy to score well in the game. Seeing that this wasn’t the case, we made the score update in real time as your route was modified, and also showed you your current game statistics (total medals, weight, etc).

Tom sorted out deployment to a production server, and got our submission ready on the hackathon site.

Jon added a plane and travel path animation to the map, which really helped the user interface and made people really engage with the game.

We were done. Whilst Tom and Jon headed up to the keynote, I quickly bashed out a landing page and some instructions. I had planned to spend more time on the final tweaks, but one of the venue staff was getting everyone out of the hackathon space to attend the keynote so I thought I’d better do what he said! Did a last “git pull” and we were finally done.

The Pitch

We were third on out of the 6 entrants. As the 2nd demo finished, I crossed my fingers that the website would work. Thankfully it did, and lots of cheers went up when the demo ended up scoring negative points (we didn’t pick a very good route!).

One of the guys from JetBrains came up to me immediately after the demo and expressed his delight at our submission. I knew we were onto a good thing! An hour later, we got a DM tweet from the organisers saying to meet them in the interval. We’d won, unanimous decision from the judges! We got to present the game to all of the 600 conference attendees in the closing session (and if you were there – thank you for the laughter and applause!)

From https://www.facebook.com/media/set/?set=a.596747743736095

Not the best photo of me in the world! From https://www.facebook.com/media/set/?set=a.596747743736095

Making the game better

There are loads of things that could’ve been done to make the game better, but we simply didn’t have enough time to work on them – we didn’t want to spend all of Saturday’s conference coding as there were lots of cool talks on! But some things we definitely wished we had time to do were:

  • Fixing the UI for mobile and tablet screens
  • Adding a scoreboard
  • Making the world map ‘wrap’ – the visualisation of the route is entirely “2d”, but our distance calculations actually allow for travelling over the international date line correctly!
  • Tweaking the scoring metrics – we didn’t have enough time to do the math accurately enough to work out the most optimised route or how to reduce the frequency that people got negative scores.
  • Making the plane crash if your score went negative

Want to do better at hackathons?

Well, the number one rule definitely has to be to sort out your development machines before hand! We spent about 2 hours fixing Jon’s laptop (i still can’t believe he coded most of the JavaScript without being able to test it!).

We were able to put a fair amount of polish into the game because our tooling and development methods were closely aligned to what we have back in our office. Specifically, we had:

  • Vagrant for local development machines
  • Git as our code repository
  • Composer for PHP package management
  • Our own deployment platform – we handle our own DNS and server hardware, so deploying resources is quick and easy for us
  • My phone as a portable 4G WiFi hotspot for when the conference WiFi died (used 660mb in phone bandwidth over that weekend!)
  • An Anker 20,000mah portable battery for charging phones and kit

Also, we had a good team size with a decent separation of skills, meaning that 90% of time we were all working in parallel.

Wrap up:

Thank you for reading, hopefully I’ve given you a taste of what a hackathon is like.