Pulse Grid
Создайте комнату на 60 минут или войдите по сгенерированному шестизначному коду, чтобы вместе смотреть эфир, общаться, отправлять изображения, видеть отметки о прочтении и провести розыгрыш.
- Nuxt
- Vue
- TypeScript
- Nuxt UI
- Pinia
- Pinia Colada
- FeathersJS
Задача
Для онлайн-события нужен понятный способ пригласить участников, показать, кто подключён, обмениваться сообщениями и запустить розыгрыш. После завершения встречи личные данные и переписка не должны оставаться доступными.
Как устроен сценарий
-
Создать комнату или войти
При создании комнаты появляется шестизначный код приглашения. По этому коду другие участники могут войти в неё.
-
Выбрать имя и цвет
Участник указывает короткое имя и цвет без регистрации, а затем видит остальных подключённых.
-
Участвовать в событии
В комнате можно управлять эфиром, отправлять текст и изображения и видеть отметки о прочтении.
-
Выбрать следующего участника
Розыгрыш учитывает только тех, кто сейчас подключён. Результат появляется у всех участников и добавляется в чат.
Вход и работа в комнате
Экран входа, активная комната и мобильная версия показывают эфир, чат и розыгрыш участников.
Создать комнату или войти
Стартовый экран разделяет создание комнаты и вход по коду и сразу сообщает, что комната закроется через 60 минут.
Рабочая комната
Эфир, код, время до закрытия, участники и чат остаются перед глазами.
Событие на мобильном экране
На узком экране участники, управление эфиром и программа складываются в один читаемый поток.
Ключевые решения
-
Комнаты изолированы друг от друга
Список участников, сообщения, изображения, прочтения и результаты розыгрыша получают только участники этой комнаты.
-
Комната закрывается целиком
Через 60 минут после создания становятся недоступны сессии, имена участников, сообщения, изображения, прочтения и история розыгрыша.
Сложные состояния
-
После закрытия есть следующий шаг
Когда время истекло, участник видит завершённое состояние комнаты и может создать новую или войти в другую.