\n \n \n",[],[126,128],"918ec2c4-0c0a-11f0-8733-569c3dd06744","favicon.svg","53a6f20e-efab-44c8-98bf-4441844df1ef",["D",1743189997915],"",[],[126,135],"918ebebe-0c0a-11f0-8733-569c3dd06744","PlayerList.tsx","6a8760d7-a51d-4187-8c56-bebb8bffecdb","706f69a8-da97-439f-84cf-fdc56bb3df48",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { Player } from \"/shared/types.ts\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface PlayerListProps {\n players: Player[];\n onDeletePlayer: (id: string) => void;\n}\n\nexport function PlayerList({ players, onDeletePlayer }: PlayerListProps) {\n const [deletingId, setDeletingId] = useState(null);\n\n // Handle player deletion\n const handleDelete = async (id: string) => {\n setDeletingId(id);\n await onDeletePlayer(id);\n setDeletingId(null);\n };\n\n return (\n

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

\n );\n}",[],[126,149,142],"components","918eb9e6-0c0a-11f0-8733-569c3dd06744","PlayerForm.tsx","47c6d049-4c0a-4347-afc7-68b5a55e98da",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { defaultPlayerFormData, Player, PlayerFormData } from \"/shared/types.ts\";\nimport { validatePlayerForm } from \"/shared/utils.ts\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface PlayerFormProps {\n onPlayerAdded: (player: Player) => void;\n}\n\nexport function PlayerForm({ onPlayerAdded }: PlayerFormProps) {\n const [formData, setFormData] = useState({ ...defaultPlayerFormData });\n const [errors, setErrors] = useState([]);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Handle form input changes\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value,\n }));\n };\n\n // Handle form submission\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n // Validate form data\n const validationErrors = validatePlayerForm(formData);\n if (validationErrors.length > 0) {\n setErrors(validationErrors);\n return;\n }\n\n setErrors([]);\n setIsSubmitting(true);\n\n try {\n const response = await fetch(\"/api/players\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(formData),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to create player\");\n }\n\n const newPlayer = await response.json();\n onPlayerAdded(newPlayer);\n\n // Reset form\n setFormData({ ...defaultPlayerFormData });\n } catch (err) {\n setErrors([\"Failed to create player. Please try again.\"]);\n console.error(err);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n \n );\n}",[],[126,149,151],"918eb37e-0c0a-11f0-8733-569c3dd06744","NewGameForm.tsx","a519b64e-e3a0-4be1-b44e-be5e469f0572",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { defaultGameFormData, Game, GameFormData } from \"../../shared/types.ts\";\n\ninterface NewGameFormProps {\n onGameAdded: (game: Game) => void;\n}\n\nexport function NewGameForm({ onGameAdded }: NewGameFormProps) {\n const [formData, setFormData] = useState({ ...defaultGameFormData });\n const [errors, setErrors] = useState([]);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Handle form input changes\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value,\n }));\n };\n\n // Handle form submission\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n setErrors([]);\n setIsSubmitting(true);\n\n try {\n const response = await fetch(\"/api/games\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(formData),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to create game\");\n }\n\n const newGame = await response.json();\n onGameAdded(newGame);\n } catch (err) {\n setErrors([\"Failed to create game. Please try again.\"]);\n console.error(err);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n \n );\n}",[],[126,149,158],"918ea9f6-0c0a-11f0-8733-569c3dd06744","HomePage.tsx","c979a90b-989f-44bb-89f7-7981b64a687a",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Game } from \"https://esm.town/v/tmcw/timeline/shared/types.ts\";\nimport { Header } from \"./Header.tsx\";\nimport { NewGameForm } from \"./NewGameForm.tsx\";\n\ninterface HomePageProps {\n onNavigateToGame: (gameId: string) => void;\n}\n\nexport function HomePage({ onNavigateToGame }: HomePageProps) {\n const [games, setGames] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [showNewGameForm, setShowNewGameForm] = useState(false);\n\n // Fetch games on component mount\n useEffect(() => {\n fetchGames();\n }, []);\n\n // Fetch games from the API\n const fetchGames = async () => {\n try {\n setLoading(true);\n const response = await fetch(\"/api/games\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch games\");\n }\n const data = await response.json();\n setGames(data);\n setError(null);\n } catch (err) {\n setError(\"Error loading games. Please try again.\");\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n // Add a new game\n const handleGameAdded = (game: Game) => {\n setGames(prevGames => [...prevGames, game]);\n setShowNewGameForm(false);\n onNavigateToGame(game.id);\n };\n\n // Delete a game\n const handleDeleteGame = async (id: string) => {\n try {\n const response = await fetch(`/api/games/${id}`, {\n method: \"DELETE\",\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to delete game\");\n }\n\n setGames(prevGames => prevGames.filter(game => game.id !== id));\n } catch (err) {\n setError(\"Error deleting game. Please try again.\");\n console.error(err);\n }\n };\n\n // Format date for display\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleDateString();\n };\n\n return (\n

