page.tsx

Обзор

Файл page.tsx представляет собой React-компонент страницы демо-версии Web3 игры с поддержкой gasless-транзакций (транзакции без оплаты газа). Основная цель файла — предоставить пользователю интуитивно понятный интерфейс с несколькими вкладками, каждая из которых демонстрирует различные функциональные возможности игры, такие как PvP-бои, крафтинг, кроссчейн-трансферы, рыночные операции и т.д.

Компонент автоматически подключает демо-игрока при загрузке и позволяет переключаться между режимами работы: реальным (live demo) и симуляционным (simulation mode), где последняя опция имитирует работу реле (Relay Simulator) для демонстрации процесса обработки транзакций.

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

Описание

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

Используемые хуки и состояния

• useGame():
  Кастомный хук для доступа к игровому контексту. Извлекает:

  • connectPlayer(playerId: string): Функция подключения игрока по ID.

  • isConnected: boolean: Флаг состояния подключения игрока.

  • isSimulationMode: boolean: Флаг, активирован ли режим симуляции.

  • forceSimulationMode(): Функция принудительного включения режима симуляции.

• useState<'overview' | 'pvp' | 'crafting' | 'quests' | 'marketplace' | 'crosschain' | 'validators' | 'relay'>:
  Состояние для выбора активной вкладки интерфейса.

• useEffect:
  Автоматическое подключение демо-игрока при загрузке страницы, если игрок не подключен и не включён режим симуляции.

Логика компонента

• Автоматическое подключение: При монтировании компонента, если игрок не подключён и не используется симуляция, вызывается connectPlayer с фиксированным ID demo_player_001.

• Отображение загрузки: Пока происходит подключение, показывается спиннер и сообщение "Connecting to demo...".

• Навигация по вкладкам: Список вкладок с иконками из библиотеки lucide-react позволяет переключать контент страницы.

• Отображение контента вкладок:

  • overview — обзор с информацией о статусе игрока и действиях, а также последние события.

  • pvp — компонент PvP-боя.

  • crafting — система крафтинга.

  • quests — заглушка с информацией о квестах.

  • marketplace — ссылка на маркетплейс с кратким описанием.

  • crosschain — трансфер между цепочками.

  • validators — дашборд валидаторов.

  • relay — симулятор реле с индикатором активности.

• Режим симуляции:
  Кнопка вкл/выкл симуляции реле, индикаторы статуса режима и пояснения, что происходит при симуляции.

• Пояснение о gasless-играх:
  Отдельный компонент GaslessExplanation выводится при активной вкладке "overview", а при других вкладках показывается блок с преимуществами gasless-гейминга.

Используемые дочерние компоненты

• PlayerStats — отображение статистики игрока.

• GameActions — список действий, доступных игроку.

• RecentActivity — недавняя активность игрока.

• GaslessExplanation — объяснение концепции gasless-транзакций.

• PvPBattle — PvP-арена.

• CraftingSystem — система крафтинга.

• ValidatorDashboard — панель управления валидаторами.

• OnChainNotifications — уведомления из блокчейна.

• CrossChainTransfer — интерфейс кроссчейн-трансферов.

• RelaySimulator — симулятор реле с параметром isActive.

Функции и методы

В файле отсутствуют отдельные функции и классы, кроме React-компонента DemoPage.

Параметры компонента DemoPage

Компонент является "по умолчанию экспортируемым" компонентом без входящих параметров (props). Все данные и методы управления берутся из контекста useGame.

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

React-элемент, который рендерит:

• Статус подключения или загрузку.

• Заголовок и описание демо-игры.

• Кнопку переключения режима симуляции.

• Навигационные вкладки.

• Контент соответствующей вкладки.

• Информационные блоки о преимуществах gasless-игры.

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

import DemoPage from './page.tsx';

function App() {
  return (
    <div>
      <DemoPage />
    </div>
  );
}

Компонент DemoPage предназначен для использования как основная страница демо-версии приложения.

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

• Используется "use client"; — что означает, что компонент рендерится на клиенте и может использовать хуки React.

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

• Режим симуляции позволяет демонстрировать работу backend-реле без реального сетевого взаимодействия.

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

• Контейнерные CSS-классы (Tailwind CSS) обеспечивают адаптивную верстку и стилизацию.

• Большая часть контента разбита на отдельные компоненты для поддерживаемости и переиспользования.

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

• useGame (GameProvider): Предоставляет данные и методы управления состоянием игрока и режимами.

• Дочерние компоненты: Каждый компонент (например, PvPBattle, CraftingSystem, ValidatorDashboard) реализует отдельные функциональные блоки игры, расширяя возможности интерфейса.

• Маршрутизация: Вкладка "Marketplace" направляет пользователя на отдельную страницу /marketplace.

• Relay Simulator: Имитирует работу backend-сервиса Symbiotic Relay для обработки транзакций.

• OnChainNotifications: Подключается к уведомлениям из блокчейна и отображает их.

Таким образом, page.tsx служит центральным узлом визуализации и управления демо-версией игры, связывая UI и логику взаимодействия.

Диаграмма компонентов (Component Diagram)

componentDiagram
    DemoPage <|-- PlayerStats
    DemoPage <|-- GameActions
    DemoPage <|-- RecentActivity
    DemoPage <|-- GaslessExplanation
    DemoPage <|-- PvPBattle
    DemoPage <|-- CraftingSystem
    DemoPage <|-- ValidatorDashboard
    DemoPage <|-- OnChainNotifications
    DemoPage <|-- CrossChainTransfer
    DemoPage <|-- RelaySimulator
    DemoPage --> useGame : useGame() hook

Итог

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