PlayerStats.tsx

Обзор

Файл PlayerStats.tsx содержит React-компонент PlayerStats, который отвечает за отображение статистики игрока в виде набора визуальных карточек с различными показателями (баланс MANA, уровень, опыт, рейтинг и др.). Компонент использует контекст игрового состояния (useGame) для получения данных о текущем игроке. Если данных нет, компонент не рендерится. Статистика визуализируется с использованием иконок из библиотеки lucide-react, а также снабжена подсказками для некоторых данных.

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

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

Компонент: `PlayerStats`

Описание

Функциональный React-компонент, который выводит статистику текущего игрока. Включает основные игровые показатели и дополнительные блоки с информацией о заработанном и потраченном ресурсе MANA.

Используемые хуки и зависимости

useGame — кастомный хук из контекста игры (GameProvider), возвращает объект с данными игрока.
Иконки из lucide-react: TrendingUp, Trophy, Zap, Package, Target, Star
Компоненты-подсказки: GaslessTransactionTooltip, InstantActionTooltip

Логика и структура

Получение объекта player из контекста игры.
Если player отсутствует — возвращается null (компонент не рендерится).
Формируется массив stats с объектами, каждый из которых содержит:
- label — название показателя.
- value — значение показателя (преобразованное к строке, форматированное).
- icon — компонент иконки.
- color и bgColor — CSS-классы для цвета текста и фона.
Отрисовка заголовка и сетки карточек статистики с использованием данных из stats.
Внизу выводится блок с суммарной информацией о MANA (заработано, потрачено, чистый баланс) с подсказками.

Параметры

Компонент не принимает пропсы, данные берутся из контекста useGame.

Возвращаемое значение

JSX-разметка с визуализацией статистики игрока либо null, если игрок не определён.

Использование

import { PlayerStats } from './PlayerStats';

function GameDashboard() {
  return (
    <div>
      {/* Другие компоненты */}
      <PlayerStats />
    </div>
  );
}

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

Вычисление Win Rate выполняется как доля побед от общего количества партий:
```
Math.round((player.wins / (player.wins + player.losses)) * 100) + '%'
```
Все числовые значения форматируются с помощью toLocaleString() для удобочитаемости.
Используется динамическое применение CSS-классов для цветового оформления карточек.
Подсказки (GaslessTransactionTooltip, InstantActionTooltip) обеспечивают дополнительную информацию о механике безгазовых транзакций.
Использование иконок из lucide-react обеспечивает единообразный стиль иконографики.
Компонент полностью клиентский (директива 'use client').

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

GameProvider — поставляет данные игрока через хук useGame.
GaslessTransactionTooltip, InstantActionTooltip — компоненты подсказок, которые могут использоваться и в других частях UI для пояснения специфических механик.
lucide-react — библиотека иконок, используемая в проекте для визуализации.

Таким образом, PlayerStats является частью пользовательского интерфейса, аккуратно интегрируясь с игровым состоянием и общим дизайном приложения.

Диаграмма структуры компонента PlayerStats

componentDiagram
    component PlayerStats {
      +useGame() : player
      +render() : JSX
      -stats : Array<{label, value, icon, color, bgColor}>
    }

    PlayerStats --> useGame : получает player
    PlayerStats --> "lucide-react icons" : использует иконки
    PlayerStats --> GaslessTransactionTooltip : оборачивает заголовок "Total MANA Earned"
    PlayerStats --> InstantActionTooltip : оборачивает заголовок "Total MANA Spent"

Резюме

Компонент PlayerStats — это чистый, хорошо структурированный React-компонент, предназначенный для отображения ключевой статистики игрока в игровой панели. Он получает данные через контекст, визуализирует их с помощью иконок и стилизованных карточек, а также предоставляет пользователю пояснения через интерактивные подсказки. Компонент легко расширяем и хорошо вписывается в архитектуру React-приложения с использованием современных практик функциональных компонентов и хуков.