<p>1. Общее описание проекта</p><p><b>Задача:</b> Разработать клиентскую часть (фронтенд) многопользовательской мини-игры "Lucky Ticket" (Счастливый билет).</p><p><b>Среда:</b> Модуль встраивается в существующее Telegram Mini App.</p><p><b>Стек:</b></p><p>* Основная логика и рендер игры: React.</p><p>* Язык: <b>TypeScript</b>.</p><p>* Взаимодействие с бэкендом: <b>WebSocket</b> (основное) + REST API (вспомогательное, если потребуется).</p><p>2. Архитектура и зона ответственности (Важно!)</p><p>Приложение использует гибридный подход.</p><p><b>НЕ входит в задачи исполнителя (уже реализовано в приложении):</b></p><p>* Верхний бар (счетчики валют, бургер-меню).</p><p>* Нижнее навигационное меню (Shop, Tasks, Birds...).</p><p>* Общая инициализация Telegram WebApp, авторизация пользователя.</p><p><b>Входит в задачи исполнителя:</b></p><p>1. Реализация <b>React-модуля игры</b>, монтируемого в предоставленный HTML-контейнер <div> в центральной части экрана.</p><p>2. Реализация всей внутренней логики игры: сетка билетов, табы комнат, анимация розыгрыша, внутренние попапы (Правила, История).</p><p>3. Адаптивная верстка содержимого Canvas, чтобы оно корректно заполняло выделенное пространство на разных устройствах, сохраняя пропорции дизайна.</p><p>4. Подключение к WebSocket бэкенда игры для получения состояний и отправки действий игрока.</p><p>---</p><p>3. Игровой процесс и состояния UI</p><p>Весь UI игры должен строго соответствовать предоставленному макету в Figma (ссылка будет предоставлена исполнителю).</p><p>3.1. Состояние 1: Активный раунд (Сбор участников)</p><p>Основной экран, где игроки покупают билеты.</p><p>* <b>Табы комнат (Bet Tiers):</b> Переключатели "1k", "5k", "10k".</p><p> * При переключении меняется активная комната, обновляется стоимость билета, призовой фонд и состояние сетки.</p><p>* <b>Информационный блок:</b></p><p> * Текущий призовой фонд (Current Prize Pool) — обновляется в реальном времени.</p><p> * Цена билета в текущей комнате.</p><p>* <b>Сетка билетов (20 ячеек):</b></p><p> * <b>Свободный билет:</b> Иконка билета. Кликабелен. При клике переходит в состояние "Выбран".</p><p> * <b>Выбранный билет:</b> Чуть тусклее и меньше (как в Figma).</p><p> * <b>Занятый билет (Чужой):</b> Отображается заглушка аватара другого игрока. Не кликабелен.</p><p> * <b>Занятый билет (Свой):</b> Отображается аватар текущего пользователя (данные аватара должны передаваться в модуль при инициализации). Не кликабелен.</p><p>* <b>Кнопка действия (Buy):</b></p><p> * Всегда серая (как в Figma).</p><p> * Если билеты выбраны и хватает средств: активна (оранжевая), отображает общую сумму покупки. По нажатию отправляет запрос на покупку.</p><p> * Если выбраны, но не хватает средств: неактивна, поверх выводится сообщение "You don't have enough silver".</p><p>* <b>Таймер:</b> Отсчет времени до автоматического старта розыгрыша (ММ:СС).</p><p>3.2. Состояние 2: Розыгрыш (Spinning)</p><p>Переход в это состояние инициируется событием с бэкенда (таймер истек ИЛИ раскуплены все 20 билетов).</p><p>* <b>Блокировка:</b> Сетка билетов и кнопка покупки блокируются/затеняются.</p><p>* <b>Анимация спиннера:</b> Поверх сетки появляется панель с тремя "слотами". В слотах запускается быстрая анимация прокрутки аватаров участников текущего раунда (эффект слот-машины).</p><p>* <b>Определение победителей:</b></p><p> * Бэкенд присылает список из трех победителей.</p><p> * Слоты останавливаются одновременно 1-е место, 2-е и 3-е, показывая аватар, имя победителя и сумму выигрыша.</p><p>* <b>Завершение:</b> После показа всех результатов через несколько секунд игра автоматически возвращается в Состояние 1 (новый раунд).</p><p>3.3. Дополнительные элементы (внутри Pixi)</p><p>* <b>Панель "5 Last games":</b> Таблица внизу экрана. Данные приходят с бэкенда при инициализации и обновляются после каждого розыгрыша.</p><p>* <b>Попап "Info" (Правила):</b> Открывается по кнопке (?). Модальное окно внутри Canvas, перекрывающее игру. Статический текст.</p><p>* <b>Попап "History" (Мои игры):</b> Модальное окно с таблицей истории личных игр пользователя и пагинацией. Данные подгружаются с бэкенда.</p><p>4. Взаимодействие с Бэкендом (Data Flow)</p><p>Модуль должен быть "тонким клиентом". Вся логика валидации, расчета выигрышей и таймеров находится на сервере. Связь через WebSocket.</p><p>5. Требования к реализации</p><p>1. <b>Графика и Ассеты:</b></p><p> * Все визуальные элементы брать строго из <b>Figma</b>.</p><p> * Использовать текстурные атласы (sprite sheets) для оптимизации.</p><p>2. <b>Анимации:</b> Реализовать плавные анимации (спиннер, открытие попапов, подсветка кнопок).</p><p>3. <b>Оптимизация:</b> Игра должна работать плавно на мобильных устройствах среднего уровня. Следить за потреблением памяти, избегать утечек при переключении комнат.</p><p>4. <b>Типизация:</b> Строгое использование TypeScript, типизация всех входящих и исходящих данных API.</p>
