Kvisser

Devlog 5: Quiz pages!

First changes to the waiting screen:

• Filter sockets for inactive ones and thus show correct player count
• Remove double player count socket emit
• Corrected wording for if there’s only 1 player present

Then the new stuff:

• Added the quiz page
• Made the top nav bar logo redirect to home because it was annoying for it to not
• Made the front page carousel’s slide’s images redirect to the page of their quiz
• Fixed the home button not redirecting to home when route was more than one slash deep

I spent a ridiculous amount of time trying to get the spacing to take scroll bar into account but still couldn’t figure it out…

But in good news: I learned how to use media queries! Idk why I put this off and did janky js style switching for so long…

Next up: Auth! I think it’s gonna hurt even more if I try to do it retroactively so I’m just doing it now. Let’s hope I don’t introduce 12 security holes I’m unaware of /hj

Devlog 4: Player waiting page

• Added afformentioned player waiting page
• Desided to still use websockets which apparently are an absolute pain with React.

I’ll try to get a prototype shipped in 2-3 weeks if I can but this is such a large project I may not finish it in time.

I wont be pulling updated backend code to nest server frequently so functionality may be broken for newer features.

Next up: Making the quiz specific pages.

Devlog 3: Join page and some backend stuff

• Added join page
• Implemented basic game room exists check
• Starting to implement SQLite db structure
• Bug fixes

I spent way too long trying to figure out why my req.body.x is undefined only to figure out that body parser is not bundled with express by default…

I also did some brain storming and figured out a better way to eventually implement game logic that doesn’t require web sockets.

Devlog 2: Bottom bar and some small changes

• Made a bottom nav bar
• Added carousel titles and a variable api route as props
• Made carousel transition time slightly vary based on item width to give wider items some more heft
• Added a small wiggle when at the end of carousel to make it more intuitive
• Setup cloudflare pages (Tho it wont do much as I don’t yet have API up)
• A couple bug fixes

Devlog 1: The carousel of pain

• Implemented a (janky) carousel component

Why is react this way?
‎
The good news is I managed to make a carousel but the bad news is it took me 8-9 hours in total.
‎
I would not recommend this task to react newbies like myself but It was still a valuable learning experience.
‎
Now to actually making some real pages and getting some real work done… hopefully…
‎
p.s. If someone knows a good or least jank way to make a carousel touch screen draggable please do tell me!