\n {items.map((item, index) => (\n handleDragStart(e, item)}\n onDragOver={(e) => handleDragOver(e, index)}\n onDrop={(e) => handleDrop(e, index)}\n onDragEnd={handleDragEnd}\n className={`${draggedOverIndex === index ? \"opacity-50\" : \"\"}`}\n >\n {renderItem(item, index)}\n

\n ))}\n \n );\n}\n\nexport function App() {\n const [players, setPlayers] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [currentView, setCurrentView] = useState(\"newGame\");\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n const [currentGame, setCurrentGame] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\n\n // Handle when a game is added\n const handleGameAdded = (game: Game) => {\n setCurrentGame(game);\n setPlayers([]); // Reset players when starting a new game\n setCurrentView(\"players\");\n };\n\n // Automatically add the current card to the timeline when a new player's turn starts\n useEffect(() => {\n if (gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id)) {\n // Add a small delay to make the effect visible to the player\n const timer = setTimeout(() => {\n handleAddCurrentCard();\n }, 500);\n\n return () => clearTimeout(timer);\n }\n }, [gameState?.currentPlayerIndex, gameState?.currentCard?.id]);\n\n // Fetch players from the API\n const fetchPlayers = async () => {\n try {\n setLoading(true);\n const response = await fetch(\"/api/players\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch players\");\n }\n const data = await response.json();\n setPlayers(data);\n setError(null);\n } catch (err) {\n setError(\"Error loading players. Please try again.\");\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n // Add a new player\n const addPlayer = (player: Player) => {\n setPlayers(prevPlayers => [...prevPlayers, player]);\n };\n\n // Delete a player\n const deletePlayer = async (id: string) => {\n try {\n const response = await fetch(`/api/players/${id}`, {\n method: \"DELETE\",\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to delete player\");\n }\n\n setPlayers(prevPlayers => prevPlayers.filter(player => player.id !== id));\n } catch (err) {\n setError(\"Error deleting player. Please try again.\");\n console.error(err);\n }\n };\n\n // Navigate to card set selection\n const navigateToCardSets = () => {\n if (players.length < 2) {\n setError(\"You need at least 2 players to start a game.\");\n return;\n }\n setError(null);\n setCurrentView(\"cardSets\");\n };\n\n // Select a card set and start the game\n const selectCardSet = async (cardSet: CardSet) => {\n setSelectedCardSet(cardSet);\n\n // Initialize game state with players and selected card set\n const initialGameState: GameState = {\n id: currentGame?.id || crypto.randomUUID(),\n cardSetId: cardSet.id,\n players: players.map(player => ({ ...player, score: 0 })),\n playedCards: [],\n status: \"playing\",\n currentPlayerIndex: 0, // Track the current player's turn\n showYears: false, // Initially hide years on cards\n };\n\n setGameState(initialGameState);\n setCurrentView(\"gameplay\");\n\n try {\n // Fetch a card from the selected card set\n const response = await fetch(`/api/card-sets/${cardSet.id}/cards`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch cards\");\n }\n\n const cards = await response.json();\n if (cards.length > 0) {\n // Take the first card from the shuffled deck\n const firstCard = cards[0];\n\n // Update game state with the first card and remaining deck\n setGameState(prev => {\n if (!prev) return null;\n\n // Add the first card to the timeline automatically\n return {\n ...prev,\n currentCard: firstCard,\n remainingCards: cards.slice(1), // Store the rest of the cards for later use\n playedCards: [{ ...firstCard, dragged: true }], // Add the first card to the timeline automatically\n };\n });\n }\n } catch (err) {\n console.error(\"Error fetching cards:\", err);\n setError(\"Failed to load cards. Please try again.\");\n }\n };\n\n // Handle player completing their turn\n const handlePlayerDone = () => {\n if (!gameState || !gameState.currentCard) return;\n\n const { currentCard, playedCards, players, currentPlayerIndex, remainingCards = [] } = gameState;\n\n // Check if the card has been placed on the timeline\n if (playedCards.some(card => card.id === currentCard.id)) {\n // Get the current player\n const currentPlayer = players[currentPlayerIndex];\n\n // Check if the entire timeline is in the correct order\n const isCorrectOrder = isTimelineCorrect(playedCards);\n\n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n\n if (isCorrectOrder) {\n if (!gameState.showYears) {\n // If correct, give the player a point\n updatedPlayers[currentPlayerIndex] = {\n ...currentPlayer,\n score: (currentPlayer.score || 0) + 1,\n };\n\n // Show a success message\n setError(`Correct! ${currentPlayer.name} gets a point.`);\n setTimeout(() => setError(null), 3000);\n }\n } else {\n // If incorrect, sort the cards by year (correct the order)\n const sortedCards = [...playedCards].sort((a, b) => a.year - b.year);\n\n // Update the game state with the sorted cards\n setGameState(prev =>\n prev\n ? {\n ...prev,\n playedCards: sortedCards,\n showYears: true, // Show years after cards have been sorted\n }\n : null\n );\n\n // Show a message that the card was placed incorrectly\n setError(`Incorrect order! ${currentPlayer.name} doesn't get a point.`);\n return;\n }\n\n // Move to the next player\n const nextPlayerIndex = (currentPlayerIndex + 1) % players.length;\n\n // Get the next card from the remaining cards\n const nextCard = remainingCards.length > 0 ? remainingCards[0] : undefined;\n const newRemainingCards = remainingCards.length > 0 ? remainingCards.slice(1) : [];\n\n // Update the game state\n setGameState(prev => {\n if (!prev) return null;\n\n const newState = {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? \"finished\" : \"playing\",\n showYears: false, // Reset showYears for the next player's turn\n };\n\n // If there's a next card and we're still playing, automatically add it to the middle of the timeline\n if (nextCard && newState.status === \"playing\") {\n // Calculate the middle position of the timeline\n const middlePosition = Math.floor(newState.playedCards.length / 2);\n\n // Create a new array with the card inserted in the middle\n const newPlayedCards = [...newState.playedCards];\n newPlayedCards.splice(middlePosition, 0, { ...nextCard, dragged: true });\n\n // Update the played cards in the new state\n newState.playedCards = newPlayedCards;\n }\n\n return newState;\n });\n } else {\n // Card hasn't been placed yet, show a message to the user\n setError(\"Please place your card on the timeline before ending your turn.\");\n setTimeout(() => setError(null), 3000);\n }\n };\n\n // Check if all cards are in the correct chronological order\n const isTimelineCorrect = (cards: Card[]): boolean => {\n // If there's only one card, it's always in the correct position\n if (cards.length <= 1) return true;\n\n // Check if the cards are sorted by year\n for (let i = 0; i < cards.length - 1; i++) {\n if (cards[i].year > cards[i + 1].year) {\n // If we find any out-of-order cards, highlight them with a console message\n console.log(\n `Cards out of order: ${cards[i].title} (${cards[i].year}) is before ${cards[i + 1].title} (${\n cards[i + 1].year\n })`,\n );\n return false;\n }\n }\n\n return true;\n };\n\n // Handle reordering of cards\n const handleReorder = (reorderedCards: Card[]) => {\n if (!gameState) return;\n\n // Update the game state with the reordered cards\n setGameState(prev => {\n if (!prev) return prev;\n\n // If the game is in \"show years\" mode (after an incorrect placement),\n // check if the reordering has fixed the timeline\n if (prev.showYears) {\n // Check if the reordered cards are now in the correct order\n const isCorrect = isTimelineCorrect(reorderedCards);\n\n if (isCorrect) {\n // If correct, update the error message\n setError(\"Great! You've put the cards in the correct order.\");\n setTimeout(() => setError(null), 3000);\n }\n }\n\n return {\n ...prev,\n playedCards: reorderedCards,\n };\n });\n };\n\n // Handle adding the current card to the timeline\n const handleAddCurrentCard = (position?: number) => {\n if (!gameState || !gameState.currentCard) return;\n\n setGameState(prev => {\n if (!prev || !prev.currentCard) return prev;\n\n let newPlayedCards = [...prev.playedCards];\n\n // If position is specified, insert at that position\n if (position !== undefined) {\n newPlayedCards.splice(position, 0, prev.currentCard);\n } else {\n // Otherwise, add to the middle of the timeline\n const middlePosition = Math.floor(newPlayedCards.length / 2);\n newPlayedCards.splice(middlePosition, 0, prev.currentCard);\n }\n\n return {\n ...prev,\n playedCards: newPlayedCards,\n currentCard: { ...prev.currentCard, dragged: true },\n };\n });\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case \"newGame\":\n return (\n

\n Create a New Game\n

\n\n

\n \n

\n );\n\n case \"players\":\n return (\n

\n {currentGame?.name} - Add Players\n

\n\n

\n \n

\n\n

\n {loading\n ?

Loading players...

\n : error\n ?

{error}

\n : players.length === 0\n ?

No players added yet.

\n : }\n

\n\n

\n \n Next\n \n

\n );\n\n case \"cardSets\":\n return (\n

