Spletni vmesnik za vislice

Priprava modela

Da bo naš strežnik lahko hkrati uporabljalo več igralcev, bomo naš model razširili s krovnim razredom Vislice, ki bo vseboval podatke o vseh igrah ter njihovem trenutnem stanju (rezultatu metode ugibaj). Igre bomo predstavili s slovarjem, katerega ključi bodo IDji iger, vrednosti pa pari, v katerih bo prva komponenta objekt razreda Igra, druga komponenta pa njeno zadnje stanje (PONOVLJENA_CRKA, PRAVILNA_CRKA, ZMAGA, …).

1. V datoteki model.py definirajte konstanto ZACETEK, ki se razlikuje od prej definiranih konstant.

2. V datoteki model.py napišite nov razred Vislice, ki vsebuje:

   1. Metodo __init__, ki nastavi vrednost atributa igre na prazen slovar.

   2. Metodo prost_id_igre, ki vrne ID, ki še ni uporabljen v atributu igre.

   3. Metodo nova_igra, ki s pomočjo funkcije nova_igra s prejšnjih vaj sestavi novo igro z naključnim geslom. Par igre ter njenega začetnega stanja ZACETEK naj v slovar shrani pod še ne zasedenim ključem, ki naj ga metoda tudi vrne.

   4. Metodo ugibaj, ki sprejme id_igre in črko ter na ustrezni igri požene metodo ugibaj (iz razreda Igra) in nato igro ter vrnjeno stanje zapiše nazaj v slovar.

Priprava spletnega vmesnika

1. S strani knjižnice Bottle si prenesite datoteko bottle.py.

2. S spletne učilnice si prenesite osnovno HTML predlogo ter slike. Predlogo premaknite v mapo views, slike pa v mapo img.

3. V glavni mapi repozitorija ustvarite datoteko vislice.py, kjer:

   1. Uvozite modula bottle in model.
   2. Definirate spremenljivko vislice, ki naredi objekt razreda Vislice.
   3. Z dekoratorjem bottle.get na naslov "/" pošljete predlogo index.tpl.
   4. Na dnu datoteke zaženete server z bottle.run(reloader=True, debug=True).

4. Po vzoru predloge index.tpl pripravite predlogo igra.tpl, ki bo pokazala vse podatke o izbrani igri igra z IDjem id_igre ter stanjem stanje:

   1. Trenutno uganjeni del gesla
   2. Nepravilne črke
   3. Stopnjo obešenosti

5. V datoteki vislice.py definirajte:

   1. Funkcijo nova_igra, ki ob zahtevi strani /igra/ prek metode POST sestavi novo igro, pridobi njen ID id_igre in naredi preusmeritev na naslov /igra/.../ (kjer ... zamenjamo z ustreznim IDjem nove igre)
   2. Funkcijo pokazi_igro, ki ob zahtevi strani /igra/<id_igre:int>/ prek metode GET naloži igro z IDjem id_igre in njeno trenutno stanje ter oboje prikaže s predlogo igra.tpl.
   3. Funkcijo ugibaj, ki ob zahtevi strani /igra/<id_igre:int>/ prek metode POST najprej naloži igro z danim IDjem, pridobi trenutno črko iz obrazca s poljem crka, nato naredi ugib s podano črko in naredi preusmeritev nazaj na isti naslov (tokrat prek metode GET).

6. Z uporabo % if, % elif in % else sintakse v predlogi igra.tpl prikažete ali je igralec zmagal oz. izgubil in mu ponudite gumb za začetek nove igre, sicer pa vnosno polje (z imenom crka) in gumb, s katerim igralec ugiba novo črko.

DODATNO:

• Preprečite, da bi uporabnik lahko ugibal več kot eno črko naenkrat
• Z dekoratorjem @bottle.get opremite naslov '/img/<picture>', ki uporablja funkcijo bottle.static_file za serviranje slik. Parameter root nastavite na 'img'. Nato stopnjo obešenosti v templatu igra.tpl prikažite preko slik.

Lepše oblikovanje

Če uporabljamo veliko predlog, se koda za oblikovanje kmalu prične ponavljati. K sreči bottle nudi orodja, s katerimi to popravimo.

1. Izluščite skupno glavo in nogo predlog igra.tpl in index.tpl, ter shranite v base.tpl.

2. Z metodo rebase odstranite sedaj nepotrebno kodo iz igra.tpl in index.tpl.

3. Dodatno olepšajte spletno stran z izboljšanjem base.tpl.