ITV0110 2. töö 2015: CSS, javascript

Täringud

NB!

Hetkel on praksiülesanne muutmisel, palun ignoreeri allolevat poolikut teksti!

Mida tuleb teha

Sinu ülesandeks on kirjutada brauseris jooksev, javascripti ja css-i peale ehitatud kahe inimese mängu laevade pommitamine, lihtsustatud eriversioon. Loe kõigepealt läbi ülevaade wikipediast ja mängi katseks standardset täisversiooni siin või siin või siin: see on hea insipiratsioon sinu enda mängu tegemiseks.

Ü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

Meie praksiülesande detailid ja erisused standardsest laevade pommitamisest on järgmised:

• Lihtsustus: kasutame ainult ühte tüüpi laeva: kahene horisontaalpaigutusega laev. Ehk, alati kaks kõrvuti horisontaalset ruutu.
• Neid standardse pommitamise reegleid tuleb järgida:
  • Laevad ei tohi olla üksteisega külgepidi/otsapidi koos. Diagonaali ehk nurgaga puudutamine on ok.
  • Lui sina või masin on mõnda ruutu pommitanud, aga läks mööda, peab sinna ilmuma nähtav märge.
  • Lui oled laevaruudule pihta saanud, peab sinna ilmuma teistsugune nähtav märge, millest saab aru, et said pihta.
  • Kui sina või masin saab laevaruudule pihta, saab ta kohe uuesti pommitada, kuni ta kas võidab või pommitab mööda: alles siis antakse käik teisele üle.
• Sina mängid arvuti vastu, seejuures on ok, kui arvuti käib lihtsalt juhuslikult, kuid ta ei tohi pommitada kohti, mida ta on juba varem pommitanud.
• Mängu alguses pead saama valida maatriksi suuruse: konkreetselt kas 3x3, 4x4, ... või 10x10 ruudustik.
• Mängu alguses peab saama valida laevade arvu: kas 1, 2, 3, ..., 10 laeva. Laevade arv ei tohi olla suurem, kui valitud maatriksi küljepikkus: näiteks 4x4 ruudustikul võib olla maksimaalselt neli laeva.
• Laevade algse paigutuse nii sinu maatriksil kui tema enda maatriksil määrab arvuti juhuslikult, arvestades seejuures, et laevad ei tohi külgepidi ega otsapidi kokku puutuda. Kui sul praksis kõik nõutud osad valmis, võid lisaks realiseerida ka enda laevade ise-paigutamise: see ei ole kohustuslik ja annab ühe punkti võimalikust 12-st.
• Lehel peab olema nupp mängu alustamiseks, mida võib vajutada ka käimasoleva mängu korral: sel juhul mäng katkestatakse ja alustatakse nullist uut, koos uute maatriksisuuruse ja laevade arvu valikuga.
• Kujunduslikud ja tehnoloogilised nõuded:
  • Lehel peavad olema sinu maatriks ja masina maatriks sama suured ja horisontaalis kõrvuti. Mobiilivariandis (kui selle teed) peab masina maatriks aga olema sinu maatriksi kohal.
  • Ei tohi kasutada canvast, svg-d, flashi ega java applette. Maatriksi jaoks kasuta kas div-e või tabelit koos css-i ja javascriptiga.
  • Nii laevade maatriksi kui seniste tulemuste tabeli võid teha tabeli või div tagidega, aga mujal ei tohi tabeli tagi kasutada.

Kõiki eeltoodud nõudeid tuleb järgida, klassikaline laevade pommitamine praksilahenduseks ei sobi.

Mida tuleb teha

Sinu ülesandeks on kirjutada brauseris jooksev, javascripti ja css-i peale ehitatud ülilihtne kahe inimese täringumäng Pig, konkreetsemalt selle kahe mängija versioon. Loe kõigepealt läbi ülevaade wikipediast ja vaata tausta mõttes lisaks optimaalset programmi ja kogumikku artikleid (need on küll ühe täringuga versiooni jaoks).

Big Pig reeglid vastavalt wikipedia lingile on siis:

