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

## Общая структура в React
- **Расположение**: В BottomPanel.tsx, правая часть flex, второй индикатор после WS.
- **Тип**: Div flex items-center, dot (bg-green/red), text "ESP".
- **Зависимости**: Tailwind CSS, useSelector for gameState.espConnected.
- **JSX**: <div class="flex items-center space-x-1 sm:space-x-2">
  <div class="w-2 h-2 rounded-full bg-green-500" />
  <span class="text-xs text-slate-300 hidden sm:inline">ESP</span>
</div>, 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: <Tooltip> <div flex space-x-1> dot + text </div> </Tooltip>.

## Vue маппинг
- <template>: <Tooltip> <div class="flex items-center space-x-1 sm:space-x-2">
  <div :class="['w-2 h-2 rounded-full', espConnected ? 'bg-green-500' : 'bg-red-500']"></div>
  <span class="text-xs text-slate-300 hidden sm:inline">ESP</span>
</div> <TooltipContent> <p>ESP: {{ espConnected ? 'Подключен' : 'Отключен' }}</p> <p v-if="lastPing" class="text-xs text-slate-400">Пинг: {{ new Date(lastPing).toLocaleTimeString() }}</p> </TooltipContent> </Tooltip>.
- Composables: useGameStore (espConnected, lastPing).