BattleComponent.tsx

Обзор

Файл BattleComponent.tsx реализует ключевой React-компонент, управляющий интерфейсом выбора и подготовки к пошаговой битве в игре с элементалями. Он отвечает за последовательные этапы:

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

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

Описание и разбор компонентов

BattleComponentProps

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

Свойство

Тип

Описание

gameState

GameState

Текущее состояние игры, включая данные игрока, текущую фазу и коллекции элементалей.

onSelectLocation

(location: Location) => void

Обработчик выбора локации боя.

onSelectElement

(element: Element) => void

Обработчик выбора элемента (стихии).

onSelectElemental

[(elemental: ElementalRarity \

null) => void](/projects/320/74719)

onReturnToLocationSelection

() => void

Возврат к выбору локации (этап назад).

onReturnToElementSelection

() => void

Возврат к выбору элемента (этап назад).

onStartMatchmaking

() => void

Запуск поиска соперника (используется для совместимости).

onStartBattle

() => void

Запуск боя после выбора элементаля.

onReturnToMenu

() => void

Возврат в главное меню.

BattleComponent (React.FC)

Основной React-функциональный компонент, управляющий всеми тремя фазами выбора: локации, элемента, элементаля.

Локальное состояние (useState)

Важные эффекты (useEffect)

Функция handleKeyDown

Универсальный обработчик клавиатурной навигации для списков с поддержкой стрелок, выбора, возврата и отмены. Обеспечивает:

Опционально блокирует смену фокуса во время туториала.

Основные методы рендера фаз

1. renderLocationSelection()

Отображает выбор локации боя:

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

{gamePhase === 'menu' && renderLocationSelection()}

2. renderElementSelection()

Отображает выбор элемента (стихии):

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

{gamePhase === 'elementSelection' && renderElementSelection()}

3. renderElementalSelection()

Отображает выбор конкретного элементаля из коллекции игрока с учетом выбранного элемента:

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

{gamePhase === 'elementalSelection' && renderElementalSelection()}

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

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

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

Пример выбора локации

<button
  disabled={!canAffordLocation(player.mana, key as Location)}
  onClick={() => canAffordLocation(player.mana, key as Location) && onSelectLocation(key as Location)}
  aria-label={`${location.name} location, ${location.mana} mana cost${!isAffordable ? ', insufficient mana' : ''}`}
>
  {location.emoji} {location.name} — {location.mana} Маны
  {!isAffordable && <small>Нужно {location.mana - player.mana} маны</small>}
</button>

Пример выбора элементаля с учётом кулдауна

<button
  disabled={isOnCooldown && !showFocusOutlines}
  onClick={() => {
    if (!isOnCooldown || showFocusOutlines) {
      onSelectElemental(elemental.rarity);
      setTimeout(() => onStartBattle(), 100);
    }
  }}
  aria-label={`${elementalData.name}, ${elementalData.rarity} редкости, уровень ${elemental.level}, защита ${protection}%, ${isOnCooldown ? `на кулдауне ${cooldownText}` : 'нажмите для начала боя'}`}
>
  {/* Содержание карточки элементаля */}
</button>

Mermaid диаграмма — структура компонента

classDiagram
    class BattleComponent {
        - gameState: GameState
        - focusedIndex: number
        - showTooltip: string | null
        - cooldownUpdateTrigger: number
        - showFocusOutlines: boolean
        - staticCooldownSnapshot: Record<string, boolean>
        + renderLocationSelection()
        + renderElementSelection()
        + renderElementalSelection()
        + handleKeyDown(e: KeyboardEvent, items: T[], onSelect: (item: T) => void, onBack?: () => void)
        + getElementDescription(element: Element): string
        + getLocationTooltip(location: Location): string
        + useEffect() — несколько эффектов для управления состоянием и событиями
        + JSX.Render()
    }

Итог

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