# Документация по переносу компонента 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 маппинг
- <template>: <Dialog v-model:open="isOpen" @update:open="onClose"> <DialogContent :class="mobile ? 'w-screen h-screen' : 'max-w-98vw'"> <button @click="backStep" absolute top-4 right-4> back/close </button> <div class="space-y-6 overflow-y-auto"> 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) </div> </DialogContent> </Dialog>.
- 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.