• Kui on mängija kord, siis ta viskab kahte täringut.
• Kui üks täring annab 1 (aga teine ei anna 1) siis on mängija kord lõppenud ja sellest mängukorrast ta punkte ei saa.
• Kui täringutel olid erinevad numbrid N ja M, siis liidetakse selle-mängukorra-punktidele N+M
• Kui mõlemil täringul oli sama number N (näiteks 3 ja3 või 1 ja 1) siis liidetakse selle-mängukorra-punktidele kas: (a) 1 ja 1 korral 25 punkti, (b) muu N ja N korral 2*(N+N) ehk 4*N.
• Kui mängija otsustab anda oma korra üle, siis kõik tema korra ajal saadud punktid (selle-mängukorra-punktid) summeeritakse ja lisatakse tema koguseisule ning mängukord läheb üle teisele mängijale.

Põhipoint: ühe "mängija korra" ajal võib ta visata täringupaari mitu korda, seejuures kõik saadud punktid liidetakse, aga nad kõik lähevad raisku, kui täringud annavad 1. Et nad raisku ei läheks, tuleb mängijal mingil hetkel oma kord vabatahtlikult üle anda.

See applet on illustreeriv variant kahe täringuga pig'st (applet ei kasuta meil nõutud Big Pig reegleid, kuid illustreerib üldisi mängupõhimõtteid).

Ühe mängija asemel mängib sinu programmis arvuti, st programmi kasutaja mängib arvuti vastu. Optimaalne mängustrateegia on suhteliselt keeruline (sellest saab lugeda viidatud artiklitest), sestap piisab, kui arvuti mängib lihtsa mitteoptimaalse põhimõttega:

• kui 100 punkti on juba täis, siis katkesta kohe.
• muidu võta alati täis mingi X punkti ja siis anna käik vastasele. Mis võiks olla sobiv X? Tõenäoliselt kuskil 10 ja 20 vahel. X-i ettemääramise asemel peab sinu lehel olema X-i valiku väli: kasutaja peab ise saama (katseteks) X-i sisestada.

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

Selles praksis teed ühe inimese 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.

Nõuded ja hindamispõhimõtted

Kõige olulisem: ära kasuta htmli, cssi ega javascripti konstruktsioone/funktsioone, millest sa aru ei saa. Teisisõnu, enne kasutamist loe, mida see-ja-see asi teeb.

Kui põhialgoritm ei tööta korralikult, siis praks ei ole arvestatud, kui aga töötab ja leht ei näe väga kole välja, saab arvestuse eest baaspunktid ehk seitse punkti.

Lisaks põhialgoritmile on hea mõte realiseerida hulk täiendavat funktsionaalsust, mis ei ole aga kohustuslik: iga täiendav realiseeritud funktsionaalsus annab lihtsalt lisaks punkte. Täispunktide - kaksteist - jaoks peavad kõik funktsioonid olema korralikult tehtud.

• Täringud visates pöörlevad (ei pea pöörlema kuidagi "õigesti"). 1 punkt.
• Mängu käigus ilmuvad lehe äärele ülalt alla ridades mängija ja arvuti saadud punktid oma mängukordadel (kaks tulpa): mängu uuesti alustades tehakse see vaade jälle tühjaks. 2 punkti.
• Rakendus näeb hea välja ja on mängitav nii suurel ekraanil kui ka mobiilibrauseris ilma zoomimata vms eritegevusi tegemata: teisisõnu, on olemas on ka mobiilile optimeeritud variant (seal ei pea olema kõiki kellasid ja vilesid, kui need ära ei mahu). 2 punkti.

Kui oled selle kõik valmis teinud, on hea mõte katsetada erinevate strateegiatega, et tuvastada, mis oleks sobiv X valik ja kas õnnestub leida veel kavalamat strateegiat. Selleks pane arvuti iseenda vastu eri strateegiatega palju kordi mängima ja kogu statistikat, milline strateegia millist võidab. Kuva tulemused juhendajale tabelis ja selgita. Selle lisaülesande eest võib saada kuni kolm lisapunkti.

Mis veel nõutud

Info paigutus ekraanil peab olema stabiilne, tekst 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.

Täringud tuleb kuvada täringupildiga (võib olla programmi genereeritud või foto vms), mitte lihtsalt numbritega.

