DEV Community: Zoppatorsk

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

Zoppatorsk — Wed, 31 Aug 2022 18:52:44 +0000

Busy days...

Not gotten that much done I guess, been bz with boring some school work (making super tacky website with all annoying things u don't want as teacher thinks that is nice web design) and watching Korean drama series.

Note to self

Remember to implement the features I forgot about.

Add accurate answer times in backend in case want to use it in future.
Send all round scores after round ends so can show placement of players while game is going on.
Update the todo-list so don't forget it again.

Progress...

Hmm, have done some here n there.. added some array sorting in the backend so clients don't need to be bothered with it.

Did some more work on the game over screen. Added the last round results seen below.

Other than that, mostly been staring at the thing. The UI sux and I still don't really know what I should do about it.. Been thinking about having like a status bar at top that always show the players and their score.. Think that wld make sense, but how wld I implement that so looks nice on mobile? Maybe just use the avatars there... Will think about it some more..

That's all for now I guess.. Progress gonna be slow in the near future, got too much boring school work that need to try to get motivation to do.

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

Zoppatorsk — Sun, 28 Aug 2022 19:40:05 +0000

Going back!!

Last time I talked about the implementation of a "back button" so always can get out of the game and back to the start.

The server side code is still the same, just added a if-statement so don't have to run any code if not currently in a game, so if in settings and choose to go back there is no need to do any checks as player can not be in a game.

The Svelte component is simply a button saying back, will probably put in an icon or something later.. for now good enough.

The component is directly in app and is shown if not on the "start screen"

<script>
    export let socket;
    import { activeComponent, gameProps } from '../lib/stores';

    const back = () => {
        if ($gameProps?.id) {
            socket.emit('leave-room', $gameProps.id);
            $gameProps.id = '';
        }
        activeComponent.set('Start');
    };
</script>

<button class="back" on:click={back}>Back</button>

<style>
    button {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100px;
        padding: 10px;
    }
</style>

Got a can of inspiration?

So I finally got some inspiration to how the UI should be, or well, at least the end game component.

At first I tried using a table, but it did not feel right so I just made it like a list instead

This is how it looks like now:

Made it responsive so text n images shrink on mobile. This way of displaying the results as a list is so obvious I did not even think about it before.. haha.. yeah, I suck at UI stuff.

Will also put in the the last round results later.

Also think I will add something similar to the round results so can see who is in the lead of the game, but yeah, that will be for later.

Still need to figure out where to put the chat.. think will just put it on the right side of the screen and if using mobile will add some toggle to bring it on screen.

Yeah, not much happened since last time, but some, and it is progress...

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

Zoppatorsk — Sat, 27 Aug 2022 16:38:40 +0000

Progress... ??

Progress have been slow. Mostly some small changes and improvements here and there.

Did put an early alpha version online yesterday just to test things out... Many of the features that are not done are disabled but can still play the game (and try to break it ;)), even though UI is rough.
And yeah, ofc it's just a general quiz game now as that is what I implement first.

The UI is still shit thought, no more progress on that for now.

Did add some new features for the current quiz game, can select difficult and category.

Next up

Will make a "back button" that takes you out of the game n back to the title screen.

For now there is only one for when game ends but will put one in so can go back from anywhere. Wrote the backend logic for it but not tested it yet.. that sounded complex, right? Wrong, just calls the same function as when a user disconnects so things get cleaned up correctly, later will probably add some checks though and hock it up with a callback to redirect back to the title screen.

As it works now, the game is deleted when game is finished but u will still be in the "games socket room" so that way can still chat after game is finished. The 'leave-room' gets emitted by the 'back button'.
Theoretically the code should work.. I think..

socket.on('leave-room', (gameid) => {
    disconnecting(io, socket, games);
    socket.leave(gameid);
});

Ohh.. yeah, I did some work on the server list component also.. made so can actually use it to join a game. CSS still needs work though.

Random thoughts...

I did play some more trivia/quiz games to try and get inspiration for the UI.

I found one that is cool... Seems to be made for younger students to take quizzes made by a teacher.
It's really nice for what it is meant to be quizizz .. can play the quizzes there and it's flashy, has like "power ups" and meems n stuff.. to get students to enjoy it, have fun and want to do the quiz I think it's excellent but yes, it's not what I'm doing so I did not get any UI inspiration from it.

Well, I guess that's all for now.. time to cook up some dinner.. tunnbrödsrulle is on the menu.. mmm...

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

Zoppatorsk — Thu, 25 Aug 2022 21:19:18 +0000

Mistakes where made

Until now I have just decided what components to show by running some Svelte if's (yes, i know i can use else but not important for now) just to make things easy when developing.

