vadim/vue-pult
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clear log

Browse Source
This commit is contained in:
sasha
2025-10-01 11:54:13 +03:00
parent 3e90269b0b
commit a41e972d38
73 changed files with 13279 additions and 5038 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/migration/dashboard/MAIN_BLOCK.md Normal file
View File

@@ -0,0 +1,32 @@
# Документация по переносу основного блока 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.

39
docs/migration/dashboard/MAIN_BLOCK_6_PORTS.md Normal file
View File

@@ -0,0 +1,39 @@
# Документация по переносу основного блока 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.