\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}",[],[203,210,217],{"_103":225,"_95":226,"_156":227,"_158":211,"_159":141,"_160":228,"_162":117,"_105":229,"_100":32,"_164":187,"_166":230,"_167":22,"_168":-5,"_169":231,"_98":232},"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,226],{"_103":234,"_95":235,"_156":236,"_158":211,"_159":141,"_160":237,"_162":117,"_105":238,"_100":32,"_164":187,"_166":239,"_167":22,"_168":-5,"_169":240,"_98":241},"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,235],{"_103":243,"_95":244,"_156":245,"_158":211,"_159":141,"_160":246,"_162":117,"_105":247,"_100":32,"_164":187,"_166":248,"_167":22,"_168":-5,"_169":249,"_98":250},"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,244],{"_103":252,"_95":253,"_156":254,"_158":211,"_159":141,"_160":255,"_162":117,"_105":256,"_100":186,"_164":187,"_166":257,"_167":22,"_168":-5,"_169":258,"_98":259},"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,253],{"_103":261,"_95":262,"_156":263,"_158":211,"_159":141,"_160":264,"_162":117,"_105":265,"_100":161,"_164":187,"_166":266,"_167":22,"_168":-5,"_169":267,"_98":268},"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,262],{"_103":270,"_95":271,"_156":272,"_158":211,"_159":141,"_160":273,"_162":117,"_105":274,"_100":275,"_164":187,"_166":276,"_167":22,"_168":-5,"_169":277,"_98":278},"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,271],{"_103":280,"_95":281,"_156":282,"_158":211,"_159":141,"_160":283,"_162":117,"_105":284,"_100":285,"_164":187,"_166":286,"_167":22,"_168":-5,"_169":287,"_98":288},"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,281],{"_103":290,"_95":291,"_156":292,"_158":211,"_159":141,"_160":293,"_162":117,"_105":294,"_100":275,"_164":187,"_166":295,"_167":22,"_168":-5,"_169":296,"_98":297},"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,291],[203,210],{"_103":300,"_95":301,"_156":302,"_158":204,"_159":141,"_160":303,"_162":117,"_105":304,"_100":32,"_164":305,"_166":306,"_167":22,"_168":-5,"_169":307,"_98":308},"76c0b582-0be8-11f0-a5eb-569c3dd06744","favicon.svg","76c0b672-0be8-11f0-a5eb-569c3dd06744",6,["D",1743175350109],"file","",[],[203,301],{"_103":310,"_95":311,"_156":312,"_158":204,"_159":141,"_160":313,"_162":117,"_105":314,"_100":315,"_164":305,"_166":316,"_167":22,"_168":-5,"_169":317,"_98":318},"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,311],{"_103":320,"_95":321,"_156":322,"_158":204,"_159":141,"_160":323,"_162":117,"_105":324,"_100":325,"_164":187,"_166":326,"_167":22,"_168":-5,"_169":327,"_98":328},"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,321],[203],{"_103":331,"_95":332,"_156":333,"_158":-5,"_159":141,"_160":121,"_162":117,"_105":334,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":335,"_98":354},"67ade38a-0be8-11f0-9f91-569c3dd06744","shared","64cf833f-91e6-4c55-baa1-c22f56925433",["D",1743175324816],[336,345],{"_103":337,"_95":338,"_156":339,"_158":333,"_159":141,"_160":340,"_162":117,"_105":341,"_100":325,"_164":187,"_166":342,"_167":22,"_168":-5,"_169":343,"_98":344},"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];",[],[332,338],{"_103":346,"_95":347,"_156":348,"_158":333,"_159":141,"_160":349,"_162":117,"_105":350,"_100":285,"_164":187,"_166":351,"_167":22,"_168":-5,"_169":352,"_98":353},"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};",[],[332,347],[332],{"_103":356,"_95":357,"_156":358,"_158":-5,"_159":141,"_160":359,"_162":117,"_105":360,"_100":186,"_164":305,"_166":361,"_167":22,"_168":-5,"_169":362,"_98":363},"0a67659e-0c0a-11f0-9e41-569c3dd06744","README.md","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!",[],[357],"files",[153,171,180,191,201,208,215,224,233,242,251,260,269,279,289,299,309,319,330,336,345,355],"counts",{"_368":32,"_369":186,"_370":186,"_371":372},"pulls","branches","forks","envVars",{"_373":32,"_374":32},"count","emptyCount","contents",[],{"_103":216,"_95":217,"_156":218,"_158":211,"_159":141,"_160":140,"_162":117,"_105":378,"_100":220,"_164":187,"_166":221,"_167":22,"_168":-5,"_98":379},["D",1743192018007],[203,210,217],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":388,"_305":393,"_396":397,"_461":462,"_476":-7,"_477":205,"_478":22},{"_103":104,"_95":96,"_105":389,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":119,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":390,"_135":391,"_138":392,"_150":22},["D",1743174762702],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":140,"_95":43,"_103":141,"_142":104,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},{"_103":216,"_95":217,"_156":218,"_158":211,"_159":141,"_160":140,"_162":117,"_105":394,"_100":220,"_164":187,"_166":221,"_167":22,"_168":-5,"_98":395},["D",1743192018007],[203,210,217],"history",[398,404,410,415,420,425,430,435,440,446,451,456],{"_103":399,"_159":141,"_156":218,"_95":217,"_166":400,"_164":187,"_100":401,"_158":211,"_105":402,"_160":403,"_168":-5},"63682eba-0bee-11f0-90ab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 newly placed card is in the correct position\n const isCorrectPosition = isNewCardInCorrectPosition(playedCards, currentCard.id);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\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 } 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 => prev ? { \n ...prev, \n playedCards: sortedCards,\n showYears: true // Show years after cards have been sorted\n } : null);\n \n // Show a message that the card was placed incorrectly\n setError(`Incorrect placement! ${currentPlayer.name} doesn't get a point. The cards have been reordered.`);\n setTimeout(() => setError(null), 3000);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the newly placed card is in the correct position\n const isNewCardInCorrectPosition = (cards: Card[], newCardId: string): boolean => {\n // Find the index of the newly placed card\n const newCardIndex = cards.findIndex(card => card.id === newCardId);\n if (newCardIndex === -1) return false;\n \n const newCard = cards[newCardIndex];\n \n // Check if the card is in the correct position relative to its neighbors\n // If it's the first card, it's always correct\n if (cards.length === 1) return true;\n \n // Check if the card is in the correct position relative to the card before it\n if (newCardIndex > 0 && cards[newCardIndex - 1].year > newCard.year) {\n return false;\n }\n \n // Check if the card is in the correct position relative to the card after it\n if (newCardIndex < cards.length - 1 && cards[newCardIndex + 1].year < newCard.year) {\n return false;\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

