function MainComponent() { const [players, setPlayers] = React.useState([]); const [deck, setDeck] = React.useState([]); const [currentPlayer, setCurrentPlayer] = React.useState(0); const [currentCard, setCurrentCard] = React.useState(null); const [allSubmitted, setAllSubmitted] = React.useState(false); const [gameStarted, setGameStarted] = React.useState(false); const [numPlayers, setNumPlayers] = React.useState(0); const [revealedCards, setRevealedCards] = React.useState([]); const [waitingForCompletion, setWaitingForCompletion] = React.useState(false); const [submittedPlayers, setSubmittedPlayers] = React.useState(0); const startGameSetup = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const numPlayers = parseInt(formData.get("numPlayers")); if (numPlayers < 2 || numPlayers > 10) return; setNumPlayers(numPlayers); setPlayers(Array(numPlayers).fill({ name: "", points: 0 })); setGameStarted(true); }; const handlePlayersSetup = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const playerNames = players.map((_, i)=>({ name: formData.get(`player${i}`) || `Player ${i + 1}`, points: 0 })); setPlayers(playerNames); }; const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newDeck = []; for(let i = 0; i < 10; i++){ const category = formData.get(`card${i}-category`); const difficulty = parseInt(formData.get(`card${i}-difficulty`)); const instructions = formData.get(`card${i}-instructions`); if (!category || !instructions || difficulty < 1 || difficulty > 5) continue; newDeck.push({ category, difficulty, instructions }); } setDeck((prevDeck)=>[ ...prevDeck, ...newDeck ]); if (submittedPlayers + 1 === numPlayers) { setAllSubmitted(true); setCurrentPlayer(0); setDeck((prevDeck)=>prevDeck.sort(()=>Math.random() - 0.5)); } else { setSubmittedPlayers(submittedPlayers + 1); event.target.reset(); alert(`Player ${players[submittedPlayers + 1].name}'s turn to submit cards.`); } }; const handleDrawCard = ()=>{ if (deck.length > 0 && !currentCard) { const card = deck.pop(); setCurrentCard(card); setDeck([ ...deck ]); setWaitingForCompletion(true); } }; const handleComplete = (completed)=>{ if (currentCard && completed) { const updatedPlayers = [ ...players ]; updatedPlayers[currentPlayer].points += currentCard.difficulty; setPlayers(updatedPlayers); } setCurrentCard(null); setRevealedCards([]); setWaitingForCompletion(false); handleNextTurn(); }; const handleNextTurn = ()=>{ const nextPlayer = (currentPlayer + 1) % players.length; setCurrentPlayer(nextPlayer); }; const handleRevealCard = ()=>{ setRevealedCards((prev)=>[ ...prev, currentPlayer ]); }; const checkWin = players.some((player)=>player.points >= 30); const currentHighPlayer = players.reduce((prev, curr)=>curr.points > prev.points ? curr : prev, { name: "No winner", points: 0 }); const handleRestartGame = ()=>{ setPlayers([]); setDeck([]); setCurrentPlayer(0); setCurrentCard(null); setAllSubmitted(false); setGameStarted(false); setNumPlayers(0); setRevealedCards([]); setWaitingForCompletion(false); setSubmittedPlayers(0); }; const getCurrentCardClass = (card)=>{ if (card.difficulty === 5) return 'bg-black text-white'; switch(card.category){ case 'challenge': return 'bg-red-500 text-white'; case 'question': return 'bg-blue-500 text-white'; case 'social': return 'bg-pink-500 text-white'; case 'duel': return 'bg-yellow-500 text-white'; default: return ''; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 131, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 font-crimson-text", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, "Card Game"), !gameStarted && !allSubmitted && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "Setup Game Room"), /*#__PURE__*/ React.createElement("form", { onSubmit: startGameSetup, className: "space-y-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, "Number of Players"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "numPlayers", min: "2", max: "10", className: "w-full border border-gray-300 p-2 rounded-md", placeholder: "Enter number of players", required: true, __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white font-semibold py-2 rounded-md", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Set Player Names"))), gameStarted && !allSubmitted && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "Enter Player Names"), /*#__PURE__*/ React.createElement("form", { onSubmit: handlePlayersSetup, className: "space-y-4", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: numPlayers }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, "Player ", index + 1, " Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: `player${index}`, className: "w-full border border-gray-300 p-2 rounded-md", placeholder: `Enter player ${index + 1} name`, required: true, __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white font-semibold py-2 rounded-md", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "Start Card Creation")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameStarted(false), className: "mt-4 w-full bg-red-500 text-white font-semibold py-2 rounded-md", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, "Back")), gameStarted && submittedPlayers < numPlayers && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, "Submit Your Cards"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: 10 }) ].map((_, index)=>{ const cardIndex = `card${index}`; return /*#__PURE__*/ React.createElement("div", { key: index, className: "space-y-2", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this }, "Card ", index + 1), /*#__PURE__*/ React.createElement("select", { name: `${cardIndex}-category`, className: "w-full border border-gray-300 p-2 rounded-md", __source: { fileName: "", lineNumber: 189, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "challenge", __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this }, "Challenge"), /*#__PURE__*/ React.createElement("option", { value: "question", __source: { fileName: "", lineNumber: 194, columnNumber: 21 }, __self: this }, "Question"), /*#__PURE__*/ React.createElement("option", { value: "social", __source: { fileName: "", lineNumber: 195, columnNumber: 21 }, __self: this }, "Social"), /*#__PURE__*/ React.createElement("option", { value: "duel", __source: { fileName: "", lineNumber: 196, columnNumber: 21 }, __self: this }, "Duel")), /*#__PURE__*/ React.createElement("input", { type: "number", name: `${cardIndex}-difficulty`, min: "1", max: "5", className: "w-full border border-gray-300 p-2 rounded-md", placeholder: "Difficulty (1-5)", required: true, __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `${cardIndex}-instructions`, className: "w-full border border-gray-300 p-2 rounded-md", placeholder: "Instructions", required: true, __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this })); }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-red-500 text-white font-semibold py-2 rounded-md", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, "Complete Card Creation"))), allSubmitted && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6 mt-6", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, "Game Status"), checkWin || deck.length === 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, deck.length === 0 && !checkWin && /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 228, columnNumber: 50 }, __self: this }, "Game over! ", currentHighPlayer.name, " wins with ", currentHighPlayer.points, " points!"), checkWin && /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 229, columnNumber: 28 }, __self: this }, currentHighPlayer.name, " wins with ", currentHighPlayer.points, " points!"), /*#__PURE__*/ React.createElement("button", { onClick: handleRestartGame, className: "mt-4 w-full bg-green-500 text-white font-semibold py-2 rounded-md", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, "Start New Game")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, "Players:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-1", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, players.map((player, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `${currentPlayer === index ? "font-bold text-green-500" : "text-gray-700"} flex items-center space-x-2`, __source: { fileName: "", lineNumber: 242, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 243, columnNumber: 21 }, __self: this }, player.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 244, columnNumber: 21 }, __self: this }, ": ", /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 244, columnNumber: 29 }, __self: this }, player.points, " points"))))), !revealedCards.includes(currentPlayer) && /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDrawCard, className: "bg-yellow-500 text-white font-semibold py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, "Draw Card")), currentCard && /*#__PURE__*/ React.createElement("div", { className: `mt-4 ${getCurrentCardClass(currentCard)} p-4 rounded-lg text-center`, style: { width: "200px", height: "300px" }, __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, revealedCards.includes(currentPlayer) ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 262, columnNumber: 23 }, __self: this }, "Category: ", currentCard.category), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 263, columnNumber: 23 }, __self: this }, "Difficulty: ", currentCard.difficulty), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 264, columnNumber: 23 }, __self: this }, "Instructions: ", currentCard.instructions), waitingForCompletion && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 266, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium mb-2 text-gray-700", __source: { fileName: "", lineNumber: 267, columnNumber: 27 }, __self: this }, "Did you complete the card?"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleComplete(true), className: "bg-green-500 text-white font-semibold py-2 px-4 rounded-md mr-2", __source: { fileName: "", lineNumber: 268, columnNumber: 27 }, __self: this }, "Yes"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleComplete(false), className: "bg-red-500 text-white font-semibold py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 274, columnNumber: 27 }, __self: this }, "No"))) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center cursor-pointer", onClick: handleRevealCard, __source: { fileName: "", lineNumber: 284, columnNumber: 21 }, __self: this }, "Click to Reveal Card"))))); }