Speciální hra pro programátory Ruby

Herní design

Při navrhování hry bylo naším hlavním cílem připravit pro programátory zábavu a zároveň udělat něco zajímavého v rámci práce v naší společnosti. Doposud jsme neměli žádné kompetence v oblasti tvorby her, a proto nás to tahalo za nos. nás významnou výzvu. V první řadě jsme se zaměřili na to, co tato hra skutečně je. Poté, co jsme vymysleli prvotní plán, jsme se pustili do práce.

V rámci práce na hře jsme se rozhodli uspořádat hackathon a rozdělit se do skupin plnících konkrétní úkoly. Díky takovému osmihodinovému rozdělení práce se nám podařilo realizovat vzhled protivníků ve hře, celý layout a základy úkolů i API celého systému. V další fázi jsme se jednou měsíčně scházeli na čtyřhodinových schůzkách, díky čemuž se nám podařilo hru dokončit během tří schůzek.

Provádění

Protože se specializujeme na RubyOnRails, zvolili jsme tuto technologii jako přední. Hra však neměla být textová, a proto se přístup k ní odrazil v aplikaci typu SPA. V rámci úkolu jsme pracovali na známém pipeline assetů od firmy kolejnice (v roce 2016 nebylo v zásadě nic lepšího) a celý javascript na základě našich patentovaných kód s pomocí TypeScript. V žádosti bylo standardní rozdělení odpovědností: Rails jako prostředek a zdroj API, javascript a související jako interakce s uživatelem. Zde to však fungovalo jako hybrid a některá zobrazení se jednoduše vykreslovala z rails, zatímco některá jiná z JS.

Typescript

Byl to náš první experiment v této oblasti. Byly to časy, kdy lidé věřili v úspěch CoffeScriptu. Použití TypeScript vyžadovalo zavedení drahokamu typescript-rails. Bohužel to nebylo konečné, protože typescript jako staticky typovaný jazyk to vyžadoval i od knihoven standardně připojených k rails.

https://github.com/codesthq/cody_the_game/blob/master/app/assets/javascripts/jquery.d.ts (zejména při použití vestavěného systému správy majetku s kolejnicemi).

Cody jako hra vyžadoval velkou dynamiku na straně prohlížeče a také úpravu stromu DOM. Použití TypeScript místo vanilla javascriptu znamenalo obrovský skok v kvalitě kódu, samotná přítomnost tříd a zapouzdření pro nás byla velmi lákavá.

API a SPA

V roce 2019 jsou aplikace SPA spravovány pomocí nádherného React nebo Vue knihovny. V roce 2015 jsme to však udělali jinak. Při implementaci nám pomohl již zmíněný typescript, zatímco jQuery odvolalo veškerou práci spojenou s xml http požadavkem. Nyní můžeme použít fetch, zatímco tehdy k tomu stačilo `$ .ajax`. Podívejte se na naše klientské api!

https://github.com/codesthq/cody_the_game/blob/master/app/assets/javascripts/services/api_client.js.ts

Pokud to bylo api, pak jste museli nějak vyřešit problém s ověřováním, že? No, to je pravda. Ale v tom případě jsme šli po (dá se to sem napsat - použili jsme pásmo?!) pásmu a v rails session jsme vytvořili cookie_key a následně ho uložili do databáze. Tudíž jsme věděli, že je vše více než v pořádku.

https://github.com/codesthq/cody_the_game/search?q=cookie_key&unscoped_q=cookie_key

Stav hry byl uložen v databázi a informace o tom, kolik uživatelů má body, pocházely z databáze (je to ta samá databáze? Můžeme ji jen změnit zájmenem?). ACID se vždycky hodí, když na straně systému není kešování;).

V případě lázní je to nejlepší bez načítání stránky. Řešili jsme to klasicky a html kotva byla nejlepším řešením bez rozšiřování zbytečných závislostí. Protože kdo by používal turbolinks?

SnapSVG

