ITV0110 2. töö 2016: CSS, javascript

Mida tuleb teha

Sinu ülesandeks on kirjutada kivi-paber-käärid ehk rock-paper-scissors mängu brauseris töötav lihtsustatud eriversioon, kasutades ainult html-i, css-i ja javascripti.

Loe kõigepealt läbi ülevaade wikipediast ja mängi katseks seda NYT varianti.

Ühe mängija asemel mängib sinu programmis arvuti, st programmi kasutaja mängib arvuti vastu.

Valmis töö tuleb riputada üles ülikooli serverisse dijkstra (vaata altpoolt). Ehk, arvestatakse ainult dijkstra-s olevaid töid.

Selles praksis teed arvuti vastu mängimise variandi, aga kolmandas praktikumis tuleb samale mängule lisada serveripoolset funktsionaalsust, näiteks tulemuste salvestamine ja vaatamine ja statistika, samuti mäng kahe inimese vahel, mis toimub siis serverirakenduse vahendusel.

Detailid

Sinu programm peaks kasutajaliidese mõttes sarnanema sellele nyt variandile, aga olema lihtsam: ei ole vaja vaja teha nõrga/tugeva vastase valikut ega kuvada põhjusi, miks programm just sellise käigu tegi. Samuti ei ole vaja kasutada animeeritud pilte: piisab lihtsalt sobivatest kivi-paber-käärid piltidest oma valikul.

Kindlasti peab aga saama mängu uuesti alustada ja iga käigu järel peab keskmisel alal kuvama koguskoori ja viimati mängitud käigud, sarnaselt nyt variandile. Kujunduse nüansid vali ise, ei ole vaja täpselt järgida nyt variandi kujundust.

Info paigutus ekraanil peab olema stabiilne, tekst/nupud ei tohi hüpata vahel ühte, vahel teise kohta. Leht peab olema selge, arusaadava ja kena disainiga, mõttetut/segast infot ja arusaamist raskendavaid kujunduselemente ära kasuta. Arvesta kindlasti selle juhendi soovitustega.

Arvutiprogramm ei pea mängima väga hästi, aga ta ei tohi mängida ka väga halvasti. Konkreetselt peaks programm üldjuhul mängima juhusliku käigu, millele on soovitav lisada järgmises peatükis toodud täiustatud strateegia.

Kogu kood peab olema laetud dijkstra serverisse prax2 alamkataloogi. Pealeht olgu nimega index.html.

Kohustuslikud ja mittekohustuslikud osad ja punktiarvestus

Eeltoodud nõuete punktid peavad arvestamiseks olema täidetud, nad annavad kokku 6 punkti. Lisaks - kuni maksimaalse 12ni - saad teha järgmised osad:

• Täiustatud strateegia arvutile: kui inimene mängib väga pikalt ühte käiku (näiteks neli korda kivi) siis eeldad, et inimene jätkab sama käiguga (ja arvuti peaks selles näites vastama paberi), kuni inimene käiku muudab: 1 punkt.
• Mõõdad ja kuvad tulemuste tabelis käikude ja mängu peale kulunud aega: 1 punkt.
• Mobiilivariant, mis näeb hea välja ja on mugavalt mängitav: 3 punkti. Selleks peab (a) sinu suure ekraani variant kasutama ruumi suurele ekraanile sobivalt, mitte olema nö "mobiilivariant suurel ekraanil", (b) mobiilivariandis saavutama:
  • Sisse zoomida ei ole vaja ja parem, kui ei saagi.
  • Paremale-vasakule scrollida ei saa, kõik scrollimine on ülevalt alla.
  • kasutad ära ruumi ekraani vasakust äärest parema äären (väike margin peaks muidugi olema).
  • Suure display variant ja mobiilivariant on sama lähtekoodiga, mitte kaks täiesti erinevat lehte.
  • Suure display paigutus (tavapaigutus) on teistsugune, kui mobiilipaigus, kindlasti ses mõttes, et tavapaigutuses ei raisata liiga palju ruumi, nupud, fondid jne pole liiga suured, käigupildid, tulemuste tabel jne on kõrvuti (mobiilis üksteise all) ja scrollida pole üldse vaja, ka mitte üles-alla.
• 1 lisapunkt ja lisaülesanne on veel varuks: see täpsustub lähiajal.

Mobiiliversioon ehk responsive design

Mobiiliversioon ei ole kohustuslik: jända sellega siis, kui mäng juba ok töötab.

Loe kõigepealt läbi see sissejuhatus, siis vaata w3schoolsi näiteid ja jätkuks võid lugeda veel media query kohta.

Kursuse põhilehel on samuti lisaks linke mõistlikele tutorialitele ja näidetele.

Koodist arusaamine ja plagiaadikontroll

Kogu esitatud kood peab jääma prax2 alamkataloogi alles kuni kursuse lõpuni.

Teiste inimeste - ka õppejõu - kirjutatud lahendusi aluseks võtta ei ole OK. Kui juhendaja tuvastab, et sinu koodil on väga suured sarnasused mõne teise koodiga, siis pead (parimal juhul) töö uuesti kirjutama. Järelkontrollid toimuvad ka pärast töö esitamist.