\n\n

\n {showNewGameForm\n ? (\n

Create New Game

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

\n \n

\n )\n : (\n

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

\n )}\n\n

Your Games

\n\n {loading\n ?

Loading games...

\n : error\n ?

{error}

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

\n \n \n \n \n

No games created yet.

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

\n )\n : (\n

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

{game.name}

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

\n\n {game.description &&

{game.description}

}\n\n

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

\n ))}\n

\n )}\n

\n\n \n \n );\n}",[],[126,149,165],"918ea776-0c0a-11f0-8733-569c3dd06744","Header.tsx","238bdd2c-9c70-4984-989d-e6391455c2e7",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React from \"https://esm.sh/react@18.2.0?dev\";\n\nexport function Header() {\n return (\n

\n Player List\n

\n );\n}",[],[126,149,172],"918e9f56-0c0a-11f0-8733-569c3dd06744","GamePage.tsx","6a69caa8-41ee-4599-ad31-5741b6c21f9d",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0?dev\";\nimport { Game, Player } from \"../../shared/types.ts\";\nimport { Header } from \"./Header.tsx\";\nimport { PlayerForm } from \"./PlayerForm.tsx\";\nimport { PlayerList } from \"./PlayerList.tsx\";\n\ninterface GamePageProps {\n gameId: string;\n onNavigateToHome: () => void;\n onStartGame: (gameId: string, players: Player[]) => void;\n}\n\nexport function GamePage({ gameId, onNavigateToHome, onStartGame }: GamePageProps) {\n const [game, setGame] = useState(null);\n const [players, setPlayers] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n // Fetch game and players on component mount\n useEffect(() => {\n fetchGame();\n fetchPlayers();\n }, [gameId]);\n\n // Fetch game from the API\n const fetchGame = async () => {\n try {\n setLoading(true);\n const response = await fetch(`/api/games/${gameId}`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch game\");\n }\n const data = await response.json();\n setGame(data);\n setError(null);\n } catch (err) {\n setError(\"Error loading game. Please try again.\");\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n // Fetch players for this game from the API\n const fetchPlayers = async () => {\n try {\n setLoading(true);\n const response = await fetch(`/api/games/${gameId}/players`);\n if (!response.ok) {\n throw new Error(\"Failed to fetch players\");\n }\n const data = await response.json();\n setPlayers(data);\n setError(null);\n } catch (err) {\n setError(\"Error loading players. Please try again.\");\n console.error(err);\n } finally {\n setLoading(false);\n }\n };\n\n // Add a new player to this game\n const addPlayer = async (player: Player) => {\n try {\n setPlayers(prevPlayers => [...prevPlayers, player]);\n } catch (err) {\n setError(\"Error adding player. Please try again.\");\n console.error(err);\n }\n };\n\n // Delete a player from this game\n const deletePlayer = async (id: string) => {\n try {\n const response = await fetch(`/api/games/${gameId}/players/${id}`, {\n method: \"DELETE\",\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to delete player\");\n }\n\n setPlayers(prevPlayers => prevPlayers.filter(player => player.id !== id));\n } catch (err) {\n setError(\"Error deleting player. Please try again.\");\n console.error(err);\n }\n };\n\n // Start the game with the current players\n const handleStartGame = () => {\n if (players.length < 2) {\n setError(\"You need at least 2 players to start a game.\");\n return;\n }\n onStartGame(gameId, players);\n };\n\n if (loading && !game) {\n return

