NetworkStatusIndicator.tsx

Обзор

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

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

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

Интерфейс `NetworkStatusIndicatorProps`

Определяет свойства, которые принимает компонент:

Свойство	Тип	Обязательное	Описание
`isConnected`	`boolean`	Да	Флаг подключения к серверу (true — подключено)
`isLoading`	`boolean`	Нет	Флаг состояния загрузки/подключения (по умолчанию false)
`error`	`string \	null`	Нет
`lastUpdate`	`number`	Нет	Временная метка последнего обновления статуса (в ms)
`className`	`string`	Нет	Дополнительный CSS класс для стилизации компонента

Функция `NetworkStatusIndicator`

Основной компонент, визуально отображающий сетевой статус и предоставляющий развернутую панель с деталями.

Параметры

Принимает объект с типом NetworkStatusIndicatorProps (см. выше).

Используемые хуки React

useState — для управления состояниями показа подробностей (showDetails) и отображения времени с последнего обновления (timeSinceUpdate).
useEffect — для обновления счетчика времени с последнего обновления статуса каждую секунду.

Логика и поведение

Расчет времени с последнего обновления (timeSinceUpdate)
Используется useEffect, который при получении lastUpdate запускает интервал обновления значения времени, прошедшего с последнего обновления, с форматированием:
- меньше 60 секунд — отображается в секундах (например, "15s ago")
- меньше часа — в минутах (например, "12m ago")
- более часа — в часах (например, "3h ago")
Определение иконки статуса
Метод getStatusIcon возвращает иконку из библиотеки lucide-react в зависимости от состояния:
- Режим симуляции — иконка сервера (Server, синий цвет)
- Загрузка — иконка часов (Clock, желтый цвет, с анимацией пульсации)
- Ошибка — предупреждение (AlertTriangle, красный)
- Подключено — галочка (CheckCircle, зеленый)
- Оффлайн — иконка отсутствия WiFi (WifiOff, красный)
Текст статуса
getStatusText возвращает строку с описанием состояния:
- "Simulation Mode"
- "Connecting..."
- "Connection Error"
- "Connected"
- "Offline"
Цвет текста
getStatusColor возвращает CSS класс цвета текста, соответствующий статусу.
Основной рендер
Компонент выводит кнопку с иконкой, текстом статуса и, если применимо, временем с последнего обновления. При клике на кнопку переключается показ расширенной панели с детальной информацией.
Панель с деталями
- Заголовок "Network Status" и кнопка закрытия.
- Отображение статуса подключения к игровому серверу.
- В случае ошибки — показ сообщения об ошибке.
- Если включен режим симуляции — информация о работе эмулятора реле и статистика по сообщениям (обработанные, ожидающие).
- Информация о Gasless Architecture: статус валидаторной сети, оффчейн обработки и пакетной сверке с индикаторами активности.
- Образовательная заметка, объясняющая преимущества текущего режима (симуляция или gasless).

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

import { NetworkStatusIndicator } from './NetworkStatusIndicator';

function App() {
  const isConnected = true;
  const isLoading = false;
  const error = null;
  const lastUpdate = Date.now() - 45000; // 45 секунд назад

  return (
    <NetworkStatusIndicator
      isConnected={isConnected}
      isLoading={isLoading}
      error={error}
      lastUpdate={lastUpdate}
      className="my-custom-class"
    />
  );
}

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

Используется useGame — кастомный хук из GameProvider, который предоставляет контекст игры, включая флаги isSimulationMode и массив сообщений relayMessages.
Таймер обновления времени с последнего обновления очищается корректно при размонтировании компонента.
Используются утилиты из lucide-react для иконок, что обеспечивает единый стиль иконографики.
Цвета и анимации (например, пульсация) задаются через Tailwind CSS классы.
В панели подробностей аккуратно разделены блоки информации с заголовками и индикаторами, что улучшает читаемость.
Поддерживается переключение между режимом реального подключения и режимом симуляции, что критично для тестирования и демо.

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

GameProvider — компонент, предоставляющий данные состояния игры через контекст. Отсюда берутся данные о режиме симуляции и сообщения реле.
Relay Messages — массив объектов с полями status (например, completed, pending, processing), который используется для отображения статистики в режиме симуляции.
Иконки из lucide-react — визуальное оформление статуса.
Стилизация Tailwind CSS — оформление и анимации.

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

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

componentDiagram
    component NetworkStatusIndicator {
        +props: NetworkStatusIndicatorProps
        +state: showDetails:boolean
        +state: timeSinceUpdate:string
        +useEffect: обновление времени с lastUpdate
        +getStatusIcon(): ReactElement
        +getStatusText(): string
        +getStatusColor(): string
        +render(): JSX.Element
    }
    component useGame {
        +isSimulationMode:boolean
        +relayMessages: array
    }
    NetworkStatusIndicator --> useGame : использует данные из контекста

Если требуется дополнительная помощь с интеграцией или расширением функционала, пожалуйста, обращайтесь.