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

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