BattleResultPage.tsx

Обзор

BattleResultPage.tsx — это React-компонент, предназначенный для отображения итогов завершившейся битвы в игре с элементалями. Компонент визуализирует подробную статистику боя, включая исход (победа, поражение или ничья), изменение ресурсов игрока (например, мана), серию побед, а также детальный боевой лог с выбранными стихиями и использованными элементалями.

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

Описание компонента

BattleResultPage

Назначение

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

Параметры (Props)

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

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

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

<BattleResultPage
  gameState={currentGameState}
  onReturnToMenu={() => setView('menu')}
/>

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

• Компонент получает из gameState три ключевых объекта: player, currentOpponent и battleLog.

• При отсутствии данных о логе боя или оппоненте компонент не отображается.

• Определяется исход боя через battleLog.winner с возможными значениями: 'player', 'opponent' или ничья.

• Информация о выбранных стихиях и элементалях извлекается с помощью функции getElementalData из модуля gameLogic.

• Стихии и элементали отображаются с соответствующими эмодзи и цветами, определёнными в константе ELEMENTS.

• Визуальная стилизация результата зависит от результата боя: победа (victory), поражение (defeat) или ничья (draw).

• Отображается статистика с изменением маны, новым итоговым значением и текущей серией побед игрока.

• Подробный боевой журнал включает:

  • Сравнение выбранных стихий (с описанием результата столкновения).

  • Использованные элементали с их защитой (процент защиты и эмодзи).

  • Итоговые расчёты (ставка, сэкономленная защита и итоговое изменение маны).

• Кнопка "⚔️ Battle Again" вызывает функцию onReturnToMenu для перехода к повторному бою или меню.

Структура компонента и ключевые части

Основные части интерфейса:

1. Заголовок результата — отображает итог боя (Победа, Поражение или Ничья) с подходящей иконкой.

2. Статистика боя — изменение маны, новый итоговый баланс и серия побед.

3. Кнопка повторного боя — для возврата в меню или начала нового поединка.

4. Боевый журнал — подробное разбиение по:

   • Элементной битве (стихии игрока и оппонента).

   • Использованным элементалям с их уровнем защиты.

   • Финальным вычислениям изменений ресурсов с учётом ставок и защиты.

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

• gameLogic.ts — источник бизнес-логики: содержит константы ELEMENTS, функцию getElementalData и логику вычисления результатов боя.

• BattleComponent.tsx — компонент, из которого происходит переход после завершения боя к отображению результатов.

• BattleAnimationPixi.tsx — компонент, отвечающий за анимацию боя; после завершения анимации передает управление отображению результатов.

• gameState — глобальное состояние игры, передаваемое через пропсы, в котором содержатся данные о текущем игроке, сопернике и логе боя.

Таким образом, BattleResultPage — завершающий этап отображения боевого процесса, предоставляющий детальную обратную связь игроку.

Пример ключевого фрагмента кода

const isVictory = battleLog.winner === 'player';
const isDefeat = battleLog.winner === 'opponent';

return (
  <div className='results-title'>
    {isVictory ? 'Victory!' : isDefeat ? 'Defeat!' : 'Draw!'}
  </div>
);

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

classDiagram
    class BattleResultPage {
        +gameState: GameState
        +onReturnToMenu(): void
        +render()
    }
    BattleResultPage o-- GameState : gameState
    class GameState {
        +player
        +currentOpponent
        +battleLog
    }
    class BattleLog {
        +winner: 'player'|'opponent'|'draw'
        +playerElement: string
        +opponentElement: string
        +playerElemental: string|null
        +opponentElemental: string|null
        +baseWager: number
        +finalChange: number
        +protectionSaved: number
    }
    BattleResultPage ..> getElementalData : uses
    BattleResultPage ..> ELEMENTS : uses

Итог

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

Диаграмма процесса отображения результатов

flowchart TD
    BattleEnd[Завершение боя]
    FetchData[Получение данных боя из gameState]
    CheckData{Данные боя доступны?}
    RenderResult[Отрисовка результата боя]
    ShowStats[Отображение статистики и ресурсов]
    ShowBattleLog[Отображение детального лога боя]
    UserAction[Действия пользователя]
    ReturnToMenu[Возврат в меню/выбор боя]

    BattleEnd --> FetchData --> CheckData
    CheckData -->|Да| RenderResult
    CheckData -->|Нет| UserAction
    RenderResult --> ShowStats --> ShowBattleLog --> UserAction
    UserAction --> ReturnToMenu