clear log

docs/migration/footer/ESP_INDICATOR.md

@@ -0,0 +1,33 @@
+# Документация по переносу индикатора 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).