Добей фразу

Добей фразу — браузерная party-game для компании друзей. Игроки придумывают начала фраз, добивают чужие фразы смешными концовками, голосуют за лучшие шутки и проходят несколько быстрых раундов.

Проект сделан как лёгкая онлайн-игра без регистрации: создал лобби, отправил друзьям код или ссылку, дождался игроков и запустил раунд.

Что уже есть

• главное меню игры;
• создание лобби с настройками;
• вход по коду;
• вход по invite-ссылке;
• список открытых лобби;
• realtime-игра через Socket.IO;
• короткие коды комнат;
• восстановление игрока после обновления страницы через sessionId;
• ожидание игроков в лобби;
• 5-секундный отсчёт перед стартом игры;
• раунды с таймерами;
• ручные и автоматические начала фраз;
• режимы:
  • каждый добивает чужую фразу;
  • все добивают одну и ту же фразу;
• голосование за шутки;
• запрет голосовать за свою концовку;
• итоги раунда;
• история лучших шуток;
• раскрывающийся список лучших шуток;
• финальный экран с очками и титулами;
• копирование кода, ссылки и шуток;
• UI-звуки из папки public/sounds;
• обработка несуществующих лобби и неправильных ссылок.

Как работает игра

1. Игрок открывает сайт.
2. Создаёт игру или входит в существующую.
3. Хост создаёт лобби и отправляет друзьям код или ссылку.
4. Игроки заходят в лобби.
5. Хост запускает игру.
6. Перед стартом появляется обратный отсчёт 5 секунд.
7. Игроки пишут начала фраз.
8. Затем каждый добивает чужую фразу.
9. Все голосуют за самую смешную концовку.
10. После раунда показываются итоги и лучшие шутки.
11. Хост запускает следующий раунд или завершает игру.

Технологии

• Node.js
• Express
• Socket.IO
• HTML
• CSS
• Vanilla JavaScript

Данные комнат хранятся в памяти сервера. База данных пока не используется.

Структура проекта

.
├── public/
│   ├── index.html
│   ├── style.css
│   ├── client.js
│   └── sounds/
│       ├── ui-click.mp3
│       ├── copy.mp3
│       ├── join.mp3
│       ├── leave.mp3
│       ├── reveal.mp3
│       ├── vote.mp3
│       ├── win.mp3
│       └── error.mp3
├── server.js
├── package.json
├── README.md
└── _redirects

Звуки

Клиент ожидает звуки в папке:

public/sounds/

Нужные файлы:

ui-click.mp3
copy.mp3
join.mp3
leave.mp3
reveal.mp3
vote.mp3
win.mp3
error.mp3

Если какого-то файла нет, браузер просто не сможет его проиграть. Поэтому перед деплоем лучше проверить, что все файлы лежат в public/sounds.

Проверка локально:

http://localhost:3000/sounds/ui-click.mp3
http://localhost:3000/sounds/copy.mp3

Локальный запуск

Установить зависимости:

npm install

Запустить сервер:

npm start

Открыть игру:

http://localhost:3000

Для теста открой несколько вкладок браузера:

1. В первой вкладке создай игру.
2. Во второй вкладке зайди по коду или ссылке.
3. Запусти игру.
4. Пройди полный раунд: начало → концовка → раскрытие → голосование → итоги.

Проверка синтаксиса

Перед пушем можно быстро проверить JS-файлы:

node --check public/client.js
node --check server.js

Основные маршруты

/                 главное меню
/create           создание игры / настройки лобби
/join-game        меню входа в игру
/join-code        вход по коду
/lobbies          открытые лобби
/lobby/:code      ожидание игроков в лобби
/join/:code       invite-ссылка для входа в лобби
/game/:code       активная игра
/game-started     экран, если игра уже началась
/lobby-not-found  экран, если лобби не найдено

Логика ссылок

Пока лобби находится в состоянии waiting, игроки могут присоединяться по коду или invite-ссылке.

После старта игры новые игроки уже не добавляются в комнату. Если новый пользователь откроет ссылку на уже начавшуюся игру, он увидит экран:

Игра уже началась
Новые игроки больше не могут присоединиться к этому лобби.