\n Select a Card Set\n

\n\n

\n {CARD_SETS.map(cardSet => (\n selectCardSet(cardSet)}\n >\n

{cardSet.name}

{cardSet.description}

\n ))}\n

\n\n

\n setCurrentView(\"players\")}\n className=\"bg-gray-500 hover:bg-gray-400 text-white font-bold py-2 px-6 rounded-lg border border-gray-600\"\n >\n Back\n \n

\n \n );\n\n case \"gameplay\":\n return (\n

\n {/* Header with card set name and current player */}\n

{currentGame?.name}

{selectedCardSet?.name}

\n {gameState && (\n

\n Current Player: {gameState.players[gameState.currentPlayerIndex]?.name}\n

\n )}\n

\n\n

\n {/* Main game area */}\n

\n {/* Error/Success message */}\n {error && (\n \n {error}\n

\n )}\n\n {/* Played cards area (middle of screen) */}\n \n {/* Tooltip for drag & drop functionality */}\n {gameState?.playedCards.length > 0 && !gameState?.showYears && (\n

\n Drag cards to reorder them\n

\n )}\n\n {\n \n {gameState.playedCards.map((card, index) => {\n const current = card.id === gameState.currentCard?.id;\n return (\n \n \n );\n })}\n \n }\n

\n\n {/* Game status */}\n {gameState?.status === \"finished\" && (\n

Game Over!

\n Winner: {gameState.players.reduce((prev, current) =>\n (prev.score || 0) > (current.score || 0) ? prev : current\n ).name}\n

\n \n setCurrentView(\"newGame\")}\n className=\"mt-6 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-6 rounded-lg border border-indigo-700\"\n >\n New Game\n \n

\n )}\n\n {/* Done button */}\n

