Let's build a multiplayer movie trivia/quiz game with socket.io, svelte and node. devlog #3

ALL YOUR BUG ARE BELONG TO US

So, back at it again with another devlog.
Progress have been far less than I wld have wanted because off.. ding, ding, ding... bugs!

So in the client I made a listener for "player-left"

socket.on('player-left', (playerId) => {
        console.log('got playerLeft');
        $players = $players.filter((player) => player.id !== playerId);
    });

So, when server emit that a player has left the game this will be triggered on client. It just removes the player from the players store ($players is just Svelte for players-store)

The server emit this in the

socket.on('disconnecting', () => {
//do some stuff... and then..
io.to(game.id).emit('player-left', socket.id);
});

"disconnecting" is a built in socket.io event, have to use this cuz it still have information about socket.io "rooms" (used in actual code and not in the one abow) and the regular "disconnect" do lack that.

Anyhow.. the bug was that on the clients the 'player-left' never triggered. I could not understand it, did some reading of documentation, stackowerflowing and testing.

At first i thought, hmm, maybe I can not emit things inside "disconnecting", but that did not make sense to me.

So after testing a lot of different things trying to figure out what was wrong, I just tried to make another listener on client and use a different event-name on the server. Then it all just worked.
Hmm.. even though I checked many many times, it must just have been a typo in the event i was listening for on the client.

I remove the listener and just rewrote it and after that it all magically worked.

Better a bug on the map then a map of bugs

Had some issues getting the iteration of maps working like I wanted. I thing maps can be rather confusing when it comes to iteration with for of loops..

Eventually I got it right .. to be honest this is actually the first time I use maps in Javascript. I knew of the existence but somehow always forget to use them when i really shld (and yeah, for of loops is not something I used much). This time I do use them though as it just makes sense, so yeah I guess most of the problems I have are due to inexperience.

I do like how ez it is to set and get entries from it though and that is also why I use it.

The joy of naming

So to clean up the eventHandler file a bit and not just fill it up with code I though it wld be a good idea to extract some things into functions and put in it's own file so can just require it in..

Sooo.. I spent rather long time trying to figure out what to actually name this new file, what would make sense... do u recognize this??

Well.. after a bit I came to the conclusion that yeah, this file will for now just hold a bunch of functions.. so the name.. functions.. haha.. that's good enough for now, things can be moved and renamed later if there is a need for it.

Stop rambling and tell me about the code...

So what I have implemented now is:

• Create game - this just creates a game with default settings for now and join the player creating it to the game. .. after send player to game lobby

• Quick Play - this finds an open game (i.e. not started and not full) and tries to join.. after send player to game lobby.

• When player joins a game the other players get notified

• when a player disconnects, i.e. closes browser or similar. Things are cleaned up, player gets removed from game and if game is empty it will be deleted. If there is players in the game they will get notified about the change.

For now I don't think it brings much value to post code..
But here is some screenshots from the frontend.. it's crude and got no styling or stuff, that will be a later thing to think about.

This is the start screen for now. up top is the "we got signal", that is part of the App.svelte and just shows that sockets are connected.

Under is 3 buttons

When click create game, the game is created and player will end up in lobby shown below.

Same thing for lobby, for now just some text.
It show lobby, so yeah, u know we are in the lobby, under there is the id of the game and below are all the id's of the players that have joined the game.
The button will be used to set the player as ready.

More players joined with quick play.

All this data now updates on the clients when players join or leave.

Goals

I know this is project is described as a movie trivia/quiz game but one of the goals is to code it in a way that it can easily be adapted to any kind of quiz/trivia game by just change the function that generates the questions and create a simple Svelte component for handling different question types (or only one type if that is what u want)

Upcoming

I will continue to work on the base logic. The start of game, game rounds, game end and so on.

Ohh.. yeah, realized I forgot to post a link to the repo..
Here it is: repo
But yeah, work in progress...