36 lines
3.7 KiB
Markdown
36 lines
3.7 KiB
Markdown
# Документация по переносу компонента BottomPanel (Общая структура нижней панели)
|
||
|
||
## Общая структура в React
|
||
- **Файл**: client/src/components/BottomPanel.tsx
|
||
- **Тип**: Функциональный компонент React с useSelector (gameState), useWebSocketNew (isConnected), useIsMobile, useBurgerMenuContext (toggleMenu).
|
||
- **Зависимости**: react-redux, hooks (useWebSocketNew, useIsMobile, useBurgerMenuContext), components (BurgerButton, PauseButton, BarkerMusicControl), ui/tooltip.
|
||
- **Template (JSX)**: div fixed bottom-0 left-0 right-0 bg-slate-900 border-t z-30, div w-full h-full flex items-center (mobile: bottom-panel-mobile, desktop: px-6 sm:px-8 lg:px-12 h-full flex).
|
||
- **Layout**: flex justify-between, left BurgerButton, center BarkerMusicControl (barkerOnly), PauseButton, BarkerMusicControl (musicOnly), right indicators (WS, ESP, gamersCounter with Tooltip).
|
||
- **Responsive**: if isMobile — fixed bottom-0 bg-slate-900 border-t, div flex justify-between h-full, left Burger, center barker/pause/music, right WS/ESP/gamers; else — fixed bottom-0 style height 121px, div px-6 sm:px-8 lg:px-12 h-full flex, left Burger, absolute center Barker/pause/music, right indicators with Tooltip.
|
||
|
||
## Элементы
|
||
- **Left**: BurgerButton (isOpen, onClick toggleMenu).
|
||
- **Center**: BarkerMusicControl barkerOnly, PauseButton, BarkerMusicControl musicOnly.
|
||
- **Right**: div flex space-x-2 sm:space-x-4, WS indicator (dot green/red, text "WS", Tooltip "WebSocket: Подключен/Отключен"), ESP indicator (dot green/red, text "ESP", Tooltip "ESP: Подключен/Отключен" + ping time), gamersCounter (fa-users text-xs text-slate-400, span {systemState.gamersCounter}).
|
||
- **Indicators**: dot w-2 h-2 rounded-full bg-green/red-500, text text-xs text-slate-300 hidden sm:inline.
|
||
- **Mobile**: pl-4 pr-1, mobile-text-sm, gap-2.
|
||
- **Desktop**: absolute left-1/2 -translate-x-1/2 z-20 flex gap-4 for center, ml-1 sm:ml-2 for gamers.
|
||
|
||
## Стили (Tailwind примеры)
|
||
- Container: fixed bottom-0 left-0 right-0 bg-slate-900 border-t border-slate-700 z-30, style height 121px desktop.
|
||
- Flex: flex items-center justify-between relative w-full h-full.
|
||
- Indicators: 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: TooltipProvider > Tooltip > Trigger (div flex space-x-1), Content (p text, p text-xs text-slate-400 for ping).
|
||
- Responsive: @media max-width 768px — mobile-text-sm (text-xs), gap-2, pl-4 pr-1; desktop — px-6 sm:px-8 lg:px-12, space-x-4.
|
||
|
||
## Взаимодействие
|
||
- Indicators: update from useWebSocketNew (isConnected), useSelector (gameState.espConnected, lastPing, gamersCounter).
|
||
- Pause: onClick toggle via PauseButton.
|
||
- Burger: onClick toggleMenu from context.
|
||
- Tooltip: on hover show status.
|
||
- In Dashboard: <BottomPanel />.
|
||
|
||
## Vue маппинг
|
||
- <template>: <div fixed bottom-0 bg-slate-900 border-t z-30> <div class="w-full flex items-center" :class="{ 'px-6 sm:px-8 lg:px-12 h-full': !isMobile, 'bottom-panel-mobile': isMobile }"> <BurgerButton :is-open="isMenuOpen" @click="toggleMenu" /> <div :class="['absolute left-1/2 -translate-x-1/2 z-20 flex gap-4', { 'flex items-center gap-3': isMobile }]"> <BarkerMusicControl barker-only /> <PauseButton /> <BarkerMusicControl music-only /> </div> <div class="flex items-center space-x-2 sm:space-x-4" :class="{ 'pr-1': isMobile }"> WS/ESP indicators, gamers counter </div> </div> </div>.
|
||
- Composables: useWebSocketNew (isConnected), useGameStore (espConnected, lastPing, gamersCounter), useIsMobile, useBurgerMenu (isMenuOpen, toggleMenu).
|
||
- v-if for gamersCounter, :class for colors. |