# Документация по переносу основного блока 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}>
  <div className="ports-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(2, 1fr)', gap: '1.5rem', height: '100%', maxWidth: 'none', overflow: 'hidden' }}>
    {Array.from({length: 6}, (_, i) => <GamePort key={i+1} portNumber={i+1} onStartGame={handleStartGame} movingGame={movingGame} movingPlayer={movingPlayer} onStartMovingGame={handleStartMovingGame} onStartMovingPlayer={handleStartMovingPlayer} />)}
  </div>
</div>.

## Элементы
- **Контейнер**: 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.

## Стили (Tailwind примеры)
- Контейнер: 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: <div class="flex-1 ..." onClick={handleClearMoving}> <div class="ports-grid"> ... 6 GamePort ... </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%; max-width: none; overflow: hidden">
    <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 для портов, @click на родителе для clear moving.