\n \n {gameState?.showYears ? \"Continue\" : \"Done\"}\n \n

\n\n {/* Player scores sidebar */}\n

Players

\n {player.name}\n {player.score}\n \n ))}\n

\n \n \n );\n\n default:\n return

Unknown view

;\n }\n };\n\n return (\n

\n {renderView()}\n\n {currentView !== \"gameplay\" && (\n \n )}\n

\n );\n}",[],[203,210,217],{"_104":226,"_95":227,"_156":228,"_158":211,"_159":141,"_160":229,"_162":118,"_106":230,"_100":32,"_164":187,"_166":231,"_167":22,"_168":-5,"_169":232,"_98":233},"e9b71292-0bfd-11f0-8b3f-569c3dd06744","DebugInfo.tsx","e9b7140e-0bfd-11f0-8b3f-569c3dd06744",183,["D",1743184562411],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\nexport function DebugInfo() {\n const [isOpen, setIsOpen] = useState(false);\n const [logs, setLogs] = useState([]);\n \n // Override console methods to capture logs\n React.useEffect(() => {\n const originalConsoleLog = console.log;\n const originalConsoleError = console.error;\n const originalConsoleWarn = console.warn;\n \n // Store up to 50 most recent logs\n const addLog = (type: string, ...args: any[]) => {\n const log = `[${type}] ${args.map(arg => \n typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)\n ).join(' ')}`;\n \n setLogs(prev => {\n const newLogs = [log, ...prev];\n return newLogs.slice(0, 50); // Keep only the 50 most recent logs\n });\n };\n \n console.log = (...args) => {\n originalConsoleLog(...args);\n addLog('LOG', ...args);\n };\n \n console.error = (...args) => {\n originalConsoleError(...args);\n addLog('ERROR', ...args);\n };\n \n console.warn = (...args) => {\n originalConsoleWarn(...args);\n addLog('WARN', ...args);\n };\n \n // Restore original console methods on cleanup\n return () => {\n console.log = originalConsoleLog;\n console.error = originalConsoleError;\n console.warn = originalConsoleWarn;\n };\n }, []);\n \n if (!isOpen) {\n return (\n \n );\n }\n \n return (\n

Debug Console

\n \n \n

\n {logs.length === 0 ? (\n

No logs yet

\n ) : (\n logs.map((log, index) => (\n

\n {log}\n

\n ))\n )}\n

\n );\n}",[],[203,210,227],{"_104":235,"_95":236,"_156":237,"_158":211,"_159":141,"_160":238,"_162":118,"_106":239,"_100":32,"_164":187,"_166":240,"_167":22,"_168":-5,"_169":241,"_98":242},"d676220e-0bfd-11f0-b70a-569c3dd06744","ErrorBoundary.tsx","d67622ea-0bfd-11f0-b70a-569c3dd06744",180,["D",1743184530111],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { Component, ErrorInfo, ReactNode } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface Props {\n children: ReactNode;\n fallback?: ReactNode;\n}\n\ninterface State {\n hasError: boolean;\n error: Error | null;\n errorInfo: ErrorInfo | null;\n}\n\nexport class ErrorBoundary extends Component {\n constructor(props: Props) {\n super(props);\n this.state = {\n hasError: false,\n error: null,\n errorInfo: null\n };\n }\n\n static getDerivedStateFromError(error: Error): State {\n // Update state so the next render will show the fallback UI\n return { hasError: true, error, errorInfo: null };\n }\n\n componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n // You can also log the error to an error reporting service\n console.error(\"Error caught by ErrorBoundary:\", error, errorInfo);\n this.setState({\n error,\n errorInfo\n });\n }\n\n render(): ReactNode {\n if (this.state.hasError) {\n // You can render any custom fallback UI\n if (this.props.fallback) {\n return this.props.fallback;\n }\n \n return (\n

Something went wrong

\n Show error details\n

\n {this.state.error && this.state.error.toString()}\n