Pokud navrhujeme hru, musí být vydána pouze se skvělou grafikou a animacemi. Tehdy jsme strávili mnoho hodin přemýšlením, jak tyto požadavky v naší aplikaci splnit. Na jedné straně umí plátno zázraky, na druhé straně se v čistém html mnohem snáze dohání a všichni to vědí. Po usilovném hledání nejlepšího řešení jsme přišli na to, že kombinací těchto dvou řešení je svg. Umožňuje snadno prezentovat grafiku ve vektorovém formátu, je napsána ve značkovacím jazyce a co je nejdůležitější, lze ji upravovat za běhu. Důležité je, že pro soubory svg existuje knihovna, která funguje podobně jako jQuery a umožňuje provádět operace s obrázkem jednotným způsobem. Jedná se o: http://snapsvg.io, máme na toto konkrétní použití řešení velmi pěkné vzpomínky.

Příklad použití souboru snap.svg najdete níže:

https://github.com/codesthq/cody_the_game/blob/master/app/assets/javascripts/intro.js.ts

Samotný soubor haml s grafickou kostrou:

https://github.com/codesthq/cody_the_game/blob/master/app/views/game/show.html.haml

Jak vidíte, je to téměř jako normální strom DOM a běžná aplikace rails!

TrustedSandbox

Konečně jsme měli API, grafiku, SPA. Ale co implementace řešení zaslaných uživateli?

První, co nás napadne, je metoda eval, ale nejsme blázni;) Ještě v roce 2016 docker byl na vzestupu, takže to byla přirozená volba. Samotné kontejnery nezaručovaly úplnou izolaci a ochranu, a proto jsme použili hotové řešení v podobě Ruby s názvem https://github.com/vaharoni/trusted-sandbox. Umožnil lépe chránit kód před opuštěním sandboxu a standardizovaným způsobem konfigurovat požadavky operačního systému. Velmi důležité bylo správně omezit dobu provádění kódu, paměť potřebnou k provozu a cykly procesoru. Naše konfigurace je k dispozici níže

https://github.com/codesthq/cody_the_game/blob/master/config/trusted_sandbox.yml.example

Samozřejmě, že ani důvěryhodné pískoviště nic nezaručovalo, a proto jsme přišli se speciální webovou stránkou pro spuštění kódu.

https://github.com/codesthq/cody_the_game/blob/master/app/services/task_runner/base_task.rb

Každá z úloh měla svůj vlastní testovací případ, který nám umožnil ověřit správnost implementovaného řešení. To se provádělo tak, že se do testovacího případu vložil uživatelský kód, takže vše běželo izolovaně.

https://github.com/codesthq/cody_the_game/blob/master/app/challenges/challenge/case.rb

Tato akce samozřejmě stála poměrně hodně času a při sběru odpovědí jsme si nemohli dovolit spustit sandbox, takže jsme kód pouze uložili do databáze, vytvořili podání a poté jsme pomocí long poolingu požádali koncový bod o zjištění stavu kódu. To nám umožnilo odlehčit aplikačnímu serveru a data náležitě ověřit. Samozřejmě jsme se také museli chránit před "pádem skriptu", a proto jsme omezili počet dotazů na server pomocí proměnné ttl, což je vidět níže.

https://github.com/codesthq/cody_the_game/blob/master/app/assets/javascripts/level_controller.js.ts#L92

Shrnutí soutěže

Do září 2011 byly herní statistiky následující:

- počet sezení: 1945 - odeslané úkoly: 4476 - zaslané správné odpovědi: 1624 - dokončil hru: 31

Jak vidíte, největší schody začaly v úloze # 2, protože to už nebyl obyčejný příklad hello world.

Přečtěte si také:

Rychlý ponor do jazyka Ruby 2.6. Co je nového?

Psaní dokumentace se stalo snadným díky VuePress

 Výukový kurz základů Vue.js. Jak začít s tímto frameworkem?