Своя игра - Multiplayer Quiz Game

Многопользовательская игра в стиле "Своя игра" с поддержкой команд и режимом реального времени.

Возможности

• ✅ Создание игровых комнат с уникальными кодами
• ✅ Поддержка нескольких команд
• ✅ Два раунда с разными стоимостями вопросов (100-500 и 200-1000)
• ✅ Рандомный выбор 5 категорий на каждый раунд без повторений
• ✅ Поддержка трех типов вопросов: текст, изображения, аудио
• ✅ Таймер на ответ (60 секунд)
• ✅ Система очков (правильный ответ = +баллы, неправильный = -баллы)
• ✅ WebSocket для синхронизации в реальном времени

Технологии

Backend

• Node.js + Express
• Socket.io
• JSON-хранилище вопросов

Frontend

• React + Vite
• TailwindCSS
• Socket.io-client
• React Router

Установка и запуск

Вариант 1: Docker (Рекомендуется) 🐳

Самый простой способ - использовать Docker Compose:

# Запустить всё одной командой
docker-compose up

# Или в фоновом режиме
docker-compose up -d

# Остановить
docker-compose down

После запуска:

• Frontend: http://localhost:5173
• Backend: http://localhost:3001
• MongoDB: localhost:27017

Все зависимости и MongoDB установятся автоматически!

Доступ из локальной сети (с телефона/планшета)

1. Узнайте IP-адрес вашего компьютера:

   Windows:

   ipconfig
   

   Найдите IPv4-адрес (например, 192.168.1.100)

   Linux/Mac:

   ifconfig
   # или
   ip addr show
   

2. Запустите Docker как обычно:

   docker-compose up -d
   

3. Откройте на любом устройстве в сети:

   http://192.168.1.100:5173
   

   (замените на ваш IP-адрес)

4. Если не работает:

   • Проверьте firewall (разрешите порты 5173 и 3001)
   • Убедитесь, что все устройства в одной Wi-Fi сети
   • Попробуйте перезапустить Docker: docker-compose down && docker-compose up -d

Вариант 2: Ручная установка

# Установка всех зависимостей
npm run install-all

# Или вручную
npm install
cd server && npm install
cd ../client && npm install

Настройка MongoDB

Для сохранения игр установите MongoDB:

1. Установите MongoDB: https://www.mongodb.com/try/download/community
2. Запустите MongoDB сервер
3. Создайте файл server/.env:

PORT=3001
MONGODB_URI=mongodb://localhost:27017/svoya-igra
NODE_ENV=development

Важно: Без MongoDB игры будут храниться только в памяти сервера и пропадут при перезагрузке страницы или сервера.

Запуск

# Запустить всё одновременно
npm run dev

# Или по отдельности
npm run server  # Backend на порту 3001
npm run client  # Frontend на порту 5173

Использование

1. Откройте http://localhost:5173
2. Создайте новую игру или присоединитесь к существующей
3. Пригласите другие команды используя код игры
4. Начните игру - игра автоматически выберет 5 случайных категорий
5. Выбирайте вопросы и отвечайте

Управление вопросами

Структура JSON файла

Редактируйте server/src/data/questions.json:

{
  "categories": [
    {
      "id": "unique-id",
      "name": "Название категории",
      "round": 1,
      "questions": [
        {
          "points": 100,
          "type": "text",
          "question": "Ваш вопрос?",
          "answer": "Правильный ответ"
        },
        {
          "points": 200,
          "type": "image",
          "question": "/images/photo.jpg",
          "questionText": "Что изображено на фото?",
          "answer": "Описание"
        },
        {
          "points": 300,
          "type": "audio",
          "question": "/audio/song.mp3",
          "questionText": "Что это за песня?",
          "answer": "Название песни"
        }
      ]
    }
  ]
}

Типы вопросов

1. Текстовые (type: "text"):

   • question - текст вопроса
   • answer - правильный ответ

2. Изображения (type: "image"):

   • question - путь к файлу (например /images/photo.jpg)
   • questionText - дополнительный текст вопроса
   • answer - правильный ответ
   • Файлы размещать в: server/public/images/

3. Аудио (type: "audio"):

   • question - путь к файлу (например /audio/song.mp3)
   • questionText - дополнительный текст вопроса
   • answer - правильный ответ
   • Файлы размещать в: server/public/audio/

Добавление медиа файлов

1. Поместите изображения в server/public/images/
2. Поместите аудио в server/public/audio/
3. В JSON используйте относительные пути: /images/filename.jpg или /audio/filename.mp3

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

my-game/
├── server/
│   ├── public/
│   │   ├── images/           # Изображения для вопросов
│   │   └── audio/            # Аудио файлы для вопросов
│   ├── src/
│   │   ├── data/
│   │   │   └── questions.json      # Вопросы и категории
│   │   ├── models/
│   │   │   ├── Game.js             # Модель игры
│   │   │   └── Question.js         # Модель вопроса
│   │   ├── routes/
│   │   │   ├── games.js            # API игр
│   │   │   └── questions.js        # API вопросов
│   │   ├── socket/
│   │   │   └── handlers.js         # WebSocket + логика выбора категорий
│   │   └── index.js                # Главный файл сервера
│   └── package.json
├── client/
│   ├── src/
│   │   ├── components/
│   │   │   ├── GameBoard.jsx       # Игровое поле
│   │   │   ├── QuestionModal.jsx   # Модальное окно с медиа-поддержкой
│   │   │   └── TeamScores.jsx      # Счет команд
│   │   ├── pages/
│   │   │   ├── Home.jsx            # Главная страница
│   │   │   ├── CreateGame.jsx      # Создание игры
│   │   │   ├── JoinGame.jsx        # Присоединение к игре
│   │   │   └── Game.jsx            # Игровая страница
│   │   ├── App.jsx
│   │   └── main.jsx
│   └── package.json
└── README.md

Игровой процесс

1. Создание игры: Первый игрок создает игру и получает уникальный код. Система автоматически выбирает 5 случайных категорий для раунда 1.
2. Присоединение: Другие команды присоединяются по коду
3. Выбор вопроса: Команды по очереди выбирают категорию и стоимость
4. Ответ: Первая нажавшая кнопку "Ответить" команда отвечает
5. Правильный ответ: Команда получает баллы, вопрос закрывается
6. Неправильный ответ: Команда теряет баллы, другие могут попробовать
7. Раунд 2: После первого раунда выбираются новые 5 категорий для раунда 2, стоимость вопросов удваивается

Особенности

• Случайный выбор категорий: В каждой игре будут разные категории
• Без повторений: Категории не повторяются между раундами
• Мультимедиа: Поддержка изображений и аудио делает игру разнообразнее
• Простое управление: Все через JSON файл, не нужна админ-панель
• Персистентность: Игры сохраняются в MongoDB и доступны после перезагрузки страницы
• Роль ведущего: Ведущий управляет игрой, выбирает вопросы и контролирует процесс

Лицензия

MIT