vue-pult/docs/migration/GAMEPORT_MIGRATION.md

Документация по переносу компонента GamePort (Порт игры)

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

• Файл: client/src/components/GamePort.tsx
• Тип: React.memo функциональный компонент с props (portNumber, onStartGame, movingGame/Player, onStartMovingGame/Player, onMoveGameTo/PlayerTo).
• Зависимости: react-redux (useSelector/dispatch), hooks (useWebSocketNew, useAuth, useIsMobile, useDeviceType, useNotifications), icons (Io*, Fa*), components (Button, Card, Badge, BonusProgress, modals).
• State: timer, showConfirmation (type: endGame/cancelGame/forceEndGame), showDeleteModal, isDragging, dragType, forceDragEffect, showTechConfirm.
• Template (JSX): Card relative w-full h-full (bg по статусу, border, cursor-pointer), absolute элементы (gun icon, timer, buttons), main div flex-col justify-center, modals (ConfirmationModal, PlayerDeleteModal, tech confirm).
• Computed: isActive, hasPlayer, canHaveBonus, isPaused, highlight, isMovingDestination/Source, canDropHere, canManageGame/Player, canDragGame/Player, canCloseGame, isLockedForTechnic/Operator.
• Effects: useEffect for timer (interval 1000), drag events (start/end/over/enter/leave/drop), debug logs.

Элементы

• Статус порта: Card class "game-port-card" (bg-slate-700 idle, bg-gray-700 player, bg-blue/green/orange/cyan active), relative, draggable, onClick handlePortClick, onDrag* handlers.
  • Gun icon: absolute top-1 left-1, FaGun green (connected) or gray line-through + FaBan red (disconnected).
  • Timer: absolute top-1 left-8, div bg-black text-white rounded p-2 text-xs monospace.
  • Lock overlay: absolute inset-0 bg-slate-900/70 flex center FaLock (for restricted access).
  • Drag overlay: absolute inset-0 bg-green-500/30 flex center arrow-down text (if canDropHere).
• Контент:
  • Number: div text-4xl font-bold {portNumber}.
  • Game name: div text-xs font-semibold {getGameName(port.game)} (e.g., "Пристрелка", "Игра 3").
  • Bonus: div text-xs "Бонусная".
  • Player: div text-xs "Игрок #{gamerId}".
  • Stats: div flex space-x-2, badges "🎯 {patrOk}", "➕ {patrAdd}".
  • Patron controls: flex space-x-2, MinusButton/PlusButton (disabled if paused/0), div {patr} text-2xl.
  • Buttons (absolute top-1 right-1 flex gap-2, z-10):
    • Move game: Button bg-gray-600 hover:bg-gray-700, IoSwapHorizontalOutline, title "Перенести игру", disabled paused, onClick handleStartMovingGame.
    • Cancel: Button bg-orange-600 hover:bg-orange-700, IoClose, title "Отменить игру", disabled paused, onClick handleCancelGame.
    • Delete player: Button bg-red-600 hover:bg-red-700, IoTrashOutline, title "Удалить", disabled paused, onClick handleRemovePlayer.
  • For empty port: "Свободен", "Нажмите для создания" green if smena open.
  • For player port: "Игрок", "Игр: {gameCounter}", pause badge if paused.
  • For active: game name, bonus, player, patron controls, stats.
• Modals:
  • Tech confirm: fixed inset-0 bg-black/60 flex center, content bg-slate-800 p-8, h2 "Техническая пристрелка", buttons "Запустить пристрелку" green, "Отмена" gray.
  • ConfirmationModal: isOpen=showConfirmation.show, type (endGame/cancel/forceEnd), portNumber, onConfirm.
  • PlayerDeleteModal: isOpen=showDeleteModal, gamerId, portNumber, gameCounter, onConfirm.
• Drag&Drop: draggable=true, data-port={portNumber}, classes (port-dragging, drag-over, can-drop), effects (scale, opacity).

Стили (Tailwind примеры)

• Card: relative border-2 cursor-pointer w-full h-full min-h-[160px] mobile, [220px] desktop, flex flex-col justify-between, bg-slate-700 border-slate-600 (idle), bg-gray-700 (player), bg-blue-600 (game), bg-orange-600 (tech shot), bg-cyan-500 (shot), transition-all hover:border-white hover:shadow-xl.
• Absolute buttons: top-1 right-1 flex gap-2 z-10, Button size="sm" variant="ghost" bg-gray-600 hover:bg-gray-700 rounded text-white.
• Patron: flex justify-center space-x-2, Button size="sm" variant="ghost" rounded text-white hover:bg-opacity-60, div text-2xl font-bold min-w-[45px].
• Responsive: @media min-width 769px — min-h-[300px], desktop-port-card; mobile — min-h-[120px], game-port-card; tablet — game-port-card-tablet min-h-[180px].
• Drag: .port-dragging opacity-50 scale-98, .drag-over ring-4 ring-green-400 bg-green-500/20 scale-101, .can-drop border-yellow-400 bg-yellow-600.
• Animations: animate-pulse for highlight (ring-4 ring-*-400), grayscale opacity-50 for paused/locked.

Взаимодействие

• onClick port: handlePortClick — check role/pause/smena/ESP, open modal or start game, drag if moving.
• Buttons: handleStartMovingGame/Player (dispatch movingStarted), handlePatronChange (+/-1 via WebSocket 'addp'), handleStopGame/Cancel/ForceEnd (set showConfirmation), handleRemovePlayer (set showDeleteModal).
• Drag: handleDragStart (set data, class dragging), handleDrop (send 'move'/'moveGamer' via WebSocket, animation with createFlyingPortAnimation), handleDragOver/Enter/Leave (preventDefault, set isDragOver).
• Modals: Confirmation for end/cancel/forceEnd (onConfirm send 'endGame'/'cancelGame'/'forceEndGame'), PlayerDelete (send 'deleteGamer'), TechConfirm for tech shot (send 'start' game=2).
• Effects: timer interval if active, drag end cancel moving, logs for debug.
• In Dashboard: <GamePort v-for portNumber=1 to 6, :props, @start-game, @start-moving />.

Vue маппинг

• : <Card :class="portClass" @click="handlePortClick" draggable="!paused && canDrag" @dragstart="handleDragStart" @drop="handleDrop" :data-port="portNumber"> absolute gun/timer/buttons, main div flex-col, v-if status elements, v-for badges.
• Props: portNumber, onStartGame, movingGame/Player, onStartMovingGame/Player.
• Emits: start-moving-game/player, move-game/player-to.
• Composables: useGameStore (computed status), useWebSocket (sendMessage), useNotifications (show*), useAuth (role).
• v-model for modals, @drag* handlers, style for bg/shadow based on computed.
• Teleport for modals, v-if for lock overlay/drag overlay.