Розробка React-модуля міні-гри “Lucky Ticket” для 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.