Skip to content

roadmap.md

Latest commit

 

History

History
229 lines (177 loc) · 21.3 KB

roadmap.md

File metadata and controls

229 lines (177 loc) · 21.3 KB

Суммарное описание игры

Мультиплеерный квиз, где игроки соревнуются в угадывании фильма по подсказкам. Игра проходит в три раунда, каждый содержит фиксированные подсказки, и игрокам дается 13 секунд на ответ в каждом раунде. Чем раньше игрок угадает фильм, тем больше очков он получает. Таблица лидеров обновляется по итогам игры. Обновленное ТЗ

  1. Главная механика:

    Подключение игроков к общей сессии для приглашенных. Игровая сессия состоит из нескольких раундов, каждый из которых посвящен угадыванию одного фильма. Каждый раунд разделен на 3 итерации подсказок: Первая итерация: 3 подсказки, за правильный ответ начисляется 3 очка. Вторая итерация: 2 подсказки, за правильный ответ — 2 очка. Третья итерация: 2 подсказки, за правильный ответ — 1 очко. Очки за правильные ответы суммируются, а после всех раундов игры показывается итоговая таблица лидеров. Ожидание завершения всех ответов до перехода к следующему этапу. Таблица лидеров в конце игры.

  2. Дополнительные функции:

    Будущие фичи: Динамическая настройка времени и выбор категории и сложности игры. Время на ответ

  3. Технологический стек:

    Frontend: React.js, WebSocket для реального времени. Backend: Node.js для API и WebSocket, механизм синхронизации игроков. База данных фильмов: API IMDB/TMDB. База данных: MongoDB для данных об игроках и Redis для быстрого доступа к данным о фильмах. Деплой и хостинг: Docker, DigitalOcean/AWS для масштабируемого развертывания.

Подробная механика

Главный экран

На заднем фоне крутятся картинки или постеры из фильмов слева сверху кнопка main menu По центру две кнопки аутентификации как гость и через что-нибудь еще по типу почты, пароля, или через соц.сеть слева сверху выбор языка Снизу справа версия игры и уникальный хэш сессии

Экран сессии

На этом экране создатель сессии может выбрать категорию игры, например: топ 500 фильмов, фильм ужасов и т.д. На этом экране находится номер комнаты и ссылка на комнату через которые можно позвать игроков Приглашенные игроки добавляются в комнату и отображаются ниже также есть кнопка выхода из комнаты Если при подключении по ссылке игрок не зарегистрирован ему предлагается пройти регистрацию как гость или через что-то Игру может начать только создатель сессии игровой будущая фича - чат

Экран игры

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

Экран итогов

пока в нем просто показываются все игроки и их очки, игроки сортируются по очкам по убыванию и им присуждаются места