Ära unusta lehele lisamast eelmainitud X-i välja!

Leht tohib kasutada ainult html+css+javascripti, seejuures ei tohi kasutada freime ega ifreime. Html lehed võivad kasutada sisselaetavaid css ja javascripti faile ja pilte. Kogu rakendus tuleb teha üheainsa html failiga, millele lisanduvad siis pildi-, css- ja javascripti failid vastavalt sinu vajadusele ja eelistustele.

CSS-i harjutamise eesmärgil tuleb minimeerida/vältida puht-kujunduslikke html tage (font, b, center jne) ja teha kujundus eeskätt CSS-ga. Elementaarsed tagid nagu p ja br ning head, script, body, mitte-nestitud tabelid, h1, h2 jms on ok. Põhiliselt soovitav kasutada id-de ja class-dega varustatud div ja span tage.

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 eriti 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.

Tee programm kõigepealt valmis oma arvutis ja seejärel riputa kogu materjal - html, css, javascript ja pildid - serverisse. TTÜ serveri (dijkstra) ligipääsu- ja kasutamisõpetust loe altpoolt.

NB! Ära unusta, et lähema nädala jooksul lisandub siia lehele hulk täpsustavaid nõudeid, detaile, soovitusi jne. Kuna põhialgoritm jääb samaks, võid kohe alustada, lihtsalt kontrolli siit lehelt regulaarselt, mis uuendusi on lisandunud.

Soovitusi htmli ja cssi osas

Hea mõte on 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 tsentreerimise õpetused (point: margin-left: auto; margin-right: auto;)

Tulpade tegemine tabeliga on lihtne, aga puhtalt div-dega ei ole päris triviaalne. Vaata seda ja seda või seda seletust põhimõtete osas. Kogu värgi lehekülje keskele panekuks, headeri ja footeri lisamiseks jne pakuvad ideid ja näiteid need õpetused, alates lihtsamast ja lõpetades põhjalikuga:

• w3cschooli hea väike terviknäide
• see suhteliselt vana tutorial.
• väga põhjalik paigutuse ja floatide õpetus, lõpus terviknäited

Täiendavate ideede ja juhatuste jaoks vaata lihtsalt kursuse lehelt viidatud materjale CSS bloki alt.

Soovitusi javascripti osas

Kui sa ei kasuta mõnda javascripti teeki nagu jquery (algajale mittesoovitav, kuna tekitab lisakeerukusi!) siis on hea mõte töö lihtsustamiseks teha ise väikeseid abifunktsioone, näiteks function gid(x) {return document.getElementById(x); } et ei peaks kogu aeg pikalt välja kirjutama.

Debugimiseks on kõige lihtsam panna koodi sisse alert(...), aga mugavam ja parem on kasutada funktsiooni console.log(...) mille võid omakorda panna oma abifunktsiooni a la function debug(x) { console.log(x) }. console.log trükib tulemuse brauseri debugeri konsooli (Firefoxis käivita (ja enne installi!) firebug ja vaata firebugi aknast "console" tabi alt, Chromes otsi developer tools või javascript console).

Täiendavate ideede ja juhatuste jaoks vaata lihtsalt kursuse lehelt viidatud materjale javascripti bloki alt.

Dijkstra server

Kodutööde tarbeks on kasutusel server nimega dijkstra: kindlasti loe dijkstra kasutusõpetust.

Kõik kodutööd tuleb riputada Dijkstra serverisse, et õppejõud saaks lähtekoode Dijkstra serveris vaadata ja plagiaadituvastus-tarkvara abil kontrollida.

Nõuded kataloogile/failinimedele:

• Teine kodutöö tuleb panna sinu kodukataloogi alamkataloogi public_html/prax2 mille pead ise looma.
• Kodutöö html-põhifaili nimi peab olema index.html.
• Kodutöö sinu tehtud javascripti-fail fail olgu nimega prax2.js ning sinu tehtud css-fail nimega prax2.css
• Pildifailide ja mujalt võetud javascripti/css teekide osas mingeid nõudeid ei ole.

Enne failide serverisse riputamist on mõistlik teha kogu süsteem valmis lihtsalt oma arvutis/arvutiklassi arvutis.