CodeNames - React Онлайн Игра

Полноценная онлайн игра CodeNames на React с реал-тайм мультиплеером через Firebase.

🚀 Быстрый старт

ВАЖНО: Прежде чем запустить, прочитайте START_HERE.md для миграции на мультиплеер!

# 1. Установите зависимости
npm install

# 2. Замените старые файлы (см. START_HERE.md)
# 3. Запустите
npm start

🎮 Правила игры

• 2 команды: Красная и Синяя
• В каждой команде: 1 капитан и игроки
• Игровое поле: 28 случайных слов
  • 9 слов Красной команды
  • 9 слов Синей команды
  • 1 слово-мина (бомба)
  • 9 нейтральных слов

Как играть

1. Лобби: Игроки входят, вводят имя и выбирают команду
2. В каждой команде выбирается капитан (нажав кнопку "Стать капитаном")
3. После начала игры капитан видит какие слова принадлежат его команде
4. Капитан дает одно слово-подсказку и количество слов, связанных с подсказкой
5. Подсказки выводятся в столбике справа для всех игроков
6. Игроки команды открывают карточки, пытаясь угадать свои слова
7. Если угадали свое слово - можно продолжать
8. Если угадали чужое или нейтральное - ход переходит к другой команде
9. Если попали на мину - команда проигрывает!
10. Побеждает команда, которая первой откроет все свои 9 слов

🚀 Как запустить

# Установите зависимости
npm install

# Запустите проект
npm start

Приложение откроется по адресу http://localhost:3000

📋 Функционал

✅ Реализовано

• ✅ Лобби с выбором команды
• ✅ 🌐 Онлайн мультиплеер через Firebase Realtime Database
• ✅ 🏠 Система комнат с уникальными ID и ссылками для приглашений
• ✅ 📋 Копирование ссылки для приглашения друзей
• ✅ Реал-тайм синхронизация всех действий между игроками
• ✅ Назначение капитанов в командах
• ✅ Полная игровая логика
• ✅ 28 карточек с случайными словами
• ✅ Режим капитана (видны цвета карт)
• ✅ Режим игрока (цвета скрыты)
• ✅ Система подсказок в столбике
• ✅ История всех подсказок
• ✅ Счётчик оставшихся слов
• ✅ Окончание хода команды
• ✅ Определение победителя
• ✅ Адаптивный дизайн
• ✅ Возврат в лобби после игры
• ✅ 8 различных тем (Классика, Аниме, Бренды, Футболисты, Кино, История, Наука, Животные)
• ✅ Таймер 60 секунд на отгадывание после подсказки
• ✅ Анимация поворота при открытии карточек
• ✅ Firebase подготовка для мультиплеера

🔮 Планируемые улучшения

• Завершить онлайн мультиплеер (WebSocket / Firebase)
• Приватные комнаты для игр
• Чат для команд
• Больше слов в словаре
• История игр
• Статистика побед
• Рейтинг игроков
• Звуковые эффекты
• Темы оформления (тёмная/светлая)

🛠 Технологии

• React 18 - UI библиотека
• Context API - управление состоянием
• Firebase - реал-тайм база данных и синхронизация
• CSS3 - стилизация с анимациями
• React Scripts - сборка проекта

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

codenames/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Lobby.jsx          # Лобби с выбором команд
│   │   ├── Game.jsx            # Основной игровой компонент
│   │   ├── Card.jsx            # Карточка со словом
│   │   └── HintsList.jsx       # Столбик с подсказками
│   ├── context/
│   │   └── GameContext.js      # Глобальное состояние игры
│   ├── utils/
│   │   └── gameLogic.js        # Игровая логика
│   ├── styles/
│   │   └── App.css             # Все стили
│   ├── App.js                  # Главный компонент
│   └── index.js                # Точка входа
├── package.json
└── README.md

🎯 Особенности реализации

