Versenykódolás az idővel

2013-ban Rómában, a League of Legends olasz megnyitóünnepségén egy műsorszámhoz szükségünk volt a kivetítőn megjelenő vizuális anyagra. A műsorszám lényege az volt, hogyha megadott időn belül elegen like-olják a hivatalos olasz League of Legends Facebook oldalt, akkor a műsor végén mindenki kap egy ajándék kinézetet. Gondoltam, tudok tenni az ügyért azzal, ha készítek egy egyszerű honlapot, amely 0,5 másodpercenként frissítve folyamatosan kijelzi a like-okat, amit aztán egyszerűen kivetíthetünk a színpad fölé. Csupán egyetlen bökkenő volt a dologban: mindezt két óra alatt kellett lehozni, mert nyakunkon volt a kezdés.

De szép Róma!

2013. márciusában, néhány hónappal a League of Legends olasz indulása után egy megnyitóünnepséget tartottunk Rómában, hogy együtt ünnepeljük az indulást az olasz játékosainkkal. Felejthetetlen élmény volt: körülbelül 1600 játékos jött el megnézni a show-t és találkozni velünk. Eredetileg színpadmesterként utaztam el a csapattal, mivel korábban a zeneiparban elég sok ilyen jellegű tapasztalatra tettem szert – persze egy League of Legends-show teljesen más állatfaj, mint a rock n roll bulik, utazásom másik célja tehát az volt, hogy tapasztalatot szerezzek egy esetleges jövőbeli magyar League of Legends-rendezvényhez, amely végül körülbelül egy évre rá meg is történt. A helyszín nagyon szép volt, és bár legtöbbször nem beszéltünk egy nyelvet a helyiekkel, mindenki nagyon nyílt, barátságos és segítőkész volt, úgyhogy szerencsére elég hatékonyan tudtunk kommunikálni mutogatva is.

A rendezvényszervező csapat a beöltözős cosplay-parádétól kezdve a különböző kvízekig és meccsekig egy sor különböző ötletet hozott (ezek egy részét jól fel is használtuk később a magyar megnyitó során), amikor azonban végigmentünk a műsorterven és a különböző technikai követelményeken, kiderült, hogy van egy műsorszám, amelyhez semmilyen, a kivetítőn megjelenő anyagunk nincs. Az ötlet maga igazából elég egyszerű volt. A helyszínen lévő vagy a streamet néző játékosoknak like-olniuk kellett a hivatalos olasz Facebook oldalunkat, ha pedig a szám elérte a nap végére az 5400-at, minden, a helyszínen lévő néző kapott egy ajándék kinézetet. Az eredeti terv az volt, hogy kiteszünk egy PowerPoint diát vagy egy képet, amelyen a Facebook oldalunk címe található, aztán időnként bejelentjük, hogy épp mennyinél tart a like-ok száma. Persze ez már így sem rossz, de gondoltam, tehetnénk valamit, hogy egy lépéssel továbbvigyük a történetet.

Az volt az ötletem, hogy építsünk egy dinamikus scripttel rendelkező egyszerű honlapot, ami 0,5 másodpercenként kihúzza a like-ok számát, aztán megjeleníti azt a képernyő közepén. A honlapot aztán egész egyszerűen teljes képernyőre állítjuk, majd kivetítjük a színpad fölé. A játékosoknak persze fogalmuk sem volt róla, hogy valójában egy honlapot látnak, ami érdekes módon épp ezen a domainen került tárolásra, és máig meg is található ugyanitt. Minden további kertelés nélkül, így nézett ki a dolog:

Kattints ide a honlap megnyitásához!

Ez a honlap, pont, ahogy kivetítettük. Kattints a megnyitáshoz!

A probléma (és a dolog szépsége egyben) az volt, hogy a kezdés előtt csak pár óránk volt a projekt összerakásához és leteszteléséhez. Azt tudtam, hogy nincs időm megírni a scriptet nulláról, és őszintén megvallva, nem is vagyok egy hatalmas, világrengető zseni a scriptek terén. De a Google nekem is a barátom, ezért elkezdtem különböző scripteket keresni, amelyek állítható frekvenciával, dinamikusan megjelenítik az egyes Facebook oldalak like-jainak számát. Körülbelül fél óra, és egy rakás nem működő próbálkozás után bele is futottam Elisha Terada munkájába, amely pontosan azt tudta jQuery-ben, ami nekünk kellett. Miután mindent beállítottam és a bal felső sarokban megláttam a kis számot a maga fekete-fehér gyönyörűségében, hihetetlenül megkönnyebbültem – tudtam, hogy most már sínen vagyok, és innentől már minden rajtam múlik.

Így néz ki a script. Csupán annyi dolgom volt, hogy beállítsam a frissítési gyakoriságot (setInterval), a honlapazonosítót, aztán megkérdezzem a körülöttem lévő olasz srácokat, hogy hogy választják el az ezreseket.