Loading game...

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

Game not found or error loading game.

\n \n Back to Home\n \n

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

\n\n

{game.name}

\n \n Back to Games\n \n

\n\n {game.description &&

{game.description}

}\n\n

Add Players

\n \n

\n\n

Players in this Game

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

No players added to this game yet.

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

\n\n

\n \n Start Game\n \n

\n\n \n

\n );\n}",[],[126,149,179],"918e9bb4-0c0a-11f0-8733-569c3dd06744","ErrorBoundary.tsx","0c452910-cd1a-4e66-9085-580f0439a6e7",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { Component, ErrorInfo, ReactNode } from \"https://esm.sh/react@18.2.0?dev\";\n\ninterface Props {\n children: ReactNode;\n fallback?: ReactNode;\n}\n\ninterface State {\n hasError: boolean;\n error: Error | null;\n errorInfo: ErrorInfo | null;\n}\n\nexport class ErrorBoundary extends Component {\n constructor(props: Props) {\n super(props);\n this.state = {\n hasError: false,\n error: null,\n errorInfo: null\n };\n }\n\n static getDerivedStateFromError(error: Error): State {\n // Update state so the next render will show the fallback UI\n return { hasError: true, error, errorInfo: null };\n }\n\n componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n // You can also log the error to an error reporting service\n console.error(\"Error caught by ErrorBoundary:\", error, errorInfo);\n this.setState({\n error,\n errorInfo\n });\n }\n\n render(): ReactNode {\n if (this.state.hasError) {\n // You can render any custom fallback UI\n if (this.props.fallback) {\n return this.props.fallback;\n }\n \n return (\n

Something went wrong

\n Show error details\n

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

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

\n );\n }\n\n return this.props.children;\n }\n}",[],[126,149,186],"918e9650-0c0a-11f0-8733-569c3dd06744","DebugInfo.tsx","469b0c62-ac6a-4978-aa24-20c9359bc847",["D",1743189997915],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?dev\";\n\nexport function DebugInfo() {\n const [isOpen, setIsOpen] = useState(false);\n const [logs, setLogs] = useState([]);\n \n // Override console methods to capture logs\n React.useEffect(() => {\n const originalConsoleLog = console.log;\n const originalConsoleError = console.error;\n const originalConsoleWarn = console.warn;\n \n // Store up to 50 most recent logs\n const addLog = (type: string, ...args: any[]) => {\n const log = `[${type}] ${args.map(arg => \n typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)\n ).join(' ')}`;\n \n setLogs(prev => {\n const newLogs = [log, ...prev];\n return newLogs.slice(0, 50); // Keep only the 50 most recent logs\n });\n };\n \n console.log = (...args) => {\n originalConsoleLog(...args);\n addLog('LOG', ...args);\n };\n \n console.error = (...args) => {\n originalConsoleError(...args);\n addLog('ERROR', ...args);\n };\n \n console.warn = (...args) => {\n originalConsoleWarn(...args);\n addLog('WARN', ...args);\n };\n \n // Restore original console methods on cleanup\n return () => {\n console.log = originalConsoleLog;\n console.error = originalConsoleError;\n console.warn = originalConsoleWarn;\n };\n }, []);\n \n if (!isOpen) {\n return (\n \n );\n }\n \n return (\n

Debug Console

\n \n \n

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

No logs yet

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

\n {log}\n

\n ))\n )}\n