• Мультиплеер-готовность: Firebase готов к использованию для синхронизации между игроками
• Разделение ролей: Капитаны и игроки имеют разные возможности
• История подсказок: Все подсказки сохраняются и отображаются в отдельной панели
• Адаптивность: Работает на десктопах и мобильных устройствах
• Темы слов: 8 различных тем с разной сложностью
• Таймер: 60 секунд на открытие карточек после подсказки
• Анимации: Плавные переходы и анимации открытия карт

📝 Как настроить Firebase (подробная инструкция)

Шаг 1: Создайте проект Firebase

1. Перейдите на Firebase Console
2. Войдите с Google аккаунтом
3. Нажмите "Add project" (Добавить проект)
4. Введите название проекта, например: codenames-game
5. Отключите Google Analytics (не обязательно для этого проекта)
6. Нажмите "Create project"

Шаг 2: Включите Realtime Database

1. В левом меню выберите "Build" → "Realtime Database"
2. Нажмите "Create Database"
3. Выберите регион (например, "United States" или "Europe")
4. Выберите режим безопасности:
   • "Start in test mode" - для разработки (публичный доступ на 30 дней)
   • Или настройте правила позже
5. Нажмите "Enable"

Шаг 3: Получите конфигурацию

1. В левом меню нажмите на значок ⚙️ Settings → "Project settings"
2. Прокрутите вниз до раздела "Your apps"
3. Нажмите на значок веб-приложения </> ("Add app")
4. Введите название приложения: CodeNames Web
5. НЕ включайте Firebase Hosting (снимите галочку)
6. Нажмите "Register app"
7. Скопируйте весь объект firebaseConfig который появится

Вы увидите что-то вроде:

const firebaseConfig = {
  apiKey: "AIzaSyC1234567890abcdefghijklmnopqrstuvwx",
  authDomain: "codenames-game.firebaseapp.com",
  projectId: "codenames-game",
  storageBucket: "codenames-game.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abcdef1234567890abcdef",
  databaseURL: "https://codenames-game-default-rtdb.firebaseio.com"
};

Шаг 4: Добавьте databaseURL (ВАЖНО!)

Если в конфигурации нет databaseURL:

1. Вернитесь в "Realtime Database" в меню слева
2. В верхней части страницы скопируйте URL вида: https://ваш-проект-default-rtdb.firebaseio.com
3. Добавьте это в конфигурацию как databaseURL

Шаг 5: Замените конфигурацию в коде

Откройте файл src/utils/firebase.js и замените:

const firebaseConfig = {
  apiKey: "AIzaSyDemoKey123456789",  // ← Замените на ваш
  authDomain: "codenames-demo.firebaseapp.com",  // ← Замените на ваш
  projectId: "codenames-demo",  // ← Замените на ваш
  storageBucket: "codenames-demo.appspot.com",  // ← Замените на ваш
  messagingSenderId: "123456789",  // ← Замените на ваш
  databaseURL: "https://codenames-demo-default-rtdb.firebaseio.com",  // ← Замените на ваш
  appId: "1:123456789:web:abc123def456"  // ← Замените на ваш
};

Шаг 6: Настройте правила безопасности (опционально)

Для production режима настройте правила в Realtime Database → Rules:

{
  "rules": {
    "rooms": {
      "$roomId": {
        ".read": true,
        ".write": true
      }
    }
  }
}

✅ Готово!

Теперь запустите приложение:

npm install
npm start

🔍 Где найти параметры, если забыли:

Параметр	Где найти
apiKey, authDomain, projectId, appId	Settings ⚙️ → Project settings → Your apps (внизу страницы)
databaseURL	Realtime Database → вверху страницы, URL базы данных
storageBucket	Settings ⚙️ → Project settings → Your apps
messagingSenderId	Settings ⚙️ → Project settings → Cloud Messaging

⚠️ Важные замечания:

• apiKey можно публиковать - он не секретный для Firebase
• Безопасность обеспечивается правилами Firebase Security Rules
• В test mode база доступна всем 30 дней, потом нужно настроить правила
• Для production всегда настраивайте правила безопасности!

---

Версия: 3.0 (React с темами, таймером и анимациями) Статус: Готов к локальному тестированию и расширению мультиплеера