\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}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/tmcw/timeline/code/frontend/components/App.tsx","extension","actionData","errors"]

\n Create a New Game\n

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

\n Select a Card Set\n

{cardSet.name}

{card.title}

Game Over!

Players