\n {/* Header */}\n

🏓 Pickleball Scoring System

Manage games across all courts and sites

\n setShowCreateForm(true)}\n className=\"px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium\"\n >\n ➕ New Game\n \n \n ⚙️ Admin\n \n

\n\n {/* Error Display */}\n {error && (\n

\n {error}\n \n

\n )}\n\n {/* Sites and Courts */}\n

\n {sites.map(site => (\n

{site.name}

\n \n

\n {site.courts.map(court => {\n const game = getGameForCourt(court.id);\n const isOccupied = !!game;\n \n return (\n {\n if (game) {\n onViewAudience(court, game);\n } else {\n setSelectedSite(court.siteId);\n setShowCreateForm(true);\n }\n }}\n >\n

\n Court {court.number}\n

\n \n {isOccupied && game ? (\n

\n {game.gameType === 'singles' ? '1v1' : '2v2'} • {game.gameFormat}\n

\n \n

\n {getTeamNames(game).team1}\n

\n {game.team1.score}\n

\n \n

\n {getTeamNames(game).team2}\n

\n {game.team2.score}\n

\n \n

\n {\n e.stopPropagation();\n onViewGame(game);\n }}\n className=\"w-full px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600\"\n >\n 📊 Score\n \n {\n e.stopPropagation();\n onViewAudience(court, game);\n }}\n className=\"w-full px-3 py-1 bg-purple-500 text-white text-xs rounded hover:bg-purple-600\"\n >\n 👥 Watch\n \n

\n ) : (\n

🏓

Available

Click to start game

\n )}\n

\n );\n })}\n

\n ))}\n

\n\n {/* Create Game Modal */}\n {showCreateForm && (\n {\n setShowCreateForm(false);\n setSelectedSite('');\n }}\n loading={loading}\n />\n )}\n\n {/* Loading Overlay */}\n {loading && (\n

Processing...

\n )}\n \n );\n}\n\ninterface CreateGameFormProps {\n sites: Site[];\n selectedSiteId: string;\n onCreateGame: (gameData: CreateGameRequest) => Promise;\n onClose: () => void;\n loading: boolean;\n}\n\nfunction CreateGameForm({ sites, selectedSiteId, onCreateGame, onClose, loading }: CreateGameFormProps) {\n const [formData, setFormData] = useState({\n siteId: selectedSiteId || (sites[0]?.id || ''),\n courtId: '',\n gameType: 'doubles' as 'singles' | 'doubles',\n gameFormat: 'standard' as 'standard' | 'tournament15' | 'tournament21',\n team1Player1: '',\n team1Player2: '',\n team2Player1: '',\n team2Player2: ''\n });\n\n const selectedSite = sites.find(site => site.id === formData.siteId);\n const availableCourts = selectedSite?.courts.filter(court => court.isActive) || [];\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n const gameData: CreateGameRequest = {\n courtId: formData.courtId,\n siteId: formData.siteId,\n team1Player1: formData.team1Player1,\n team1Player2: formData.gameType === 'doubles' ? formData.team1Player2 : undefined,\n team2Player1: formData.team2Player1,\n team2Player2: formData.gameType === 'doubles' ? formData.team2Player2 : undefined,\n gameType: formData.gameType,\n gameFormat: formData.gameFormat\n };\n\n const result = await onCreateGame(gameData);\n if (result) {\n onClose();\n }\n };\n\n return (\n

Create New Game

\n \n

\n Site\n setFormData({ ...formData, siteId: e.target.value, courtId: '' })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n >\n {sites.map(site => (\n \n ))}\n \n

\n\n

\n Court\n setFormData({ ...formData, courtId: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n >\n \n {availableCourts.map(court => (\n \n ))}\n \n

\n\n

\n Game Type\n setFormData({ ...formData, gameType: e.target.value as 'singles' | 'doubles' })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n >\n \n \n \n

\n\n

\n Format\n setFormData({ ...formData, gameFormat: e.target.value as any })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n >\n \n \n \n \n

\n\n

Team 1

\n setFormData({ ...formData, team1Player1: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n {formData.gameType === 'doubles' && (\n setFormData({ ...formData, team1Player2: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n )}\n

\n\n

Team 2

\n setFormData({ ...formData, team2Player1: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n {formData.gameType === 'doubles' && (\n setFormData({ ...formData, team2Player2: e.target.value })}\n className=\"w-full p-2 border border-gray-300 rounded-md\"\n required\n />\n )}\n

\n\n

\n \n Cancel\n \n \n {loading ? 'Creating...' : 'Create Game'}\n \n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/max123/screen/code/frontend/components/GameBoard.tsx","extension","actionData","errors"]