Init

2025-12-04 16:31:18 +03:00
commit 54455e5b6c
72 changed files with 5760 additions and 0 deletions
@@ -0,0 +1,100 @@
+# План реализации игры "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).
+    - Настройки хоста: Выбор набора слов, длительность раунда, кол-во очков для победы.
+    - Кнопка "Начать игру" (только для хоста).
+
+- [ ] **3.3. Экран "Игра" (Game)**
+    - **Роль "Объясняющий":**
+        - Карточка со словом по центру.
+        - Жесты (Swipe) или кнопки: Вверх/Вправо - Угадал, Вниз/Влево - Пропустил.
+        - Таймер обратного отсчета.
+    - **Роль "Отгадывающий":**
+        - Статус "Слушаем {PlayerName}".
+        - Таймер.
+        - Анимация при угадывании.
+
+- [ ] **3.4. Экран "Результаты раунда"**
+    - Список слов, которые были сыграны в раунде (возможность оспорить/изменить статус, если успеем).
+    - Текущий счет команд.
+    - Кнопка "Следующий раунд".
+
+- [ ] **3.5. Экран "Победа"**
+    - Поздравление победителей.
+    - Кнопка "В лобби".
+
+---
+
+## Этап 4: Тестирование и Сборка
+
+- [x] **4.1. Сборка**
+    - Настроить Maven плагин (`frontend-maven-plugin`) для сборки React приложения и копирования его в `src/main/resources/static`.
+    - Проверка сборки единого JAR файла.
+
+- [ ] **4.2. Тестирование**
+    - Проверка работы через ngrok (для HTTPS) внутри Telegram.
+    - Проверка работы WebSocket при сворачивании приложения (reconnection logic).