Coding against time

In 2013, during the Italian League of Legends Launch Event in Rome we needed some onscreen material for an activity which was about giving out free skins to everyone based on the likes on our Italian Facebook page. I thought I could help the cause by creating a simple site that pulls the data every .5 seconds which we would then project on stage. There was one slight problem though: we had no more than 2 hours to pull this off until the start of the show.

Beautiful Rome

In March 2013, a couple of months after League of Legends was launched in Italian, we held a launch event in Rome to celebrate with our Italian players. It was truly awesome: around 1600 players came out to see the show and spend some time with us. I was there to help out as a stage manager, having had quite a bit of experience in stage management in the music business before. Obviously a League of Legends show is a totally different animal than your rock n roll nights, so the other reason for my travel was to pick up some experience for a possible future Hungarian League of Legends event, which ended up happening around a year later. The venue was very nice, and although most of the time we had a pretty solid language barrier with most of the local guys, they were very friendly, helpful and receptive, so we could still communicate by pointing at random stuff and using hand gestures.

The events team prepared a number of activities from a cosplay show to various quizzes and games (some of which ended up in our Hungarian launch event later), but when going through the schedule it turned out that we had an activity which was lacking onscreen content. The thing itself was actually pretty simple. Players at the venue or watching the stream had to like our Italian Facebook page, and if the number of likes reached 5400 by the end of the day, everyone at the venue would get a skin. The original idea was to fire off a PowerPoint slide or an image which contained the link of our Facebook page, and we would have gradually announced the numbers every now and then. Which of course wasn't a bad idea, but I thought that maybe we could do something very quickly to take it one step further.

My idea was to build a simple website with a dynamic script that would scrape the number of likes of the page every .5 seconds and display it in the middle. We would then simply put the site on full-screen and project it above the stage – players would of course have no idea that they were looking at a website, which was actually hosted, and can still be found on this very domain. Without further ado, this is how it ended up looking:

Click here to view the website itself!

This is the site, just as we projected it on stage. Click to open!

The problem (and the beauty) was that we only had a couple of hours to build and test everything out before the show started. I know I didn't have the time to start writing my own script, and to be honest, I'm not the biggest ninja when it comes to scripts either. So Google being my friend, I started looking for scripts that dynamically display the number the likes of a page at an adjustable refresh rate. After spending ca. half an hour on a couple of stuff which didn't work, I stumbled upon the work of Elisha Terada, which did exactly what I wanted in jQuery. After setting up everyhing and seeing the number appearing on the top left in its undesigned black-and-white beauty, I took a deep breath, knowing that I would be able to pull this off.

This is how the script looks like. All I needed to do was to set the interval, the page ID, and then ask the Italian guys around me what thousand separator they use in their language.

Realtime Facebook Likes – The Javascript (by Elisha Terada)
View source
  1. jQuery(document).ready(function() {
  2. realtime_fb_likes();
  3. setInterval("realtime_fb_likes()", 500);
  4. });
  5.  
  6. function realtime_fb_likes() {
  7. $.getJSON('http://graph.facebook.com/LeagueOfLegendsItaly/', function(data) {
  8. var fb_likes = addCommas(data.likes);
  9. $('.fb-likes-count').text(fb_likes);
  10. });
  11. }
  12.  
  13. function addCommas(nStr) {
  14. nStr += '';
  15. x = nStr.split('.');
  16. x1 = x[0];
  17. x2 = x.length > 1 ? '.' + x[1] : '';
  18. var rgx = /(\d+)(\d{3})/;
  19. while (rgx.test(x1)) {
  20. x1 = x1.replace(rgx, '$1' + '.' + '$2');
  21. }
  22. return x1 + x2;
  23. }

After seeing that the script works and nicely pulls out the numbers real time, I started working on the design. Since I didn't have a lot of time, I had to go the most obvious and simple way, while still trying to make sure that the output is still up to Riot's quality bar at the end. Naturally Gladiator Draven ended up in the background, as our Italian players received that ingame skin for free, celebrating the fact that League had officially arrived into Italy. He got a blend into the white background, a couple of simple grey lines as design elements, and it was was done. We didn't have much time.