Игроки, которые уже были в сессии, остаются в игре и могут восстановиться после обновления страницы.

Настройки лобби

Хост может настроить:

• количество раундов;
• таймер на начало фразы;
• таймер на концовку;
• таймер голосования;
• режим начал:
  • игроки сами кидают начала;
  • игра предлагает начала автоматически;
• режим раздачи:
  • каждый добивает чужую фразу;
  • все добивают одну и ту же фразу;
• максимум игроков;
• скрытие авторов до итогов раунда;
• звуки;
• показ комнаты в списке открытых лобби.

Состояния игры

Основные состояния комнаты:

waiting     лобби создано, игроки ожидаются
starting    обратный отсчёт перед стартом
prompting   игроки пишут начала фраз
answering   игроки добивают фразы
revealing   готовые шутки показаны
voting      голосование
scoreboard  итоги раунда
finished    финал игры

BACKEND_URL

В public/client.js указан backend:

const BACKEND_URL =
  location.hostname === "localhost" || location.hostname === "127.0.0.1"
    ? "http://localhost:3000"
    : "https://textic-chat.onrender.com";

Для локального запуска используется:

http://localhost:3000

Для продакшена используется Render URL:

https://textic-chat.onrender.com

Если backend переедет на другой домен, нужно заменить продакшен-URL в public/client.js.

CORS

В server.js нужно разрешить домены, с которых будет открываться frontend.

Пример:

const ALLOWED_ORIGINS = [
  "http://localhost:3000",
  "http://localhost:5173",
  "https://exitserial.pages.dev"
];

Если деплоишь frontend на другой домен, добавь его в ALLOWED_ORIGINS.

Деплой

Вариант 1. Всё на Render

Самый простой вариант для MVP:

1. Залить проект на GitHub.
2. Создать Web Service на Render.
3. Подключить GitHub-репозиторий.
4. Build command:

npm install

5. Start command:

npm start

6. Открыть Render URL.

Так как Express раздаёт папку public, frontend и backend могут работать с одного сервера.

Вариант 2. Frontend отдельно, backend отдельно

Можно вынести frontend на Cloudflare Pages, а backend оставить на Render.

В этом случае нужно:

1. Задеплоить backend на Render.
2. Задеплоить папку public на Cloudflare Pages.
3. В public/client.js указать правильный Render URL.
4. В server.js добавить домен Cloudflare Pages в ALLOWED_ORIGINS.

Важные ограничения MVP

• Комнаты хранятся только в памяти сервера.
• После перезапуска сервера активные комнаты пропадут.
• Нет базы данных.
• Нет авторизации.
• Нет постоянной истории игр.
• Одна копия сервера должна обслуживать одну игровую сессию realtime-комнат.
• Для продакшена с большим количеством игроков позже лучше добавить Redis/Postgres и нормальное хранение сессий.

Что проверить перед пушем

node --check public/client.js
node --check server.js

Потом вручную:

• создать лобби;
• войти вторым игроком;
• скопировать код;
• скопировать ссылку;
• открыть invite-ссылку;
• запустить игру;
• проверить 5-секундный countdown;
• написать начало;
• написать концовку;
• проверить, что текст в поле не исчезает при обновлении прогресса;
• пройти голосование;
• проверить итоги раунда;
• проверить раскрывающийся список лучших шуток;
• проверить финал игры;
• проверить выход из комнаты;
• проверить удаление лобби;
• открыть несуществующее лобби и убедиться, что показывается экран ошибки.

Tone of voice

Игра должна звучать дружелюбно, понятно и немного смешно.
Главное — не мешать игроку быстро понять, что делать.

Подходящие слова:

лобби
код
ссылка
игроки
раунд
начало
концовка
шутка
голосование
итоги

Не стоит перегружать интерфейс длинными шутками, токсичным юмором или непонятными формулировками. Кнопки и ошибки должны быть максимально ясными.

Идеи для следующих версий

• постоянная история игр;
• база данных;
• авторизация;
• кастомные наборы тем;
• больше готовых начал фраз;
• роли игроков;
• режим зрителя;
• QR-код для входа в лобби;
• мобильная оптимизация под party-mode;
• админка для модерации авто-фраз;
• share-картинки с лучшими шутками.