\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 {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}",[],[184,190,196],{"_102":205,"_95":206,"_157":207,"_159":191,"_160":138,"_161":162,"_163":116,"_104":208,"_99":32,"_165":200,"_167":209,"_168":22,"_169":-5,"_170":210,"_98":211},"918e9650-0c0a-11f0-8733-569c3dd06744","DebugInfo.tsx","469b0c62-ac6a-4978-aa24-20c9359bc847",["D",1743189997915],"/** @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}",[],[184,190,206],{"_102":213,"_95":214,"_157":215,"_159":191,"_160":138,"_161":162,"_163":116,"_104":216,"_99":32,"_165":200,"_167":217,"_168":22,"_169":-5,"_170":218,"_98":219},"918e9bb4-0c0a-11f0-8733-569c3dd06744","ErrorBoundary.tsx","0c452910-cd1a-4e66-9085-580f0439a6e7",["D",1743189997915],"/** @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}",[],[184,190,214],{"_102":221,"_95":222,"_157":223,"_159":191,"_160":138,"_161":162,"_163":116,"_104":224,"_99":32,"_165":200,"_167":225,"_168":22,"_169":-5,"_170":226,"_98":227},"918e9f56-0c0a-11f0-8733-569c3dd06744","GamePage.tsx","6a69caa8-41ee-4599-ad31-5741b6c21f9d",["D",1743189997915],"/** @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}",[],[184,190,222],{"_102":229,"_95":230,"_157":231,"_159":191,"_160":138,"_161":162,"_163":116,"_104":232,"_99":32,"_165":200,"_167":233,"_168":22,"_169":-5,"_170":234,"_98":235},"918ea776-0c0a-11f0-8733-569c3dd06744","Header.tsx","238bdd2c-9c70-4984-989d-e6391455c2e7",["D",1743189997915],"/** @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}",[],[184,190,230],{"_102":237,"_95":238,"_157":239,"_159":191,"_160":138,"_161":162,"_163":116,"_104":240,"_99":32,"_165":200,"_167":241,"_168":22,"_169":-5,"_170":242,"_98":243},"918ea9f6-0c0a-11f0-8733-569c3dd06744","HomePage.tsx","c979a90b-989f-44bb-89f7-7981b64a687a",["D",1743189997915],"/** @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}",[],[184,190,238],{"_102":245,"_95":246,"_157":247,"_159":191,"_160":138,"_161":162,"_163":116,"_104":248,"_99":32,"_165":200,"_167":249,"_168":22,"_169":-5,"_170":250,"_98":251},"918eb37e-0c0a-11f0-8733-569c3dd06744","NewGameForm.tsx","a519b64e-e3a0-4be1-b44e-be5e469f0572",["D",1743189997915],"/** @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}",[],[184,190,246],{"_102":253,"_95":254,"_157":255,"_159":191,"_160":138,"_161":162,"_163":116,"_104":256,"_99":32,"_165":200,"_167":257,"_168":22,"_169":-5,"_170":258,"_98":259},"918eb9e6-0c0a-11f0-8733-569c3dd06744","PlayerForm.tsx","47c6d049-4c0a-4347-afc7-68b5a55e98da",["D",1743189997915],"/** @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}",[],[184,190,254],{"_102":261,"_95":262,"_157":263,"_159":191,"_160":138,"_161":162,"_163":116,"_104":264,"_99":32,"_165":200,"_167":265,"_168":22,"_169":-5,"_170":266,"_98":267},"918ebebe-0c0a-11f0-8733-569c3dd06744","PlayerList.tsx","6a8760d7-a51d-4187-8c56-bebb8bffecdb",["D",1743189997915],"/** @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}",[],[184,190,262],[184,190],{"_102":270,"_95":271,"_157":272,"_159":185,"_160":138,"_161":162,"_163":116,"_104":273,"_99":32,"_165":274,"_167":275,"_168":22,"_169":-5,"_170":276,"_98":277},"918ec2c4-0c0a-11f0-8733-569c3dd06744","favicon.svg","53a6f20e-efab-44c8-98bf-4441844df1ef",["D",1743189997915],"file","",[],[184,271],{"_102":279,"_95":280,"_157":281,"_159":185,"_160":138,"_161":162,"_163":116,"_104":282,"_99":32,"_165":274,"_167":283,"_168":22,"_169":-5,"_170":284,"_98":285},"918ec4e0-0c0a-11f0-8733-569c3dd06744","index.html","87c59ce1-0b71-4bba-bddc-2d7010888d41",["D",1743189997915],"\n\n \n \n \n Timeline Game\n \n \n \n \n \n \n \n \n \n

\n \n \n",[],[184,280],{"_102":287,"_95":288,"_157":289,"_159":185,"_160":138,"_161":162,"_163":116,"_104":290,"_99":32,"_165":200,"_167":291,"_168":22,"_169":-5,"_170":292,"_98":293},"918ec8aa-0c0a-11f0-8733-569c3dd06744","index.tsx","deef4ca2-e31b-47a1-8558-25cc91422394",["D",1743189997915],"/** @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);",[],[184,288],[184],{"_102":296,"_95":297,"_157":298,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":299,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":300,"_98":317},"918ed4da-0c0a-11f0-8733-569c3dd06744","shared","c341ac73-1cd2-426e-af45-6f54907c384a",["D",1743189997915],[301,309],{"_102":302,"_95":303,"_157":304,"_159":298,"_160":138,"_161":162,"_163":116,"_104":305,"_99":32,"_165":200,"_167":306,"_168":22,"_169":-5,"_170":307,"_98":308},"918ecf12-0c0a-11f0-8733-569c3dd06744","types.ts","93d88ce4-93cf-49a0-96c7-4a4d2a05c269",["D",1743189997915],"// 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];",[],[297,303],{"_102":310,"_95":311,"_157":312,"_159":298,"_160":138,"_161":162,"_163":116,"_104":313,"_99":32,"_165":200,"_167":314,"_168":22,"_169":-5,"_170":315,"_98":316},"918ed1d8-0c0a-11f0-8733-569c3dd06744","utils.ts","45d8931a-2a35-49bd-90f9-f45323a97da9",["D",1743189997915],"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};",[],[297,311],[297],{"_102":319,"_95":320,"_157":321,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":322,"_99":32,"_165":274,"_167":323,"_168":22,"_169":-5,"_170":324,"_98":325},"918ed6e2-0c0a-11f0-8733-569c3dd06744","README.md","64941f93-e8d9-4ea0-bf30-a72193d1679b",["D",1743189997915],"# 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!",[],[320],"files",[154,172,182,188,194,204,212,220,228,236,244,252,260,269,278,286,295,301,309,318],"counts",{"_330":32,"_331":162,"_332":32,"_333":334},"pulls","branches","forks","envVars",{"_335":32,"_336":32},"count","emptyCount","contents",[339,342,345,348],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":340,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":341},["D",1743189997915],[156],{"_102":183,"_95":184,"_157":185,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":343,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":344},["D",1743189997915],[184],{"_102":296,"_95":297,"_157":298,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":346,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":347},["D",1743189997915],[297],{"_102":319,"_95":320,"_157":321,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":349,"_99":32,"_165":274,"_167":323,"_168":22,"_169":-5,"_98":350},["D",1743189997915],[320],"upstreamProject",{"_102":146,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":353},{"_93":354,"_130":355},"tmcw","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJUbmdsaHJKczVGSDdSS1R5MGtjVVczVFRtTi5qcGVnIn0","upstreamBranch",{"_102":141,"_104":358,"_359":360,"_95":43,"_139":146,"_99":361,"_140":-5,"_142":-5,"_362":363,"_106":-5,"_151":22,"_108":109,"_150":354,"_16":148,"_149":96},["D",1743174762702],"updatedAt",["D",1743192018007],326,"lockfileKey","1756176577122-esm.town_v_tmcw_timeline@326-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":370,"_337":375,"_384":385,"_388":389,"_392":-5,"_326":393,"_454":455,"_456":32,"_457":458},{"_102":103,"_95":96,"_104":371,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":372,"_132":373,"_135":374,"_151":22},["D",1743189997915],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":141,"_142":143,"_144":109,"_145":146,"_147":148,"_149":96,"_150":94},[376,378,380,382],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":340,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":377},[156],{"_102":183,"_95":184,"_157":185,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":343,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":379},[184],{"_102":296,"_95":297,"_157":298,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":346,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":381},[297],{"_102":319,"_95":320,"_157":321,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":349,"_99":32,"_165":274,"_167":323,"_168":22,"_169":-5,"_98":383},[320],"readme",{"_102":319,"_95":320,"_157":321,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":386,"_99":32,"_165":274,"_167":323,"_168":22,"_169":-5,"_98":387},["D",1743189997915],[320],"upstream",{"_102":141,"_104":390,"_359":391,"_95":43,"_139":146,"_99":361,"_140":-5,"_142":-5,"_362":363,"_106":-5,"_151":22,"_108":109,"_150":354,"_16":148,"_149":96},["D",1743174762702],["D",1743192018007],"pull",[394,396,400,402,404,407,410,413,416,419,422,425,428,432,435,438,442,444,447,451],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":164,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":395,"_98":399},[396],{"_102":173,"_95":174,"_157":114,"_159":158,"_160":138,"_161":162,"_163":116,"_104":175,"_99":32,"_165":176,"_167":177,"_168":22,"_169":178,"_170":397,"_98":398},[],[156,174],[156],{"_102":183,"_95":184,"_157":185,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":186,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":401,"_98":441},[402,432,435,438],{"_102":189,"_95":190,"_157":191,"_159":185,"_160":138,"_161":162,"_163":116,"_104":192,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":403,"_98":431},[404,407,410,413,416,419,422,425,428],{"_102":195,"_95":196,"_157":197,"_159":191,"_160":138,"_161":137,"_163":116,"_104":198,"_99":199,"_165":200,"_167":201,"_168":22,"_169":-5,"_170":405,"_98":406},[],[184,190,196],{"_102":205,"_95":206,"_157":207,"_159":191,"_160":138,"_161":162,"_163":116,"_104":208,"_99":32,"_165":200,"_167":209,"_168":22,"_169":-5,"_170":408,"_98":409},[],[184,190,206],{"_102":213,"_95":214,"_157":215,"_159":191,"_160":138,"_161":162,"_163":116,"_104":216,"_99":32,"_165":200,"_167":217,"_168":22,"_169":-5,"_170":411,"_98":412},[],[184,190,214],{"_102":221,"_95":222,"_157":223,"_159":191,"_160":138,"_161":162,"_163":116,"_104":224,"_99":32,"_165":200,"_167":225,"_168":22,"_169":-5,"_170":414,"_98":415},[],[184,190,222],{"_102":229,"_95":230,"_157":231,"_159":191,"_160":138,"_161":162,"_163":116,"_104":232,"_99":32,"_165":200,"_167":233,"_168":22,"_169":-5,"_170":417,"_98":418},[],[184,190,230],{"_102":237,"_95":238,"_157":239,"_159":191,"_160":138,"_161":162,"_163":116,"_104":240,"_99":32,"_165":200,"_167":241,"_168":22,"_169":-5,"_170":420,"_98":421},[],[184,190,238],{"_102":245,"_95":246,"_157":247,"_159":191,"_160":138,"_161":162,"_163":116,"_104":248,"_99":32,"_165":200,"_167":249,"_168":22,"_169":-5,"_170":423,"_98":424},[],[184,190,246],{"_102":253,"_95":254,"_157":255,"_159":191,"_160":138,"_161":162,"_163":116,"_104":256,"_99":32,"_165":200,"_167":257,"_168":22,"_169":-5,"_170":426,"_98":427},[],[184,190,254],{"_102":261,"_95":262,"_157":263,"_159":191,"_160":138,"_161":162,"_163":116,"_104":264,"_99":32,"_165":200,"_167":265,"_168":22,"_169":-5,"_170":429,"_98":430},[],[184,190,262],[184,190],{"_102":270,"_95":271,"_157":272,"_159":185,"_160":138,"_161":162,"_163":116,"_104":273,"_99":32,"_165":274,"_167":275,"_168":22,"_169":-5,"_170":433,"_98":434},[],[184,271],{"_102":279,"_95":280,"_157":281,"_159":185,"_160":138,"_161":162,"_163":116,"_104":282,"_99":32,"_165":274,"_167":283,"_168":22,"_169":-5,"_170":436,"_98":437},[],[184,280],{"_102":287,"_95":288,"_157":289,"_159":185,"_160":138,"_161":162,"_163":116,"_104":290,"_99":32,"_165":200,"_167":291,"_168":22,"_169":-5,"_170":439,"_98":440},[],[184,288],[184],{"_102":296,"_95":297,"_157":298,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":299,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":443,"_98":450},[444,447],{"_102":302,"_95":303,"_157":304,"_159":298,"_160":138,"_161":162,"_163":116,"_104":305,"_99":32,"_165":200,"_167":306,"_168":22,"_169":-5,"_170":445,"_98":446},[],[297,303],{"_102":310,"_95":311,"_157":312,"_159":298,"_160":138,"_161":162,"_163":116,"_104":313,"_99":32,"_165":200,"_167":314,"_168":22,"_169":-5,"_170":448,"_98":449},[],[297,311],[297],{"_102":319,"_95":320,"_157":321,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":322,"_99":32,"_165":274,"_167":323,"_168":22,"_169":-5,"_170":452,"_98":453},[],[320],"previews",[396],"ahead","behind",13,"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

shouser

timeline

Timeline