# План реализации игры "Alias" для Telegram WebApp

## Технологический стек
*   **Backend:** Java 17+, Spring Boot, Spring WebSocket (STOMP).
*   **Frontend:** React, TypeScript, Vite, Tailwind CSS.
*   **Хранение данных:** In-Memory (Java Collections).
*   **Интеграция:** Telegram WebApp SDK.

---

## Этап 1: Настройка Backend (Spring Boot)

- [x] **1.1. Обновление зависимостей (`pom.xml`)**
    - Добавить `spring-boot-starter-websocket`.
    - Добавить `lombok` (для сокращения бойлерплейта).

- [x] **1.2. Модели данных (Domain)**
    - `Player` (sessionId, nickname, teamId).
    - `Team` (name, score, players).
    - `Room` (roomId, teams, gameState, currentSettings).
    - `GameState` (LOBBY, PLAYING, PAUSED, FINISHED).

- [x] **1.3. Сервисный слой (`GameService`)**
    - Логика создания комнаты (генерация 4-значного кода).
    - Логика присоединения игрока.
    - Управление состоянием игры (старт раунда, переключение хода).
    - Обработка действий (слово угадано/пропущено).

- [x] **1.4. WebSocket Конфигурация**
    - Настройка `WebSocketMessageBroker`.
    - Эндпоинты: `/app/create`, `/app/join`, `/app/game-action`.
    - Топики для подписки: `/topic/room/{roomId}`.

- [x] **1.5. Словари слов**
    - Создать JSON файлы с наборами слов (Easy, Medium, Hard).
    - Реализовать загрузчик слов при старте приложения.

---

## Этап 2: Настройка Frontend (React + Vite)

- [x] **2.1. Инициализация проекта**
    - Создать папку `frontend` внутри корня.
    - Установить React + TypeScript через Vite.
    - Настроить Proxy для разработки (чтобы запросы шли на Spring Boot порт 8080).

- [x] **2.2. UI Библиотеки и Стили**
    - Установить Tailwind CSS.
    - Установить `framer-motion` для красивых анимаций карточек.
    - Установить `@twa-dev/sdk` для типизации Telegram WebApp.
    - Настроить тему, использующую `Telegram.WebApp.themeParams`.

- [x] **2.3. Клиент WebSocket**
    - Настроить `sockjs-client` и `@stomp/stompjs`.
    - Создать хук или контекст для управления соединением (`useWebSocket`).

---

## Этап 3: Реализация интерфейса и логики (Frontend)

- [x] **3.1. Экран "Приветствие" (Home)**
    - Кнопка "Создать игру".
    - Поле ввода кода комнаты + кнопка "Войти".

- [x] **3.2. Экран "Лобби" (Lobby)**
    - Список подключенных игроков.
    - UI для перетаскивания/выбора команды (Team A / Team B).
    - Настройки хоста: Выбор набора слов, длительность раунда, кол-во очков для победы.
    - Кнопка "Начать игру" (только для хоста).

- [x] **3.3. Экран "Игра" (Game)**
    - **Роль "Объясняющий":**
        - Карточка со словом по центру.
        - Жесты (Swipe) или кнопки: Вверх/Вправо - Угадал, Вниз/Влево - Пропустил.
        - Таймер обратного отсчета.
    - **Роль "Отгадывающий":**
        - Статус "Слушаем {PlayerName}".
        - Таймер.
        - Анимация при угадывании.

- [x] **3.4. Экран "Результаты раунда"**
    - Список слов, которые были сыграны в раунде (возможность оспорить/изменить статус, если успеем).
    - Текущий счет команд.
    - Кнопка "Следующий раунд".

- [x] **3.5. Экран "Победа"**
    - Поздравление победителей.
    - Кнопка "В лобби".

---

## Этап 4: Тестирование и Сборка

- [x] **4.1. Сборка**
    - Настроить Maven плагин (`frontend-maven-plugin`) для сборки React приложения и копирования его в `src/main/resources/static`.
    - Проверка сборки единого JAR файла.

- [ ] **4.2. Тестирование**
    - Проверка работы через ngrok (для HTTPS) внутри Telegram.
    - Проверка работы WebSocket при сворачивании приложения (reconnection logic).