# Документация по переносу кнопок в GamePort

## Общая структура кнопок в React
- **Расположение**: Absolute top-1 right-1 flex gap-2 z-10 в Card GamePort.tsx.
- **Тип**: Button elements with onClick handlers, disabled if paused, title.
- **Зависимости**: ui/Button, Tailwind CSS, icons (IoSwapHorizontalOutline, IoClose, IoTrashOutline).
- **JSX**: div absolute top-1 right-1 flex gap-2, buttons size="sm" variant="ghost" class bg-gray/orange/red hover, onClick handle*, disabled={isPaused}.

## Элементы
- **Move game button**: Button bg-gray-600 hover:bg-gray-700, IoSwapHorizontalOutline w-3 h-3, title "Перенести игру", onClick handleStartMovingGame, disabled paused.
- **Cancel game button**: Button bg-orange-600 hover:bg-orange-700, IoClose w-3 h-3, title "Отменить игру", onClick handleCancelGame, disabled paused.
- **Delete player button**: Button bg-red-600 hover:bg-red-700, IoTrashOutline w-3 h-3, title "Удалить", onClick handleRemovePlayer, disabled paused.
- **Patron buttons**: flex space-x-2, MinusButton/PlusButton (custom icons), div {patr} text-2xl, disabled if paused/0.
- **For empty port**: No buttons, or start game button if applicable.

## Стили (Tailwind примеры)
- Container: absolute top-1 right-1 flex gap-2 z-10 justify-end.
- Button: size="sm" variant="ghost" bg-gray-600 hover:bg-gray-700 rounded text-white transition-all font-bold.
- Patron: flex justify-center space-x-2, Button size="sm" variant="ghost" rounded text-white hover:bg-opacity-60 text-xs.
- Responsive: w-3 h-3 sm:w-4 sm:h-4 icons, min-height 44px touch.

## Взаимодействие
- Move: dispatch gameMovingStarted, drag start.
- Cancel: set showConfirmation 'cancelGame'.
- Delete: set showDeleteModal.
- Patron +/-: send 'addp' via WebSocket, delta +/-1.
- Disabled if paused or no rights (role check).
- In GamePort: {canCloseGame && <div flex gap-2> buttons </div>}.

## Vue маппинг
- <template>: <div absolute top-1 right-1 flex gap-2 z-10> <Button size="sm" variant="ghost" class="bg-gray-600 ..." @click="handleStartMovingGame" :disabled="paused"> <IoSwapHorizontalOutline class="w-3 h-3" /> </Button> <Button @click="handleCancelGame" class="bg-orange-600 ..." :disabled="paused"> <IoClose /> </Button> </div>.
- For patron: <div flex space-x-2> <Button @click="handlePatronChange(-1)" :disabled="paused || patr <= 0"> Minus </Button> <div class="text-2xl font-bold">{{ patr }}</div> <Button @click="handlePatronChange(1)" :disabled="paused"> Plus </Button> </div>.
- Props: onStartMovingGame, onCancelGame, onRemovePlayer.
- Emits: none, use composables for dispatch/send.