Úloha
Dostanete štruktúru štýl stránky. Vašou úlohou je doprogramovať funkčnosť tejto stránky. Samotnú štruktúru nemeňte, pokazí to testovanie. Spolu k štrukúre stránky dostanete API na získavanie potrebných údajov. Odovzdávate jeden .html s implementovanou funkčnosťou. Na štýle v tejto úlohe vôbec nezáleží, takže do CSS vôbec nemusíte zasahovať. Na to aby sa nejaká časť úlohy začala testovať musia prechádzať testy všetkých predošlých častí úlohy.
Pri používaní API je potrebné poskytnúť nasledovnú hodnotu v Authorization headeri: Zenit-Web-API-Key.
Nemeňte žiadne id, mená tried elementov a ani nemažte žiadne elementy, štruktúra stránky musí ostať rovnaká ako v šablónach.
Link na API; https://api.sk42.zenit-web.ksp.sk/api
Šablóny: tu
1. Časť - zoznam kariet
Šablóna: task-list.html
- Do stránky pridajte zoznam kariet. Má sa získať z API a potom vykresliť presne takým spôsobom, ako je v šablóne. Musí mať správne nastavené id, meno, cenu, raritu a obrázok.
- Pridajte funkcionalitu zoradenia kariet podľa ich mena, rarity a ceny. Zoradenie by malo byť od najmenších po najväčšie. Pri zmene spôsobu zoradenia by sa zoznam mal hneď aktualizovať.
2. Časť - detaily karty
Šablóna: task-overview.html
- Po kliknutí na kartu by sa malo zobraziť okno s detailami karty.
- Vyplňte dáta o karte do okna - meno, cena, rarita, rýchlosť a popis. Použite rovnakú štruktúru ako v šablóne, inak nebude fungovať testovanie.
- Zobrazte životy ako aj útočnú silu danej karty v dopredu danom leveli. Prednastavený má byť level 1.
- Pri zmene levelu by sa mal aktualizovať počet životov a útočnej sily.
3. Čast - Hráči
- Pridajte možnost zadania ID hráča. Ak sa zadá validné ID, tak sa v zozname kariet zobrazia len tie, ktoré daný hráč vlastní. Ak hráč s daným ID neexistuje, zobrazte všetky karty a dajte vedieť, že ID je neplatné.
- V prípade, že sa otvorí okno s kartou musí byť prednastavený taký level v akom leveli tú danú kartu má zvolený hráč. Ak nie je zvolený, tak prednastavte level 1.
4. Časť - Skladanie decku
Šablóna: task-deck.html
Deck pozostáva z práve 8 rôznych kariet - nemôže mať 2 karty rovnaké.
- Pri stlačení tlačidla “Add to Deck” sa daná karta pridá do decku na koniec (prvý voľný slot). Tlačidlo by potom malo zašednúť a zobrazovať správu “In Deck”.
- Ak už je deck plný, všetky tlačidlá na pridanie majú byť zašednuté a nemali by sa dať stlačiť.
- Pri kliknutí na slot v decku, kde už nejaká karta je sa táto karta z decku odstráni. Jej tlačidlo by sa malo zmeniť zo stavu “In Deck” naspäť na “Add to Deck”.
- Ak mám plný deck a niečo odstránim, všetky tlačidlá by sa mali znovu obnoviť, aby som tam vedel niečo pridať.
- V prípade, že je deck plný vypíšem o ňom štatistiky. Priemerná cena karty, priemerný život, priemerný útok. Pri počitaní života a útoku používam level, aký má zvolený hráč - ak žiadny nie je, použije sa level 1. Pri neplnom decku sa panel so štatistikami nezobrazuje.
5. Časť - Generovanie deckov (Bonus)
Pridajte tlačidlo na generovanie deckov. Môžete ho pridať hocikam, len mu potom dajte "id"="generate". Po jeho stlačení sa aktuálny obsah decku zahodí a vytvorí sa nanovo.
Dobrý deck musí byť samozrejme vyvážený a teda spĺňať nasledujúce podmienky:
- Priemerná cena je medzi 5 a 7
- Obsahuje kartu z každej rarity
Decky by ste mali generovať náhodne - po každom stlačení tlačidla by mal byt nejaký iný. Deck sa samozrejme generuje iba z kariet, ktoré má hráč v svojej kolekcii, prípadne všetkých, ak hráč nie je zvolený.