Valós idejű Facebook like-ok – A Javascript (Elisha Terada munkája)
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. }

Miután láttam, hogy a script szépen, valós időben húzogatja ki a számokat, nekiláttam a grafikának. Mivel nem volt sok időm, a legegyszerűbb és legkézenfekvőbb megoldást választottam, miközben igyekeztem odafigyelni, hogy a végeredmény azért megfeleljen a Riottól megszokott minőségi munkának is. Természetesen Gladiátor Draven került a háttérbe, mivel az olasz játékosok azt kapták ajándékba annak címén, hogy a LoL hivatalosan is megérkezett Olaszországba. Szépen befuttattam fehérbe, kapott pár egyszerű szürke csíkot designként, és kész is volt. Nem volt sok időnk, na.

Tikk-takk, seggfejek!

Kontextusából nagyon csúnyán kiragadott idézet Lance Stites-tól, a Riot egyik élő legendájától

A Facebook jó öreg #3B5998 kékjét használtam színnek, levadásztam egy like ikont valahonnan az internetről, és gyorsan kerítettem egy sans-serif betűtípust is a Google Fontsról, méghozzá a Cuprum nevűt, mert úgy éreztem, szépen illik a FB és a LoL stílusához is. Bár Miles Newlyn, a betűtípus készítője azt írja: „Nem igazán tetszik, ahogy így visszanézek rá, mert azóta egy csomó idő eltelt, és már sokkal szebb betűket tudok csinálni”, szerintem ez akkor is egy elég szép font, ami tökéletesen megfelelt a mi céljainknak Olaszországban.

Valós idejű Facebook like-ok – A 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.  

Hogy teljesen őszinte legyek, nem használtam még külön stíluslapot sem, de igazából nem is volt rá szükség. Az egész oldal végül néhány sor kódból állt össze.

Valós idejű Facebook like-ok – A 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>

Miután a laptopon kész lettem a munkával, nagyon megörültem. Még volt néhány percünk, hogy leteszteljük a dolgot, mielőtt a játékosok bejöttek volna, úgyhogy a helyi olasz erőkkel kilőttük a dolgot a kivetítőre a színpad fölé... és persze baromira nem működött. A design rendben volt, de a 0,5 másodpercenkénti folyamatos frissítés kiverhette a biztosítékot Facebookéknál. Ez a bizonyos műsorszám szerencsére a rendezvény egy későbbi pontján kezdődött, úgyhogy kis idő múlva, miután a Facebook ismét megengedte, hogy rengeteg kéréssel bombázzuk, mindent sikeresen le tudtunk tesztelni a színfalak mögött.

Végül aztán eljött az idő. Játékosok ezrei szegezték szemüket a színpad fölötti hatalmas kivetítőre, majd nyúltak a zsebükbe, hogy like-olják a Facebook oldalunkat. A szám azonnal elkezdett emelkedni a kivetítőn: minden működött! Úgy döntöttünk, kint hagyjuk a képet pár percig, mert hihetetlen ütemben elkezdett növekedni a like-ok száma – valószínűleg az otthonról bekapcsolódók is úgy döntöttek, besegítenek. A játékosok szó szerint elkezdtek szurkolni, „óóó”-ztak, mint egy Serie A meccsen a kirúgásnál... végül percek alatt elértük a bűvös 5400-as számot, és mindenki örömmámorban tört ki. Én meg teljesen el voltam hűlve. Itt egy videó a történésről; előre is elnézést kérek a gyatra minőségért, sajnos nem volt nálam semmilyen kamera, úgyhogy a telefonomat használtam.

Azt kell mondjam, ez az egyik remek dolog a sok közül, ha az ember a Riotnál dolgozik. Eredetileg lokalizációs és QA koordinátornak vettek fel, de Rómában találtam magam színpadmesterként egy rendezvényen, majd egyszer csak kaptam egy lehetőséget, hogy néhány óra alatt építsek egy honlapot, amit aztán játékosok ezreinek mutattunk meg élőben és online egyaránt. Szerencsére minden nagyon jól sült el, és játékosaink egy jó kis élménnyel lettek gazdagabbak – no meg én is, be kell valljam férfiasan. Egy darabig nem felejtem el a végső, nagy pillanatot, az egyszer biztos!


Nyilatkozat: a honlapon lévő cikkek kizárólag az én személyes nézeteimet, ötleteimet, meglátásaimat, stb. tükrözik, és bár hasonlóak lehetnek természetben, koncepcióban vagy elgondolásban, semmilyen körülmények között, semmilyen kérdésben sem tükrözik a Riot Games, a Just Another, a Managerzone vagy bármely más cégek vagy személyek álláspontját. További információkért kattints ide.

BLOG COMMENTS POWERED BY DISQUS