Предложенный технологический стек

  1. Фронтенд (Интерфейс пользователя)

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

    Redux или Context API — Управление состоянием. Redux будет использоваться для централизованного хранения и управления состоянием, например, информации о пользователях в комнате, прогресса игры, статуса ответа каждого игрока и очков.

    CSS-in-JS (Emotion или Styled Components) — для стилизации. Это упростит стилизацию интерфейса и позволит управлять стилями в рамках компонентов, обеспечивая поддержку различных тем и лёгкое переключение между стилями.

    Socket.io (для веб-сокетов) — взаимодействие в реальном времени. Используется для создания чатов, отслеживания ответов в реальном времени и уведомлений о ходе раунда. Поддерживает обновления данных для всех участников комнаты, например, при получении ответов или завершении раунда.

    i18next — Библиотека для мультиязычности. Обеспечит поддержку выбора языка, позволяя пользователям переключаться между языковыми версиями интерфейса.

  2. Бэкенд (Серверная логика и API)

    Node.js с Express.js — Серверное приложение. Express.js обеспечит API для создания сессий, получения данных о фильмах, обработки аутентификации и отправки данных пользователям. Простота масштабирования и гибкость для реализации различных эндпоинтов, включая управление сессиями и очками.

    Socket.io (серверная часть) — Реализация реального времени. Позволяет серверу отправлять обновления о ходе раунда и получать ответы от всех игроков одновременно, а также управлять соединениями и переподключениями игроков.

    Redis — Хранилище кэша. Redis может использоваться для кэширования активных сессий, номеров комнат, информации об игроках, ускоряя доступ к этим данным и снижая нагрузку на основной сервер.

    RESTful API + WebSocket — передача данных. REST API используется для аутентификации, регистрации и запросов к базе фильмов. WebSocket — для обмена сообщениями в режиме реального времени между клиентом и сервером (для обновления состояния игры).

  3. База данных (хранение данных игры)

    MongoDB — NoSQL база данных. MongoDB будет хранить информацию о пользователях, сессиях, а также данные о фильмах и их подсказках. База хорошо масштабируется и легко интегрируется с Node.js. NoSQL структура также позволяет быстро менять схему данных, что полезно для тестирования новых категорий и функций.

    PostgreSQL (альтернативный вариант) — SQL база данных. Если данные о фильмах структурированы и запросы требуют сложных связей между таблицами (например, фильмы, актёры, категории), PostgreSQL может подойти лучше. SQL структура упрощает анализ данных и взаимодействие с фильтрами и категориями.

  4. Интеграция с внешними API

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

  5. Аутентификация и безопасность

    Auth0 или Firebase Authentication — для аутентификации пользователей. Позволяет реализовать аутентификацию через социальные сети и email, а также защищает данные игроков, упрощая работу с безопасностью. Эти сервисы имеют встроенные средства защиты от ботов и поддерживают двухфакторную аутентификацию.

    JWT (JSON Web Tokens) — для управления сессиями. JWT используется для передачи информации о сессии, идентификации игрока и доступа к защищённым ресурсам, например, в чате.

  6. Деплой и хостинг

    Docker — контейнеризация. Для изоляции приложения в контейнерах, что упростит развертывание и масштабирование. Поддерживает создание тестовой среды. Kubernetes (K8s) — оркестрация. Для управления контейнерами Docker и обеспечения высокой доступности при увеличении числа пользователей. AWS или DigitalOcean — облачная инфраструктура. AWS предоставляет мощные решения для работы с базами данных, API и поддерживает управление трафиком и безопасностью. DigitalOcean можно использовать как более бюджетный вариант для начальных этапов разработки.

  7. Аналитика

    Google Analytics или Amplitude — отслеживание активности пользователей. Сбор аналитики по использованию приложения: как долго игроки остаются в игре, какие экраны популярны, где игроки чаще всего выходят. Эти данные помогут улучшить UX.

    Sentry — для отслеживания ошибок. Инструмент для мониторинга ошибок и предупреждения багов. Уведомляет команду разработки о сбоях в реальном времени и помогает с отладкой.

  8. Подготовка среды разработки

    • Настроить репозиторий на GitHub или другой системе контроля версий. https://github.com/dima19017/imdbquiz
    • Создать базовую структуру проекта: backend и frontend. movie-quiz-game/ │
      ├── backend/
      │ ├── .env
      │ ├── index.js
      │ ├── package.json
      │ └── node_modules/
      │
      └── frontend/
      ├── .env
      ├── package.json
      ├── node_modules/
      └── public/
      └── src/
    • Настроить сервер локальной разработки (например, на Node.js для backend и React для frontend).
    • Подключить базу данных (например, MongoDB/PostgreSQL) для хранения данных об игроках, сессиях и результатах. для данных о фильмах - API tmDB для хранения информации начну с sqllite

  9. Главный экран

    • Создать базовый интерфейс главного экрана.
    • Добавить кнопку "Main Menu" в левый верхний угол.
    • Добавить возможность выбора языка.
    • Создать кнопки "Играть как гость" и "Войти через почту/соцсеть".
    • Разместить отображение версии игры и уникального хэша сессии в правом нижнем углу.
    • Разработать фоновую анимацию с изображениями фильмов (можно использовать простые placeholders на первых этапах).

  10. Аутентификация

    • Настроить гостевую аутентификацию: возможность входа без регистрации.
    • Добавить базовую систему аутентификации через почту/пароль.
    • Добавить аутентификацию через соцсети (например, через Google или Facebook).
    • Настроить отображение имени пользователя или аватара после аутентификации.
    • Продумать куки и сессии для пользователей, чтобы они могли оставаться залогиненными

  11. Экран сессии

    • Создать экран выбора сессии и категорий игр. Добавить возможность создателю сессии выбрать категорию игры (например, "топ-500 фильмов", "ужасы").
    • Отображать номер комнаты и ссылку для приглашения игроков.
    • Создать интерфейс для отображения присоединившихся игроков.
    • Разработать кнопку выхода из комнаты.
    • Добавить регистрацию игрока при подключении по ссылке (гость или через соцсеть).
    • Реализовать ограничение на начало игры только для создателя сессии.

  12. Механика игры (Экран игры)

    Разработать интерфейс с отображением игроков внизу экрана. Реализовать отображение номера раунда и текущих подсказок. Сделать интерфейс для отображения семи мест для подсказок. Настроить логику раундов: первый раунд с тремя подсказками, второй — с двумя, третий — с двумя. Создать интерфейс для отправки ответов игроками. Настроить таймер на 13 секунд для каждого раунда. Сделать обработку пустого ответа или отсутствия ответа для перехода к следующему раунду. Реализовать мгновенный переход к следующей итерации при получении ответов от всех игроков. Добавить логику проверки правильного ответа и начисления очков в зависимости от раунда. Разработать отображение промежуточных очков и автоматический переход к следующему раунду.

  13. Экран итогов

    Создать базовый интерфейс итогового экрана. Реализовать отображение очков всех игроков. Отсортировать игроков по очкам в порядке убывания. Присваивать места игрокам в зависимости от количества очков.

  14. Дополнительные функции и улучшения

    Добавить анимацию переходов между экранами. Разработать систему чат-комнат (будущая фича). Реализовать звуковые эффекты для начала и окончания раунда. Улучшить интерфейс для удобства пользователей (настройка стилей, адаптация под разные устройства). Настроить систему уведомлений (для уведомления о начале раунда, времени до окончания и т.д.). Добавить статистику по играм для каждого игрока (например, количество побед, набранные очки). Настроить автоматическое сохранение данных в базу (например, текущих сессий и результатов игр). Протестировать игру на производительность и исправить баги.

  15. Финальное тестирование и релиз

    Провести функциональное тестирование каждого экрана. Провести тестирование с несколькими игроками для проверки мультиплеерной механики. Обновить финальные настройки (например, время на раунд, добавление категорий). Подготовить и задеплоить игру на продакшн-сервер. Настроить аналитику для отслеживания активности игроков и сбора статистики об использовании.