Kdy se mi naposledy stalo, že jsem mohl celý den soustředěně programovat bez toho, že by mě něco rušilo? Tak to vám řeknu přesně. V sobotu 1. 11. 2014 na Dart + Polymer GUG Hackathon Prague. Opřel jsem se do toho a nakonec jsem i něco vypotil.

Disclaimer: Je to přesně v tom stavu, kolik jsem toho za den stihnul, víc ani ťuk. Je to hrozně veliký, testoval jsem to jen v Chrome, na mobil se to nevejde apod.

Zdrojáky najdete na GitHub-u společně s ostatními projekty z hackathonu.

Online demo tu.

Warpujete mezi planetami, nakupujete, prodáváte, vyděláváte. Všechno běží jen na klientu, reloadem o všechno příjdete a hrát se to pochopitelně nedá. Ale chtěl jsem se o Polymeru dozvědět co možná nejvíc a taky jsem několikrát dost tvrdě narazil. Většinu zádrhelů se ale podařilo s pomocí mentorů lousknout, takže o ty hlavní poučnosti se tu teď s váma podělím.

Verze Polymeru

Tohle bolelo, ale je to jednoduché: Není dobrý nápad si do pubspec.yaml napsat “polymer: any”. Zdá se, že se nikdo netrápí tím, aby byla poslední verze nějak zvlášť stable, chyb tam byla hromada, i výjimky z toho lítali, takže nakonec jsem kódoval proti:

dependencies:
    polymer: '>=0.15.0 <0.16.0'
    paper_elements: ">=0.5.0 <0.6.0"

Třeba u StageXL se to nestává, tam mi i “any” verze šlape dobře.

Předávání objektů podřízeným elementům

Celá plocha hry je u mě element <ma-game>. Dart objekt, který elementu odpovídá, si v sobě nese business objekt “Game”. Game má property “player”, což je zase další objekt, který nese informace o penězích, palivu, nakoupeném zboží atd.

Když chci v dolní části detail hráče zobrazit, udělám si element <ma-player>, který se o to postará, uvnitř <ma-game> ho použiju a hráče mu předám jako:

<ma-player player=“{{game.player}}"></ma-player>

Funguje to přesně jak bych čekal a je to lááábuž. Hra jako taková je zapouzdřená v jednom objektu a dílčí polymer elementy, které ji renderují, dostanou jen to, co je zajímá.

Parametry metod pro obsluhu událostí

Tohle je blbější a optimální řešení zatím nemám. Kdo víte, poraďte.

Mrkněte na demo, na seznam planet vlevo. V okamžiku, kdy kliknu na planetu, vyvolám událost, která zpropaguje změnu zvolené planety do DOMu a koho to zajímá, ten si ji chytí. Klik je ošteřený takhle:

<tr template
    repeat="{{planet in planets | enumerate}}"
    on-click="{{onPlanetClick}}"
    data-index="{{planet.index}}">
    ... informace o planetě v listingu ...
</tr>

Na kliknutí zavolej metodu “onPlanetClick”, ta si z data atributu vytáhne, o kterou planetu se jedná a pak vyvolá událost “změnila se vybraná planeta”:

fire("select-planet", detail:{"planet": newSelectedPlanet } );

No jo. Ale všimněte si, jak blbě si musím předávat planetu, na kterou se kliklo - jen jejím číslem. V obslužné metodě musím planetu podle čísla dohledávat. Nejraději bych tam nacpal celou planetu, ale zdá se, že data atributy pojmou jen stringy, nejspíš proto, že pocházejí přímo z HTML a Polymer s tím nemá moc co do činění. Řešením by bylo napsat si pro takovéhle klikatelné <tr> vlastní Polymer element, tomu bych mohl předat cokoliv jakkoliv.

Asi to tak udělám …

A teď koukám …

… že nám to nějak bobtná. “core-icon”, “Observables” a “Zákeřné optimalizace změn DOMu” si nechám na příště!