Looks like this..

    {#if $activeComponent === 'start'}
        <Start {socket} />
    {/if}
    {#if $activeComponent === 'Lobby'}
        <Lobby {socket} {currentCount} />
    {/if}
    {#if $activeComponent === 'Question'}
        <Question {currentCount} {socket} question={currentQuestion} />
    {/if}
    {#if $activeComponent === 'RoundResult'}
        <RoundResult {currentCount} {roundResults} />
    {/if}
    {#if $activeComponent === 'GameResult'}
        <GameResult results={gameResults} />
    {/if}
    {#if $activeComponent === 'GameList'}
        <GameList {socket} />
    {/if}
    {#if $activeComponent === 'GameSettings'}
        <GameSettings {socket} />
    {/if}

I do know about the <svelte:component> that can be used to dynamically chose what component to render so I did something like this..

<svelte:component this={showComponent} {...props} />

Looks nice and clean right.
showComponent and props are just regular variables.
using a reactive expression thing to set those with a function when the $activeComponent store change (holds the string name of what component shld be active)

$: ({ showComponent, props } = getComponent($activeComponent));

the getComponent is just a function with a switch determining what component and what props it needs

    const getComponent = (active) => {
        switch (active) {
            case 'Start':
                return { showComponent: Start, props: { socket } };
            case 'Lobby':
                return { showComponent: Lobby, props: { socket, currentCount } };
            case 'Question':
                return { showComponent: Question, props: { socket, currentCount, question: currentQuestion } };
            case 'RoundResult':
                return { showComponent: RoundResult, props: { currentCount, roundResults } };
            case 'GameResult':
                return { showComponent: GameResult, props: { gameResults } };
            case 'GameList':
                return { showComponent: GameList, props: { socket } };
            case 'GameSettings':
                return { showComponent: GameSettings, props: { socket } };
            default:
                return {};
        }
    };

This "mostly works" but it has a major flaw. The props will never update so the count downs wont work as they are regular variables and the props variable will not update as the values it holds are passed by value and not reference...

For sure I could just add more code to solve this or rethink things a bit and do things in a slightly different way, but yeah, in my opinion this implementation really does not make things cleaner, it just adds more logic and makes it harder to understand what's going on so now just revert back to the old code..

At least it was not a total waste of time, I did learn some things and gotchas...

Random ranting n brainstorming n stuff

I think the main goal for now should be KISS, keep it simple stupid and just working on integrating all the parts.

The big hurdle is still the stupid UI-design, shld be ez right, it's just a quiz game, but naah I have no good ideas how to layout the things so it will look decent and work good..

Maybe for the results should try an approach displaying them as table but can't see how I can get that to look nice on mobile.. and yes, I still suck at UI-design.

A funny side note, I'm actually doing a course in human-computer interaction but thing is as most courses on UNI it teach ancient stuff. The things they teach now and the examples are from early 2000 and much can't really be applied in the time we live in now..

It's mostly talk about "golden rectangles" and stuff.. well newsflash, when designing stuff for the web things need to responsive and able to change it's size, U can't divide a UI into rectangles with fixed ratios and have it work across different devices with vastly different screen ratios and orientation. As I see webdesign it's often about making tradeoffs, make something that will work well enough for most as I don't like endless tweaking the UI stuff.

Guess not much dev talk in this log, but yeah, have not gotten much done as I reverted the stuff I was experimenting with.

That's all for now.. let's watch some more Korean dramas.. ;)

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

Zoppatorsk — Wed, 24 Aug 2022 19:38:10 +0000

Short update

This log will be short, have not done much work cuz tired and been watching Korean dramas...

But at least there is some progress.. I made the settings component and hocked it up.

This is how it look's for now

Code is simple, import the needed stores.
Use an object for settings and the different inputs are just bound to object properties.

When click the Create Game button the createGame() function is run.
This is the same function as before, only difference is I moved the player name and seed into a store, makes it ez to access without passing around props.

The only thing I have been debating with myself is where this function should live. I could put it on toplevel and pass it down, but that wld just clutter things up and there is no need for doing it like that.

The function also shares some logic with the joinGame() function so I debated if shld abstract this shared logic away into a regular Javascript file (wld be possible now as I use store so the state is not tied to a component.)

The conclusion for now is to keep it like this, encapsulate the logic the component need inside the component itself, for sure will be some small amount of code duplication but I think having the needed logic collected in one place instead of scattered around in other files is the right approach.

Below is component code...

<script>
    import { gameProps, players, player, activeComponent } from '../lib/stores';
    export let socket;

    const settings = {
        rounds: 3,
        maxPlayers: 3,
        roundTime: 30,
        waitBetweenRounds: 5,
        name: 'my epic quiz',
    };

    function createGame(gameSettings) {
        console.log('gs', gameSettings);
        activeComponent.set('GameSettings');
        let data = { name: $player.name, avatar: $player.seed, settings: gameSettings };
        socket.emit('create-game', data, (response) => {
            console.log(response.status);
            if (response.status === 'ok') {
                //set all the other response data in store.. playerId and gameData
                players.set(response.players);
                gameProps.set(response.gameData);
                $player.id = response.playerId;
                //move to lobby
                activeComponent.set('lobby');
            }
        });
    }
</script>

<div>
    <form>
        <label for="gameName">Game name</label>
        <input id="gameName" type="text" bind:value={settings.name} />
        <label for="rounds">Rounds: {settings.rounds}</label>
        <input id="rounds" type="range" min="1" max="10" bind:value={settings.rounds} />
        <label for="maxPlayers">Max Players: {settings.maxPlayers}</label>
        <input id="maxPlayers" type="range" min="1" max="5" bind:value={settings.maxPlayers} />
        <label for="roundTime">Round Time: {settings.roundTime}s</label>
        <input id="roundTime" type="range" min="10" max="60" bind:value={settings.roundTime} />
        <label for="waitTimeBetweenRounds">Wait Between Rounds: {settings.waitBetweenRounds}s</label>
        <input id="waitTimeBetweenRounds" type="range" min="5" max="20" bind:value={settings.waitBetweenRounds} />
        <button on:click|preventDefault={() => createGame(settings)}>Create Game</button>
    </form>
</div>

That's all for now....

Yeah, not much done but at least some n I'm still tired.. now will lay down n watch some more Korean drama.. ;)

Simple, reusable Svelte Modal

Zoppatorsk — Tue, 23 Aug 2022 20:35:53 +0000

Intro

So I noticed this post about make a React Modal so i thought I would post my take on a Svelte Modal but with more features and more reusable.

So this for this Modal you can display it and change text and title by just setting the values of a store.

You will also be able to close the modal by clicking outside the modal-box, pressing Escape key or pressing the OK-button.

This is a small variation of a component I created for my submission to the redis hackathon where it was used to display error messages.

Step by step

Start with open a terminal/console

Go to the directory you want the project

Run

npm create vite@latest

Type a project name, in my case svelte-modal
Choose svelte as framework
Choose regular svelte

As instruction says, got to directory and run

npm install

I am lazy and don't like writing a lot of CSS so for this I will use picocss
So now run

npm install @picocss/pico

Start up the dev server with

npm run dev

You should now see this in the browser.

Let's get to code!
Go to the App.svelte file in the src folder. It contains the boilerplate for the page you just open in the browser.
Let's delete it all and replace with:

<script>
</script>

<main>
    <button>Show modal</button>
</main>

Let's go to app.css and just delete all the contents as it's not needed.

Now, lets import pico.css
goto main.jsand add this

import '@picocss/pico/css/pico.min.css';

in the top of the file.
Should now look like this:

import '@picocss/pico/css/pico.min.css';
import './app.css';
import App from './App.svelte';

const app = new App({
    target: document.getElementById('app'),
});

export default app;

This modal will make use of a Svelte store. This store will hold the modals message, title and open/close state. By using a store means we will be able to trigger the showing of the modal from both Svelte components and regular Javascript code.

Let's create a new folder named stores inside the src/lib folder. Create a new file in the storesfolder named index.js

Put below code in there. If you want can set a default title and message to anything you want.

import { writable } from 'svelte/store';
export const modal = writable({ open: false, title: 'Default title', message: 'Default message' });

Store is now done and ready to be used.
Let's create the actual modal component. I usually create a components folder but for this example we will just put the file in the 'src/lib' folder.

Create a file named Modal.svelte

We put below code in the file, I will explain what it does a bit later.

<script>
    import { modal } from '../lib/stores/';
    const close = () => ($modal.open = false);

    const handle_keydown = (e) => {
        if (e.key === 'Escape') return close();
    };
</script>

<svelte:window on:keydown|once={handle_keydown} />

<dialog open on:click|self|preventDefault={close}>
    <article>
        <h3>{$modal.title}</h3>
        <p>
            {$modal.message}
        </p>
        <footer>
            <button on:click|once={close}>OK</button>
        </footer>
    </article>
</dialog>

Let's go back to App.svelte and wire things up so can try things out.

<script>
    import Modal from './lib/Modal.svelte';
    import { modal } from './lib/stores/';
</script>

<main>
    {#if $modal.open == true}
        <Modal />
    {/if}
    <button on:click={() => ($modal.open = true)}>Show modal</button>
</main>

We now got this:

And if pressing the button:

So we import the Modal component and the modal store
We put the Modal component inside a Svelte-if. $modal references the store, so we only show the component if $modal.open is true.

We now have a modal that will be closed if click outside the modal, if press escape button on keyboard or if pressing the modal ok-button. It can be displayed from anywhere just importing the store and set open to true and in the same way you can set the title and message to display different things, for example error messages.

Now let's dig into the code that makes it work. Seeing to the functionality it provides there is a surprisingly small amount of code.

Here is the Modal.svelte component again

<script>
    import { modal } from '../lib/stores/';
    const close = () => ($modal.open = false);

    const handle_keydown = (e) => {
        if (e.key === 'Escape') return close();
    };
</script>

<svelte:window on:keydown|once={handle_keydown} />

<dialog open on:click|self|preventDefault|once={close}>
    <article>
        <h3>{$modal.title}</h3>
        <p>
            {$modal.message}
        </p>
        <footer>
            <button on:click|once={close}>OK</button>
        </footer>
    </article>
</dialog>

Import the store so can use it.

import { modal } from '../lib/stores/';

Function that will close the modal by setting the store.

const close = () => ($modal.open = false);

Handler for keydown that will be shown a bit further down, only call the close() function when escape is pressed.

const handle_keydown = (e) => {
        if (e.key === 'Escape') return close();
    };

In Svelte we can use the special svelte:window tag here we use it to bind an eventlistener for keydown to the window object, same as you would be able to do in regular javascript.
It uses the special once DOM modifier. By using once the listener will delete itself after running once, it can be useful in many situations

<svelte:window on:keydown|once={handle_keydown} />

In pico.css modals are easily created with element with an element inside. These are not special, just regular html-elemnts.

But let's analyze the below code. There is a on:click listener bound to the <dialog>element, so the semi-transparent area outside the modal-box. And it runs the close() function making the dialog close.

<dialog open on:click|self|preventDefault|once={close}>

By using self the on:click will only fire if we explicit click anywhere on the <dialog> element, i.e. the background. Without this the on:click would also fire if clicked anywhere on the modal-box. Handy feature :)

preventDefault should not be needed but I put it there cause i wanted to show it. It prevents default behavior and is the same as using the preventDefault() in an eventhandler, this can be handy if you for example want to define an inline function for the on:click handler, like:

on:submit|preventDefault={(e)=>do something simple}

Svelte is filled with smart stuff like this, check the documentation if your curios about other DOM modifiers.

Hope you learned something. This was tiring to write, I will stick to writing devlogs. ;)

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

Zoppatorsk — Tue, 23 Aug 2022 15:47:21 +0000

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.

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.

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.

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

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

Zoppatorsk — Mon, 22 Aug 2022 19:20:03 +0000

Saving 100 hours...

So i read this post. It says I will save 100 hours by filling out this form, so yeah let's do it.

What's your idea(one-liner)? A multiplayer movie trivia/quiz game
What's the opportunity size? 0$
Who's your target audience? none, or maybe me..?
What is/are the problem(s)? Me
What is/are the solution(s)? Also me
How do you monetize it? I don't
What are the other alternatives? Watch Korean dramas on Netflix.

Yeah, that only took some seconds, should have done that from the start... I have now saved so much time I can spend the rest of the evening watching Korean dramas on Netflix.

New day, new devlog

So, yeah, I started writing this yesterday and yeah, I mostly spent the evening watching a Korean drama ;) .. but yeah, I did get some refactoring done also.. one of my sons complained that the code was ugly so got rid of some nested if's n put some early returns n stuff instead.

Made some more fault prevention stuff, when working with sockets and those can get undefined at any moment if a user disconnects but you are still running code things crash easily.
I want to prevent as much of that as possible before pulling a

process.on("uncaughtException", function (err) {
console.log("Keep it alive!!: ", err);
});

To prevent server crash when some function cant finish!

What's new!

Well, I have kept working on making the "trivia game engine" more universal.
So I needed a way to be able to easily define new types of questions.

Class was the obvious answer, I like classes in the way I can encapsulate both methods and data into one entity.

So I created a base-class that have the common fields and methods already defined and for creating and customize your own question type can just extend it and override what u want.

Current implementation.. Will probably change a little if I need to add more stuff

BaseQuestion

module.exports = class BaseQuestion {
    constructor({ type = 'pic-one', title = 'pick one', question = 'question text', correctAnswer = 'correct answer', answers = ['correct answer', 'wrong answer'] } = {}) {
        if (this.constructor == BaseQuestion) throw new Error("Abstract classes can't be instantiated.");

        this.type = type;
        this.title = title;

        this.question = question; //question text
        this.correctAnswer = correctAnswer; //correct answer
        this.answers = answers; //array of answer alternatives
    }

    isAnswerCorrect(answer) {
        return answer === this.correctAnswer;
    }
    calculateScore(answer, time) {
        if (this.isAnswerCorrect(answer)) return 100 + time * 10;
        else return 0;
    }
};

I also made a new class by extending it and change the score system.

const BaseQuestion = require('./BaseQuestion');
module.exports = class PickOne extends BaseQuestion {
    constructor(...args) {
        super(...args);
    }
    calculateScore(answer, time) {
        if (this.isAnswerCorrect(answer)) return 100 + time * 100;
        else return 0;
    }
};

And just to test things out I wanted to see if could easily implement a different question provider instead of just using hard coded questions. After a 2 second google i found open trivia database..

Threw together some code in the generateQuestions() function

const axios = require('axios');
const he = require('he');
const PickOne = require('../questions/PickOne');
const { shuffleArray } = require('./functions');

module.exports = async function generateQuestions(no) {
    try {
        const { data } = await axios.get(`https://opentdb.com/api.php?amount=${no}&type=multiple`);

        const selectedQuestions = [];

        data.results.forEach((element) => {
            const answers = shuffleArray(element.incorrect_answers.concat(element.correct_answer));
            selectedQuestions.push(new PickOne({ question: he.decode(element.question), answers: answers, correctAnswer: element.correct_answer, type: 'pick-one' }));
        });
        return selectedQuestions;
    } catch (error) {
        console.log(error);
        return [];
    }
};

No error handling in that one, but who cares it was just a quick test..

n.. see.. we now have an actual trivia game going..

BTW, I did get the correct answer by just clicking mouse on random answer without reading the question cuz was bz doing screen shot before time ran out.. skill or luck?? ;)

Yes, still need to work on the CSS n junk, but yeah, later.. it is not important for now.. will keep implementing the core features.

Next up are:

Game browser, just a list of games that can join and the stats
Settings for creating game. Just frontend code, backend is already prepared
Display game results.
chat functionality, thinking maybe booth an in game chat and a global chat. Not hard to implement at least, probably like 2 lines of code or something on the backend ( one for global and one for game ;) )
loader component that can show on frontend if nee when stuff is bz.. (only really will be shown if have really slow connection later and the questions are like image based and need to be preloaded before round starts).

But yeah, if feel for it might just redo some of the current CSS.

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

Zoppatorsk — Sun, 21 Aug 2022 12:52:22 +0000

Pictures says more than thousand words they say..

So, guess just start with some pictures..

Start Screen for mobile

So u need to enter a name and an avtar seed
This is stored in local storage so will be remembered when visit page again.

Lobby for mobile

It needs some more css work later on.. for now good enough.

Regular lobby with countdown going for starting game

Question.

Just some hard coded questions in the backend for now.

Round Results

Showing the result of the round. DNA means did not answer, player did not answer before time ran out. Correct answer show a ✔ and incorrect ❌

The css is in no way finished.. for now it's just some quick throw-together so can display something more fun that just text... ;)

Code

So in the last log, I mentioned I had implemented the schematics I made earlier except the handling of disconnects during various states of the game. This is now fixed.
I simply extracted the needed code from the handler into a function and depending on the game state when a player disconnect the appropriate function is run.

Handler just call the function

//use disconnecting instead of discconnect so still have access to room of socket n stuff
        socket.on('disconnecting', () => {
            disconnecting(io, socket, games); 
        });

And here is function

function disconnecting(io, socket, games) {
    //check if player is in a game and if so remove them from the game..
    if (socket.rooms.size > 1) {
        for (const room of socket.rooms) {
            //seems stuff can be undefined for some time so added a check for this too.
            if (room !== socket.id && games.get(room) !== undefined) {
                const game = games.get(room);
                game?.leave(socket.id);

                //delete room if empty
                if (game?.players.size === 0) games.delete(room);
                else {
                    //notify the other players that the player has left the game
                    io.to(game.id).emit('player-left', socket.id);
                    //-----chek the state of the game and run needed function
                    switch (game.status) {
                        case 'waiting-for-start':
                            shouldGameStart(io, game);
                            break;
                        case 'waiting-for-ready':
                            shouldStartRound(io, game);
                            break;
                        case 'waiting-for-answer':
                            shouldEndRound(io, game);
                            break;
                    }
                }
                break;
            }
        }
    }
}

For now no real generation of questions. Just some hard coded ones for testing.

Later will need figure out a common structure for questions.

module.exports = async function generateQuestions(no) {
    const questions = [
        { question: 'What is the capital of the United States?', answers: ['Washington', 'New York', 'Los Angeles'], correctAnswer: 'Washington', type: 'pick-one' },
        { question: 'What is the capital of the United Kingdom?', answers: ['London', 'Manchester', 'Liverpool'], correctAnswer: 'London', type: 'pick-one' },
        { question: 'What is the capital of the Sweden?', answers: ['Stockholm', 'Oslo', 'Madrid'], correctAnswer: 'Stockholm', type: 'pick-one' },
    ];

    //select no random questions from the array
    const selectedQuestions = [];
    for (let i = 0; i < no; i++) {
        const randomIndex = Math.floor(Math.random() * questions.length);
        selectedQuestions.push(questions[randomIndex]);
    }
    console.log('q', selectedQuestions);
    return selectedQuestions;
};

The Svelte components are still just rather simple.
Start.svelte.. what is shown first, here u choose name n avatar n what u want to do, like create or join game

<script>
    import { onMount } from 'svelte';

    import { activeComponent, players, gameProps, playerId } from '../lib/stores';
    export let socket;

    let playername = '';
    let seed = '';

    //get player name and seed from localstorage
    onMount(() => {
        let player = localStorage.getItem('player');
        if (player !== null) {
            player = JSON.parse(player);
            // @ts-ignore
            playername = player?.name || ''; //these safeguards are really not needed i guess
            // @ts-ignore
            seed = player?.seed || '';
        }
    });

    //set player name and seed to localstorage when it chages
    $: {
        if (playername || seed) localStorage.setItem('player', JSON.stringify({ name: playername, seed: seed }));
    }

    function createGame() {
        let data = { name: playername, avatar: seed };
        socket.emit('create-game', data, (response) => {
            console.log(response.status);
            if (response.status === 'ok') {
                //set all the other response data in store.. playerId and gameData
                players.set(response.players);
                gameProps.set(response.gameData);
                playerId.set(response.playerId);
                //move to lobby
                activeComponent.set('lobby');
            }
        });
    }

    /// if find open game will join it
    function quickPlay() {
        socket.emit('quick-play', (response) => {
            if (response.gameId) {
                socket.emit('join-game', { gameId: response.gameId, name: playername, avatar: seed }, (response) => {
                    if (response.status === 'ok') {
                        //set all the other response data in store.. playerId and gameData
                        players.set(response.players);
                        gameProps.set(response.gameData);
                        playerId.set(response.playerId);
                        //move to lobby
                        activeComponent.set('lobby');
                    }
                });
            } else alert('no game found');
        });
    }

    function test() {
        socket.emit('test');
    }
</script>

<div class="wrapper">
    <h1>Let's Play!</h1>
    <img src={`https://avatars.dicebear.com/api/avataaars/:${seed}.svg`} alt="avatar" />

    <input type="text" placeholder="Enter name" bind:value={playername} />
    <input type="text" placeholder="Avatar Seed" bind:value={seed} />
    <div class="buttons" class:disabled={!seed || !playername}>
        <button on:click={createGame}>Create Game</button>
        <button on:click={quickPlay}>Quickplay</button>
        <button on:click={test}>List Games</button>
    </div>
</div>

Lobby.svelte .. here is where u end up after creating or joining game

<script>
    import { players, gameProps } from '../lib/stores';
    export let socket;
    export let currentCount;

    let clicked = false;

    function playerReady() {
        clicked = true;
        socket.emit('player-ready', $gameProps.id);
    }
</script>

<div class="component-wrapper">
    <h1>Lobby</h1>
    <h2>{$gameProps.id}</h2>

    <div class="player-wrapper">
        {#each $players as player}
            <div>
                <img src={player.avatar} alt="avatar" />
                <p>{player.name}</p>
            </div>
        {/each}
    </div>

    <button on:click|once={playerReady} disabled={clicked}>Ready</button>
    <progress value={currentCount} max={$gameProps.waitBetweenRound} />

    <h2>{currentCount > -1 ? currentCount : 'Waiting'}</h2>
</div>

The question component is not even worth posting, it just generates buttons with the different possible answers n emit to server on press.

RoundResult.svelte will just display the results of the round.

<script>
    export let currentCount;
    export let roundResults;
    import { players } from '../lib/stores';
</script>

<h2>Round Results</h2>
<div class="player-wrapper">
    {#each $players as player}
        <div>
            <img src={player.avatar} alt="avatar" />
            <p>{player.name}</p>
            <p>{roundResults.find((x) => x.id == player.id).answer} <span>{roundResults.find((x) => x.id == player.id).answerCorrect ? '✔' : '❌'} </span></p>
        </div>
    {/each}
</div>
{#if currentCount > 0}
    <h2>{currentCount}</h2>
{/if}

Ending notes

To generate the avatars I use https://avatars.dicebear.com. Awesome stuff!

Pulled in pico.css so I don't have to mock around and style everything myself, saves time.

Now just need to keep implement the missing things. Score system, end game results, question generator, question components and soo on.. For now I think it's good though, all logic seems to be working as intended.

Over n out.. now chill n watch some Korean series..

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

Zoppatorsk — Sat, 20 Aug 2022 18:22:36 +0000

“Lift off, we have a lift off!”

So yesterday I made a plan, showing the flow of events or whatever..

Today I implemented it, or well still have not implement the handling of players that disconnects mid game, but that will be next.
Things went smooth overall. :) Just look at the flowchart thing and write code that implements it.

I now have a first working prototype for the game loop logic from start of game until end.

let's have a look at what i did. We start with the Game class.

const { nanoid } = require('nanoid');

module.exports = class Game {
    constructor({ maxPlayers = 5, rounds = 2 } = {}) {
        this.id = nanoid();
        this.maxPlayers = maxPlayers;
        this.rounds = rounds;
        this.round = 1;
        this.waitBetweenRounds = 5;
        this.roundTime = 30;
        this.status = 'open';
        this.players = new Map();
        this.roundCountDown = null; //will hold the interval timer for the round
        this.answers = { 1: {}, 2: {}, 3: {} }; //for now just store answers here in hardcoded way, probably wld be better if stored in player object.
    }

    startRoundCountDown(io, func) {
        let count = this.roundTime + 1;
        this.roundCountDown = setInterval(() => {
            count--;
            io.to(this.id).emit('count-down', count);
            if (count === 0) {
                this.clearRoundCountDown();
                func(io, this);
            }
        }, 1000);
    }

    clearRoundCountDown() {
        clearInterval(this.roundCountDown);
    }

    join(player) {
        //check if plyer is allowed to join
        if (this.status === 'open' && this.players.size < this.maxPlayers) {
            this.players.set(player.id, player);
            return true;
        }
        return false;
    }

    leave(playerid) {
        this.players.delete(playerid);
    }

    resetPlayerReady() {
        this.players.forEach((player) => {
            player.ready = false;
        });
    }
    howManyPlayersReady() {
        let ready = 0;
        this.players.forEach((player) => {
            if (player.ready) ready++;
        });
        return ready;
    }
    allPlayersHaveAnswered() {
        let noAnswers = 0;
        this.players.forEach((player) => {
            if (this.answers?.[this.round]?.[player.id] !== undefined) {
                noAnswers++;
            }
        });
        return noAnswers === this.players.size;
    }

    getPublicData() {
        return {
            id: this.id,
            round: this.round,
            rounds: this.rounds,
            status: this.status,
        };
    }

    //easier to do stuff on frontend with players as an array instead of a map
    getPlayersAsArray() {
        let playersArr = [];
        //convert the players map to an array.. this could probably be done cleaner and in one line but I am not used to working with maps
        //this will probably be overhauled later
        this.players.forEach((player) => {
            playersArr.push({ ...player });
        });
        return playersArr;
    }

    compileResults() {
        //later use this to compile the results of the game
        return {};
    }
};

I have added some properties, the most important one is the roundCountDown.This prop will hold an interval timer for counting down the round. The reason I put it on the class is that it needs to be tied to an instance of the game and i need to be able to start and clear it from different places in the event handling code.

Let's have a closer look at the method

startRoundCountDown(io, func) {
        let count = this.roundTime + 1;
        this.roundCountDown = setInterval(() => {
            count--;
            io.to(this.id).emit('count-down', count);
            if (count === 0) {
                this.clearRoundCountDown();
                func(io, this);
            }
        }, 1000);
    }

it takes in io and a function, the function it takes is the function that needs to run when either the time is up or all players have submitted their answers. This function needs 2 arguments, io so it can emit events (this is already available as it's been passed into the method) and the other one is the game, here "this" is the game so that's handy.

Ofc the this will only run if time is up before all players have answered. If all players have answered before the interval will be stopped and remove. The other code that can trigger the function is in the eventHandler.

Below u can see the function that is run.. this function ofc lives outside the Game class.

function endRound(io, game) {
    game.round++;
    if (game.round > game.rounds) {
        game.status = 'end-game';
        io.to(game.id).emit('end-game', game.compileResults());
        games.delete(game.id);
    } else {
        game.status = 'end-round';
        io.to(game.id).emit('end-round'); //need to send with some reuslts later
        getReady(io, game);
    }
}

Below we have the code that runs the game..
I have omitted the stuff for create game, join game n soo on..

So when a player in the lobby is ready to start the game a 'player-ready' event is sent

        socket.on('player-ready', (gameId) => {
            const game = games.get(gameId);

            //maybe we need to do something here later except reurn but probably not, this is a safeguard if socket reconnects n start sending shit when game is in another state
            if (game.status !== 'open' && game.status !== 'waiting-for-start') return;

            //when player is ready shld.. change the ready variable of player
            game.players.get(socket.id).ready = true;
            if (game.status !== 'waiting-for-start') game.status = 'waiting-for-start'; //now we do not accept any new players

            //if half of players are not ready then just return
            if (game.howManyPlayersReady() < game.players.size / 2) return;
            //here shld run a function that is reused everytime a new round starts
            getReady(io, game);
        });

As u can see the last thing that happens is running the getReady function.
This will start a countdown for the game to start and emit 'ready-round' when done.

This code will also run after each round is finished and count in the new round.

function getReady(io, game) {
    game.status = 'get-ready';
    game.resetPlayerReady();
    let count = game.waitBetweenRounds + 1;
    const counter = setInterval(countdown, 1000, game.id);

    function countdown(gameId) {
        count--;
        console.log(count);
        io.to(gameId).emit('count-down', count);
        if (count == 0) {
            clearInterval(counter);
            io.to(gameId).emit('ready-round'); //here neeed to send with some junk later.. like question n metadata about it
        }
    }
}

Next that happens is we wait for all the player clients will acknowledge that they are ready. They do so by sending a 'player-ready-round' event

It is handled in the code below. When got ready from all players
'round-start' is emitted and the countdown interval I wrote about in the beginning is started.

        socket.on('player-ready-round', (gameId) => {
            const game = games.get(gameId);
            if (game.status !== 'get-ready' && game.status !== 'waiting-for-ready') return;
            if (game.status !== 'waiting-for-ready') game.status = 'waiting-for-ready';
            game.players.get(socket.id).ready = true;
            if (game.howManyPlayersReady() !== game.players.size) return;
            game.status = 'waiting-for-answer';
            io.to(gameId).emit('round-start');
            game.startRoundCountDown(io, endRound);
        });

Now we just wait for all players to answer or for the time to be up until we finish the round (the same endRound() function as i posted a bit longer up). This endRound function will determine if should just end this round by emitting 'end-round' and ready the next round (same getReady function as before) or end the game by emitting 'end-game'.

socket.on('answer', (gameId, answer) => {
            const game = games.get(gameId);
            if (game.status !== 'waiting-for-answer') return;
            //store the answer.. for now it's stored in the game object as an object
            game.answers[game.round][socket.id] = answer;
            //check if all players have answered
            if (game.allPlayersHaveAnswered() == false) return;
            //clear the interval for counting down as we now ends the round as all players have answered
            game.clearRoundCountDown();
            //run endRound logic
            endRound(io, game);
        });

And yeah, that's like all it's too it.. good thing I made that chart, right!

The frontend code is soo simple now it's like not even worth showing, but here it comes.

socket.on('count-down', (count) => {
        currentCount = count;
    });

    socket.on('ready-round', () => {
        socket.emit('player-ready-round', $gameProps.id);
    });

    socket.on('round-start', () => {
        $activeComponent = 'question';
    });

    socket.on('end-round', () => {
        $activeComponent = 'roundresult';
    });

    socket.on('end-game', () => {
        $activeComponent = 'gameresult';
    });

Most of it just change a store for what component should be shown
All countdowns is handled by the 'count-down' listener and it only sets a variable to the value, this variable is passed down to the components that need it.

Later I might change this to a store variable instead, that way I should be able to extract all the socket logic into it's own regular Javascript file. But will see about it, might make sense to keep it in the Svelte component as there will be more data passed later, like results of round and game and the question.

The next thing will be to break down some of the event handlers on the server a bit more so can handle things if players leave mid-game.

After that it's time to keep working on making this thing into an actual game that can be played.

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

Zoppatorsk — Fri, 19 Aug 2022 20:48:12 +0000

Oops, I did it again... I played with events, got lost in the jank

Yet another devlog, this will be a short one.
So yeah, as u can guess from the subtitle things turned into a mess.

Short story.. I dived in and just started code up things and as I have written before my brain don't like event driven code, it likes to think in a more linear way.

I noticed my code started to become smelly jank that I just kept putting band-aids on to make it work (and yes, it was working and i could have made it work, but it wld not have been nice) so I decided to just put a stop to it, better to just back track and do some actual planning.

Now many ppl wld see this as a waste of time not plan before but I don't see it that way, now I know what doesn't work so I still learned something and what I learned is what makes me able to actually make a plan that can work much better.

As i use to say 'failure is always an option' .... heeh..

So I made a plan for all the event junk, not super detailed but should be good enough to get things working as intended.

Behold the master plan.. I think it is rather self-explanatory

That's all for today, now watch some Korean series and let the plan sink in until ready to code again!

falafel

Btw I have never tried falafel, is that stuff good? Comment below ;) .. I just had kebab as usual, don't know if I can trust that veggie stuff but I am curious about it.

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

Zoppatorsk — Fri, 19 Aug 2022 13:34:03 +0000

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