\n {this.state.errorInfo && this.state.errorInfo.componentStack}\n

\n );\n }\n\n return this.props.children;\n }\n}",[],[203,210,236],{"_104":244,"_95":245,"_156":246,"_158":211,"_159":141,"_160":247,"_162":118,"_106":248,"_100":32,"_164":187,"_166":249,"_167":22,"_168":-5,"_169":250,"_98":251},"263747b0-0c02-11f0-af5e-569c3dd06744","GamePage.tsx","26374878-0c02-11f0-af5e-569c3dd06744",234,["D",1743186381904],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Game, Player } from \"../../shared/types.ts\";\nimport { Header } from \"./Header.tsx\";\nimport { PlayerForm } from \"./PlayerForm.tsx\";\nimport { PlayerList } from \"./PlayerList.tsx\";\n\ninterface GamePageProps {\n gameId: string;\n onNavigateToHome: () => void;\n onStartGame: (gameId: string, players: Player[]) => void;\n}\n\nexport function GamePage({ gameId, onNavigateToHome, onStartGame }: GamePageProps) {\n const [game, setGame] = useState(null);\n const [players, setPlayers] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n // Fetch game and players on component mount\n useEffect(() => {\n fetchGame();\n fetchPlayers();\n }, [gameId]);\n\n // Fetch game from the API\n const fetchGame = async () => {\n try {\n setLoading(true);\n const response = await fetch(`/api/games/${gameId}`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch game\");\n }\n const data = await response.json();\n setGame(data);\n setError(null);\n } catch (err) {\n setError(\"Error loading game. Please try again.\");\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n // Fetch players for this game from the API\n const fetchPlayers = async () => {\n try {\n setLoading(true);\n const response = await fetch(`/api/games/${gameId}/players`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch players\");\n }\n const data = await response.json();\n setPlayers(data);\n setError(null);\n } catch (err) {\n setError(\"Error loading players. Please try again.\");\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n // Add a new player to this game\n const addPlayer = async (player: Player) => {\n try {\n setPlayers(prevPlayers => [...prevPlayers, player]);\n } catch (err) {\n setError(\"Error adding player. Please try again.\");\n console.error(err);\n }\n };\n\n // Delete a player from this game\n const deletePlayer = async (id: string) => {\n try {\n const response = await fetch(`/api/games/${gameId}/players/${id}`, {\n method: \"DELETE\",\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to delete player\");\n }\n\n setPlayers(prevPlayers => prevPlayers.filter(player => player.id !== id));\n } catch (err) {\n setError(\"Error deleting player. Please try again.\");\n console.error(err);\n }\n };\n\n // Start the game with the current players\n const handleStartGame = () => {\n if (players.length < 2) {\n setError(\"You need at least 2 players to start a game.\");\n return;\n }\n onStartGame(gameId, players);\n };\n\n if (loading && !game) {\n return

Loading game...

;\n }\n\n if (!game) {\n return (\n

Game not found or error loading game.

\n \n Back to Home\n \n

\n );\n }\n\n return (\n

\n\n

{game.name}

\n \n Back to Games\n \n

\n\n {game.description &&

{game.description}

}\n\n

Add Players

\n \n

\n\n

Players in this Game

\n {players.length === 0 ? (\n

No players added to this game yet.

\n ) : (\n \n )}\n

\n\n

\n \n Start Game\n \n

\n\n \n

\n );\n}",[],[203,210,245],{"_104":253,"_95":254,"_156":255,"_158":211,"_159":141,"_160":256,"_162":118,"_106":257,"_100":186,"_164":187,"_166":258,"_167":22,"_168":-5,"_169":259,"_98":260},"c8241e72-0bfd-11f0-87e6-569c3dd06744","Header.tsx","0fd8f426-0beb-11f0-bbbf-569c3dd06744",177,["D",1743184506084],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\nexport function Header() {\n return (\n

\n Player List\n

\n );\n}",[],[203,210,254],{"_104":262,"_95":263,"_156":264,"_158":211,"_159":141,"_160":265,"_162":118,"_106":266,"_100":161,"_164":187,"_166":267,"_167":22,"_168":-5,"_169":268,"_98":269},"c47c92d6-0bfd-11f0-b3fa-569c3dd06744","HomePage.tsx","fcf2b9d4-0be8-11f0-9f91-569c3dd06744",176,["D",1743184499950],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Game } from \"https://esm.town/v/tmcw/timeline/shared/types.ts\";\nimport { Header } from \"./Header.tsx\";\nimport { NewGameForm } from \"./NewGameForm.tsx\";\n\ninterface HomePageProps {\n onNavigateToGame: (gameId: string) => void;\n}\n\nexport function HomePage({ onNavigateToGame }: HomePageProps) {\n const [games, setGames] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [showNewGameForm, setShowNewGameForm] = useState(false);\n\n // Fetch games on component mount\n useEffect(() => {\n fetchGames();\n }, []);\n\n // Fetch games from the API\n const fetchGames = async () => {\n try {\n setLoading(true);\n const response = await fetch(\"/api/games\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch games\");\n }\n const data = await response.json();\n setGames(data);\n setError(null);\n } catch (err) {\n setError(\"Error loading games. Please try again.\");\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n // Add a new game\n const handleGameAdded = (game: Game) => {\n setGames(prevGames => [...prevGames, game]);\n setShowNewGameForm(false);\n onNavigateToGame(game.id);\n };\n\n // Delete a game\n const handleDeleteGame = async (id: string) => {\n try {\n const response = await fetch(`/api/games/${id}`, {\n method: \"DELETE\",\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to delete game\");\n }\n\n setGames(prevGames => prevGames.filter(game => game.id !== id));\n } catch (err) {\n setError(\"Error deleting game. Please try again.\");\n console.error(err);\n }\n };\n\n // Format date for display\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleDateString();\n };\n\n return (\n

