function MainComponent() { const [cards, setCards] = useState([]); const [flipped, setFlipped] = useState([]); const [matched, setMatched] = useState([]); const [moves, setMoves] = useState(0); const [score, setScore] = useState(0); const [gameStarted, setGameStarted] = useState(false); const [gameComplete, setGameComplete] = useState(false); const [time, setTime] = useState(0); const [playerName, setPlayerName] = useState(""); const [highScores, setHighScores] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [tournamentActive, setTournamentActive] = useState(false); const [tournamentData, setTournamentData] = useState(null); const [tournamentDuration, setTournamentDuration] = useState(1); const [savingToTournament, setSavingToTournament] = useState(false); const [hasSubmittedTournamentScore, setHasSubmittedTournamentScore] = useState(false); const [hasSubmittedHighScore, setHasSubmittedHighScore] = useState(false); const cardItems = [ { id: "pancakes", name: "Stack of Pancakes", image: "https://ucarecdn.com/d51b1ba8-6009-4151-baca-e09498bfde45/-/format/auto/" }, { id: "milk", name: "Happy Cow Milk", image: "https://ucarecdn.com/436e2b47-c2d0-4cd3-bf76-8e57e8ac5de5/-/format/auto/" }, { id: "flour", name: "Flour", image: "https://ucarecdn.com/c0734171-230c-42f9-9098-c6271d849e99/-/format/auto/" }, { id: "whisk", name: "Whisk", image: "https://ucarecdn.com/4101c78e-8e25-4540-b9a1-dc4a2ba4f98d/-/format/auto/" }, { id: "pan", name: "Frying Pan", image: "https://ucarecdn.com/ea2356c2-d3c0-421a-b182-dda54b3f903f/-/format/auto/" }, { id: "blueberries", name: "Blueberries", image: "https://ucarecdn.com/63dce1a3-d86e-4beb-83eb-4e22e5f7d16f/-/format/auto/" }, { id: "whipped_cream", name: "Whipped Cream", image: "https://ucarecdn.com/98f192aa-9c0a-4200-88e6-172b8fc7a6e6/-/format/auto/" }, { id: "utensils", name: "Kitchen Utensils", image: "https://ucarecdn.com/107b4bc0-7a5d-49e0-985d-94dca9f933c5/-/format/auto/" }, { id: "spatula", name: "Spatula", image: "https://ucarecdn.com/ac930621-8e2c-4cdf-bbc6-3e123c10b73a/-/format/auto/" }, { id: "syrup", name: "Syrup", image: "https://ucarecdn.com/dcdc61fb-9e96-4b3e-97d1-efe47f3aaaaa/-/format/auto/" }, { id: "egg", name: "Egg", image: "https://ucarecdn.com/27f58a39-502a-4dcd-a33c-ca4c65f410de/-/format/auto/" }, { id: "butter", name: "Butter", image: "https://ucarecdn.com/a793f733-9af4-4a8c-8e36-1274b9b16fe1/-/format/auto/" }, { id: "maple_leaf", name: "Maple Leaf", image: "https://ucarecdn.com/84568e7f-5cb7-43f6-9b0a-aaccef904dc2/-/format/auto/" }, { id: "plate", name: "Plate of Pancakes", image: "https://ucarecdn.com/b2d32479-5f00-4922-b2bb-b8d9fc9cd51e/-/format/auto/" }, { id: "strawberries", name: "Strawberries", image: "https://ucarecdn.com/2e1a2524-42ea-4efc-8a49-d40dd049fd66/-/format/auto/" }, { id: "more_pancakes", name: "More Pancakes", image: "https://ucarecdn.com/2239badb-771a-4f77-9472-bd4e981f6bf9/-/format/auto/" } ]; useEffect(()=>{ initializeGame(); fetchHighScores(); fetchTournamentData(); const interval = setInterval(fetchTournamentData, 30000); return ()=>clearInterval(interval); }, []); useEffect(()=>{ let timer; if (gameStarted && !gameComplete) { timer = setInterval(()=>{ setTime((prev)=>prev + 1); }, 1000); } return ()=>clearInterval(timer); }, [ gameStarted, gameComplete ]); const initializeGame = ()=>{ const shuffledCards = [ ...cardItems, ...cardItems ].sort(()=>Math.random() - 0.5).map((card, index)=>({ ...card, index })); setCards(shuffledCards); setFlipped([]); setMatched([]); setMoves(0); setScore(0); setTime(0); setGameStarted(false); setGameComplete(false); setHasSubmittedHighScore(false); setHasSubmittedTournamentScore(false); }; const fetchHighScores = async ()=>{ try { const response = await fetch("/api/scores/list", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) throw new Error("Failed to fetch high scores"); const data = await response.json(); if (data.scores) { setHighScores(data.scores); } } catch (err) { setError("Could not load high scores"); console.error(err); } }; const fetchTournamentData = async ()=>{ try { const response = await fetch("/api/tournament/active", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) throw new Error("Failed to fetch tournament data"); const data = await response.json(); setTournamentActive(data.active); setTournamentData(data); } catch (err) { console.error(err); } }; const createTournament = async ()=>{ try { const response = await fetch("/api/tournament/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ duration_hours: tournamentDuration }) }); if (!response.ok) throw new Error("Failed to create tournament"); await fetchTournamentData(); } catch (err) { console.error(err); } }; const saveTournamentScore = async ()=>{ if (!playerName.trim()) return; setSavingToTournament(true); try { const response = await fetch("/api/tournament/save-score", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ playerName, score, timeTaken: time, moves }) }); const data = await response.json(); if (!response.ok) throw new Error(data.error || "Failed to save tournament score"); setHasSubmittedTournamentScore(true); await fetchTournamentData(); } catch (err) { setError(err.message || "Could not save your tournament score"); console.error(err); } finally{ setSavingToTournament(false); } }; const handleCardClick = (index)=>{ if (!gameStarted) setGameStarted(true); if (flipped.length === 2 || flipped.includes(index) || matched.includes(index)) return; const newFlipped = [ ...flipped, index ]; setFlipped(newFlipped); if (newFlipped.length === 2) { setMoves((m)=>m + 1); const [first, second] = newFlipped; if (cards[first].id === cards[second].id) { setMatched([ ...matched, first, second ]); const baseMatchScore = 50; const timeMultiplier = Math.pow(0.99, time); const timeBonus = Math.round(5000 * timeMultiplier); const idealMoves = cards.length / 2; const movesPenalty = Math.pow(1.2, Math.max(0, moves - idealMoves)); const moveBonus = Math.round(5000 / movesPenalty); const matchPoints = baseMatchScore + timeBonus + moveBonus; setScore((s)=>s + matchPoints); setFlipped([]); if (matched.length + 2 === cards.length) { setGameComplete(true); } } else { setTimeout(()=>setFlipped([]), 1000); } } }; const saveScore = async ()=>{ if (!playerName.trim()) return; setLoading(true); try { const response = await fetch("/api/scores/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ playerName, score, timeTaken: time, moves }) }); const data = await response.json(); if (!response.ok) throw new Error(data.error || "Failed to save score"); setHasSubmittedHighScore(true); await fetchHighScores(); } catch (err) { setError(err.message || "Could not save your score"); console.error(err); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFF8E7] dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 295, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 296, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 297, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-[#B85C38] dark:text-[#E6A157] mb-2", __source: { fileName: "", lineNumber: 298, columnNumber: 11 }, __self: this }, "🥞 Flapjacks"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-[#725A3B] dark:text-[#D4B483]", __source: { fileName: "", lineNumber: 301, columnNumber: 11 }, __self: this }, "Flip & match your way to pancake perfection!")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-8", __source: { fileName: "", lineNumber: 306, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4", __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-xl p-4 shadow-lg mb-4", __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#725A3B] dark:text-[#D4B483] text-sm md:text-base", __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, "Moves: ", moves), /*#__PURE__*/ React.createElement("div", { className: "text-[#725A3B] dark:text-[#D4B483] text-sm md:text-base", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, "Time: ", Math.floor(time / 60), ":", (time % 60).toString().padStart(2, "0")), /*#__PURE__*/ React.createElement("div", { className: "text-[#725A3B] dark:text-[#D4B483] text-sm md:text-base", __source: { fileName: "", lineNumber: 317, columnNumber: 17 }, __self: this }, "Score: ", score)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 md:grid-cols-8 gap-2 md:gap-3", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this }, cards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleCardClick(index), className: `aspect-square rounded-lg cursor-pointer transition-all duration-300 transform-style-3d ${flipped.includes(index) || matched.includes(index) ? "rotate-y-180" : ""}`, __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full h-full ${flipped.includes(index) || matched.includes(index) ? "bg-[#FFE6C7] dark:bg-[#4A3B2A]" : "bg-[#B85C38] dark:bg-[#725A3B]"} rounded-lg flex items-center justify-center transform-style-3d`, __source: { fileName: "", lineNumber: 333, columnNumber: 21 }, __self: this }, flipped.includes(index) || matched.includes(index) ? /*#__PURE__*/ React.createElement("img", { src: card.image, alt: card.name, className: "w-full h-full object-contain p-1.5 rounded-lg rotate-y-180-reverse", __source: { fileName: "", lineNumber: 341, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg md:text-xl", __source: { fileName: "", lineNumber: 347, columnNumber: 25 }, __self: this }, "?")))))), /*#__PURE__*/ React.createElement("button", { onClick: initializeGame, className: "w-full bg-[#B85C38] dark:bg-[#E6A157] text-white py-2.5 rounded-lg hover:opacity-90 transition-opacity", __source: { fileName: "", lineNumber: 355, columnNumber: 13 }, __self: this }, "New Game")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/4 flex flex-col h-full", __source: { fileName: "", lineNumber: 363, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-xl p-3 shadow-lg mb-3", __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold text-[#725A3B] dark:text-[#D4B483] mb-2", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, "High Scores"), error ? /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 369, columnNumber: 17 }, __self: this }, error) : /*#__PURE__*/ React.createElement("div", { className: "space-y-1.5", __source: { fileName: "", lineNumber: 371, columnNumber: 17 }, __self: this }, highScores.map((score, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center gap-2 text-[#725A3B] dark:text-[#D4B483] text-sm", __source: { fileName: "", lineNumber: 373, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-6", __source: { fileName: "", lineNumber: 377, columnNumber: 23 }, __self: this }, index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : `${index + 1}.`), /*#__PURE__*/ React.createElement("span", { className: "flex-grow", __source: { fileName: "", lineNumber: 386, columnNumber: 23 }, __self: this }, score.player_name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 387, columnNumber: 23 }, __self: this }, score.score))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-xl p-3 shadow-lg flex-1", __source: { fileName: "", lineNumber: 394, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold text-[#725A3B] dark:text-[#D4B483] mb-2", __source: { fileName: "", lineNumber: 395, columnNumber: 15 }, __self: this }, "Tournament"), !tournamentActive ? /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 399, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#725A3B] dark:text-[#D4B483] text-sm", __source: { fileName: "", lineNumber: 400, columnNumber: 19 }, __self: this }, "No active tournament. Start a new one!"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 items-center", __source: { fileName: "", lineNumber: 403, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 404, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: tournamentDuration, onChange: (e)=>setTournamentDuration(Math.min(24, Math.max(1, Number(e.target.value)))), className: "hidden md:block w-12 p-1 border rounded text-sm", min: "1", max: "24", __source: { fileName: "", lineNumber: 405, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: tournamentDuration, onChange: (e)=>setTournamentDuration(Number(e.target.value)), className: "md:hidden w-16 p-1 border rounded text-sm bg-white dark:bg-gray-800 text-[#725A3B] dark:text-[#D4B483]", __source: { fileName: "", lineNumber: 417, columnNumber: 23 }, __self: this }, [ ...Array.from({ length: 24 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("option", { key: i + 1, value: i + 1, __source: { fileName: "", lineNumber: 425, columnNumber: 27 }, __self: this }, i + 1))), /*#__PURE__*/ React.createElement("span", { className: "text-[#725A3B] dark:text-[#D4B483] text-sm", __source: { fileName: "", lineNumber: 430, columnNumber: 23 }, __self: this }, "hrs")), /*#__PURE__*/ React.createElement("button", { onClick: createTournament, className: "bg-[#B85C38] dark:bg-[#E6A157] text-white px-3 py-1 rounded-lg hover:opacity-90 transition-opacity text-sm", __source: { fileName: "", lineNumber: 434, columnNumber: 21 }, __self: this }, "Start Tournament"))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 443, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#725A3B] dark:text-[#D4B483] text-sm", __source: { fileName: "", lineNumber: 444, columnNumber: 19 }, __self: this }, "Time Remaining:", " ", Math.floor(tournamentData?.remainingTime / (1000 * 60 * 60)), "h", " ", Math.floor(tournamentData?.remainingTime % (1000 * 60 * 60) / (1000 * 60)), "m"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1.5 max-h-[180px] overflow-y-auto", __source: { fileName: "", lineNumber: 456, columnNumber: 19 }, __self: this }, tournamentData?.scores.map((score, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center gap-2 text-[#725A3B] dark:text-[#D4B483] text-sm py-0.5", __source: { fileName: "", lineNumber: 458, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-6", __source: { fileName: "", lineNumber: 462, columnNumber: 25 }, __self: this }, index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : `${index + 1}.`), /*#__PURE__*/ React.createElement("span", { className: "flex-grow", __source: { fileName: "", lineNumber: 471, columnNumber: 25 }, __self: this }, score.player_name), /*#__PURE__*/ React.createElement("span", { className: "text-right", __source: { fileName: "", lineNumber: 472, columnNumber: 25 }, __self: this }, score.score)))))))), gameComplete && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 483, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 484, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#725A3B] dark:text-[#D4B483] mb-4", __source: { fileName: "", lineNumber: 485, columnNumber: 15 }, __self: this }, "🎉 Congratulations!"), /*#__PURE__*/ React.createElement("p", { className: "text-[#725A3B] dark:text-[#D4B483] mb-4", __source: { fileName: "", lineNumber: 488, columnNumber: 15 }, __self: this }, "You completed the game in ", moves, " moves and", " ", Math.floor(time / 60), ":", (time % 60).toString().padStart(2, "0"), "!"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Enter your name", value: playerName, onChange: (e)=>setPlayerName(e.target.value), className: "w-full p-2 mb-4 border rounded", __source: { fileName: "", lineNumber: 493, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 500, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 501, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: saveScore, disabled: loading || hasSubmittedHighScore, className: "w-full bg-[#B85C38] dark:bg-[#E6A157] text-white py-2 rounded-lg hover:opacity-90 transition-opacity text-sm disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 502, columnNumber: 19 }, __self: this }, loading ? "Saving..." : hasSubmittedHighScore ? "Score Saved!" : "Save Score"), tournamentActive && /*#__PURE__*/ React.createElement("button", { onClick: saveTournamentScore, disabled: savingToTournament || hasSubmittedTournamentScore, className: "w-full bg-[#B85C38] dark:bg-[#E6A157] text-white py-2 rounded-lg hover:opacity-90 transition-opacity text-sm disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 514, columnNumber: 21 }, __self: this }, savingToTournament ? "Saving..." : hasSubmittedTournamentScore ? "Score Submitted!" : "Add to Tournament")), /*#__PURE__*/ React.createElement("button", { onClick: initializeGame, className: "w-full bg-[#B85C38] dark:bg-[#E6A157] text-white py-2 rounded-lg hover:opacity-90 transition-opacity text-sm", __source: { fileName: "", lineNumber: 529, columnNumber: 17 }, __self: this }, "Play Again"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 541, columnNumber: 7 }, __self: this }, ` .rotate-y-180 { transform: rotateY(180deg); } .rotate-y-180-reverse { transform: rotateY(-180deg); } .transform-style-3d { transform-style: preserve-3d; } `)); }