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.