Kooditar

Pelinkehitystä Reactilla

Neljä vuotta on softankehityksen maailmassa ikuisuus, kun otetaan huomioon edistymiset web-ohjelmoinnissa ja JavaScript-kirjastoissa. Aivan ensimmäisessä blogikirjoituksessamme kerroimme Riskipelistä. Tämä web-sovelluksena tehty riskienhallintaa ja projektintyöskentelyä opettava selainpeli oli firmamme perustamisen siemen sekä ensimmäinen oikea projekti, jonka teimme yhtenäisenä tiiminä.

Pelin kehitykseen valittiin aikoinaan – siis, syksyllä 2015 - Googlen kehittämä AngularJS-framework, joka tuntui monelle meistä uudelta ja ihmeelliseltä. Kukaan meistä ei vielä silloin osannut arvata, että Google uudistaisi koko härpäkkeen kokonaan vuotta myöhemmin. Siitä lähtien Angular-framework on korvannut vanhan AngularJS:n lähes kokonaan, ja koodirakennetta katsoessa ymmärtää helposti, miksi näin on tehty.

Sekä teknologian että omien taitojemme jatkuva kehitys loi kuitenkin ongelman Riskipelin suhteen. Meillä oli käsissämme ainakin jonkinlainen pohja hyvälle tuotteelle, mutta kukaan ei halunnut sitoutua teknologialtaan vanhanaikaisen tuotteen kehitykseen.

Näkymä on tuttu, mutta konepellin alla on uusi koodipohja

Joten loppuvuodesta 2019 päätin ottaa läppärin kauniiseen käteen ja vetäytyä marraskuun pimeydestä sisätiloihin uudistamaan Riskipeliä ja samalla luomaan pelille mobiililaitteille optimoidun käyttöliittymän, jonka olemassaolo on noussut vuosi vuodelta tärkeämmäksi.

Päädyin konfiguroimaan sovelluksen itse monen React-kehittäjän suosiman Create React App –kirjaston käyttämisen sijaan. Tämä tarkoitti tietenkin paljon säätämistä Webpackin kanssa, mutta antoi samalla mahdollisuuden käyttää ohjelmointia helpottavia Babel-plugineja, joista paras on omasta mielestäni ehdottomasti JSX-control-statements, joka mahdollistaa If-lauseiden ja For-looppien käytön JSX-tägeinä suoraan.

Esimerkki JSX-control-statementsin hyödyistä

Koska JSX on Reactin koko idea, vanhaa koodia pystyi käyttämään hyvin vähän. Tämä mahdollisti samalla sen, että käyttöliittymäkomponentteja pystyi laittamaan uuteen uskoon rankemmalla kädellä. Bootstrap on edelleen mukana responsiivisuutta varten, mutta muuten käyttöliittymäkomponentteja varten parempi vaihtoehto oli Material UI. Näin sovelluksesta saatiin vähemmän geneerisen näköinen.

Nopeutensa ja dynaamisuutensa ansiosta React sopii selainpelin tekemiseen erittäin hyvin. Päädyin lopulta käyttämään Reactin sisäänrakennettua tilanhallintaa melko vähän, joten tilan hallintaan päädyin käyttämään Reduxia, jonka ansiosta käyttöliittymä pystyy reagoimaan datan muutoksiin paljon nopeammin Reactin state-muutoksiin verrattuna. Reactin rakenne sekä muut modernin, ES6-JavaScriptin antamat edut tekivät uuden Riskipelin koodista merkittävästi helppolukuisempaa vanhaan AngularJS-versioon verrattuna, mikä antoi myös valmiudet korjata muutama vanhasta versiosta löytynyt bugi.

Koska koko peli oli alun perin suunniteltu isoja näyttöjä huomioiden, drag-and-drop tekniikka edellä, koko mobiiliversio oli aikarajan takia jätettävä edellisestä versiosta pois. Koska uuden pelin desktop-versio on tehty vanhan pohjalta, oli mobiilikäyttöliittymä tehtävä käytännössä alusta asti uusiksi. Tässä ja muussa tyylittelyssä koodausta auttoi modernimman SCSS:n käyttö CSS:n sijaan. Muutenkin koko Koodittaren tiimin tekemä aiempi suunnittelu- ja koodaustyö antoi hyvän pohjan parantaa ja korjata asioita.

Riskipeli toimii nyt mobiilissakin

Koko kokemus antoi aiheitta pohtia, josko monimutkaisempienkin pelien kehitys olisi mahdollista pelkällä React/Redux/Webpack/SCSS-kombolla. Monet meistä Koodittaressa on kehittänyt pieniä pelejä, allekirjoittanut muun muassa Lua-ohjelmointikielellä ja osa meistä Game Maker -ohjelmistoa käyttäen. Koska niin monella meistä on web-kehitystaustaa, Reactin käyttö pelinkehityksessä ei tunnu niin mahdottomalta ajatukselta. Riskipelin kohdalla peli etenee inkrementaalisesti, ns. ”päivä” kerrallaan kun käyttäjä painaa nappia, mikä tekee pelin kulun ohjelmoinnista helppoa.

Mutta esimerkiksi JavaScriptin setTimeout- ja setInterval-metodeilla olisi helposti mahdollista tehdä myös tosiaikaisesti eteneviä sovelluksia. Reactin sisäänrakennettu componentDidUpdate-metodi mahdollistaa monimutkaistenkin muutosten tekemistä aina taustadatan muuttuessa ilman, että sivua on ladattava uudelleen.

Riskipeli tulee mitä todennäköisimmin kehittymään ja päivittymään tulevaisuudessakin. Nyt uutta versiota pystyy pelaamaan samassa osoitteessa, eli http://kriisiryhma.com/riskipeli. Peli toimii nyt kaikilla moderneilla selaimilla, myös puhelimilla. Seuraavana kehityslistalla on hallintapaneeli, mikä mahdollistaisi taustalla olevan datan muokkaamisen ja uuden datan lisääminen. Luovalla kirjoittamisella ja grafiikkapäivityksellä pelin teeman voisi viedä ohjelmistokehityksen projektinhallinnasta ties mihin ulottuvuuksiin.