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


Где были допущены ошибки

До сих пор я просто решал, какие компоненты показывать, выполняя некоторые if’ы Svelte (да, я знаю, что могу использовать и другие, но сейчас это не важно), чтобы упростить процесс разработки.

Выглядит это примерно так…

    {#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}
Войти в полноэкранный режим Выйти из полноэкранного режима

Я знаю о <svelte:component>, который может быть использован для динамического выбора компонента для рендеринга, поэтому я сделал что-то вроде этого…

<svelte:component this={showComponent} {...props} />
Войти в полноэкранный режим Выйти из полноэкранного режима

Выглядит хорошо и чисто.
showComponent и props — это обычные переменные.
Использую реактивное выражение, чтобы установить их с помощью функции, когда изменяется $activeComponent (хранит строковое имя компонента, который должен быть активным).

$: ({ showComponent, props } = getComponent($activeComponent));
Вход в полноэкранный режим Выход из полноэкранного режима

getComponent — это просто функция с переключателем, определяющая, какой компонент и какие реквизиты ему нужны.

    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 {};
        }
    };
Войти в полноэкранный режим Выход из полноэкранного режима

Это «в основном работает», но у этого есть серьезный недостаток. Реквизиты никогда не будут обновляться, поэтому отсчеты не будут работать, так как они являются обычными переменными, а переменная props не будет обновляться, так как значения, которые она хранит, передаются по значению, а не по ссылке…

Конечно, я мог бы просто добавить больше кода, чтобы решить это, или немного переосмыслить ситуацию и сделать все немного по-другому, но да, на мой взгляд, эта реализация не делает вещи чище, она просто добавляет больше логики и усложняет понимание того, что происходит, так что теперь просто вернитесь к старому коду…

По крайней мере, это не было пустой тратой времени, я узнал некоторые вещи и проблемы…

Случайное разглагольствование, мозговой штурм и все такое.

Я думаю, что главной целью сейчас должно быть KISS, keep it simple stupid и просто работа над интеграцией всех частей.

Большим препятствием все еще остается дурацкий UI-дизайн, который должен быть ez правильным, это просто игра-викторина, но у меня нет хороших идей, как расположить вещи так, чтобы это выглядело прилично и работало хорошо…

Может быть, для результатов стоит попробовать отобразить их в виде таблицы, но я не могу понять, как сделать так, чтобы это хорошо смотрелось на мобильных… и да, я все еще хреново разбираюсь в UI-дизайне.

Забавное примечание, я на самом деле делаю курс по человеко-компьютерному взаимодействию, но дело в том, что, как и большинство курсов в UNI, там преподают древние вещи. То, чему они учат сейчас, и примеры относятся к началу 2000 годов, и многое не может быть применено в то время, в которое мы живем сейчас…

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

Думаю, в этом журнале не так много разговоров о разработках, но да, я не успел много сделать, так как вернул то, с чем экспериментировал.

На этом пока все… давайте посмотрим еще немного корейских дорам… 😉

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