vue-pult/docs/migration/gameport/GAMEPORT_BUTTONS.md

Документация по переносу кнопок в 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 &&
  buttons
  }.

Vue маппинг

• :
  <Button size="sm" variant="ghost" class="bg-gray-600 ..." @click="handleStartMovingGame" :disabled="paused"> <Button @click="handleCancelGame" class="bg-orange-600 ..." :disabled="paused">
  .
• For patron:
  <Button @click="handlePatronChange(-1)" :disabled="paused || patr <= 0"> Minus

  {{ patr }}

  <Button @click="handlePatronChange(1)" :disabled="paused"> Plus
  .
• Props: onStartMovingGame, onCancelGame, onRemovePlayer.
• Emits: none, use composables for dispatch/send.