e.preventDefault()}\n onDrop={(e) => {\n e.preventDefault();\n if (gameState?.currentCard) {\n // Add the current card to playedCards\n setGameState(prev => {\n if (!prev || !prev.currentCard) return prev;\n return {\n ...prev,\n playedCards: [...prev.playedCards, prev.currentCard],\n currentCard: { ...prev.currentCard, dragged: true } // Mark as dragged to update UI\n };\n });\n }\n }}\n >\n {gameState?.playedCards.length === 0 ? (\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

\n {/* Only show the year if showYears is true */}\n {gameState.showYears && (\n

{card.year}

\n )}\n

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

\n {/* Don't show the year to make the game challenging */}\n

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",11,["D",1743177894620],81,{"_103":405,"_159":141,"_156":218,"_95":217,"_166":406,"_164":187,"_100":407,"_158":211,"_105":408,"_160":409,"_168":-5},"57ca2748-0bee-11f0-b186-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\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(null);\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 => prev ? { \n ...prev, \n playedCards: sortedCards,\n showYears: true // Show years after cards have been sorted\n } : null);\n \n // Show a message that the card was placed incorrectly\n setError(\"Incorrect placement! The cards have been reordered.\");\n setTimeout(() => setError(null), 3000);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the newly placed card is in the correct position\n const isNewCardInCorrectPosition = (cards: Card[], newCardId: string): boolean => {\n // Find the index of the newly placed card\n const newCardIndex = cards.findIndex(card => card.id === newCardId);\n if (newCardIndex === -1) return false;\n \n const newCard = cards[newCardIndex];\n \n // Check if the card is in the correct position relative to its neighbors\n // If it's the first card, it's always correct\n if (cards.length === 1) return true;\n \n // Check if the card is in the correct position relative to the card before it\n if (newCardIndex > 0 && cards[newCardIndex - 1].year > newCard.year) {\n return false;\n }\n \n // Check if the card is in the correct position relative to the card after it\n if (newCardIndex < cards.length - 1 && cards[newCardIndex + 1].year < newCard.year) {\n return false;\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

\n {/* Only show the year if showYears is true */}\n {gameState.showYears && (\n

{card.year}

\n )}\n

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

\n {/* Don't show the year to make the game challenging */}\n

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",10,["D",1743177875139],80,{"_103":411,"_159":141,"_156":218,"_95":217,"_166":412,"_164":187,"_100":325,"_158":211,"_105":413,"_160":414,"_168":-5},"31f0c324-0bee-11f0-8db6-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\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(null);\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 => prev ? { \n ...prev, \n playedCards: sortedCards,\n showYears: true // Show years after cards have been sorted\n } : null);\n \n // Show a message that the card was placed incorrectly\n setError(\"Incorrect placement! The cards have been reordered.\");\n setTimeout(() => setError(null), 3000);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the cards are in the correct chronological order\n const isCardInCorrectPosition = (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 return false;\n }\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

\n {/* Only show the year if showYears is true */}\n {gameState.showYears && (\n

{card.year}

\n )}\n

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

\n {/* Don't show the year to make the game challenging */}\n

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",["D",1743177811637],79,{"_103":416,"_159":141,"_156":218,"_95":217,"_166":417,"_164":187,"_100":212,"_158":211,"_105":418,"_160":419,"_168":-5},"2d9824c0-0bee-11f0-bf67-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 };\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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\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(null);\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 => prev ? { \n ...prev, \n playedCards: sortedCards,\n showYears: true // Show years after cards have been sorted\n } : null);\n \n // Show a message that the card was placed incorrectly\n setError(\"Incorrect placement! The cards have been reordered.\");\n setTimeout(() => setError(null), 3000);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the cards are in the correct chronological order\n const isCardInCorrectPosition = (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 return false;\n }\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

\n {/* Only show the year if showYears is true */}\n {gameState.showYears && (\n

{card.year}

\n )}\n

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

\n {/* Don't show the year to make the game challenging */}\n

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",["D",1743177804343],78,{"_103":421,"_159":141,"_156":218,"_95":217,"_166":422,"_164":187,"_100":285,"_158":211,"_105":423,"_160":424,"_168":-5},"261a8fbc-0bee-11f0-9004-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 };\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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\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(null);\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 => prev ? { \n ...prev, \n playedCards: sortedCards,\n showYears: true // Show years after cards have been sorted\n } : null);\n \n // Show a message that the card was placed incorrectly\n setError(\"Incorrect placement! The cards have been reordered.\");\n setTimeout(() => setError(null), 3000);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the cards are in the correct chronological order\n const isCardInCorrectPosition = (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 return false;\n }\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

\n {/* Only show the year after the card has been correctly placed */}\n {isCardInCorrectPosition(gameState.playedCards) && (\n

{card.year}

\n )}\n

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

\n {/* Don't show the year to make the game challenging */}\n

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",["D",1743177791777],76,{"_103":426,"_159":141,"_156":218,"_95":217,"_166":427,"_164":187,"_100":303,"_158":211,"_105":428,"_160":429,"_168":-5},"1b0fa3fa-0bee-11f0-a4c7-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 };\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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\n // If correct, give the player a point\n updatedPlayers[currentPlayerIndex] = {\n ...currentPlayer,\n score: (currentPlayer.score || 0) + 1\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 => prev ? { ...prev, playedCards: sortedCards } : null);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the cards are in the correct chronological order\n const isCardInCorrectPosition = (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 return false;\n }\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

\n {/* Only show the year after the card has been correctly placed */}\n {isCardInCorrectPosition(gameState.playedCards) && (\n

{card.year}

\n )}\n

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

\n {/* Don't show the year to make the game challenging */}\n

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",["D",1743177773249],75,{"_103":431,"_159":141,"_156":218,"_95":217,"_166":432,"_164":187,"_100":205,"_158":211,"_105":433,"_160":434,"_168":-5},"1725c06c-0bee-11f0-9004-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 };\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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\n // If correct, give the player a point\n updatedPlayers[currentPlayerIndex] = {\n ...currentPlayer,\n score: (currentPlayer.score || 0) + 1\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 => prev ? { ...prev, playedCards: sortedCards } : null);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the cards are in the correct chronological order\n const isCardInCorrectPosition = (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 return false;\n }\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

\n {/* Only show the year after the card has been correctly placed */}\n {isCardInCorrectPosition(gameState.playedCards) && (\n

{card.year}

\n )}\n

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",["D",1743177766684],74,{"_103":436,"_159":141,"_156":218,"_95":217,"_166":437,"_164":187,"_100":161,"_158":211,"_105":438,"_160":439,"_168":-5},"e4ea6d14-0bed-11f0-8883-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 };\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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\n // If correct, give the player a point\n updatedPlayers[currentPlayerIndex] = {\n ...currentPlayer,\n score: (currentPlayer.score || 0) + 1\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 => prev ? { ...prev, playedCards: sortedCards } : null);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the cards are in the correct chronological order\n const isCardInCorrectPosition = (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 return false;\n }\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

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

{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 message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

{card.year}

{card.description}

\n ))}\n

