GameLayout.tsx

Обзор

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

Компонент интегрируется с контекстом игры через хук useGame, предоставляющий данные о текущем состоянии подключения, ошибках и режимах работы (например, симуляция). В зависимости от этих данных, GameLayout отвечает за отображение соответствующих UI-компонентов: индикатора сети, уведомлений о статусе подключения, ошибок и офлайн-режима.

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

GameLayout

function GameLayout({ children }: GameLayoutProps): JSX.Element

• Описание: Главный функциональный компонент, формирующий структуру страницы игры.

• Параметры:

  • children: React.ReactNode — дочерние элементы, которые будут отображены как основное содержимое страницы.

• Возвращаемое значение: JSX-элемент, рендерящий лейаут игры с навигацией, статусом сети, основным контентом и уведомлениями.

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

  <GameLayout>
    <GameBoard />
  </GameLayout>
  

Внутренние состояния и логика

• Используется хук useGame() из GameProvider для получения состояния игры:

  • isOffline: булево, указывает, что игра в офлайн-режиме.

  • error: объект ошибки или null.

  • isConnected: булево, соединение с сервером активно.

  • isLoading: булево, идет процесс соединения.

  • connectionStatus: строка, текущее состояние соединения (connecting, connected, error, disconnected).

  • lastUpdate: timestamp последнего успешного обновления.

  • retryConnection: функция для повторного подключения.

  • clearError: функция для очистки ошибки.

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

• Внутреннее состояние showRetryMechanism управляет видимостью компонента RetryMechanism.

Логика отображения

1. Показ RetryMechanism
   При наличии ошибки или статусе соединения error/disconnected отображается механизм повторного подключения (RetryMechanism).

2. Офлайн-режим
   При isOffline === true и отсутствии симуляции отображается компонент OfflineMode с кнопкой повтора подключения.

3. Основной интерфейс
   Включает:

   • Навигационную панель (Navbar).

   • Индикатор статуса сети (NetworkStatusIndicator).

   • Основное содержимое (children).

   • Механизм повторного подключения (RetryMechanism).

   • Тосты с информацией о статусе подключения (подключение, успешное соединение, симуляция).

   • Статус-бар реле (RelayStatusBar).

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

• ErrorBoundary — оборачивает лейаут, перехватывая ошибки в дереве компонентов.

• OfflineMode — UI для офлайн-режима с кнопкой повтора.

• RetryMechanism — компонент с логикой и UI повторного подключения с ограничением по количеству попыток и задержкой.

• NetworkStatusIndicator — отображает текущее состояние сети (подключено, ошибка, загрузка).

• RelayStatusBar — отображает статус релей-сервиса.

• Navbar — навигационная панель.

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

• Используется useEffect для слежения за изменениями ошибок и статуса подключения, чтобы переключать видимость RetryMechanism.

• Отображение тостов с разным цветом и анимацией в зависимости от состояния:

  • Синий индикатор — подключение или симуляция.

  • Зеленый индикатор — успешное подключение.

• Механизм повторных попыток ограничен 5 попытками и задержкой 3 секунды (maxRetries=5, retryDelay=3000).

• Офлайн-режим отключает другие UI элементы, кроме OfflineMode.

• В симуляционном режиме некоторые элементы считаются всегда подключёнными (isConnected || isSimulationMode).

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

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

• Компоненты UI (Navbar, NetworkStatusIndicator, RelayStatusBar, OfflineMode, RetryMechanism, ErrorBoundary) — составляют визуальную часть лейаута.

• Система управления ошибками и соединением — через retryConnection, clearError и connectionStatus обеспечивается реакция на сетевые события.

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

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

componentDiagram
    GameLayout <|-- Navbar
    GameLayout <|-- NetworkStatusIndicator
    GameLayout <|-- RetryMechanism
    GameLayout <|-- OfflineMode
    GameLayout <|-- RelayStatusBar
    GameLayout <|-- ErrorBoundary

    GameLayout o-- "useGame" GameProvider

    GameLayout : manages
    GameLayout : - showRetryMechanism (state)
    GameLayout : - monitors connectionStatus, error
    GameLayout : - renders children (game content)

    RetryMechanism : onRetry
    RetryMechanism : onClose
    NetworkStatusIndicator : shows connection info
    OfflineMode : shows offline UI with retry button
    RelayStatusBar : shows relay service status

Итог

GameLayout.tsx — ключевой компонент, который отвечает за организацию игрового интерфейса и управление состояниями сетевого подключения, ошибок и офлайн-режима. Его гибкая структура и интеграция с контекстом игры позволяют динамически изменять UI в зависимости от текущих условий, обеспечивая пользователю информативный и удобный интерфейс.

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