\n\n

\n {showNewGameForm\n ? (\n

Create New Game

\n setShowNewGameForm(false)}\n className=\"text-gray-500 hover:text-gray-700\"\n >\n Cancel\n \n

\n \n

\n )\n : (\n

\n setShowNewGameForm(true)}\n className=\"bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-md flex items-center\"\n >\n \n \n \n \n Create New Game\n \n

\n )}\n\n

Your Games

\n\n {loading\n ?

Loading games...

\n : error\n ?

{error}

\n : games.length === 0\n ? (\n

\n \n \n \n \n

No games created yet.

Click \"Create New Game\" to get started!

\n )\n : (\n

\n {games.map(game => (\n \n

{game.name}

\n Created: {formatDate(game.createdAt)}\n

\n\n {game.description &&

{game.description}

}\n\n

\n onNavigateToGame(game.id)}\n className=\"text-indigo-600 hover:text-indigo-800 font-medium\"\n >\n Manage Players\n \n\n handleDeleteGame(game.id)}\n className=\"text-red-500 hover:text-red-700 text-sm\"\n >\n Delete Game\n \n

\n ))}\n

\n )}\n

\n\n \n \n );\n}",[],[203,210,263],{"_104":271,"_95":272,"_156":273,"_158":211,"_159":141,"_160":274,"_162":118,"_106":275,"_100":276,"_164":187,"_166":277,"_167":22,"_168":-5,"_169":278,"_98":279},"08d6a1e6-0c09-11f0-9a90-569c3dd06744","NewGameForm.tsx","06797cb8-0be9-11f0-af00-569c3dd06744",306,["D",1743189339090],12,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { defaultGameFormData, Game, GameFormData } from \"../../shared/types.ts\";\n\ninterface NewGameFormProps {\n onGameAdded: (game: Game) => void;\n}\n\nexport function NewGameForm({ onGameAdded }: NewGameFormProps) {\n const [formData, setFormData] = useState({ ...defaultGameFormData });\n const [errors, setErrors] = useState([]);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Handle form input changes\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value,\n }));\n };\n\n // Handle form submission\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n setErrors([]);\n setIsSubmitting(true);\n\n try {\n const response = await fetch(\"/api/games\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(formData),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to create game\");\n }\n\n const newGame = await response.json();\n onGameAdded(newGame);\n } catch (err) {\n setErrors([\"Failed to create game. Please try again.\"]);\n console.error(err);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n \n );\n}",[],[203,210,272],{"_104":281,"_95":282,"_156":283,"_158":211,"_159":141,"_160":284,"_162":118,"_106":285,"_100":286,"_164":187,"_166":287,"_167":22,"_168":-5,"_169":288,"_98":289},"cea34a4e-0c01-11f0-aa1a-569c3dd06744","PlayerForm.tsx","b3239bdc-0bea-11f0-a1d2-569c3dd06744",230,["D",1743186234968],7,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { defaultPlayerFormData, Player, PlayerFormData } from \"/shared/types.ts\";\nimport { validatePlayerForm } from \"/shared/utils.ts\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface PlayerFormProps {\n onPlayerAdded: (player: Player) => void;\n}\n\nexport function PlayerForm({ onPlayerAdded }: PlayerFormProps) {\n const [formData, setFormData] = useState({ ...defaultPlayerFormData });\n const [errors, setErrors] = useState([]);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Handle form input changes\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value,\n }));\n };\n\n // Handle form submission\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n // Validate form data\n const validationErrors = validatePlayerForm(formData);\n if (validationErrors.length > 0) {\n setErrors(validationErrors);\n return;\n }\n\n setErrors([]);\n setIsSubmitting(true);\n\n try {\n const response = await fetch(\"/api/players\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(formData),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to create player\");\n }\n\n const newPlayer = await response.json();\n onPlayerAdded(newPlayer);\n\n // Reset form\n setFormData({ ...defaultPlayerFormData });\n } catch (err) {\n setErrors([\"Failed to create player. Please try again.\"]);\n console.error(err);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n \n );\n}",[],[203,210,282],{"_104":291,"_95":292,"_156":293,"_158":211,"_159":141,"_160":294,"_162":118,"_106":295,"_100":276,"_164":187,"_166":296,"_167":22,"_168":-5,"_169":297,"_98":298},"b263ea7e-0c00-11f0-99cb-569c3dd06744","PlayerList.tsx","b98ecd34-0bea-11f0-86a6-569c3dd06744",217,["D",1743185758063],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { Player } from \"/shared/types.ts\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface PlayerListProps {\n players: Player[];\n onDeletePlayer: (id: string) => void;\n}\n\nexport function PlayerList({ players, onDeletePlayer }: PlayerListProps) {\n const [deletingId, setDeletingId] = useState(null);\n\n // Handle player deletion\n const handleDelete = async (id: string) => {\n setDeletingId(id);\n await onDeletePlayer(id);\n setDeletingId(null);\n };\n\n return (\n