\n )}\n

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

Game Over!

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

\n setCurrentView('players')}\n className=\"mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg shadow-md\"\n >\n New Game\n \n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard && !gameState.playedCards.some(card => card.id === gameState.currentCard?.id) ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

{gameState.currentCard.description}

\n ) : gameState?.status === 'finished' ? (\n

Game Over

\n ) : (\n

\n {gameState?.playedCards.some(card => card.id === gameState.currentCard?.id) \n ? \"Card placed - click Done to continue\" \n : \"No more cards\"}\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}",["D",1743177682408],72,{"_103":441,"_159":141,"_156":218,"_95":217,"_166":442,"_164":187,"_100":443,"_158":211,"_105":444,"_160":445,"_168":-5},"d099acbc-0bed-11f0-bdcc-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 };\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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 card is in the correct position\n const isCorrectPosition = isCardInCorrectPosition(playedCards);\n \n // Create a copy of players to update scores\n const updatedPlayers = [...players];\n \n if (isCorrectPosition) {\n // If correct, give the player a point\n updatedPlayers[currentPlayerIndex] = {\n ...currentPlayer,\n score: (currentPlayer.score || 0) + 1\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 => prev ? { ...prev, playedCards: sortedCards } : null);\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 return {\n ...prev,\n players: updatedPlayers,\n currentPlayerIndex: nextPlayerIndex,\n currentCard: nextCard,\n remainingCards: newRemainingCards,\n status: newRemainingCards.length === 0 && !nextCard ? 'finished' : 'playing'\n };\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 the cards are in the correct chronological order\n const isCardInCorrectPosition = (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 return false;\n }\n }\n \n return true;\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

\n {/* Header with card set name */}\n

{selectedCardSet?.name}

\n \n

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

\n {/* Played cards area (middle of screen) */}\n

e.preventDefault()}\n onDrop={(e) => {\n e.preventDefault();\n if (gameState?.currentCard) {\n // In a real implementation, we would handle the drop logic here\n // For now, we'll just add the card to playedCards\n setGameState(prev => {\n if (!prev || !prev.currentCard) return prev;\n return {\n ...prev,\n playedCards: [...prev.playedCards, prev.currentCard],\n currentCard: undefined\n };\n });\n }\n }}\n >\n {gameState?.playedCards.length === 0 ? (\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

{card.year}

\n ))}\n

\n )}\n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

