Разработка React-модуля мини-игры “Счастливый билет” для Telegram Mini App (WebSocket, TypeScript)

Разработка React-модуля мини-игры “Lucky Ticket” для Telegram Mini App (WebSocket, TypeScript)

1. Общее описание проекта
   Задача: Разработать клиентскую часть (фронтенд) многопользовательской мини-игры “Lucky Ticket” (Счастливый билет).
   Среда: Модуль встраивается в существующий Telegram Mini App.
   Стек:

• Основная логика и рендер игры: React.

• Язык: TypeScript.

• Взаимодействие с бэкендом: WebSocket (основное) + REST API (дополнительное, по необходимости).

2. Архитектура и зона ответственности (Важно!)
   Приложение использует гибридный подход.
   НЕ входит в задачи исполнителя (уже реализовано в приложении):

• Верхний бар (счетчики валют, бургер-меню).

• Нижнее навигационное меню (Shop, Tasks, Birds...).

• Общая инициализация Telegram WebApp, авторизация пользователя.

Входит в задачи исполнителя:

1. Реализация React-модуля игры, который монтируется в предоставленный HTML-контейнер в центральной части экрана.

2. Реализация всей внутренней логики игры: сетка билетов, табы комнат, анимация розыгрыша, внутренние попапы (Правила, История).

3. Адаптивная верстка содержимого Canvas, чтобы он корректно заполнял выделенное пространство на различных устройствах, сохраняя пропорции дизайна.

4. Подключение к WebSocket бэкенда игры для получения состояний и отправки действий игрока.

3. Игровой процесс и состояния UI
   Весь UI игры должен строго соответствовать предоставленному макету в Figma (ссылка будет предоставлена исполнителю).

3.1. Состояние 1: Активный раунд (Сбор участников)
Основной экран, где игроки покупают билеты.

• Табы комнат (Bet Tiers): Переключатели “1k”, “5k”, “10k”.

  • При переключении меняется активная комната, обновляется стоимость билета, призовой фонд и состояние сетки.

• Информационный блок:

  • Текущий призовой фонд (Current Prize Pool) — обновляется в реальном времени.

  • Цена билета в текущей комнате.

• Сетка билетов (20 ячеек):

  • Свободный билет: Иконка билета. Кликабельный. При клике переходит в состояние “Выбранный”.

  • Выбранный билет: Немного тусклее и меньше (как в Figma).

  • Занятый билет (Чужой): Отображается заглушка аватара другого игрока. Некликабельный.

  • Занятый билет (Свой): Отображается аватар текущего пользователя (данные аватара должны передаваться в модуль при инициализации). Некликабельный.

• Кнопка действия (Buy):

  • Всегда серая (как в Figma).

  • Если билеты выбраны и хватает средств: активная (оранжевая), отображает общую сумму покупки. При нажатии отправляет запрос на покупку.

  • Если выбраны, но не хватает средств: неактивная, поверх выводится сообщение “You don't have enough silver”.

• Таймер: Отсчет времени до автоматического старта розыгрыша (ХХ:СС).

3.2. Состояние 2: Розыгрыш (Spinning)
Переход в это состояние инициируется событием с бэкенда (таймер истек ИЛИ раскуплены все 20 билетов).

• Блокировка: Сетка билетов и кнопка покупки блокируются/затемняются.

• Анимация спиннера: Поверх сетки появляется панель с тремя “слотами”. В слотах запускается быстрая анимация прокрутки аватаров участников текущего раунда (эффект слот-машины).

• Определение победителей:

  • Бэкенд отправляет список из трех победителей.

  • Слоты останавливаются одновременно: 1-е место, 2-е и 3-е, показывая аватар, имя победителя и сумму выигрыша.

• Завершение: После показа всех результатов через несколько секунд игра автоматически возвращается к Состоянию 1 (новый раунд).

3.3. Дополнительные элементы (внутри Pixi)

• Панель “5 Last games”: Таблица внизу экрана. Данные поступают с бэкенда при инициализации и обновляются после каждого розыгрыша.

• Попап “Info” (Правила): Открывается по кнопке (?). Модальное окно внутри Canvas, перекрывающее игру. Статический текст.

• Попап “History” (Мои игры): Модальное окно с таблицей истории личных игр пользователя и пагинацией. Данные подгружаются с бэкенда.

4. Взаимодействие с бэкендом (Data Flow)
   Модуль должен быть “тонким клиентом”. Вся логика валидации, расчета выигрышей и таймеров находится на сервере. Связь через WebSocket.

5. Требования к реализации

6. Графика и ассеты:

   • Все визуальные элементы брать строго из Figma.

   • Использовать текстурные атласы (sprite sheets) для оптимизации.

7. Анимации: Реализовать плавные анимации (спиннер, открытие попапов, подсвечивание кнопок).

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

9. Типизация: Строгое использование TypeScript, типизация всех входных и выходных данных API.