Создаем многопользовательскую игру-викторину с использованием socket.io, svelte и node. devlog #9


Короткое обновление

Этот журнал будет коротким, я не сделал много работы, потому что устал и смотрел корейские драмы…

Но, по крайней мере, есть некоторый прогресс… Я сделал компонент настроек и прикрепил его.

Вот как он выглядит на данный момент

Код прост, импортируйте необходимые хранилища.
Для настроек используется объект, а различные входы просто привязываются к свойствам объекта.

При нажатии на кнопку Create Game запускается функция createGame().
Это та же функция, что и раньше, с той лишь разницей, что я перенес имя игрока и семя в хранилище, что облегчает доступ к ним без передачи реквизитов.

Единственное, о чем я спорил с самим собой, это где должна располагаться эта функция. Я мог бы поместить ее на верхний уровень и передавать вниз, но это только загромоздило бы все вокруг, а в этом нет необходимости.

Функция также разделяет некоторую логику с функцией joinGame(), поэтому я обсуждал, стоит ли абстрагировать эту общую логику в обычный Javascript-файл (сейчас это возможно, так как я использую store, поэтому состояние не привязано к компоненту).

На данный момент я пришел к выводу, что нужно оставить все как есть, инкапсулировать логику, необходимую компоненту, внутри самого компонента. Конечно, будет небольшое количество дублирования кода, но я думаю, что наличие необходимой логики, собранной в одном месте, а не разбросанной по другим файлам — это правильный подход.

Ниже приведен код компонента…

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

Вход в полноэкранный режим Выход из полноэкранного режима

Это все на данный момент….

Да, сделано не так много, но хоть что-то, и я все еще устал… сейчас лягу и посмотрю еще немного корейских драм… 😉

Оцените статью
devanswers.ru
Добавить комментарий