{gameState.currentCard.description}

\n ) : (\n

No more cards

\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}",3,["D",1743177648327],71,{"_103":447,"_159":141,"_156":218,"_95":217,"_166":448,"_164":187,"_100":121,"_158":211,"_105":449,"_160":450,"_168":-5},"c660eefe-0bed-11f0-b9ad-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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: 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 };\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 => prev ? { \n ...prev, \n currentCard: firstCard,\n remainingCards: cards.slice(1) // Store the rest of the cards for later use\n } : null);\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 // In a real implementation, we would update scores and get the next card\n // For now, we'll just log a message\n console.log('Player completed their turn');\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

\n {/* Header with card set name */}\n

{selectedCardSet?.name}

\n \n

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

\n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

{card.year}

\n ))}\n

\n )}\n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

{gameState.currentCard.description}

\n ) : (\n

No more cards

\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}",["D",1743177631173],69,{"_103":452,"_159":141,"_156":218,"_95":217,"_166":453,"_164":187,"_100":186,"_158":211,"_105":454,"_160":455,"_168":-5},"94aa5568-0bec-11f0-9993-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player, CardSet, CARD_SETS, GameState, Card } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\n// Define the different views/routes\ntype View = 'players' | 'cardSets' | 'gameplay';\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('players');\n const [selectedCardSet, setSelectedCardSet] = useState(null);\n const [gameState, setGameState] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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 = (cardSet: CardSet) => {\n setSelectedCardSet(cardSet);\n \n // Initialize game state with players and selected card set\n const initialGameState: GameState = {\n id: crypto.randomUUID(),\n cardSetId: cardSet.id,\n players: players.map(player => ({ ...player, score: 0 })),\n playedCards: [],\n status: 'playing',\n // We'll fetch the first card when the game starts\n };\n \n setGameState(initialGameState);\n setCurrentView('gameplay');\n \n // In a real implementation, we would fetch the first card here\n // For now, we'll use a mock card\n const mockCard: Card = {\n id: crypto.randomUUID(),\n title: 'First Historical Event',\n year: 1492,\n description: 'A significant historical event',\n setId: cardSet.id\n };\n \n setGameState(prev => prev ? { ...prev, currentCard: mockCard } : null);\n };\n\n // Handle player completing their turn\n const handlePlayerDone = () => {\n // In a real implementation, we would update scores and get the next card\n // For now, we'll just log a message\n console.log('Player completed their turn');\n };\n\n // Render the appropriate view based on currentView state\n const renderView = () => {\n switch (currentView) {\n case 'players':\n return (\n <>\n

