vue-pult/docs/migration/modals/GAME_SELECTION_MODAL.md

Документация по переносу компонента GameSelectionModal (Модал выбора игры)

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

• Файл: client/src/components/modals/GameSelectionModal.tsx
• Тип: Функциональный компонент React с useState (selectedCategory, availableGames, gameInfo, selectedGame, currentStep), useEffect (loadGameInfo on open, keydown Escape, filter games on category), useSelector (port, systemState).
• Зависимости: react-redux, simple-ui (Dialog, Button, Badge), hooks (useWebSocketNew, useAuth, useIsMobile), fetch for /api/game-info.
• Props: isOpen, onClose, portNumber, isBonus.
• State: selectedCategory (null or id), availableGames (array), gameInfo (object from API), selectedGame (object), currentStep ('category' | 'game' | 'payment').
• Template (JSX): Dialog open={isOpen} onOpenChange={onClose}, DialogContent bg-gradient slate, div space-y-6 for steps (category/game/payment), buttons for categories/games/payment, info panels.
• Constants: GAME_CATEGORIES (3 categories: id 10 banks, 11 targets, 12 guaranteed, with name/description/color/icon).
• Effects: useEffect on isOpen — loadGameInfo, reset state; keydown Escape — back/close; category change — filter games (group==category, active, not test).

Элементы

• Dialog: open={isOpen}, onOpenChange={onClose}, class max-w-[98vw] bg-gradient-to-br from-slate-800 via-slate-900 to-slate-800 border-slate-600 shadow-2xl overflow-hidden.
• Close/Back button: absolute top-4 right-4, fa-arrow-left or fa-times, bg-slate-700 hover:bg-slate-600, onClick back to previous step or close.
• Step 1: Category selection: div space-y-6, header h3 "Выберите тип игр", port info badge, div flex gap-3 for category buttons (aspect-square rounded-2xl border gradient by color, icon, name, description, count badge top-right, active dot top-left), bonus button if isBonus.
  • Button: flex-1 aspect-square, bg-gradient (blue/green/purple/yellow), hover:brightness-110, disabled opacity-60, onClick handleCategorySelect.
  • Badge: absolute top-3 right-3 px-2 py-1 rounded bg-black/20 text-white text-xs.
  • Icon: fas fa-bullseye/crosshairs/gift, text-2xl mobile text-4xl.
  • Info panel: bg-orange-500/10 border orange, "Требуется открыть смену" if !smena.
• Step 2: Game selection: div space-y-6, header with category icon/name, grid games (cols-3 desktop, 1 mobile), button for game (rounded-xl border gradient, hover:brightness-110, top-right #index, left dot green, h4 title, p info, div patr/difficulty badges, bottom ID/cost).
  • Game button: w-full min-h-[150px] p-4, gradient by category, onClick handleGameSelect.
  • Badges: bg-black/20 rounded px-2 py-1 text-xs white for #, difficulty (green/yellow/red).
  • Cost: bg-white/10 rounded px-3 py-1 text-lg font-bold white, "БЕСПЛАТНО" yellow if bonus.
• Step 3: Payment selection: div space-y-6, header h3 "Выберите способ оплаты" animate-pulse gradient text, game info badges (port, cost/bonus), grid 2 cols buttons (cash/card, rounded-2xl border gradient green/blue, hover:scale-105 shadow, icon fa-money-bill-wave/credit-card text-5xl animate-bounce, text "Наличные"/"Безнал", description).
  • Button: p-10, bg-gradient to-br, absolute inset-0 gradient pulse, relative z-10 flex-col space-y-5, div w-24 h-24 rounded-2xl flex center icon, div text-3xl font-bold white, text-base color-300.
  • Info: bg-slate-700/30 rounded border slate, "Выберите способ оплаты для правильного учета в отчетах", "Это бонусная игра - оплата не требуется" if bonus.

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

• Dialog: max-w-[98vw] w-[98vw] max-h-[95vh] bg-gradient-to-br from-slate-800 via-slate-900 to-slate-800 border-slate-600 shadow-2xl overflow-hidden, mobile w-screen h-screen m-0 rounded-none border-0.
• Buttons: rounded-2xl border gradient (from--500 via--600 to-*-700), hover:brightness-110 transition-all duration-200, disabled opacity-60 bg-slate-700.
• Badges: bg-black/20 text-white text-xs rounded px-2 py-1, difficulty bg-green/yellow/red-500 rounded px-2 py-1 text-xs white.
• Responsive: @media max-width 768px — grid-cols-1 gap-4, text-2xl, p-3; desktop grid-cols-3 gap-8, text-3xl, p-4.
• Animations: animate-pulse for header, bounce for icons, pulse for backgrounds.

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

• onOpen: loadGameInfo (fetch /api/game-info, setGameInfo, fallback if error).
• Category click: handleCategorySelect — setSelectedCategory, setCurrentStep 'game', filter availableGames (group==category, active, not test).
• Game click: handleGameSelect — setSelectedGame, setCurrentStep 'payment'.
• Payment click: handlePaymentSelect — send 'start' via WebSocket (line, game, gamerId, isBonus, tel, patrons, paymentType), onClose.
• Escape: back step or close.
• In Dashboard: <GameSelectionModal :isOpen="showGameSelectionModal" @close="handleCloseGameSelection" :portNumber="selectedPortForGame" :isBonus="isGameBonusMode" />.

Vue маппинг

• : <Dialog v-model:open="isOpen" @update:open="onClose"> <button @click="backStep" absolute top-4 right-4> back/close
  v-if currentStep === 'category' — renderCategorySelection (v-for categories, button flex-1 aspect-square gradient @click=handleCategorySelect), v-else-if 'game' — renderGameSelection (grid v-for games, button w-full min-h-150 @click=handleGameSelect), v-else 'payment' — renderPaymentSelection (grid cols-2, button p-10 gradient @click=handlePaymentSelect)
  .
• Props: isOpen, onClose, portNumber, isBonus.
• Emits: none (onClose via update:open).
• Composables: useWebSocket (sendMessage), useAuth (user), useIsMobile.
• State: ref selectedCategory, availableGames, gameInfo, selectedGame, currentStep.
• Effects: watch isOpen — loadGameInfo, reset; watch selectedCategory — filter games; onMounted keydown Escape — back/close.
• Constants: GAME_CATEGORIES array.
• v-if for info panels, v-for for buttons, :disabled !canAccess.