Street Fighter JS — Гра та Веб-сервіс

Street Fighter JS — це навчальний проєкт, що поєднує в собі динамічну браузерну файтинг-гру (на клієнтській стороні) та повноцінний RESTful API сервіс (на бекенді).

---

🏗️ Архітектура та структура проєкту

Серверна частина побудована з суворим розділенням на архітектурні шари для забезпечення чистоти коду, зручності тестування та масштабованості:

• models/ — моделі основних сутностей додатка (USER, FIGHTER, FIGHT). Вони визначають базові структури та поля, які зберігаються в базі даних.
• repositories/ — сховища (спадкоємці BaseRepository), що безпосередньо працюють з файлом бази даних
• services/ — сервіси, де зосереджена вся бізнес-логіка додатка, перевірки унікальності (case-insensitive перевірка email, телефону, імен бійців) та додаткові розрахунки.
• middlewares/ — посередники для обробки запитів. Тут знаходяться:
  • user.validation.middleware.js та fighter.validation.middleware.js — перевірка коректності полів перед передачею запиту контролеру.
  • response.middleware.js — уніфікований вихідний middleware для форматування успішних відповідей та помилок сервера.
• routes/ — точки входу для HTTP-запитів. Роутери приймають запити, викликають відповідні сервіси та передають результати далі в responseMiddleware.
• client/ — React-додаток (клієнтська частина).

---

⚡ REST API Ендпоінти

🔑 Авторизація (Auth)

• POST /api/auth/login — авторизація користувача (перевірка email та паролю).

👥 Користувачі (User)

• GET /api/users — отримати список усіх користувачів.
• GET /api/users/:id — отримати користувача за його ID.
• POST /api/users — створити нового користувача.
• PATCH /api/users/:id — оновити інформацію про користувача.
• DELETE /api/users/:id — видалити користувача.

🥊 Бійці (Fighter)

• GET /api/fighters — отримати список усіх бійців.
• GET /api/fighters/:id — отримати бійця за його ID.
• POST /api/fighters — створити нового бійця.
• PATCH /api/fighters/:id — оновити інформацію про бійця.
• DELETE /api/fighters/:id — видалити бійця.

⚔️ Битви (Fight)

• GET /api/fights — отримати історію проведених боїв.
• POST /api/fights — зберегти лог та результати бою.

---

🛡️ Правила валідації даних

Для запитів на створення (POST) та оновлення (PATCH) сутностей налаштовано сувору валідацію в middleware-шарі (без використання сторонніх бібліотек):

Для користувачів (User)

• При створенні обов'язкові всі поля моделі (окрім id).
• При оновленні повинно бути присутнє хоча б одне поле.
• Передавати поле id або будь-які зайві поля в тілі запиту заборонено.
• Email: тільки адреси @gmail.com.
• Phone: у форматі +380xxxxxxxxx.
• Password: мінімум 3 символи.
• Унікальність: перевірка на дублювання email та phone є регістронезалежною (case-insensitive).

Для бійців (Fighter)

• При створенні обов'язкові всі поля моделі (окрім id та health).
• При оновленні повинно бути присутнє хоча б одне поле.
• Передавати поле id або будь-які зайві поля заборонено.
• Power: число від 1 до 100.
• Defense: число від 1 до 10.
• Health: число від 80 до 120 (за замовчуванням при створенні ставиться 85).
• Унікальність: ім'я бійця (name) має бути унікальним (регістронезалежно).

---

🎮 Клієнтська частина та механіка бою

Клієнтський додаток містить:

1. Сторінки реєстрації та логіна — для доступу до ігрового процесу.
2. Створення бійців — форма додавання нового бійця з валідацією полів.
3. Екран вибору бійців (Arena) — вибір двох бійців та запуск поєдинку.
4. Екран бою — інтерактивний двобій на клавіатурі з анімованими спрайтами, смугами здоров'я, спливаючими індикаторами нанесеної шкоди, блокуванням ударів та комбо-критами (10с кулдауну).
5. Історія боїв — таблиця зі списком проведених боїв, датою, іменами бійців та переможцем, а також детальний покроковий журнал (лог) бою у модальному вікні.

⌨️ Керування в бою

• Гравець 1 (ліворуч):
  • Атака: A
  • Блок: D
  • Супер-удар (критичне комбо): комбінація клавіш Q + W + E
• Гравець 2 (праворуч):
  • Атака: J
  • Блок: L
  • Супер-удар (критичне комбо): комбінація клавіш U + I + O

---

🚀 Встановлення та запуск проєкту

1. Підготовка клієнтської частини

Перейдіть до папки client, встановіть залежності та зберіть статичні файли для бекенду:

cd client
npm install
npm run build
cd ..

2. Підготовка та запуск сервера

Встановіть залежності для кореневого проєкту та запустіть сервер:

npm install
npm start

Примітка для Windows (якщо запуск скриптів PowerShell обмежено політками безпеки): замість npm використовуйте npm.cmd:

npm.cmd install
npm.cmd start

3. Відкриття гри

Перейдіть у браузері за адресою: http://localhost:3333.