\n 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

\n \n Next\n \n

\n \n );\n \n case 'cardSets':\n return (\n <>\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-600 text-white font-bold py-2 px-6 rounded-lg shadow-md mr-4\"\n >\n Back\n \n

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

\n {/* Header with card set name */}\n

{selectedCardSet?.name}

\n \n

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

\n {/* Played cards area (middle of screen) */}\n

Drag cards here to place them in chronological order

\n ) : (\n

\n {gameState?.playedCards.map(card => (\n

{card.title}

{card.year}

\n ))}\n

\n )}\n

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

\n \n Done\n \n

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

Players

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

\n \n {/* Current card (bottom of screen) */}\n

\n {gameState?.currentCard ? (\n

{\n e.dataTransfer.setData('text/plain', gameState.currentCard?.id || '');\n }}\n >\n

{gameState.currentCard.title}

{gameState.currentCard.description}

\n ) : (\n

No more cards

\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}",["D",1743177118273],67,{"_103":457,"_159":141,"_156":218,"_95":217,"_166":458,"_164":187,"_100":32,"_158":211,"_105":459,"_160":460,"_168":-5},"2c71975a-0beb-11f0-a4da-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Player } from \"/shared/types.ts\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\n\nexport function App() {\n const [players, setPlayers] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n // Fetch players on component mount\n useEffect(() => {\n fetchPlayers();\n }, []);\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 return (\n

\n 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 \n

\n );\n}",["D",1743176513926],63,"versions",[463,465,466,467,468,469,470,471,472,473,474,475],{"_305":398,"_464":404},"previous",{"_305":404,"_464":410},{"_305":410,"_464":415},{"_305":415,"_464":420},{"_305":420,"_464":425},{"_305":425,"_464":430},{"_305":430,"_464":435},{"_305":435,"_464":440},{"_305":440,"_464":446},{"_305":446,"_464":451},{"_305":451,"_464":456},{"_305":456,"_464":-5},"versionNumber","page","hasNext","actionData","errors"]

tmcw

timeline

History for App.tsx