34 lines
2.7 KiB
Markdown
34 lines
2.7 KiB
Markdown
# Документация по переносу кнопок в 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. |