RelaySimulator.tsx

Обзор файла

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

Основная цель — предоставить наглядное и интерактивное представление о том, как в реальной системе происходит обработка и подтверждение игровых действий в распределённой сети валидаторов, включая ключевые этапы валидации и достижения консенсуса.

Подробное описание

Интерфейсы

RelayMessage

Определяет структуру сообщения в реле.

RelaySimulatorProps

Пропсы компонента RelaySimulator.

Компонент RelaySimulator

function RelaySimulator({ isActive, onMessageProcessed }: RelaySimulatorProps): JSX.Element

Описание

Основной компонент, который управляет состояниями симуляции реле и отображает UI с текущими сообщениями, статусами валидаторов и блоков.

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

• messages: RelayMessage[] — массив сообщений, отображаемых в истории обработки.

• isProcessing: boolean — флаг, сигнализирующий о текущей обработке действия.

• currentBlock: number — текущий номер блока, автоматически увеличивается с интервалом.

• validatorStatus: { total: number; active: number; consensus: number; processing: number } — состояние валидаторов.

Основные методы и функции

simulateAction(actionType: string, actionData: any): void

Имитирует поступление и обработку игрового действия.

• Параметры:

  • actionType: string — тип действия, которое симулируется.

  • actionData: any — дополнительные данные действия, используемые в описании.

• Логика:

  1. Проверяет активность симуляции (isActive).

  2. Создаёт сообщение типа 'action' со статусом 'pending' и добавляет его в список.

  3. Последовательно запускает три асинхронных таймаута, имитирующих этапы:

     • Валидация ('validation'),

     • Консенсус ('consensus'),

     • Сеттлмент ('settlement'), с присвоением блока и TX хеша.

  4. Обновляет соответствующие сообщения и статусы.

  5. Вызывает onMessageProcessed при завершении.

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

simulateAction('move', { description: 'Player moves to position (3,4)' });

getMessageIcon(type: string): JSX.Element

Возвращает SVG-иконку, соответствующую типу сообщения.

• 'action' — молния (Zap)

• 'validation' — щит (Shield)

• 'consensus' — группа пользователей (Users)

• 'settlement' — сервер (Server)

• По умолчанию — часы (Clock)

getMessageColor(status: string): string

Возвращает CSS-класс цвета текста, соответствующий статусу сообщения.

• 'completed' — зелёный

• 'processing' — жёлтый

• 'failed' — красный

• По умолчанию — серый

getStatusIcon(status: string): JSX.Element

Возвращает SVG-иконку, отображающую статус сообщения.

• 'completed' — галочка (CheckCircle)

• 'processing' — мигающие часы (Clock с анимацией)

• 'failed' — предупреждение (AlertTriangle)

• По умолчанию — часы (Clock)

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

• Компонент ждёт проп isActive для управления симуляцией.

• Вызывает onMessageProcessed с сообщением сеттлмента, что позволяет внешним компонентам реагировать на завершение обработки.

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

• Отрисовывает данные с помощью иконок из lucide-react и Tailwind CSS классов для стилизации.

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

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

• История сообщений ограничена 10 последними элементами.

• Асинхронная цепочка таймаутов моделирует реальный мультиэтапный процесс обработки.

• Статусы сообщений плавно обновляются: от pending к processing и затем completed.

• Для TX хеша генерируется случайная шестнадцатеричная строка длиной 64 символа.

• Визуализация статусов и этапов помогает пользователю понять порядок и результат обработки.

Структура и диаграмма компонента

classDiagram
    class RelaySimulator {
        -messages: RelayMessage[]
        -isProcessing: boolean
        -currentBlock: number
        -validatorStatus: {total: number, active: number, consensus: number, processing: number}
        +simulateAction(actionType: string, actionData: any): void
        +getMessageIcon(type: string): JSX.Element
        +getMessageColor(status: string): string
        +getStatusIcon(status: string): JSX.Element
        +render(): JSX.Element
    }

    RelaySimulator o-- RelayMessage : uses

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

import { RelaySimulator } from './RelaySimulator';

function GamePage() {
  const [relayActive, setRelayActive] = React.useState(true);

  const handleMessageProcessed = (message: RelayMessage) => {
    console.log('Relay message processed:', message);
  };

  return (
    <div>
      <RelaySimulator isActive={relayActive} onMessageProcessed={handleMessageProcessed} />
      {/* Кнопки или другие элементы для вызова simulateAction можно добавить в будущем */}
    </div>
  );
}

Итог

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