\n );\n}",[],[126,149,193],"7fbf1180-0c0e-11f0-b6ef-569c3dd06744","App.tsx","74a25492-2853-4bd3-8fdd-bb3cfdd72ce8",11,["D",1743191686067],10,"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { NewGameForm } from \"/frontend/components/NewGameForm.tsx\";\nimport { PlayerForm } from \"/frontend/components/PlayerForm.tsx\";\nimport { PlayerList } from \"/frontend/components/PlayerList.tsx\";\nimport { Card, CARD_SETS, CardSet, Game, GameState, Player } from \"/shared/types.ts\";\nimport { motion, Reorder } from \"https://esm.sh/motion/react?deps=react@18.2.0&dev=true\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?dev\";\n\n// Define the different views/routes\ntype View = \"newGame\" | \"players\" | \"cardSets\" | \"gameplay\";\n\n// Custom draggable list component to replace Framer Motion's Reorder\ninterface DraggableListProps {\n items: Card[];\n onReorder: (items: Card[]) => void;\n allowDrag: boolean;\n renderItem: (item: Card, index: number) => React.ReactNode;\n className?: string;\n}\n\nfunction DraggableList({ items, onReorder, allowDrag, renderItem, className = \"\" }: DraggableListProps) {\n const [draggedItem, setDraggedItem] = useState(null);\n const [draggedOverIndex, setDraggedOverIndex] = useState(null);\n\n const handleDragStart = (e: React.DragEvent, item: Card) => {\n if (!allowDrag) return;\n setDraggedItem(item);\n // Required for Firefox\n e.dataTransfer.setData(\"text/plain\", \"\");\n e.dataTransfer.effectAllowed = \"move\";\n };\n\n const handleDragOver = (e: React.DragEvent, index: number) => {\n e.preventDefault();\n if (!draggedItem) return;\n setDraggedOverIndex(index);\n };\n\n const handleDrop = (e: React.DragEvent, index: number) => {\n e.preventDefault();\n if (!draggedItem) return;\n\n const newItems = [...items];\n const draggedIndex = items.findIndex(item => item.id === draggedItem.id);\n\n // Remove the item from its original position\n newItems.splice(draggedIndex, 1);\n // Insert it at the new position\n newItems.splice(index, 0, draggedItem);\n\n onReorder(newItems);\n setDraggedItem(null);\n setDraggedOverIndex(null);\n };\n\n const handleDragEnd = () => {\n setDraggedItem(null);\n setDraggedOverIndex(null);\n };\n\n return (\n

