Let's build a multiplayer movie trivia/quiz game with socket.io, svelte and node. devlog #8
Tags: webdev, devlog, socketio, svelte
Published: 2022-08-23 15:47:21

## 404 inspiration not found..
So I really suck at UI-design... was trying to get some ideas by trying out some trivia games online, both multi-player and single-player games.

Well.. that did not help at all, I got no inspiration for the design of the UI. Most games where really bad, not only the UI, for some the UX was also not nice at all. Like some forced you to sit through a countdown even if all players had answered.

Some had nice UI, but nothing that wld really fit me and what I'm building.

Will have to think about UI stuff a bit more before I try to cobble together something.

Still thinking if I should split things into pages and use a SPA-router. Have not used one in Svelte before and not really sure how to deal with the socket code, for now will just keep things as components, makes things easier.

## Progress... chat
Well, I did add a chat just as test, the Svelte component do need a lot more work before done, but it is working.
Backend code is simple, as wrote in last log, only one line of code to get it working.. or well, 2, one for global chat and one for game chat.

Below is the code for it.
```js
socket.on('game-chat', (msg, gameid) => socket.to(games.get(gameid).id).emit('game-chat', msg));
socket.on('global-chat', (msg, name) => socket.broadcast.emit('global-chat', msg, name, avatar));
```
Later will probably just throw all the args for the global chat as a object instead, but for now, good enough.

## Game list
Made a simple component to get a game list with open games from the server, ofc needs some more CSS-work and proper code later but before that will refactor some other logic so don't have duplicate logic for joining games.

I don't know how to implement it either.. was thinking about just display it as a modal but that wld not be so nice on mobile... bleeh UI, junk.
![game_list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt50k0g0gqh5kb5b78gq.PNG)

## End game results
Wrote logic for compiling the end game results in the Game class with total score and place in game. It also show the results for the last round as the end round screen will not show if game is over.

The Svelte component so far is just simple and yeah, not final, haha, but can at least see the results.
![game_over_screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d86bntxo5bmfxqjic73t.PNG)

## Upcoming
Game settings screen component when creating a game.

## Progress so far...
I think most of the server side logic is in place, I go in and add some features and changes here and there when needed.

On the frontend it's the opposite, like nothing is really done, just quick throw-together stuff. The tiring bits are left.. mocking around with stupid CSS to get things to display nice... bleeh..

## Current todo list
Client
- build results component -started
- build end game component -started
- build game list component -started
- build some question components -started
- build chat component -started
- build loading component
- create game settings component
- implement preload logic

Server
- scoring system -example done
- questions generator -example done
- send round results to client -done
- send game results to client -done
- on handler for request of game list -done
- add game chat -started
- preload logic for questions
- move the round scores to player object inside game object? - done

## Over n Out... that's all for now..!!!
Yesterday thought about do another redis hackathon submission, just use this project and load the questions from redis.. but naah, boring and really don't need redis for that.

At the same time I wld be pressured to finish it all before deadline, don't like that, this project will just take the time it takes.

Sometimes I even wonder why I'm making this, there is already so many trivia games and stuff out there.. hehe.. guess I just do it cuz I want and to see if I can make it. So will try to finish it so it wont end up in the pile with unfinished projects, there is a lot those.. heeh.. 

Want to see some of my other junk?? Check out my new [portfolio site](https://portfolio.karate.monster)