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

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