AliasApp/TODO.md

План реализации игры "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)

• 1.1. Обновление зависимостей (pom.xml)

  • Добавить spring-boot-starter-websocket.
  • Добавить lombok (для сокращения бойлерплейта).

• 1.2. Модели данных (Domain)

  • Player (sessionId, nickname, teamId).
  • Team (name, score, players).
  • Room (roomId, teams, gameState, currentSettings).
  • GameState (LOBBY, PLAYING, PAUSED, FINISHED).

• 1.3. Сервисный слой (GameService)

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

• 1.4. WebSocket Конфигурация

  • Настройка WebSocketMessageBroker.
  • Эндпоинты: /app/create, /app/join, /app/game-action.
  • Топики для подписки: /topic/room/{roomId}.

• 1.5. Словари слов

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

---

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

• 2.1. Инициализация проекта

  • Создать папку frontend внутри корня.
  • Установить React + TypeScript через Vite.
  • Настроить Proxy для разработки (чтобы запросы шли на Spring Boot порт 8080).

• 2.2. UI Библиотеки и Стили

  • Установить Tailwind CSS.
  • Установить framer-motion для красивых анимаций карточек.
  • Установить @twa-dev/sdk для типизации Telegram WebApp.
  • Настроить тему, использующую Telegram.WebApp.themeParams.

• 2.3. Клиент WebSocket

  • Настроить sockjs-client и @stomp/stompjs.
  • Создать хук или контекст для управления соединением (useWebSocket).

---

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

• 3.1. Экран "Приветствие" (Home)

  • Кнопка "Создать игру".
  • Поле ввода кода комнаты + кнопка "Войти".

• 3.2. Экран "Лобби" (Lobby)

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

• 3.3. Экран "Игра" (Game)

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

• 3.4. Экран "Результаты раунда"

  • Список слов, которые были сыграны в раунде (возможность оспорить/изменить статус, если успеем).
  • Текущий счет команд.
  • Кнопка "Следующий раунд".

• 3.5. Экран "Победа"

  • Поздравление победителей.
  • Кнопка "В лобби".

---

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

• 4.1. Сборка

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

• 4.2. Тестирование

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