All files / web/src/components GameSelector.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import type React from 'react'
import { useMemo } from 'react'
import { css } from '../../styled-system/css'
import { useGameMode } from '../contexts/GameModeContext'
import { useAllGames } from '../hooks/useAllGames'
import { GameCard } from './GameCard'

// Game configuration defining player limits
// Note: Most games have been migrated to the modular game system (see game-registry.ts)
// Only games not yet migrated remain here
export const GAMES_CONFIG = {} as const

export type GameType = keyof typeof GAMES_CONFIG | string

interface GameCardConfig {
  name: string
  fullName?: string
  maxPlayers: number
  description: string
  longDescription?: string
  url: string
  icon: React.ReactNode
  chips?: string[]
  color?: string
  gradient?: string
  borderColor?: string
  difficulty?: string
  available?: boolean
}

/**
 * Transform game definitions into legacy GameCardConfig format
 */
function toGameConfigs(
  games: ReturnType<typeof useAllGames>
): Array<{ gameType: string; config: GameCardConfig }> {
  return games.map((gameDef) => ({
    gameType: gameDef.manifest.name,
    config: {
      name: gameDef.manifest.displayName,
      fullName: gameDef.manifest.displayName,
      maxPlayers: gameDef.manifest.maxPlayers,
      description: gameDef.manifest.description,
      longDescription: gameDef.manifest.longDescription,
      url: '/arcade', // Arcade page handles game selection through UI
      icon: gameDef.manifest.icon,
      chips: gameDef.manifest.chips,
      color: gameDef.manifest.color,
      gradient: gameDef.manifest.gradient,
      borderColor: gameDef.manifest.borderColor,
      difficulty: gameDef.manifest.difficulty,
      available: gameDef.manifest.available,
    },
  }))
}

interface GameSelectorProps {
  variant?: 'compact' | 'detailed'
  showHeader?: boolean
  emptyStateMessage?: string
  className?: string
}

export function GameSelector({
  variant = 'detailed',
  showHeader = true,
  emptyStateMessage = 'Select champions to see available games',
  className,
}: GameSelectorProps) {
  const { activePlayerCount } = useGameMode()
  const registryGames = useAllGames()

  // Memoize the combined games list
  const allGames = useMemo(() => toGameConfigs(registryGames), [registryGames])

  return (
    <div
      className={`${css({
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      })} ${className || ''}`}
    >
      {showHeader && (
        <h3
          className={css({
            fontSize: variant === 'compact' ? 'lg' : { base: 'lg', md: 'xl' },
            fontWeight: 'bold',
            color: 'gray.800',
            mb: { base: '2', md: '3' },
            textAlign: 'center',
            flexShrink: 0,
          })}
        >
          🎮 Available Games
        </h3>
      )}

      <div
        className={css({
          display: 'grid',
          gridTemplateColumns: { base: '1fr', md: 'repeat(2, 1fr)' },
          gridTemplateRows: { base: 'repeat(4, 1fr)', md: 'repeat(2, 1fr)' },
          gap: variant === 'compact' ? '2' : { base: '2', md: '3' },
          flex: 1,
          minHeight: 0,
          overflow: 'hidden',
        })}
      >
        {allGames.map(({ gameType, config }) => (
          <GameCard
            key={gameType}
            gameType={gameType as GameType}
            config={config}
            variant={variant}
          />
        ))}
      </div>
    </div>
  )
}