vue-pult/docs/migration/footer/ESP_INDICATOR.md

Документация по переносу индикатора ESP в футере

Общая структура в React

• Расположение: В BottomPanel.tsx, правая часть flex, второй индикатор после WS.
• Тип: Div flex items-center, dot (bg-green/red), text "ESP".
• Зависимости: Tailwind CSS, useSelector for gameState.espConnected.
• JSX:
  ESP

, with Tooltip for status.

Элементы

• Dot: div w-2 h-2 rounded-full bg-green-500 (connected) or bg-red-500 (disconnected).
• Text: span "ESP" (text-xs text-slate-300 hidden sm:inline).
• Tooltip: Trigger div flex space-x-1, Content p "ESP: Подключен/Отключен", p ping time if available.

Стили (Tailwind примеры)

• Container: flex items-center space-x-1 sm:space-x-2.
• Dot: w-2 h-2 rounded-full bg-green/red-500.
• Text: text-xs text-slate-300 hidden sm:inline.
• Tooltip: absolute bg-slate-800 text-slate-100 text-xs rounded px-2 py-1 shadow-lg.

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

• Data: from useSelector (gameState.espConnected, lastPing), update on WebSocket message.
• No click, passive indicator.
• In BottomPanel:
  dot + text
  .

Vue маппинг

• :
  ESP

  ESP: {{ espConnected ? 'Подключен' : 'Отключен' }}

  Пинг: {{ new Date(lastPing).toLocaleTimeString() }}

  . - Composables: useGameStore (espConnected, lastPing).