Документация по переносу основного блока Dashboard (Сетка 6 портов)

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

Файл: client/src/pages/Dashboard.tsx (основная часть).
Тип: Div контейнер flex-1 с padding, внутри div ports-grid с CSS grid, содержащий 6 GamePort компонентов (v-for 1 to 6).
Зависимости: Tailwind CSS, GamePort component, Redux (gameState.ports).
JSX: <div className="flex-1" style={{ paddingTop: '5px', paddingBottom: '126px', paddingLeft: '1rem', paddingRight: '1rem', overflow: 'hidden' }} onClick={handleClearMoving}>
{Array.from({length: 6}, (_, i) => )}

Контейнер: div class "flex-1" (flex-1, padding top 5px bottom 126px left/right 1rem, overflow hidden, onClick handleClearMoving).
Grid: div class "ports-grid" (display grid, grid-template-columns repeat(3,1fr), grid-template-rows repeat(2,1fr), gap 1.5rem, height 100%, max-width none, overflow hidden).
Порты: 6 GamePort компонентов, позиционированные в grid (1-3 в первой строке, 4-6 во второй).
Динамика: Порты обновляются из Redux gameState.ports, режимы перемещения (movingGame/Player) из state.

Контейнер: flex-1, padding-top: 5px, padding-bottom: 126px, padding-left/right: 1rem, overflow: hidden.
Grid: display: grid, grid-template-columns: repeat(3, 1fr), grid-template-rows: repeat(2, 1fr), gap: 1.5rem, height: 100%, max-width: none, overflow: hidden.
Responsive: @media (min-width: 769px) — padding-bottom: 126px, grid 3x2; @media (max-width: 768px) — ports-grid-mobile (grid-cols-2, gap: 25px, padding-bottom: 60px); tablet — game-ports-grid-tablet (grid-cols-3, gap: 15px).
GamePort: h-full w-full, bg по статусу (slate idle, gray player, blue/green active), border rounded-lg p-4.

Контейнер: onClick={handleClearMoving} — dispatch movingCancelled если movingGame/Player не null.
Grid: v-for GamePort с portNumber 1-6, props из Dashboard state (movingGame/Player из Redux).
Порты: Взаимодействие через GamePort onClick handlePortClick (запуск игры/перемещение), drag&drop между портами (handleDrop отправляет WebSocket 'move'/'moveGamer').
Обновление: useSelector gameState.ports, re-render при изменениях.
В Dashboard:

... 6 GamePort ...

.

: <div class="flex-1" style="padding-top: 5px; padding-bottom: 126px; padding-left: 1rem; padding-right: 1rem; overflow: hidden" @click="handleClearMoving">

. - Composables: useGameStore (movingGame/Player, ports), dispatch actions. - v-for для портов, @click на родителе для clear moving.