Initial commit: Своя Игра - multiplayer quiz game
This commit is contained in:
Cosmo
256
README.md
Normal file
256
README.md
Normal file
@@ -0,0 +1,256 @@
|
||||
# Своя игра - 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
|
||||
Reference in New Issue
Block a user