clear log

docs/migration/gameport/GAMEPORT_BUTTONS.md

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