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

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

Расположение: В Dashboard.tsx, основная область div flex-1 padding, внутри div ports-grid.
Тип: Grid of 6 GamePort components, v-for 1 to 6, with onClick clearMoving on parent.
Зависимости: Tailwind CSS, GamePort component.
JSX: div class "flex-1 padding-top-5px bottom-126px left-right-1rem overflow-hidden", div class "ports-grid" style display grid grid-template-columns repeat(3,1fr) grid-template-rows repeat(2,1fr) gap 1.5rem height 100%, for i=1 to 6.
Props for GamePort: portNumber, onStartGame, movingGame/Player, onStartMovingGame/Player.

Grid container: div class "ports-grid ports-fullscreen", display grid, 3 columns 1fr, 2 rows 1fr, gap 1.5rem, height 100%, max-width none, overflow hidden.
Ports: 6 GamePort components, positioned in grid (ports 1-3 row 1, 4-6 row 2).
Parent div: div class "flex-1" style padding-top 5px bottom 126px left/right 1rem, overflow hidden, onClick={handleClearMoving}.
Dynamic: ports update from Redux gameState.ports, moving modes from state.

Parent: flex-1, padding: top 5px, bottom 126px, 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.
Responsive: @media min-width 769px — padding-bottom 126px, grid 3x2; mobile — 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 by status (slate idle, gray player, blue/green active), border rounded-lg p-4.

Grid: v-for GamePort with portNumber 1-6, props from Dashboard state (movingGame/Player from Redux).
onClick parent: handleClearMoving — dispatch movingCancelled if moving.
Ports interaction: GamePort onClick handlePortClick (start game/move), drag&drop between ports (handleDrop send WebSocket 'move'/'moveGamer').
Update: useSelector gameState.ports, re-render on change.
In Dashboard:

{Array.from({length:6}, (_, i) => <GamePort key={i+1} portNumber={i+1} ... />)}

.

: <div class="flex-1" style="padding-top: 5px; padding-bottom: 126px; padding-left: 1rem; padding-right: 1rem; overflow: hidden" @click="handleClearMoving">
<GamePort v-for="portNumber in 6" :key="portNumber" :port-number="portNumber" :on-start-game="handleStartGame" :moving-game="movingGame" :moving-player="movingPlayer" @start-moving-game="handleStartMovingGame" @start-moving-player="handleStartMovingPlayer" />
.
Composables: useGameStore (movingGame/Player, ports), dispatch actions.
v-for for ports, @click parent clear moving.