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

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