# Документация по переносу основного блока 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%, <GamePort key={portNumber} portNumber={i} onStartGame={handleStartGame} movingGame={movingGame} movingPlayer={movingPlayer} onStartMovingGame={handleStartMovingGame} onStartMovingPlayer={handleStartMovingPlayer} /> 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.

## Стили (Tailwind примеры)
- 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: <div class="flex-1 ..." onClick={handleClearMoving}> <div class="ports-grid"> {Array.from({length:6}, (_, i) => <GamePort key={i+1} portNumber={i+1} ... />)} </div> </div>.

## Vue маппинг
- <template>: <div class="flex-1" style="padding-top: 5px; padding-bottom: 126px; padding-left: 1rem; padding-right: 1rem; overflow: hidden" @click="handleClearMoving"> <div class="ports-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.5rem; height: 100%;"> <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" /> </div> </div>.
- Composables: useGameStore (movingGame/Player, ports), dispatch actions.
- v-for for ports, @click parent clear moving.