\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}",[],[126,149,200],"918ec0d0-0c0a-11f0-8733-569c3dd06744",["D",1743189997915],[72,73,74,75,76,77,78,79,80],[126,149],"918ecd1e-0c0a-11f0-8733-569c3dd06744",["D",1743189997915],[71,81,82,83],[126],"918e524e-0c0a-11f0-8733-569c3dd06744",["D",1743189997915],[33],[68],"18a180fe-0be7-11f0-bd1f-569c3dd06744",["D",1743174762702],"updatedAt",["D",1743192018007],"main","projectId","18a1288e-0be7-11f0-bd1f-569c3dd06744",326,"forkedBranchId","forkedBranchVersion","lockfileKey","1756176577122-esm.town_v_tmcw_timeline@326-main","deletedAt","isOwned","privacy","public","userHandle","tmcw","orgId","f407f111-fdbb-4126-923f-44aed4d9e9ad","projectName",["D",1743189997915],[89],{"_43":216,"_13":68,"_46":49,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":253,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_66":254},{"_43":212,"_13":126,"_46":121,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":251,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_66":252},{"_43":113,"_13":105,"_46":99,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":249,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_66":250},{"_43":88,"_13":89,"_46":90,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":247,"_16":35,"_57":92,"_59":93,"_61":39,"_62":-5,"_66":248},["D",1743189997915],[89],["D",1743189997915],[105],["D",1743189997915],[126],["D",1743189997915],[68],"pulls","branches","forks","envVars",{"_262":35,"_264":35},"connections",{"_262":35,"_263":35},"count","unfilledCount","emptyCount","91876650-0c0a-11f0-8733-569c3dd06744",["D",1743189997915],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","387c2a1a-af32-4662-ba80-cb97133b520c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","a64c2ee7-6cd7-4fb7-9ff6-03782ed89739","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_308":304},"org",{"_11":12,"_302":-5,"_303":304,"_271":272,"_305":306,"_307":39},"branch",{"_16":202,"_13":224,"_43":51,"_225":265,"_228":220,"_229":298,"_299":235,"_300":226,"_301":239,"_240":14,"_236":12},312,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_43":265,"_13":14,"_55":403,"_232":-5,"_267":39,"_234":235,"_268":235,"_269":-5,"_270":-5,"_271":272,"_273":47,"_274":42,"_275":-5,"_276":-5,"_277":35,"_238":278,"_279":-5,"_280":-5,"_281":-5,"_282":-5,"_283":284,"_285":284,"_286":287,"_288":287,"_289":287,"_290":284,"_291":284,"_292":404,"_294":405,"_296":406,"_233":39},"tree",[343,345,359,362],[343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362],{"_255":35,"_256":53,"_257":35,"_258":341,"_260":342},[333,334,335,336],"upstreamProject",{"_43":226,"_13":14,"_269":-5,"_270":-5,"_234":235,"_292":331},"upstreamBranch",{"_43":220,"_55":329,"_222":330,"_13":224,"_225":226,"_16":227,"_228":-5,"_229":-5,"_230":231,"_232":-5,"_233":39,"_234":235,"_236":237,"_238":239,"_240":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743174762702],["D",1743192018007],{"_11":237,"_308":332},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7935dc1b-7699-4095-366a-2e9103307501/square512?exp=1789563599&sig=9240ff6f40b845f72b3455d4deec8ae4ff083f718361cbe7452e762847923218",{"_43":216,"_13":68,"_46":49,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":253,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_66":340},{"_43":212,"_13":126,"_46":121,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":251,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_66":339},{"_43":113,"_13":105,"_46":99,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":249,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_66":338},{"_43":88,"_13":89,"_46":90,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":247,"_16":35,"_57":92,"_59":93,"_61":39,"_62":-5,"_66":337},[89],[105],[126],[68],{"_262":35,"_264":35},{"_262":35,"_263":35},{"_43":216,"_13":68,"_46":49,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":217,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_64":401,"_66":402},{"_43":44,"_13":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":42,"_55":56,"_16":35,"_57":58,"_59":60,"_61":39,"_62":63,"_64":399,"_66":400},{"_43":212,"_13":126,"_46":121,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":213,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_64":397,"_66":398},{"_43":208,"_13":149,"_46":144,"_48":121,"_50":51,"_52":53,"_54":42,"_55":209,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_64":395,"_66":396},{"_43":199,"_13":200,"_46":201,"_48":144,"_50":51,"_52":202,"_54":42,"_55":203,"_16":204,"_57":101,"_59":205,"_61":39,"_62":-5,"_64":393,"_66":394},{"_43":192,"_13":193,"_46":194,"_48":144,"_50":51,"_52":53,"_54":42,"_55":195,"_16":35,"_57":101,"_59":196,"_61":39,"_62":-5,"_64":391,"_66":392},{"_43":185,"_13":186,"_46":187,"_48":144,"_50":51,"_52":53,"_54":42,"_55":188,"_16":35,"_57":101,"_59":189,"_61":39,"_62":-5,"_64":389,"_66":390},{"_43":178,"_13":179,"_46":180,"_48":144,"_50":51,"_52":53,"_54":42,"_55":181,"_16":35,"_57":101,"_59":182,"_61":39,"_62":-5,"_64":387,"_66":388},{"_43":171,"_13":172,"_46":173,"_48":144,"_50":51,"_52":53,"_54":42,"_55":174,"_16":35,"_57":101,"_59":175,"_61":39,"_62":-5,"_64":385,"_66":386},{"_43":164,"_13":165,"_46":166,"_48":144,"_50":51,"_52":53,"_54":42,"_55":167,"_16":35,"_57":101,"_59":168,"_61":39,"_62":-5,"_64":383,"_66":384},{"_43":157,"_13":158,"_46":159,"_48":144,"_50":51,"_52":53,"_54":42,"_55":160,"_16":35,"_57":101,"_59":161,"_61":39,"_62":-5,"_64":381,"_66":382},{"_43":150,"_13":151,"_46":152,"_48":144,"_50":51,"_52":53,"_54":42,"_55":153,"_16":35,"_57":101,"_59":154,"_61":39,"_62":-5,"_64":379,"_66":380},{"_43":141,"_13":142,"_46":143,"_48":144,"_50":51,"_52":53,"_54":42,"_55":145,"_16":35,"_57":101,"_59":146,"_61":39,"_62":-5,"_64":377,"_66":378},{"_43":134,"_13":135,"_46":136,"_48":121,"_50":51,"_52":53,"_54":42,"_55":137,"_16":35,"_57":92,"_59":138,"_61":39,"_62":-5,"_64":375,"_66":376},{"_43":127,"_13":128,"_46":129,"_48":121,"_50":51,"_52":53,"_54":42,"_55":130,"_16":35,"_57":92,"_59":131,"_61":39,"_62":-5,"_64":373,"_66":374},{"_43":118,"_13":119,"_46":120,"_48":121,"_50":51,"_52":53,"_54":42,"_55":122,"_16":35,"_57":101,"_59":123,"_61":39,"_62":-5,"_64":371,"_66":372},{"_43":113,"_13":105,"_46":99,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":114,"_16":35,"_57":115,"_59":-5,"_61":39,"_62":-5,"_64":369,"_66":370},{"_43":106,"_13":107,"_46":108,"_48":99,"_50":51,"_52":53,"_54":42,"_55":109,"_16":35,"_57":101,"_59":110,"_61":39,"_62":-5,"_64":367,"_66":368},{"_43":96,"_13":97,"_46":98,"_48":99,"_50":51,"_52":53,"_54":42,"_55":100,"_16":35,"_57":101,"_59":102,"_61":39,"_62":-5,"_64":365,"_66":366},{"_43":88,"_13":89,"_46":90,"_48":-5,"_50":51,"_52":53,"_54":42,"_55":91,"_16":35,"_57":92,"_59":93,"_61":39,"_62":-5,"_64":363,"_66":364},[],[89],[],[105,97],[],[105,107],[360,361],[105],[],[126,119],[],[126,128],[],[126,135],[],[126,149,142],[],[126,149,151],[],[126,149,158],[],[126,149,165],[],[126,149,172],[],[126,149,179],[],[126,149,186],[],[126,149,193],[],[126,149,200],[347,348,349,350,351,352,353,354,355],[126,149],[346,356,357,358],[126],[],[68,45],[344],[68],["D",1743189997915],{"_11":12,"_308":304},{"_11":12,"_302":-5,"_303":304,"_271":272,"_305":306,"_307":39},{"_16":202,"_13":224,"_43":51,"_225":265,"_228":220,"_229":298,"_299":235,"_300":226,"_301":239,"_240":14,"_236":12},"ctx",{"_292":-5,"_326":440,"_441":442,"_443":444,"_445":39,"_446":39,"_447":39,"_448":42,"_449":-5,"_450":-7,"_451":-7,"_452":35,"_453":39,"_454":39,"_455":-5,"_456":39,"_457":39,"_458":39,"_459":-5},"ENV",{"_411":412,"_413":414,"_415":224,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429,"_430":431,"_432":433,"_434":435,"_436":437,"_438":439},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Something went wrong

Debug Console

\n Create a New Game\n

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

\n Select a Card Set\n

{cardSet.name}

{card.title}

Game Over!

Players

shouser

timeline

Timeline