GameActions.tsx

Обзор

Компонент GameActions.tsx реализует пользовательский интерфейс для выбора и выполнения различных игровых действий в приложении. Он отображает набор игровых опций с их стоимостью, описаниями, иконками и наградами, а также управляет логикой выполнения выбранного действия с учётом текущего состояния игрока (например, баланса маны и загрузки). Все действия выполняются "газлесс" — без платы за транзакции, что обеспечивается через интеграцию с провайдером GameProvider.

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

Компонент: GameActions

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

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

• useState — для управления локальным состоянием выбранного действия (selectedAction).

• useGame — кастомный хук из GameProvider, предоставляющий:

  • player — объект с данными текущего игрока.

  • performAction — асинхронная функция для запуска игрового действия.

  • isLoading — булево значение, показывающее, выполняется ли сейчас действие.

Основные данные

Массив actions содержит описание доступных игровых действий:

Функция: handleAction(actionId: string): Promise<void>

Асинхронная функция, вызываемая при клике на кнопку действия. Логика:

• Устанавливает состояние выбранного действия для отображения индикатора загрузки.

• В зависимости от actionId запускает соответствующую логику через performAction с разными параметрами:

  • quick_pvp — имитирует PvP-бой с 60% шансом победы, начисляет награды и изменение рейтинга.

  • quick_craft — мгновенно создает случайный предмет из предопределенного списка.

  • marketplace_buy — покупка случайного предмета с рынка из набора.

  • complete_quest — завершение квеста с фиксированными наградами.

• После выполнения сбрасывает состояние выбранного действия.

Параметры

• actionId: string — идентификатор выбранного действия.

Возвращает

• Promise<void> — функция асинхронная, завершает выполнение после обработки действия.

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

// Внутри компонента:
<button onClick={() => handleAction('quick_pvp')}>Quick PvP</button>

Визуальное отображение

• Заголовок с иконкой Zap и подписью "Game Actions".

• Для каждого действия отображается кнопка с:

  • Иконкой действия.

  • Названием и описанием.

  • Стоимостью в MANA (если есть).

  • Наградой.

  • Отключена, если недостаточно маны.

• При выполнении действия кнопка показывает индикатор загрузки (анимированная иконка Clock).

• В случае недостатка маны под кнопкой появляется предупреждение с иконкой AlertCircle.

• Внизу блока — информационный раздел о технологии "Газлесс" с подсказкой ValidatorSecurityTooltip.

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

• Для выбора случайного предмета или результата используется генерация случайного индекса массива через Math.random().

• Логика победы в PvP реализована вероятностно (60% шанс победы).

• Идентификаторы предметов и квестов формируются динамически с использованием текущего времени (Date.now()), чтобы обеспечить уникальность.

• Используются иконки из библиотеки lucide-react для визуального оформления.

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

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

• Использует хук useGame из GameProvider — центрального провайдера состояния игры, который управляет данными игрока и обработкой игровых транзакций.

• Компоненты InstantActionTooltip и ValidatorSecurityTooltip обеспечивают подсказки и дополнительную информацию по UX.

• Вся логика действий делегируется методу performAction, предполагающему взаимодействие с сервером или блокчейн-слоем для подтверждения и записи результата.

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

classDiagram
    class GameActions {
        - player: Player | null
        - selectedAction: string | null
        - isLoading: boolean
        + handleAction(actionId: string): Promise<void>
        + render(): JSX.Element | null
    }

    GameActions ..> useGame : uses
    GameActions ..> useState : uses
    GameActions --> Sword
    GameActions --> Hammer
    GameActions --> ShoppingCart
    GameActions --> Gift
    GameActions --> Zap
    GameActions --> Clock
    GameActions --> CheckCircle
    GameActions --> AlertCircle
    GameActions --> InstantActionTooltip
    GameActions --> ValidatorSecurityTooltip

Итог

Файл GameActions.tsx предоставляет интуитивно понятный и визуально привлекательный интерфейс для запуска различных игровых действий с мгновенным выполнением и прозрачной системой затрат/наград. Его тесная связь с GameProvider и использование современных React-паттернов позволяют легко расширять и интегрировать эту функциональность в более крупное игровое приложение.