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

1. Общее описание проекта

Задача: Разработать клиентскую часть (фронтенд) многопользовательской мини-игры "Lucky Ticket" (Счастливый билет).

Среда: Модуль встраивается в существующее Telegram Mini App.

Стек:

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

*   Язык: TypeScript.

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

2. Архитектура и зона ответственности (Важно!)

Приложение использует гибридный подход.

НЕ входит в задачи исполнителя (уже реализовано в приложении):

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

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

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

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

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

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. Требования к реализации

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

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

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

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

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

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