⚔️ SkyRift Client

SkyRift Client - frontend-клиент для multiplayer RPG/online game-проекта SkyRift.

Это клиентская часть игры, которая объединяет UI, авторизацию, GraphQL-запросы, realtime-взаимодействие по WebSocket и игровой рендеринг на Phaser. Проект работает в связке с отдельным backend-сервером SkyRift и отвечает за вход в игру, выбор персонажа и сам игровой процесс в живом мире.

✨ Что умеет проект

В клиент уже заложены основные пользовательские и игровые подсистемы:

• 🔐 регистрация, логин и logout
• 👤 получение текущего пользователя и его профиля
• 🧝 выбор персонажа перед входом в игровой мир
• 📡 подключение к backend по GraphQL и Socket.IO
• 🎮 запуск игрового клиента на Phaser
• 🗺 отрисовка локаций, тайловых карт и игровых сущностей
• 🧭 перемещение персонажа и взаимодействие с миром
• ⚔️ realtime-бой, навыки, AOE и обновление состояния сущностей
• 🎒 UI для сумки, экипировки и игровых слотов
• 📜 отображение квестов и точек взаимодействия
• 💬 игровой чат и realtime-события
• ⏱ синхронизация времени и обработка сетевых состояний

📚 Содержание

• Обзор
• Технологический стек
• Функциональность
• Архитектура
• Структура проекта
• API и realtime
• Quick Start
• Скрипты
• Заметки

📖 Обзор

SkyRift Client построен как SPA-приложение на React и Vite, где обычный интерфейс приложения сочетается с отдельным игровым runtime-слоем на Phaser.

При запуске клиент:

• поднимает React-приложение и роутинг
• подключает Apollo Client для GraphQL
• работает с backend API через VITE_API_URL
• открывает Socket.IO-подключение к namespace /game
• инициализирует Phaser-игру и игровые сцены
• загружает ассеты персонажей, мобов, карт, предметов и UI

То есть клиент не ограничивается формами и страницами: он поднимает полноценный игровой runtime, который синхронизируется с сервером в реальном времени.

🧰 Технологический стек

Core

• TypeScript
• React 19
• Vite
• TanStack Router

API

• GraphQL
• Apollo Client
• GraphQL Code Generator

Realtime

• Socket.IO Client

Game Runtime

• Phaser 3
• EasyStar.js для pathfinding на клиенте

UI

• Tailwind CSS 4
• Radix UI
• React Hook Form
• Yup

🎮 Функциональность

Модуль	Описание
🔐 Auth	Регистрация, вход, выход, работа с токенами
👤 Profile	Получение текущего пользователя
🧝 Characters	Просмотр и выбор персонажей пользователя
🏠 Home	Главный экран, стартовое меню и пользовательские действия
🎮 Game	Запуск Phaser-клиента и управление игровыми сценами
🗺 Location	Отрисовка карты, сущностей и точки взаимодействия
🧭 Movement	Клиентское движение, курсор, pathfinding и сетевые запросы на перемещение
⚔️ Combat	Атаки, навыки, AOE, HP bar и боевые события
🎒 Bag / Equipment	Отображение предметов, слотов сумки и экипировки
📜 Quest	Список квестов и квестовые маркеры
💬 Chat	Игровой чат и сообщения в realtime
⏱ Time Sync / Network	Синхронизация времени, ping/pong и сетевые статусы

🏗 Архитектура

Проект условно разделен на два слоя:

• app / pages / widgets / features / shared - React-слой приложения, UI, роутинг, формы, GraphQL-запросы и общая инфраструктура
• features/game - игровой runtime на Phaser: сцены, сетевые сервисы, рендереры, игровые типы и клиентские use-case'ы

Общий поток выглядит так:

Player
  │
  ├── React UI
  │     ├── auth forms
  │     ├── home screen
  │     ├── characters modal
  │     └── Apollo GraphQL operations
  │
  └── Phaser Game Runtime
        ├── Socket.IO network layer
        ├── scenes / renderers / services
        ├── in-memory client state
        └── realtime world sync with SkyRift Server

Что важно в текущей структуре:

• GraphQL используется для auth и загрузки пользовательских данных
• Socket.IO используется для живого игрового взаимодействия
• Phaser отвечает за игровой цикл, сцены, сущности и визуализацию мира
• часть состояния живет в React, а часть - внутри игрового runtime и сетевых сервисов
• типы GraphQL и операций генерируются автоматически через codegen

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

src
├─ app
│  ├─ providers
│  └─ routes
├─ assets
├─ features
│  ├─ auth
│  ├─ characters-modal
│  ├─ game
│  ├─ home-menu-modal
│  ├─ profile
│  ├─ sound-toggle
│  └─ user-actions
├─ pages
├─ shared
│  ├─ api
│  ├─ components
│  ├─ constants
│  ├─ graphql
│  ├─ hooks
│  ├─ lib
│  └─ types
└─ widgets
   └─ home

Внутри features/game находятся основные игровые подсистемы:

features/game
├─ application
├─ components
├─ infrastructure
├─ lib
├─ scenes
├─ services
├─ shared
└─ index.ts

🔌 API и realtime

GraphQL API

Клиент работает с GraphQL endpoint:

${VITE_API_URL}/graphql

В проекте уже используются операции для:

• signUp
• signIn
• logout
• getCurrentUser
• findUserCharacters
• findLocationById

GraphQL-операции лежат рядом с feature-модулями, а TypeScript-типы для них генерируются через GraphQL Code Generator.

WebSocket gateway

Realtime-взаимодействие идет через Socket.IO namespace:

${VITE_API_URL}/game

Сокет-слой используется для игровых событий, например:

• входа персонажа в мир
• перемещения
• атаки и применения навыков
• обновления сущностей вокруг игрока
• чата
• ping/pong и сетевой синхронизации
• дисконнектов и ошибок игровой сессии

⚡ Quick Start

1. Установка зависимостей

npm install

2. Подготовка окружения

Создайте .env и укажите адрес backend-сервера:

VITE_API_URL=http://localhost:3001

3. Запуск dev-сервера

npm run dev

После запуска клиент обычно будет доступен по адресу:

• Frontend: http://localhost:5173
• GraphQL API: http://localhost:3001/graphql
• WebSocket namespace: ws://localhost:3001/game

🛠 Скрипты

Основные npm-скрипты проекта:

npm run dev
npm run build
npm run preview

npm run lint

npm run codegen
npm run codegen:watch

💡 Заметки

• клиент рассчитан на работу в связке с отдельным backend-сервером SkyRift
• базовый адрес API и сокетов задается через VITE_API_URL
• игровой рендеринг и большая часть realtime-логики находятся в src/features/game
• ассеты персонажей, мобов, предметов и карт лежат в public
• часть данных UI живет в React, а часть runtime-состояния поддерживается внутри Phaser-сцен и игровых сервисов

🚀 Статус

Проект находится в стадии активной разработки и представляет собой клиентскую основу для realtime RPG-игры SkyRift.