33 lines
1.9 KiB
Markdown
33 lines
1.9 KiB
Markdown
# Документация по переносу индикатора 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). |