PvPBattle.tsx

Обзор файла

PvPBattle.tsx — это React-компонент, реализующий интерфейс и логику PvP-сражений (player versus player) в игровом приложении. Основная задача файла — предоставить игроку возможность искать соперников, проводить сражения и получать результаты с изменениями рейтинга, вознаграждением в MANA и опытом.

Компонент управляет состояниями поиска соперника, текущего сражения и отображает статистику игрока и противника. В нем также реализована имитация матчмейкинга и исхода боя с учетом рейтинга игроков для более реалистичной вероятности победы.

Подробное описание

Интерфейсы

`Opponent`

Определяет структуру объекта соперника.

Свойство	Тип	Описание
id	string	Уникальный идентификатор соперника
name	string	Имя соперника
level	number	Уровень соперника
rating	number	Рейтинг соперника
wins	number	Количество побед соперника
losses	number	Количество поражений соперника
avatar	string	Эмодзи-аватар соперника

`BattleResult`

Определяет структуру результата боя.

Свойство	Тип	Описание
won	boolean	Флаг победы (true - победа, false - поражение)
opponent	Opponent	Информация о сопернике
ratingChange	number	Изменение рейтинга после боя
manaReward	number	Полученное количество MANA
experienceGained	number	Полученный опыт

Основной компонент: `PvPBattle`

React-функциональный компонент, реализующий интерфейс PvP-сражений.

Используемые хуки и состояния

Состояние	Тип	Описание
`player`	из useGame()	Объект текущего игрока
`performAction`	из useGame()	Функция для отправки действий в игру
`isLoading`	из useGame()	Флаг загрузки
`isSearching`	boolean	Флаг поиска соперника
`currentOpponent`	`Opponent	null`
`battleInProgress`	boolean	Флаг сражения
`battleResult`	`BattleResult	null`
`searchTime`	number	Время поиска соперника в секундах

Вспомогательные функции

`startMatchmaking()`

Запускает процесс поиска соперника.

Условия запуска: игрок должен быть подключен и иметь минимум 50 MANA.
Логика:
- Устанавливает флаг поиска в true, сбрасывает таймер поиска и результат боя.
- Через 2-5 секунд (рандомно) выбирает случайного соперника из списка и останавливает поиск.

Пример использования:
startMatchmaking();

`startBattle()`

Запускает сражение с текущим соперником.

Условия запуска: должен быть выбран соперник и игрок должен быть подключен.
Логика:
- Устанавливает флаг боя в true.
- Через 3-5 секунд (рандомно) вычисляет вероятность победы с поправкой на разницу рейтингов, исход боя, награды и опыт.
- Обновляет состояние результата боя.
- Отправляет результат боя в игровую систему через performAction.
Алгоритм расчёта шансов победы:
- Базовый шанс = 50%.
- Корректировка = (рейтинг игрока - рейтинг соперника) / 1000.
- Итоговый шанс ограничен от 10% до 90%.
Награды:
- При победе: рейтинг + значение, MANA = 150 + 10 * уровень соперника, опыт = 100 + 5 * уровень соперника.
- При поражении: рейтинг снижается, MANA не дается, опыт = 25.

Пример использования:
await startBattle();

`resetBattle()`

Сбрасывает текущее состояние боя и соперника, возвращая пользователя к начальному экрану.

Взаимодействие с другими частями системы

Провайдер GameProvider:
Компонент использует хук useGame из провайдера, который предоставляет данные игрока (статистика, MANA), функцию отправки действий performAction и флаг загрузки isLoading. Это связывает PvP-интерфейс с основной игровой логикой приложения.
Иконки из lucide-react:
Для визуального оформления иконки меча, щита, трофея и др. используются из библиотеки lucide-react.
Стилизация:
Используются CSS-классы, предположительно из TailwindCSS или подобного фреймворка.

Структура пользовательского интерфейса

Статистика игрока: рейтинг, победы, поражения, процент побед.
Интерфейс поиска соперника: кнопка запуска матчмейкинга, отображение времени поиска.
Экран найденного соперника: показ игрока и противника с кнопками "Начать бой" и "Найти другого".
Экран боя: индикация процесса сражения.
Экран результата: информация о победе/поражении, наградах и изменениях рейтинга.

Пример использования компонента

import { PvPBattle } from './PvPBattle';

function GameScreen() {
  return (
    <div>
      <PvPBattle />
    </div>
  );
}

Важные детали реализации

Имитация времени и вероятностей:
Для демонстрации используется setTimeout с рандомизацией времени, что имитирует задержки в поиске и бою.
Учёт рейтинга:
Вероятность победы зависит от разницы рейтингов, что обеспечивает баланс при подборе соперников.
Использование хуков React:
Для отслеживания времени поиска используется useEffect с интервалом, который сбрасывается при окончании поиска.
Обработка состояния:
Используются несколько локальных состояний для управления разными этапами PvP-сражения.

Визуализация структуры компонента

classDiagram
    class PvPBattle {
        -player: Player | null
        -currentOpponent: Opponent | null
        -battleResult: BattleResult | null
        -isSearching: boolean
        -battleInProgress: boolean
        -searchTime: number
        +startMatchmaking()
        +startBattle()
        +resetBattle()
        +render()
    }

    class Opponent {
        +id: string
        +name: string
        +level: number
        +rating: number
        +wins: number
        +losses: number
        +avatar: string
    }

    class BattleResult {
        +won: boolean
        +opponent: Opponent
        +ratingChange: number
        +manaReward: number
        +experienceGained: number
    }

    PvPBattle --> Opponent : currentOpponent
    PvPBattle --> BattleResult : battleResult

Итог

PvPBattle.tsx — ключевой UI-компонент для проведения PvP-сражений в игре, с полнофункциональным управлением поиском соперников, симуляцией боёв, отображением статистики и результатами. Он глубоко интегрирован с провайдером игры для получения данных пользователя и отправки действий, обеспечивая полноценный опыт PvP-боя.