1. research za orodja, strežnik, language k ga bom uporablu 1.5 camelCase 2.html boilerplate 3. ugotoviti sem moral kako bo stran postavljena saj so elementni vecinoma dolgi vertikalno in ne horizontalno kakor so običajno elementi v spletni strain, rešitev: zelo visoki inline elementi 4. gumb domov in subsequently usi gumbi - position fixed da ni treba skrbet za inline/blocke <- zato rab bit zelo tocn in v % 5. oblikovanje ozadje slike - photoshop 6. redo spletne strain - namesto fixed - flex in znotraj so elementi relative (1440p monitor in drugi), flex-direction column ker je vertikaln element BACKUP! fixed se se vedno uporablja za npr buttonPlace ker rab bit vedno cist pr robu 7. celo stran postavil v en velik ultimateDiv da lahko npr. buttonTransition vedno oklepa buttonPlace in igro 8. vh namest px ker se bol scalea, em za font da se scalea glede na div element 9. namesto da bi oklepali vertical linei gamePlace, scorePlace sm dou border right/left 10. naredu isto ss ampak je zdej display : flex tkoda se prilagodi bol razlicn screen sizu 11. dodatn transparent blocki do main game placa da bol zgleda + border buttonImage 12. zacenjaje z js: canvas, resizeCanvas in testiranje/ucenje uporabe canvas z lociranjem koordinat gumbov in prikazanjem arrowa gumba v istih koordinatih - getBoundingClientRect(), rabu sm upostevat da drawImage nardri image v levem zgornem kotu tkoda ubistu rabs uporabt redCoreds.left/top da v pravilnem prostoru dobis + id rab bit od img in ne od buttona nvm ugotovu sm da je sam id bil problem ne koordinati 13. funkcija premikana redArrow od zgori ekrana do dol 14. ugotovo da ne bom uporablu canvas kr ne mors dobit pozicije elmentov kr sploh niso elementi ampak so sam pixeli velke slike tkoda z eno noto se gre z drugimi pa ne kr bi rabu clearat celo stvar usakic k se premakne in to je povzrocal screen flicker z sam dvema notama k sm preizkusu 15. https://www.youtube.com/watch?v=9XcLoEVnjrA 16. https://www.youtube.com/watch?v=cZzf1FQQFA0 17. lanes, laneNotes da loh notr spawnam note kot child da bojo dobr positionani, spawnNote() 18. moveNote -> ugotovu da k uporablam requestAnimationFrame moram ce hocm da je u loopu poklicat enkrat izven funkcije ampak kr rabm dobit getBoundingClienRect() moram to funkcijo dat v funkcijo. pol sm ugotovo da sploh ne rabm getboundingclientrect kr ne rabm checkat od note specific y ampak loh sam gledam kdaj bo stevc (i) manjsi od window.outerHeight. velik uporablo console.log (stevc, "works", "fin" v elseu k se nism naredu remove note funkcijo) 19. removeNote() bo mela note parameter poznej bom dodou druge k bos loh prtisku tipke za tockovni system za zdele sam tko da se odstran k je na konc screena - blo je zlo simple (sam remove() lol) 20. IMPLEMENTACIJA INPUTA TIPKKKKKKK. na zacetku sam to -> function keyInput(key){ console.log(key) } in addEventListener z switch-case stavkom (rabu naucit) torej listena za keypress in v switchu prever ker key je bil. 21. v1: case "ArrowLeft": console.log(`${laneNotes\[0]}`) if (laneNotes[0].includes("RedNote")) { score += 100; scoreText.textContent = `${score}`; console.log(score) } v2: case "ArrowLeft": const cords = getCords(laneNotes\[0].at([-1])) console.log(`${cords}`) if ( cords > 800 && cords < 1000) { score += 100; scoreText.textContent = `${score}`; console.log(score) } 22. funkcija getCords() za 20. tocko da v ifu zdej prevermo laneNotes[0][-1] coordinate (od note) ce so na pravilnm mestu funkcija mi je vrnla error da ni mogla dat funkcije getBCR() mojmu elementu tkoda sm rabu preverjat typeof. Ugotovo da sm pozabu da sm zacasno za testiranje v laneNotes pushu STRING "redNote" namest samga note elementa 23. dodajanje audia - ko prtisns Enter (dodav nov case v switch) se muzka zacne (dobesedna igrca tud). poznej bom se dodou da se zacenjo dodajat puscice... 24. dodou favicon 25. dodou eventListener za audio da mi tracka cas v ms - pomembn za dobr timing rhythm igrce 26. Metronom (class) - tracka BPM (bpm od songa sm dubi z ss https://www.all8.com/tools/bpm.htm, beatDurationMS - (60/BPM * 1000), lastBeat = 0, nextBeatPos = bdms 27. metronome update funkcija za trackanje beatov - sprva probu z window load in requestAF ampak ni delal, kr spletne strain ne delajo na fps. Naredu z setInterval(updat, bdms). wrapanye funkcije setInterval(() => metronome.update(), metronome.bdms); kr ce ne mi da bdms undefined. dodajane activeBeat, ki poskrbi za margin of error (ne mormo pricakovat frame perfect input od uporabnika) in activeBeatPositionStart in End. ta dva dolocata mejo kok ms je okno v katerem se steje vnos kot hit. torej ce je v tem oknu casa se activeBeat spremeni v 2, torej se bo to upostevalo v kalkulaciji scora ce pa ne bo v tem oknu bo pa -1 torej ne bo dobil tock. https://michaelabe.medium.com/javascript-setinterval-e4fdc6ad3d26 28. composer bo list z notami (tud listi) v notah bojo propertiji not seprav lane, duration 29. odstranu getCords in logiko v povezavi z njo v switch case stavku inputa 29. ugotovo da ne dam bdms v setInterval ampak usak frame ampak ker browserji ne delajo sm dou na 16ms kar je prblizn 60fps 30. zacetna verzija judgea. v tej fazi se je na usak beat spawnala rdeca nota function judge(color) { console.log(metronome.activeBeat) if (metronome.activeBeat == 2 && laneNotes[0].at(-1) == "red") { score += 100; scoreText.textContent = `${score}`; } } 31. https://www.youtube.com/watch?v=lhrqsUZ45j8 32. midi opcija 33. odstranu removeNote ker bos uporablu sam judge pa itak je sam ena vrstica v funkciji. zdej na judge in sm ful meu probleme ampak sm na konc ugotovu da rabm popat iz laneNotes[lane] in se names appendChild v spawnnote rab bit PREPEND, ker sm ugotovo da appenda kot zadn child jz pa rabm removat lastchild iz lanes torej rab bit appendan kot firstchild ce ne mi je removal npr. tizga k se je glih spawnu. Se en problem, kr je image buttona njegov child loh ponesrec deletas image 34. odlocu za 30. tocko video za nacin notov torej: naredim funkcijo, ki v laneNotes dodaja glede na ker input je v ta prav lane cas k sm hitu tipko na beat. te case na konc songa sprintam v console. zdej ta list dodam v chart in vsem dam minus tok kukr je cs da pride nota do gumba in pol to uporablam da mi dodaja v laneNotes note. 35. nazaj na problematiko removanja lastChilda v 32. najprej probu da so lanes-I imgi namest sami buttoni. to ni delal zrd nezga razloga se mi niso prikazoval eden izmed stvari k sm probu je da spremenim button v div kar sm naredu. probu nekak da mi dela [-2] al pa da checka id elementa predn ga deleta ampak mi ni uspel. Zato sm sam naredu v photoshopu background z linear gradientom in sliko gumba da bo isto zgledal ampak zdej nou image elementa in namest koordinat img bo od gumba pa se mau bol bo zgledal na razlicnih ekranih kr se bo bol fittal 36. 2911ms je kok cajta traa da pride dol to sm zracunu tko da sm sprint cas ob spawnanju note in k sm manualnu inputu k e sla cez gumb 37. odstranu vecinoma propertyov metronoma - sam bpm pa beats ce jih bom se slucajn rabu 38. const zacasnol = [[],[],[],[]] function zacasno(lane, cs) { zacasnol[lane].push(cs) } torej k je input dam npr zacasno(0,currentTimeMs) audio.addEventListener("ended", function(){ console.log(zacasnol) }) 39. za test najprej sam mau not zaigrou also change score display da je pravilno zaoblen s tem da dodam za border radius se eno vrdnoto glede na visino / sirino 40. kratka funkcija v pythonu da usak input k sm zdej dou v composer zmanjsam za fall time: for x in range(len(arr)): for y in range(len(arr[x])): arr[x][y] -= 2911 print(arr) 41. nova funkcija pushNotes k sm jo dou v start funkcijo k bo iteretala nested loop cez composerja in za usazga spawnala noto. spremenu spawNote funkcijo da nima vec colorja ampak bo glede na switch stavek to pregledala (glede na to v kerem laneu je). hitr ugotovo da se nism naredu css za druge note razn rdece tkoda se to hitr naredu 42. zdej se mi nc noce spawnat. to bom probu popravt tko da namest da takoj startMoveNote bo neka funkcia gledala ce ma nek gumb childa in pol se bo tm child zaceu premikat 43. dodou da note grejo na prave kordinate. pozabu da sm meu sam za rdeco narjen coordinate tkoda dodou v switch stavek. also zacasno sm se manj not dou v composer (sam 4 ene za drugo) 44. ugotovu zaka nism vidu not: prvo kot prvo sm mau console logu in ugotovu da div elementi niso dobil classov kar se pa zgodi v switch statement. zato sm sou gledat sintakso casea ce sm se slucajn zmotu da bi rabu dt kksne oklepaje al pa kej. pol sm pa console logu se argument k sm daju v switch stavek (lane) in pol sm z typeof() funkcijo ugotovo da je biu string ker je javascript weird, jz sm pa v case stavke daju int 45. NA KONC NARED DA NEMORS SPET DAT ENTER DA STARTAS IGRO 46. zdej koncn vidm noto ampak je same ena - problem da mi da u usak element use classe in isti left property tkoda use note so na istm placu 47. SETTIMEOUT() FUNKCIJAAAAAAAAA - caka glede na 2. parameter kdaj bo naredu 1. parameter 48. resu eden izmed problemov - zdej se spawnaju usi 4 noti kr sm pozabu v usakem case stavku break. ampak usi se spawnajo naenkrat 49. rabu wrapat spawnNote z funkcijo : setTimeout(function(){ spawnNote(lan); }, composer[lan][n]); ampak zdej je problem da se spawnajo ob pravm casu ampak sam v zadnm laneu 50. KONCN rabu sm dat let lan namest sam lan v for loopu!!!!!!!!!!!!!!!!!! 51. problem - ucasih se input ne registrira al pa ej mau pozn 52. cist znebiu metronome 53. dodou array cords z koordinati gumbov da jih mam nek shranjen da loh judge() lazji gleda coordinate da zdej zacnem judgat glede na position ne na activeBeat od metronome 54. dodou const buttonHeight itak so usi butoni na isti visini tkoda sm dou od rdecga coordinate tkoda ne rabm un cord array 55. dodou distance v judge, ki izmer dolzino note do gumba v if stavku se zdej primerja kok velk je distance in glede na to spremeni točke 56. problem: distance dela za prve 2 noti pol pa zarad nezga razloga stuck kot buttonHeight 57. delete laneNotes in use u zvezi s tem kr ne rabm, mislu sm da bom daju propertiye vrjetn not, ampak zdej ne rabm, je pa uporablen sam k inputam note za chart ampak sej zato mam zacasne arraye 58. dodou onended="scoreCompare()" pr audio v html da bom lahko primerju score z top scori in ga display 59. zacenjanje z MySQL https://www.youtube.com/watch?v=b_e2zNcEtyc mpv js file sql.js naredu database game, tabelo users, topScores. vs code MySQL https://www.w3schools.com/nodejs/nodejs_mysql.asp con.connect(function(err) { if (err) throw err; console.log("Connected!"); con.query(sql_stavek, function (err, result) { if (err) throw err; console.log(result); }); 60. dodou topScore1,2 = 0 v topScores in naredu scoreCompare z parametri score in which (ker topScore primerjamo) type="module" za main script v htmluju da lahko importam funkcije iz sql scripta v sql.js pa pr funkciji napisan export 61. zdej rabm dat let MySQL = require("MySQL") da lahko uporablam ta package v mojih scriptih. To pa ne dela ker ne prepozna require() kot funkcijo, ker to delam sam na browserju zdele in ne na serverju 62. https://www.youtube.com/watch?v=Hej48pi_lOc 63. ni hotl instalirat mysql2 package tkoda sm probu cache clearat, ugotovu da je problem da sm dou type:module v dependencies 64. do zdej sploh nism glih vedu kaj sploh je node.js v primerjavi z js. tkoda sm mau raziskau to je ubistvu da loh delas use v console zato mi ne dela v browserju sql. Torej sm ugotovu da dokler nm meu serverja bom pac rabu uporablat sam console za sql za zdele k delam lokalno kar pomen da bom rabu testirat tko da nardim pac isto funkcijo sam da bom manually ustavu parameter npr. score da preverm ce bo delala. 65. pool = connection k lahko uporablas veckrat da delas s sql 66. dubu error econnrefused - xampp ni biu zagnan 67. promise pending - promise ti returna error al pa value. rabu dat .then - to nardu da dobis rezultate ne glede na to al e promise resolved al pa se vendo pending. problem da rabm ctr + cjat (force stop) program cene skoz runna 68. process.env.HOST - glede na to al bo lokalno al pa delal na serverju bodo drugacni podatki npr. zdele lokalno uporablam root root, na serverju bo neki bol zascitenga. Naredu .env file v katerem storam te value. rabu instalirat dotenv package da loh to povezem z sql.js 69. import {scoreCompare} from "./sql.js" to bom rabu dodt v game.js ko bo streznik. za zdele bom odstranu da mi sploh dela kr error nardi da ne dela. pa se export pred funkcijami 70. remakeu scoreCompare in najprej testiru sam kaj mi vrne iz select Stavka - vrnu array z arrayom v katerem je neka struktura z topScoreX: 0, torej rabm dobit sam to 0ko. da ugotovim kaj sploh je struktura v Kateri je score sm testiru z typeof - je object. da dobim value iz objecta uporabm Object.values(obj) funkcijo. torej najprej sm returnu return kar mi je dal [ {topScoreX: 0} ]. pol sm dou return[0] to mi je dal [topScoreX: 0]. pol sm pa dou se object funkcijo in sm dubu [0] in pol se tej funkciji dodou [0] da dobim sam 0 (0 je biu score) 71. te strvari k se posiljajo v requeste loh ljudje vidjo skoz http requeste, da preprecm sql injection rabm namest ${song} met ? v query() pa kot drug parameter dam [song] 72. dodou se if stavek: ce je topScore manjsi od argumenta score k ga je dubu uporabnik je score nov topScore. naredu se getTopScore() da preverjam ce je score biu upisan (testiru z score = 1). neumn sm in sm pogledu u xampp, jz sm ceu cajt insert rabu bi pa updejtat (insert sm 1 NULL ubistu, 0 0 je pa se vedno ostal ciz zgor). eto zdej dela 73. optimiziranje igrce 1 - slike indikatorov so zlo prevelk size : 2716px zmansu na 350. iz 50kb v 2kb. obcutek sm meu kukr da je nardil razliko 74. naredu index.html, index.css 75. naredu logo za stran in ugotovu ime GSRhythm (Game Soundtrack) 76. naredu banner, gumbe za play, login, signup 77.https://www.youtube.com/watch?v=s05vBlszF-I infinity efekt https://cssgradient.io. mau spremeniu da ne spreminjam translateY tko da bo slo v sredino ne zamaknn, drugacne barve 78. naredu se leaderboard gumb, overflow hidden da ne mors scrollat ceprou je infinity efekt vecji od strani... 79. onclick v buttone da te da na druge sub-site 80. css, ko hoveras cez gumbe da spremenijo barvo 81. background muzika https://freesound.org. dou na autoplay ko se odpre stran https://freesound.org/people/ZHRØ/sounds/584430/ ker vecina browserjov autoplay ne podpira sm dou se js da poslusa za kakrsen koli vnos da zacne igrat muziko 82. naredu choose html v katerem izberes ker track hocs igrt. do sm prids preko index htmlja - play. gumbe v indexu dou v a element kr mi je blo annoying da nism mogu middle mouse clickat da odpre v novem tabu pa tud bol pregledno v htmlju kr se znebis onclicka in das href namest 83. v index dodou se credit button k te bo dou v credite za vse linke tutorialov in background music npr. 84. inspiriru me je ful ta infinity efekt tkoda bom modificiru da bo neki podobnga v choose.html. meu probleme kr sm hotu da nardim tko kukr ripple efekt torej vec krogov z delayom, ampak na zacetku je biu sam en ozioram 3ije overlayani drug cez druzga ceprou sm dou delay. pol sm pa ugotovu da nism dobr naredu v keyframes breathing da se vecajo. 85. naredu da ce hoveras cez izbiro tracka, se background spremeni v background tracka. ker se spreminja body in body je pred gumbom to ne morm nardit z CSS (#nfm:hover + body {..) ampak rabm nardit funkcijo z js in jo aktivirat z html mouseover. To nemors nardit z body.style... ampak rabs dodat class elementu. 86. dodou se da spremeni kroge, verticalline, sam button. v htmlju najprej z mouseover eventom aktivira chbg() funkcijo, v js pa ta aktivira se changeColor. enako velja za defaultanje nazaj sam da je mouseout !!!!!!NARED SE ZA MONSTERHUNTER 87. dou se da ti zaigra pesem tracka, k hoveras. pozabu pobrisat controls property usem audio v vseh html dokumentih k itak ni fore k je display: none. da ustavs track das na pauzo + das cas (currentTime) na 0. dou use document.getElementby... v const na zacetku da je bol pregledno 88. naredu login, signup html (nc kode se). input typei: username, password. padding, da je text v inputu odmaknjen stran od roba. display:block da grejo p in button v now line 89. dodou username1, username2 v topScores da se bo zapisu igralec 90. Spremeniu logiko scoreComparea, avtomatsko se da not score in username v topScore, nc ne primerja sploh evem zakaj sm to dou k bo itak leaderboard. to sm testiru in mi ni delal ker sm dvakrat uporabu ? v SQL stavku ((topScore?, username?). rabu sm dat v argument [song] se en song znotri arraya. 91. spremenu da je sam username ne pa username1, username2 92. zaceu z game2.html oziroma pokke track. prekopiru css in html od game.html / css. 93. spremeniu stvari kot ozadje, gumbi... css da bo na temo monster hunter: spremenu ozadje, barve nasplosno, border gumb, score placa so zdej monhun themed velik časa sm jih delu - flip - transform: scaleX(-1) buttoni, indikatorji spremenjeni note iz monhun, desna, leva slika spremenjena dodou gameID v js game da se bo spremeniu glede na ker game igras - gameID se spremeni z if stavkom na zacetku glede na title drugacn font, font weight bold 94. spremeniu izgled nfm - ozadje insanotu, sprememba barv ui da bo mau bol raznolika barvnost. indikatorjom dodou zelo transparentn ozadje da bodo bol prtegnl pozornost 95. dodou drugacn composer za monhun in dodou logiko igri da ce je id od monhun bo uporabu monhun composer 96. dodou start screen, spremenu logiko da se lahko samo enkrat zacne igra (prej si loh veckrat prtisnu enter in se je tolkokrat vec not pokazal), spremenu logiko judge() da lahko dobis 20/50/100 tock glede na distance, plusScore se spreminja glede na to kok tock dobis 97. dodou se hover event za monhun v choose 98. dodou combo, ki se ce zadanes poveca za 1, ce ne gre nazaj na 0, dodou tud maxCombo da se bo prikazal na koncu rezultatov. Dodou Perfect! Good! Great! glede na stevilo tock, ki jih dobis od posameznega pritiska "ended" event - nared gameEnd()!!!!!!! 99. dodou da se "bottom" spremeni v barvo note ce hittas gumb/perfect, zato sm rabu dodt nov argument judge() (color) da je lazji s tem upravlat. naredu animation sistem z js animationi + list animationov (glede na to al samo zadans al pa je perfect). bottomu v NFM mau spremenu barvo da je bol nevtralna 100. spremenu logiko ker sem pri konzultaciji opazu da je na solskim racunalnikom note sle ful pocasnej. ugotovu sm da je zarad razlicnga fpsa tkoda sm vklucu ekvivalent deltatime v funkcijo moveNote. 101. Spremenu tekst v slovenscino po requestu velikega C (razen signup login da ne bo confusing) 102. dodou logiko signupu in loginu in naredu funkcije v sql.js za to 103. dodou gameEnd() nakonc ti pokaze razultate score, max combo, vpise v tabelo 104. naredu ta prave indikator tracke za oba songa 105. importu sql funkcije drugim scriptam 106. dodou funkcijam k jih uporablam v login/signup z sql await in async da dela 107. tist import sql mi ni delu zaradtega ker je to node.js module in ne nek file. rabs met backend da te module uporablas in pol z frontendom requestat stvari frontendu https://www.youtube.com/watch?v=C_vv1D5oDZ0 naredu dobesedn backend server.js v katerem: 1. nardim app 2. dam da poslusa za port 3000 3. trije posti (login, suignup in score) argumente kot username, password dam v scriptah v bodyu v fetch requestu in v teh post funkcijah se zdej poklicejo sql funkcije (userExists...) rabu sm pazt za order errorov ker npr v signup postu se izvrsi newUser ce ni nobenih errorov ampak gledam tud frontend error ce je password isti kot confirmPassword tkoda rabs najprej prevert ce je to isto sele pol das request da se druge errore checka. ne rabm vec logged kr mam localStorage 108. ker sta app in frontend iz nezga drugacnga origina sm za post requeste dobivu errore tkoda sm rabu installat cors 109. pozabu spremenit ime funkcije na onclick buttona signup. dubu error za score request zardtega kr sm ugotovu da ne smes dajat ? za column name v queryu sam za value. tkoda dou sam ${} itak nevem zakaj sm sploh dou to tm in the first place. 110. rabu sm dodat se \`\` zato da je v dobesednm mysql queryu not `` da to zagotov treata kot column in ne kot neko special ime 111. ok nevermind sam nism dou parametre v call scoreComparea v game.js. zdej use z sqlom dela 112. dodou retry + scoreBoard gumb na end screenu 113. spet spremenu izgled UFO 114. ustvaru gumb k spremeni izgled buttonov da je lahko razberes ker gumb je za kero smer. funkcija changeArrows() 115. naredu leaderboard html in js. nacrtujem da bo leaderboard deloval tko: najprej mas tabelo v leaderboadr htmlju, onload se aktivira funkcija ki requesta serverju da dobi use playere z select stavkom in pol za usazga k ga dobim u rezultatu nardim nov row in upism podatke v td-je. orderani so po scoru desc. 116. naredu SQL funkcije za select stavke, kr bosta 2 leaderboarda kr sta dva songa sm naredu 2 funkciji 117. naredu post za dobit use playere v server.js in povezu. 118. ugotovu da rabm da dobim value dat npr. data.UFO ne pa data[0] v json v js kr sm jim tko dou ime v postu. za dobesedne podatke ba ja 119. naredu celo funkcijo insertPlayers(). najprej zahteva serverju da dobi use playere orderane za posamezn song pol pa gre za usak song cez for loop in inserta row in celle. v celle da value usernamea in scorea za song. ce scora za song nima se napise "-". zelo ponosn kr mi je hitr uspel in use po nacrtu 120. oblikovanje leaderBoard.css za izgled 121. dodou max length usernamu za unaprej ce bo kdo slucajn dou celo besedilo not 122. dodou switch case stavek v leaderBoard da spremeni barvo 1., 2. in 3. mesta v zlato/srebrno/bronasto 123. dodou display username uporabnika + logout button na index htmlju in naredu logout funkcijo ki localstorage username removea in pol se ne displaya vec usernam in logout 124. naredu navodila za igro html + css 125. naredu zahvalo 126. se enkrat naredu composer za UFO 126. spremeniu nastavitve .env in drugih backend procesov npr fetch za delovanje na strežniku (iz localhost:3000 v domeno) 127. produkcija KONC