257 lines
9.7 KiB
Markdown
257 lines
9.7 KiB
Markdown
# Своя игра - 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:
|
||
|
||
```bash
|
||
# Запустить всё одной командой
|
||
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:**
|
||
```bash
|
||
ipconfig
|
||
```
|
||
Найдите IPv4-адрес (например, `192.168.1.100`)
|
||
|
||
**Linux/Mac:**
|
||
```bash
|
||
ifconfig
|
||
# или
|
||
ip addr show
|
||
```
|
||
|
||
2. **Запустите Docker как обычно:**
|
||
```bash
|
||
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: Ручная установка
|
||
|
||
```bash
|
||
# Установка всех зависимостей
|
||
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`:
|
||
|
||
```env
|
||
PORT=3001
|
||
MONGODB_URI=mongodb://localhost:27017/svoya-igra
|
||
NODE_ENV=development
|
||
```
|
||
|
||
**Важно:** Без MongoDB игры будут храниться только в памяти сервера и пропадут при перезагрузке страницы или сервера.
|
||
|
||
#### Запуск
|
||
|
||
```bash
|
||
# Запустить всё одновременно
|
||
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`:
|
||
|
||
```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
|