Tick tock, motherfuckers.

A quote taken totally out of context from Lance Stites, a Riot legend

I used Facebook's good old #3B5998 blue as the color, grabbed a like icon somewhere from the interwebs, and very quickly picked a sans-serif font from Google Fonts, namely Cuprum, which I felt fitting nicely both the stlye of FB and League. Although Miles Newlyn, the creator says "Mostly how it is now, I do not like myself, because as time passed and since then I have learned to make fonts much better", I think it's a pretty nice font which was more than fine for us back then.

Realtime Facebook Likes – The CSS
View source
  1. html {
  2. background: url(bckgr.jpg) no-repeat top center fixed;
  3. overflow: hidden;
  4. }
  5.  
  6. .container {
  7. position: absolute;
  8. bottom: 0;
  9. margin-bottom: 5em;
  10. width: 100%
  11. }
  12.  
  13. .container1 {
  14. position: relative;
  15. left: 50%;
  16. float: left;
  17. }
  18.  
  19. .container2 {
  20. position: relative;
  21. left: -50%;
  22. float: left;
  23. }
  24.  
  25. #thumb {
  26. float: left;
  27. margin-top: 8px;
  28. margin-right: 25px;
  29. }
  30.  
  31. #counter {
  32. float: left;
  33. font-family: 'Cuprum', sans-serif;
  34. color: #3b5998;
  35. }
  36.  
  37. .fb-likes-count {
  38. font-size: 200px;
  39. }
  40.  
  41. .text {
  42. font-size: 50px;
  43. display: block;
  44. margin-top: -20px;
  45. }
  46.  

To be honest I didn't even use a separate stylesheet, but there was no real need to do it either. The whole thing ended up being only a couple of lines of code.

Realtime Facebook Likes – The HTML
View source
  1. <head>
  2. <link href='http://fonts.googleapis.com/css?family=Cuprum:700' rel='stylesheet' type='text/css'>
  3. </head>
  4.  
  5. <body>
  6. <div class="container">
  7. <div class="container1">
  8. <div class="container2">
  9. <div id="thumb">
  10. <img src="like.png">
  11. </div>
  12. <div id="counter">
  13. <span class="fb-likes-count"></span>
  14. <br>
  15. <span class="text">/LeagueOfLegendsItaly</span>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </body>

After finishing the thing on my laptop, I was thrilled. We still had a couple of minutes to test the site before the players were let in, so we put it out on the screen... and it totally didn't work. The design was fine, but most probably the frequency of .5 seconds was a bit too much, and during the ca. 90 minutes I spent on it, so many reuqests were sent to Facebook that it has had enough. The activity didn't start until a couple of hours into the event itself, so after some time we could verify that it was working properly in the backstage.

And then the time has finally come. Thousands of players reached into their pockets to like our Facebook page, and in an instant you could see the number skyrocket on the big screen. It was alive, and it was amazing. We decided to leave the thing on, because we got such a huge spike that we could reach the target number of 5400 in a couple of minutes – probably the guys watching the stream from home decided to help out too. Players were very excited, going "oooh", like it was a goal kick in Serie A match... and then we finally reached the number and everybody broke out in joy. I was totally blown away. Here is a video of the happening; sorry for the bad quality in advance, I didn't have a camera on me so I had to use my phone.

I must say that this is one of the many great things about working at Riot. I was hired as a Localisation and QA Coordinator, but there I was in Rome, Italy, doing stage management for an event, and on top of that, randomly having the opportunity to build a website in a couple of hours which then we would screen to thousands of players both at the event and online. Luckily it went great and ended up giving a nice piece of experience to our players, and I have to admit, to myself as well. I won't forget that final moment for a while, that's for sure!


Disclaimer: the articles on this website solely represent my personal views, opinion, ideas, etc., and although they might be similar in nature, concept or vision, they do not, under any circumstances represent the views or opinion of Riot Games, Just Another, Managerzone, or any other person, firm, or entity. Click here for more info.