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


Возвращение!!!

В прошлый раз я рассказывал о реализации «кнопки назад», чтобы всегда можно было выйти из игры и вернуться к началу.

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

Компонент Svelte — это просто кнопка, говорящая «назад», возможно, позже я добавлю иконку или что-то еще… пока этого достаточно.

Компонент находится непосредственно в приложении и отображается, если не находится на «стартовом экране».

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

Есть банка вдохновения?

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

Сначала я попытался использовать таблицу, но это было не совсем правильно, поэтому я просто сделал ее как список.

Вот как это выглядит сейчас:

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

Позже я также добавлю результаты последнего раунда.

Также думаю добавить что-то подобное к результатам раунда, чтобы можно было видеть, кто лидирует в игре, но да, это будет позже.

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

Да, не так много произошло с прошлого раза, но кое-что, и это прогресс…

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