OfflineMode.tsx

Обзор

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

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

Описание компонентов и функций

Интерфейс OfflineModeProps

interface OfflineModeProps {
  onRetry?: () => void;
}

• onRetry — необязательное свойство, функция обратного вызова, вызываемая при попытке повторного подключения (например, по нажатию кнопки "Try Reconnecting").

Функция-компонент OfflineMode

export function OfflineMode({ onRetry }: OfflineModeProps)

Параметры

• onRetry (опционально): функция, вызываемая для повторной попытки подключения к сети.

Внутреннее состояние

• showDetails (boolean): состояние, управляющее видимостью технических деталей.

• isSimulationMode (boolean): состояние, показывающее, активирован ли режим симуляции реле.

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

JSX-элемент, представляющий интерфейс для офлайн режима.

Описание

Компонент рендерит несколько ключевых блоков:

1. Иконка и заголовок об отключении соединения: визуальное уведомление с иконкой WifiOff и предупреждением.

2. Объяснение архитектуры газлес-игры:

   • Блок с тремя колонками, каждая описывает этапы работы системы:

     • Мгновенная обработка действий off-chain (Zap).

     • Консенсус валидаторов (Users).

     • Финальное подтверждение на блокчейне (Server).

3. Возможности офлайн-демо:

   • Пользователь может тестировать игровые механики, исследовать маркетплейс и наблюдать за сетью валидаторов.

4. Функции симуляции реле:

   • Объяснение возможностей симуляции с указанием основных этапов (обработка в реальном времени, консенсус, финализация, отслеживание статуса).

   • Совет по использованию режима симуляции.

5. Кнопка для показа/скрытия технических деталей.

6. Текстовое описание текущего состояния (симуляция или офлайн-игра).

7. Кнопка повторного подключения, если передан callback onRetry.

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

import { OfflineMode } from './OfflineMode';

function App() {
  const handleRetry = () => {
    // логика повторного подключения
  };

  return (
    <OfflineMode onRetry={handleRetry} />
  );
}

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

• Используется хук React.useState для управления локальным состоянием отображения деталей и режима симуляции.

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

• Верстка построена с использованием Tailwind CSS классов для адаптивного и современного дизайна.

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

• Текст и пояснения ориентированы на облегчение понимания пользователем особенностей газлес-архитектуры и офлайн-режима.

Взаимодействие с системой

• Вход: получает опциональный проп onRetry для управления повторным подключением.

• Выход: визуально информирует пользователя и вызывает onRetry по действию пользователя.

• Предполагается, что этот компонент используется в местах приложения, где критично состояние сети — например, в корневом компоненте или в контейнере, отвечающем за сетевое состояние.

• В случае активации режима симуляции, пользователь перенаправляется в отдельный раздел "Relay Simulator" (упоминается в подсказке), который реализован в другом месте приложения.

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

componentDiagram
    OfflineMode <|-- React.Component
    OfflineMode : +showDetails: boolean (state)
    OfflineMode : +isSimulationMode: boolean (state)
    OfflineMode : +onRetry?: () => void (prop)
    OfflineMode o-- WifiOff : icon
    OfflineMode o-- Zap : icon
    OfflineMode o-- Users : icon
    OfflineMode o-- Server : icon
    OfflineMode o-- Info : icon

Данная диаграмма показывает, что OfflineMode — это функциональный React-компонент с состояниями showDetails и isSimulationMode и опциональным пропом onRetry. Компонент использует несколько иконок из библиотеки lucide-react для визуализации различных разделов интерфейса.

Итог

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