RelayStatusBar.tsx

Обзор

Файл RelayStatusBar.tsx содержит React-компонент RelayStatusBar, который отвечает за отображение статус-бара симулятора реле в пользовательском интерфейсе. Этот статус-бар предоставляет пользователю визуальную информацию о текущем состоянии симуляции, включая количество завершённых и ожидающих сообщений реле, а также количество активных валидаторов в сети. Компонент активно используется только в режиме симуляции и скрывается, если этот режим не активен.

Подробное описание компонентов и функций

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

export function RelayStatusBar()

Назначение

Отображает статусный бар с информацией о симуляции реле, включая:

Количество завершённых действий (completed messages).
Количество ожидающих обработки сообщений (pending or processing messages).
Количество активных валидаторов сети.
Индикаторы текущих стадий обработки сообщений.

Используемые данные (из хука `useGame`)

isSimulationMode: boolean — флаг, указывающий, активен ли режим симуляции.
relayMessages: Array<{ status: string }> — массив сообщений реле с их статусами.
networkStatus: { activeValidators: number } — информация о сети, включая число активных валидаторов.

Логика работы

Если режим симуляции неактивен (isSimulationMode === false), компонент не рендерится (return null).
Фильтрует сообщения реле по статусам:
- completedMessages — сообщения со статусом 'completed'.
- pendingMessages — сообщения со статусом 'pending' или 'processing'.
Получает количество активных валидаторов из networkStatus.
Отображает статус-бар с иконками и числовыми показателями.
Если есть ожидающие сообщения (pendingMessages.length > 0), отображает визуальный индикатор стадий обработки:
- Action Received (получено действие)
- Validation (валидация)
- Consensus (консенсус)
- Settlement (завершение)

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

JSX-элемент, представляющий визуальный статус-бар, либо null если не активен режим симуляции.

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

import { RelayStatusBar } from './RelayStatusBar';

function App() {
  return (
    <>
      {/* Другие компоненты приложения */}
      <RelayStatusBar />
    </>
  );
}

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

Используется React-функциональный компонент с хуком useGame для доступа к состоянию симуляции и сети.
Компонент статично закреплен внизу экрана (fixed bottom-0 left-0 right-0), что обеспечивает его постоянную видимость.
Для иконок используется библиотека lucide-react (иконки Server, Zap, Clock, Users и др.) для визуальной идентификации элементов.
Цветовые индикаторы и анимации (animate-pulse) применяются для интуитивного отображения активности и этапов обработки сообщений.
Структура JSX разделена на логические блоки: информация о симуляторе, статистика по сообщениям и валидаторам, а также индикаторы этапов обработки.

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

GameProvider: Хук useGame импортируется из ../providers/GameProvider и предоставляет необходимое состояние симуляции и сети. Это ключевой источник данных для компонента.
UI компоненты и стили: Используются Tailwind CSS классы для стилизации, что предполагает наличие Tailwind в проекте.
Иконки: Библиотека lucide-react используется для визуального оформления.

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

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

componentDiagram
    component RelayStatusBar {
        +useGame()
        +renderStatusBar()
    }

    RelayStatusBar --> "useGame()"
    RelayStatusBar --> "relayMessages: array"
    RelayStatusBar --> "networkStatus: object"
    RelayStatusBar --> "renderStatusBar()"

Краткий итог

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