\n {player.name}\n handleDelete(player.id)}\n disabled={deletingId === player.id}\n className=\"text-red-500 hover:text-red-700 font-bold px-3 py-1 border border-red-300 rounded-lg hover:bg-red-100\"\n >\n {deletingId === player.id ? \"Deleting...\" : \"Delete\"}\n \n \n ))}\n

\n );\n}",[],[203,210,292],[203,210],{"_104":301,"_95":302,"_156":303,"_158":204,"_159":141,"_160":304,"_162":118,"_106":305,"_100":32,"_164":306,"_166":307,"_167":22,"_168":-5,"_169":308,"_98":309},"76c0b582-0be8-11f0-a5eb-569c3dd06744","favicon.svg","76c0b672-0be8-11f0-a5eb-569c3dd06744",6,["D",1743175350109],"file","",[],[203,302],{"_104":311,"_95":312,"_156":313,"_158":204,"_159":141,"_160":314,"_162":118,"_106":315,"_100":316,"_164":306,"_166":317,"_167":22,"_168":-5,"_169":318,"_98":319},"30dc7cba-0c09-11f0-b2e6-569c3dd06744","index.html","74c854c4-0be8-11f0-849c-569c3dd06744",307,["D",1743189406232],26,"\n\n \n \n \n Timeline Game\n \n \n \n \n \n \n \n \n \n