Kõigist osadest oma koodis pead ise hästi aru saama ja suutma neid juhendajale selgitada, kui ta küsib. Ei ole OK võtta võrgust juppe, mille funktsioneerimisest sa aru ei saa (ehk, kui võtad mõne jupi, siis tee endale kõigepealt selgeks, mida see jupp täpselt teeb).

CSS-i ja javascripti teegid ja erivariandid javascriptist

Väliste teekide, ntx Jquery või Bootstrap kasutamine on ok, aga siis sa pead hästi aru saama, mida sinu tehtavad teegi-callid või stiilid teevad. Reaalselt on see praks piisavalt lihtne selleks, et teekide kasutamine vajalik ei oleks. Kui otsustad siiski teeki kasutada, siis väga soovitav on valida jquery kui suhteliselt lihtne ja domineerivalt populaarseim javascripti teek, kujunduse jaoks aga Bootstrap.

Kogu javascript peab olema esitatud minimiseerimata ja nö normaalse taandega, et oleks kergesti loetav.

Ei ole OK kasutada süsteeme nagu typescript, mis kompileerivad sinu lähtekoodi javascriptiks: see muudaks juhendajate töö liiga raskeks.

Soovitusi htmli ja cssi osas

Hea mõte on algul jagada lehekülg mitmeks horisontaalseks reaks ja vertikaalseks kõrvuti tulbaks. Kõige lihtsam - ja selle rakenduse jaoks piisav - on seada ridadele ja tulpadele fikseeritud laiused ja kõrgused. NB! Selline fiks laiuste/kõrguste lähenemine ei ole enamiku harilike veebisaitide jaoks päris hea mõte, ja on hoopis halb mobiilile sobiva saidi tegemisel.

Siit ja siit leiad horisontaalse tsentreerimise õpetused (point: margin-left: auto; margin-right: auto;)

Vertikaalset tsentreerimist on raskem teha, aga siin on heaks abiks flexbox. Flexboxi kohta saad pikemalt lugeda näiteks siit.

Tulpade tegemine puhtalt div-dega ei ole ka päris triviaalne.

Soovitusi javascripti osas

Kuidas käiku teha? Tee iga käiguvalik väikese piltnupuna ja pane sinna nupule onclick atribuudina javascripti call, mis kutsub välja käigutegemise funktsiooni näiteks nii:

...
function move(x) {
 ...
}
...
<img src="..." onclick="move(1);"></img>

Üks esimesi asju, mida su javascripti kood peaks tegema, on mängija käikude salvestamine. Hea mõte on iga käik panna massiivi - ehk listi - alustades positsioonist 0, seejärel 1 jne jne. Selleks on hea kasutada push meetodit. Array arr pikkuse saad nii: arr.length . Lisaks vaata kindlasti array meetodeid siit ja siit

Pea silmas ka, et javascripti array on praktiliselt sama asi, mis javascripti objekt ja kõik array elemendid on objekti positsiooni-nimel olevad väärtused, ehk arr.miski on sama, mis arr['miski'].

Kui tahad näiteks hoida oma ja vastase käiku ja tulemust ühel massiivireal - hea mõte - saad panna käikude massiivi lihtsalt kolmeelemendilisi objekte näiteks nii:

result=1;
arr.push({user:1, opp:2, res: result});
lastresult=arr[arr.length-1].res;

Kuidas panna programmi hästi mängima?

Esiteks pane tähele, et selles praksis ei ole üldse nõutud, et programm mängiks väga hästi. Miinumnõuded on üleval kirjas.

Teiseks pane tähele, et puhtalt juhusliku viske vastu mängides ei saa ei võidu- ega kaotusshanss olla suurem, kui 50%. Samas, kui mängija ei mängi päris juhuslikult (näiteks seepärast, et ta on inimene ja ei suuda olla päris juhuslik, või kasutab ta mõnda strateegiat), siis on seda võimalik tuvastada ja tõsta oma võidushanssi tugevalt üle 50%. Oletame, et programmid võistlevad turniiril paljude osavõtjatega, kellest suur hulk ei mängi juhuslikult. Siis juhuslikult mängiv programm platseerub pingerea keskele, osavalt vastase strateegiat ära arvav programm aga pingerea etteotsa!

Kui tahad programmi parandada, siis tasub kindlasti lugeda neid õpetusi:

• worldrps soovitused
• D.L.Lu soovitused

ja vaadata programmide võistluse hetkeseisu tabelis olevate programmide lähtekoodi (kõik avalikud, lihtsalt kliki programmi nimele).

Tehnoloogianõuded

Kogu rakendus peab kasutama ainult html+css+javascripti ja olema üles laetud serverisse staatiliste lehtedena.

Ära kasuta lehe struktureerimiseks üksteise sees olevaid tabeleid, vaid div-e ja css-i. Sisuliselt tabeli kujul oleva info esitamine html tabelina on aga täiesti ok.