BattleAnimationPixi.tsx

Обзор

Компонент BattleAnimationPixi.tsx реализует визуализацию боя между игроком и оппонентом с использованием библиотеки PixiJS для рендеринга 2D-графики и React для управления состоянием и UI. Он отвечает за последовательное отображение анимаций различных фаз боя:

Вступление (intro)
Показ карт с выбранными стихиями (cards)
Анимация появления и сражения элементалей (elementals)
Отображение результата боя (result)

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

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

Подробное описание компонентов и функций

BattleAnimationPixiProps

Интерфейс пропсов компонента:

Свойство	Тип	Описание
`gameState`	`GameState`	Текущее состояние игры, содержит данные игроков, выбранных элементалей и др.
`opponentElement`	`Element`	Стихия оппонента (fire, water, earth)
`onAnimationComplete`	`() => void`	Колбек, вызываемый по окончании полной анимации боя
`battleResult?`	`'player'	'opponent'

BattleAnimationPixi (React.FunctionComponent)

Основной функциональный React-компонент, который:

Инициализирует и управляет приложением PixiJS (создание канваса, частиц).
Управляет фазами анимации и подфазами элементалей с помощью React useState и useEffect.
Отслеживает тип устройства (isMobile), чтобы оптимизировать производительность и стили.
Отображает UI для каждой фазы боя, включая карточки стихий, анимацию элементалей и финальные результаты.
Использует CSS-анимации для плавных визуальных переходов и эффектов.
Включает в себя вложенный компонент UserCard для отображения карты игрока или оппонента.
Интегрируется с дочерним компонентом BattleEffects для отображения стихийных эффектов.

Состояния (State)

Название	Тип	Описание
`phase`	`'intro'	'cards'
`elementalPhase`	`'player'	'opponent'
`isMobile`	`boolean`	Флаг, указывающий на мобильное устройство (ширина экрана < 768px)

useEffect - Инициализация PixiJS

Создает экземпляр PIXI.Application с размерами окна и заданным фоном.
Добавляет канвас в DOM контейнер.
Инициализирует контейнер частиц и добавляет в сцену.
Создает частицы (белые квадраты) с параметрами размера, положения и прозрачности.
Запускает анимацию частиц, которая поднимает их вверх и меняет прозрачность по синусоиде.
Уничтожает приложение PIXI при размонтировании компонента.

useEffect - Обработка изменения размера окна

Отслеживает изменение ширины окна для корректного определения isMobile, что влияет на производительность и стили.

useEffect - Таймлайн анимации фаз

Определяет последовательные действия через setTimeout для смены фаз:
- Вступление (intro)
- Показ карт (cards)
- Появление и бой элементалей (elementals) (если есть выбранные элементали у обоих)
- Итоги боя (result)
- Вызов колбека onAnimationComplete
Очистка таймеров при размонтировании или изменении зависимостей.

useEffect - Таймлайн подфаз элементалей

В фазе elementals происходит последовательное переключение подфаз:

Появление элементаля игрока (player)
Появление элементаля оппонента (opponent)
Анимация боя (battle)
Объявление победителя (winner)

Если элементали отсутствуют у одной из сторон, подфазы не запускаются.

UserCard (вложенный компонент)

Отвечает за визуализацию карточки с выбранной стихией:

Принимает пропсы:
- element: Element — стихия (fire, water, earth)
- isAnimating?: boolean — включает анимацию свечения карты
Отображает эмодзи, название стихии и градиентный фон с цветом стихии.
Визуальные эффекты включают свечение, плавное появление.
Пример использования:

<UserCard element="fire" isAnimating={true} />

Основной JSX разметки

В зависимости от текущей фазы (phase), компонент отображает:

intro — заголовок "⚔️ BATTLE ⚔️" с описанием.
cards — карты игрока и оппонента с анимацией входа.
elementals — карточки элементалей игрока и оппонента с анимацией появления, эффектами боя и конечным результатом.
result — итог боя, с подсветкой победителя, значками и пояснительным текстом.

Также выводятся:

Канвас PixiJS с частицами на заднем плане.
Компонент BattleEffects с эффектами стихий во время фазы elementals.
Анимированные магические круги и градиентный фон.

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

Использование PixiJS для создания эффекта "магических частиц" на фоне с оптимизацией под мобильные устройства (50 вместо 100 частиц).
Управление фазами и подфазами анимации через таймеры setTimeout и React состояние.
Сложная стилизация карточек элементалей с подсветкой редкости (common, rare, epic, immortal).
Обработка ошибок загрузки изображений элементалей: при ошибке скрывается картинка и показывается эмодзи стихии.
Анимации CSS обеспечивают плавную смену состояний и визуальные эффекты (пульсация, вращение, масштабирование).
Использование React ref для хранения ссылок на PIXI-приложение и контейнер частиц для управления их жизненным циклом.

Взаимодействие с остальными частями системы

Получает от предка (BattleComponent) текущее состояние игры (gameState), выбранные элементали и результат боя.
Вызывает колбек onAnimationComplete, чтобы сообщить о завершении всей анимации, что запускает переход к экрану результатов.
Использует дочерний компонент BattleEffects для отрисовки специфичных эффектов стихий.
Поддерживает интеграцию с бизнес-логикой, реализованной в gameLogic.ts (через gameState) — не выполняет вычислений, только визуализацию.
Отвечает за промежуточный этап в процессе пошаговой битвы, связывая выбор элементалей и отображение итога.

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

<BattleAnimationPixi
  gameState={currentGameState}
  opponentElement="water"
  battleResult="player"
  onAnimationComplete={() => {
    console.log('Анимация боя завершена');
    // Переход к экрану результатов
  }}
/>

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

classDiagram
    class BattleAnimationPixi {
        -phase: 'intro' | 'cards' | 'elementals' | 'result'
        -elementalPhase: 'player' | 'opponent' | 'battle' | 'winner'
        -isMobile: boolean
        -canvasRef: React.RefObject<HTMLDivElement>
        -appRef: React.RefObject<PIXI.Application | null>
        -particlesRef: React.RefObject<PIXI.Container | null>
        +gameState: GameState
        +opponentElement: Element
        +onAnimationComplete(): void
        +battleResult?: 'player' | 'opponent' | 'draw' | undefined
        +UserCard(element: Element, isAnimating?: boolean)
        +render()
    }

    class BattleEffects {
        +isActive: boolean
        +element: Element
        +render()
    }

    BattleAnimationPixi --> BattleEffects : использует

Заключение

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

Приложение

Mermaid диаграмма процесса анимации боя

flowchart TD
    Start[Запуск анимации боя]
    Intro[Фаза: Вступление]
    Cards[Фаза: Показ карт игроков]
    Elementals[Фаза: Появление элементалей и бой]
    ElementalPlayer[Появление элементаля игрока]
    ElementalOpponent[Появление элементаля оппонента]
    Battle[Анимация боя элементалей]
    Winner[Отображение победителя]
    Result[Финальный результат боя]
    End[Завершение анимации]

    Start --> Intro --> Cards --> Elementals
    Elementals --> ElementalPlayer --> ElementalOpponent --> Battle --> Winner --> Result --> End

Данная диаграмма отражает основные этапы анимации внутри компонента BattleAnimationPixi, показывая последовательность переходов и подфаз внутри показа и боя элементалей.