\n \n \n",[],[203,312],{"_104":321,"_95":322,"_156":323,"_158":204,"_159":141,"_160":324,"_162":118,"_106":325,"_100":326,"_164":187,"_166":327,"_167":22,"_168":-5,"_169":328,"_98":329},"1e9f5c30-0bfe-11f0-9989-569c3dd06744","index.tsx","78d32a3a-0be8-11f0-a549-569c3dd06744",184,["D",1743184651173],9,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { App } from \"/frontend/components/App.tsx\";\nimport { ErrorBoundary } from \"/frontend/components/ErrorBoundary.tsx\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?dev\";\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\n// Log that we're using the development build\nconsole.log(\n \"%c🛠️ React Development Build Enabled\",\n \"background: #61dafb; color: #282c34; font-weight: bold; padding: 4px 8px; border-radius: 4px;\",\n);\nconsole.log(\"You will see detailed error messages and warnings.\");\n\n// Create root and render the app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(\n \n \n \n \n ,\n);",[],[203,322],[203],{"_104":332,"_95":333,"_156":334,"_158":-5,"_159":141,"_160":121,"_162":118,"_106":335,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":336,"_98":355},"67ade38a-0be8-11f0-9f91-569c3dd06744","shared","64cf833f-91e6-4c55-baa1-c22f56925433",["D",1743175324816],[337,346],{"_104":338,"_95":339,"_156":340,"_158":334,"_159":141,"_160":341,"_162":118,"_106":342,"_100":326,"_164":187,"_166":343,"_167":22,"_168":-5,"_169":344,"_98":345},"a14ff236-0c0b-11f0-8b1f-569c3dd06744","types.ts","67addc00-0be8-11f0-9f91-569c3dd06744",324,["D",1743190453891],"// Game type definition\nexport interface Game {\n id: string;\n name: string;\n description: string;\n createdAt: string;\n}\n\n// Form data for creating a new game\nexport interface GameFormData {\n name: string;\n description: string;\n}\n\n// Default values for a new game\nexport const defaultGameFormData: GameFormData = {\n name: \"\",\n description: \"\",\n};\n\n// Player type definition\nexport interface Player {\n id: string;\n name: string;\n score?: number;\n}\n\n// Form data for creating/editing a player\nexport interface PlayerFormData {\n name: string;\n}\n\n// Default values for a new player\nexport const defaultPlayerFormData: PlayerFormData = {\n name: \"\",\n};\n\n// Card set type definition\nexport interface CardSet {\n id: string;\n name: string;\n description: string;\n}\n\n// Card type definition\nexport interface Card {\n id: string;\n title: string;\n year: number;\n description: string;\n setId: string;\n dragged?: boolean; // Optional flag to track if the card has been dragged\n}\n\n// Game state type definition\nexport interface GameState {\n id: string;\n cardSetId: string;\n players: Player[];\n playedCards: Card[];\n currentCard?: Card;\n remainingCards?: Card[];\n currentPlayerIndex: number;\n status: \"playing\" | \"finished\";\n showYears?: boolean; // Flag to control whether years are shown on cards\n}\n\n// Available card sets\nexport const CARD_SETS: CardSet[] = [\n {\n id: \"random-history\",\n name: \"Random History\",\n description: \"Events from various periods throughout history\",\n },\n {\n id: \"ancient-history\",\n name: \"Ancient History\",\n description: \"Events from ancient civilizations and early human history\",\n },\n {\n id: \"recent-history\",\n name: \"Recent History\",\n description: \"Modern events from the 20th and 21st centuries\",\n },\n {\n id: \"1900s-history\",\n name: \"Random 1900s\",\n description: \"Modern events from the 21st century\",\n },\n];",[],[333,339],{"_104":347,"_95":348,"_156":349,"_158":334,"_159":141,"_160":350,"_162":118,"_106":351,"_100":286,"_164":187,"_166":352,"_167":22,"_168":-5,"_169":353,"_98":354},"3ad52154-0c09-11f0-8cb1-569c3dd06744","utils.ts","6ba83a3a-0be8-11f0-8fae-569c3dd06744",309,["D",1743189422965],"import { Game, GameFormData, Player, PlayerFormData } from \"./types.ts\";\n\n// Generate a unique ID for new entities\nexport const generateId = (): string => {\n return Math.random().toString(36).substring(2, 15)\n + Math.random().toString(36).substring(2, 15);\n};\n\n// Convert game form data to game object\nexport const formDataToGame = (formData: GameFormData): Game => {\n return {\n id: generateId(),\n name: formData.name,\n createdAt: new Date().toISOString(),\n };\n};\n\n// Convert player form data to player object\nexport const formDataToPlayer = (formData: PlayerFormData): Player => {\n return {\n id: generateId(),\n name: formData.name,\n };\n};\n\n// Validate game form data\nexport const validateGameForm = (formData: GameFormData): string[] => {\n const errors: string[] = [];\n\n if (!formData.name.trim()) {\n errors.push(\"Game name is required\");\n }\n\n return errors;\n};\n\n// Validate player form data\nexport const validatePlayerForm = (formData: PlayerFormData): string[] => {\n const errors: string[] = [];\n\n if (!formData.name.trim()) {\n errors.push(\"Name is required\");\n }\n\n return errors;\n};",[],[333,348],[333],{"_104":357,"_95":99,"_156":358,"_158":-5,"_159":141,"_160":359,"_162":118,"_106":360,"_100":186,"_164":306,"_166":361,"_167":22,"_168":-5,"_169":362,"_98":363},"0a67659e-0c0a-11f0-9e41-569c3dd06744","6472fe9e-0be8-11f0-8d58-569c3dd06744",311,["D",1743189771212],"# Timeline\n\n![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/12d23fcc-c9a1-4f1e-5066-8194b021e000/public)\n\nAn online version of a simple game. You start with a deck of cards - each card is a historical event. Everyone picks a card and has to arrange it in chronological order. For two players and up!",[],[99],"files",[153,171,180,191,201,208,215,225,234,243,252,261,270,280,290,300,310,320,331,337,346,356],"counts",{"_368":32,"_369":186,"_370":186,"_371":32},"pulls","branches","forks","envVars","contents",[],{"_104":357,"_95":99,"_156":358,"_158":-5,"_159":141,"_160":359,"_162":118,"_106":375,"_100":186,"_164":306,"_166":361,"_167":22,"_168":-5,"_98":376},["D",1743189771212],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":385,"_151":390,"_364":457,"_306":458,"_372":460,"_461":-5,"_462":22,"_463":-5,"_464":-5,"_465":-5,"_466":467},{"_104":105,"_95":96,"_106":386,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":101,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":387,"_135":388,"_138":389,"_150":22},["D",1743174762702],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":140,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[391,403,445,454],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":118,"_106":163,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":392,"_98":402},[393,396,399],{"_104":172,"_95":173,"_156":116,"_158":157,"_159":141,"_160":101,"_162":118,"_106":174,"_100":175,"_164":176,"_166":177,"_167":22,"_168":-5,"_169":394,"_98":395},[],[155,173],{"_104":181,"_95":182,"_156":183,"_158":157,"_159":141,"_160":184,"_162":118,"_106":185,"_100":186,"_164":187,"_166":188,"_167":22,"_168":-5,"_169":397,"_98":398},[],[155,182],{"_104":192,"_95":193,"_156":194,"_158":157,"_159":141,"_160":195,"_162":118,"_106":196,"_100":186,"_164":187,"_166":197,"_167":22,"_168":-5,"_169":400,"_98":401},[],[155,193],[155],{"_104":202,"_95":203,"_156":204,"_158":-5,"_159":141,"_160":205,"_162":118,"_106":206,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":404,"_98":444},[405,435,438,441],{"_104":209,"_95":210,"_156":211,"_158":204,"_159":141,"_160":212,"_162":118,"_106":213,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":406,"_98":434},[407,410,413,416,419,422,425,428,431],{"_104":216,"_95":217,"_156":218,"_158":211,"_159":141,"_160":219,"_162":22,"_106":220,"_100":221,"_164":187,"_166":222,"_167":22,"_168":-5,"_169":408,"_98":409},[],[203,210,217],{"_104":226,"_95":227,"_156":228,"_158":211,"_159":141,"_160":229,"_162":118,"_106":230,"_100":32,"_164":187,"_166":231,"_167":22,"_168":-5,"_169":411,"_98":412},[],[203,210,227],{"_104":235,"_95":236,"_156":237,"_158":211,"_159":141,"_160":238,"_162":118,"_106":239,"_100":32,"_164":187,"_166":240,"_167":22,"_168":-5,"_169":414,"_98":415},[],[203,210,236],{"_104":244,"_95":245,"_156":246,"_158":211,"_159":141,"_160":247,"_162":118,"_106":248,"_100":32,"_164":187,"_166":249,"_167":22,"_168":-5,"_169":417,"_98":418},[],[203,210,245],{"_104":253,"_95":254,"_156":255,"_158":211,"_159":141,"_160":256,"_162":118,"_106":257,"_100":186,"_164":187,"_166":258,"_167":22,"_168":-5,"_169":420,"_98":421},[],[203,210,254],{"_104":262,"_95":263,"_156":264,"_158":211,"_159":141,"_160":265,"_162":118,"_106":266,"_100":161,"_164":187,"_166":267,"_167":22,"_168":-5,"_169":423,"_98":424},[],[203,210,263],{"_104":271,"_95":272,"_156":273,"_158":211,"_159":141,"_160":274,"_162":118,"_106":275,"_100":276,"_164":187,"_166":277,"_167":22,"_168":-5,"_169":426,"_98":427},[],[203,210,272],{"_104":281,"_95":282,"_156":283,"_158":211,"_159":141,"_160":284,"_162":118,"_106":285,"_100":286,"_164":187,"_166":287,"_167":22,"_168":-5,"_169":429,"_98":430},[],[203,210,282],{"_104":291,"_95":292,"_156":293,"_158":211,"_159":141,"_160":294,"_162":118,"_106":295,"_100":276,"_164":187,"_166":296,"_167":22,"_168":-5,"_169":432,"_98":433},[],[203,210,292],[203,210],{"_104":301,"_95":302,"_156":303,"_158":204,"_159":141,"_160":304,"_162":118,"_106":305,"_100":32,"_164":306,"_166":307,"_167":22,"_168":-5,"_169":436,"_98":437},[],[203,302],{"_104":311,"_95":312,"_156":313,"_158":204,"_159":141,"_160":314,"_162":118,"_106":315,"_100":316,"_164":306,"_166":317,"_167":22,"_168":-5,"_169":439,"_98":440},[],[203,312],{"_104":321,"_95":322,"_156":323,"_158":204,"_159":141,"_160":324,"_162":118,"_106":325,"_100":326,"_164":187,"_166":327,"_167":22,"_168":-5,"_169":442,"_98":443},[],[203,322],[203],{"_104":332,"_95":333,"_156":334,"_158":-5,"_159":141,"_160":121,"_162":118,"_106":335,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":446,"_98":453},[447,450],{"_104":338,"_95":339,"_156":340,"_158":334,"_159":141,"_160":341,"_162":118,"_106":342,"_100":326,"_164":187,"_166":343,"_167":22,"_168":-5,"_169":448,"_98":449},[],[333,339],{"_104":347,"_95":348,"_156":349,"_158":334,"_159":141,"_160":350,"_162":118,"_106":351,"_100":286,"_164":187,"_166":352,"_167":22,"_168":-5,"_169":451,"_98":452},[],[333,348],[333],{"_104":357,"_95":99,"_156":358,"_158":-5,"_159":141,"_160":359,"_162":118,"_106":360,"_100":186,"_164":306,"_166":361,"_167":22,"_168":-5,"_169":455,"_98":456},[],[99],[391,393,396,399,403,405,407,410,413,416,419,422,425,428,431,435,438,441,445,447,450,454],{"_104":357,"_95":99,"_156":358,"_158":-5,"_159":141,"_160":359,"_162":118,"_106":375,"_100":186,"_164":306,"_166":361,"_167":22,"_168":-5,"_98":459},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

\n Create a New Game\n

\n {currentGame?.name} - Add Players\n

\n Select a Card Set\n

{cardSet.name}

{card.title}

Game Over!

Players

Debug Console

Something went wrong