function MainComponent() { const [playerId, setPlayerId] = useState(null); const [playerName, setPlayerName] = useState(""); const [solanaAddress, setSolanaAddress] = useState(""); const [gameId, setGameId] = useState(null); const [board, setBoard] = useState(Array.from({ length: 6 }).fill().map(()=>Array.from({ length: 7 }).fill(null))); const [currentPlayer, setCurrentPlayer] = useState(1); const [winner, setWinner] = useState(null); const [status, setStatus] = useState("profile"); const [error, setError] = useState(null); const [availableGames, setAvailableGames] = useState([]); const [player1Name, setPlayer1Name] = useState(null); const [player2Name, setPlayer2Name] = useState(null); const [leaderboard, setLeaderboard] = useState([]); useEffect(()=>{ if (!gameId) return; const interval = setInterval(async ()=>{ try { const response = await fetch("/api/get-game", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ gameId }) }); if (!response.ok) { throw new Error("Failed to get game state"); } const game = await response.json(); if (game.error) { throw new Error(game.error); } setBoard(game.currentBoard); setCurrentPlayer(game.currentPlayer); setWinner(game.winner); setStatus(game.status); setPlayer1Name(game.player1Name); setPlayer2Name(game.player2Name); } catch (err) { console.error(err); setError("Failed to update game state"); } }, 1000); return ()=>clearInterval(interval); }, [ gameId ]); useEffect(()=>{ if (status !== "lobby") return; const interval = setInterval(async ()=>{ try { const response = await fetch("/api/list-games", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error("Failed to list games"); } const data = await response.json(); setAvailableGames(data.games); } catch (err) { console.error(err); setError("Failed to list games"); } }, 2000); return ()=>clearInterval(interval); }, [ status ]); useEffect(()=>{ const fetchLeaderboard = async ()=>{ try { const response = await fetch("/api/get-leaderboard", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error("Failed to fetch leaderboard"); } const data = await response.json(); setLeaderboard(data.players); } catch (err) { console.error(err); setError("Failed to load leaderboard"); } }; fetchLeaderboard(); const interval = setInterval(fetchLeaderboard, 10000); return ()=>clearInterval(interval); }, []); const createProfile = async ()=>{ if (!playerName.trim()) { setError("Name is required"); return; } try { const response = await fetch("/api/create-player", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: playerName.trim(), solanaAddress: solanaAddress.trim() || null }) }); if (!response.ok) { throw new Error("Failed to create profile"); } const player = await response.json(); if (player.error) { throw new Error(player.error); } setPlayerId(player.id); setStatus("lobby"); setError(null); } catch (err) { console.error(err); setError("Failed to create profile"); } }; const joinGame = async (gameIdToJoin)=>{ try { const response = await fetch("/api/join-game", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ gameId: gameIdToJoin, playerId }) }); if (!response.ok) { throw new Error("Failed to join game"); } const game = await response.json(); if (game.error) { throw new Error(game.error); } setGameId(game.gameId); setBoard(game.currentBoard); setCurrentPlayer(game.currentPlayer); setStatus(game.status); setError(null); } catch (err) { console.error(err); setError("Failed to join game"); } }; const dropPiece = async (col)=>{ if (winner || board[0][col]) return; try { const response = await fetch("/api/make-move", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ gameId, playerId, column: col }) }); if (!response.ok) { throw new Error("Failed to make move"); } const game = await response.json(); if (game.error) { throw new Error(game.error); } setBoard(game.currentBoard); setCurrentPlayer(game.currentPlayer); setWinner(game.winner); setStatus(game.status); setError(null); } catch (err) { console.error(err); setError("Failed to make move"); } }; const resetGame = ()=>{ setGameId(null); setBoard(Array.from({ length: 6 }).fill().map(()=>Array.from({ length: 7 }).fill(null))); setCurrentPlayer(1); setWinner(null); setStatus("lobby"); setError(null); }; const createGame = async ()=>{ try { const response = await fetch("/api/create-game", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ playerId }) }); if (!response.ok) { throw new Error("Failed to create game"); } const game = await response.json(); if (game.error) { throw new Error(game.error); } setGameId(game.gameId); setBoard(game.currentBoard); setCurrentPlayer(game.currentPlayer); setStatus(game.status); setError(null); } catch (err) { console.error(err); setError("Failed to create game"); } }; const deletePlayer = async (playerIdToDelete)=>{ if (!window.confirm("Are you sure you want to delete this player and their games?")) { return; } try { const response = await fetch("/api/delete-player", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ playerId: playerIdToDelete }) }); if (!response.ok) { throw new Error("Failed to delete player"); } const leaderboardResponse = await fetch("/api/get-leaderboard", { method: "POST", headers: { "Content-Type": "application/json" } }); const data = await leaderboardResponse.json(); setLeaderboard(data.players); } catch (err) { console.error(err); setError("Failed to delete player"); } }; const deleteGame = async (gameIdToDelete)=>{ if (!window.confirm("Are you sure you want to delete this game?")) { return; } try { const response = await fetch("/api/delete-game", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ gameId: gameIdToDelete }) }); if (!response.ok) { throw new Error("Failed to delete game"); } const gamesResponse = await fetch("/api/list-games", { method: "POST", headers: { "Content-Type": "application/json" } }); const data = await gamesResponse.json(); setAvailableGames(data.games); } catch (err) { console.error(err); setError("Failed to delete game"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] p-4 font-roboto", __source: { fileName: "", lineNumber: 300, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 301, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 pt-8", __source: { fileName: "", lineNumber: 302, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-black mb-8", style: { fontFamily: "Impact, fantasy", background: "linear-gradient(45deg, #FF0000, #FFFFFF, #0000FF)", backgroundClip: "text", WebkitBackgroundClip: "text", color: "transparent", textShadow: "2px 2px 4px rgba(0,0,0,0.3)", letterSpacing: "2px", position: "relative", display: "inline-block", padding: "0 20px" }, __source: { fileName: "", lineNumber: 303, columnNumber: 11 }, __self: this }, "TRADE WARS", /*#__PURE__*/ React.createElement("div", { style: { content: '""', position: "absolute", top: "50%", left: "-15px", width: "30px", height: "2px", background: "#FF0000" }, __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { content: '""', position: "absolute", top: "50%", right: "-15px", width: "30px", height: "2px", background: "#FF0000" }, __source: { fileName: "", lineNumber: 330, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/6e3aaffb-ae53-4f79-b3cc-08ceee6ecff6/-/format/auto/", alt: "USA vs China Trade War", className: "mx-auto max-w-full rounded-lg shadow-lg", style: { maxHeight: "300px" }, __source: { fileName: "", lineNumber: 344, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-2", __source: { fileName: "", lineNumber: 352, columnNumber: 21 }, __self: this }, error), status === "profile" && /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-6 rounded-lg max-w-md mx-auto", __source: { fileName: "", lineNumber: 355, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-white mb-4", __source: { fileName: "", lineNumber: 356, columnNumber: 15 }, __self: this }, "Enter Your Details"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 357, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: playerName, onChange: (e)=>setPlayerName(e.target.value), placeholder: "Your Name", className: "w-full px-4 py-2 rounded bg-[#3a3a3a] text-white border border-[#4a4a4a] focus:outline-none focus:border-[#5a5a5a]", __source: { fileName: "", lineNumber: 359, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: solanaAddress, onChange: (e)=>setSolanaAddress(e.target.value), placeholder: "Solana Address (Optional)", className: "w-full px-4 py-2 rounded bg-[#3a3a3a] text-white border border-[#4a4a4a] focus:outline-none focus:border-[#5a5a5a]", __source: { fileName: "", lineNumber: 368, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: createProfile, className: "w-full bg-[#4a4a4a] text-white px-4 py-2 rounded hover:bg-[#5a5a5a]", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this }, "Start Playing"))), status === "lobby" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 387, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: createGame, className: "bg-[#4a4a4a] text-white px-4 py-2 rounded hover:bg-[#5a5a5a]", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, "Create New Game"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 395, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-4 rounded-lg", __source: { fileName: "", lineNumber: 396, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-white mb-4", __source: { fileName: "", lineNumber: 397, columnNumber: 19 }, __self: this }, "Available Games"), availableGames.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 399, columnNumber: 21 }, __self: this }, "No games available") : /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 401, columnNumber: 21 }, __self: this }, availableGames.map((game)=>/*#__PURE__*/ React.createElement("div", { key: game.gameId, className: "flex items-center justify-between bg-[#3a3a3a] p-2 rounded", __source: { fileName: "", lineNumber: 403, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white flex items-center", __source: { fileName: "", lineNumber: 407, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/85518ee8-839d-4118-b4f8-2bf2385cc8d7/-/format/auto/", alt: "USA", className: "w-6 h-6 rounded-full mr-2", __source: { fileName: "", lineNumber: 408, columnNumber: 29 }, __self: this }), game.player1Name, "'s Game"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 415, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>joinGame(game.gameId), className: "bg-[#4a4a4a] text-white px-4 py-1 rounded hover:bg-[#5a5a5a] mr-2", __source: { fileName: "", lineNumber: 416, columnNumber: 29 }, __self: this }, "Join"), playerId === game.player1_id && /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteGame(game.gameId), className: "bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 423, columnNumber: 31 }, __self: this }, "Delete")))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-4 rounded-lg", __source: { fileName: "", lineNumber: 437, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-white mb-4", __source: { fileName: "", lineNumber: 438, columnNumber: 19 }, __self: this }, "Leaderboard 🏆"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 439, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-white", __source: { fileName: "", lineNumber: 440, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 441, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "text-left border-b border-[#4a4a4a]", __source: { fileName: "", lineNumber: 442, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "pb-2", __source: { fileName: "", lineNumber: 443, columnNumber: 27 }, __self: this }, "Player"), /*#__PURE__*/ React.createElement("th", { className: "pb-2 text-center", __source: { fileName: "", lineNumber: 444, columnNumber: 27 }, __self: this }, "Games"), /*#__PURE__*/ React.createElement("th", { className: "pb-2 text-center", __source: { fileName: "", lineNumber: 445, columnNumber: 27 }, __self: this }, "W/L"), /*#__PURE__*/ React.createElement("th", { className: "pb-2 text-center", __source: { fileName: "", lineNumber: 446, columnNumber: 27 }, __self: this }, "Win Rate"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 449, columnNumber: 23 }, __self: this }, leaderboard.map((player)=>/*#__PURE__*/ React.createElement("tr", { key: player.id, className: "border-b border-[#3a3a3a] last:border-0", __source: { fileName: "", lineNumber: 451, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 455, columnNumber: 29 }, __self: this }, player.name), /*#__PURE__*/ React.createElement("td", { className: "py-2 text-center", __source: { fileName: "", lineNumber: 456, columnNumber: 29 }, __self: this }, player.gamesCompleted), /*#__PURE__*/ React.createElement("td", { className: "py-2 text-center", __source: { fileName: "", lineNumber: 459, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-green-500", __source: { fileName: "", lineNumber: 460, columnNumber: 31 }, __self: this }, player.wins), " / ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 464, columnNumber: 31 }, __self: this }, player.losses)), /*#__PURE__*/ React.createElement("td", { className: "py-2 text-center", __source: { fileName: "", lineNumber: 468, columnNumber: 29 }, __self: this }, player.winRate, "%"), /*#__PURE__*/ React.createElement("td", { className: "py-2 text-center", __source: { fileName: "", lineNumber: 471, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>deletePlayer(player.id), className: "bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600 text-sm", __source: { fileName: "", lineNumber: 472, columnNumber: 31 }, __self: this }, "Delete")))), leaderboard.length === 0 && /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 482, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("td", { colSpan: "4", className: "py-4 text-center text-gray-400", __source: { fileName: "", lineNumber: 483, columnNumber: 29 }, __self: this }, "No games played yet")))))))), status === "waiting" && /*#__PURE__*/ React.createElement("div", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 500, columnNumber: 13 }, __self: this }, "Waiting for another player to join...", /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 502, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-[#4a4a4a] text-white px-4 py-2 rounded hover:bg-[#5a5a5a]", __source: { fileName: "", lineNumber: 503, columnNumber: 17 }, __self: this }, "Cancel"))), (status === "active" || status === "completed") && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 515, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 516, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 517, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/85518ee8-839d-4118-b4f8-2bf2385cc8d7/-/format/auto/", alt: "USA", className: "w-8 h-8 rounded-full inline-block mr-2", __source: { fileName: "", lineNumber: 518, columnNumber: 21 }, __self: this }), player1Name || "USA"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 525, columnNumber: 19 }, __self: this }, "vs"), /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 526, columnNumber: 19 }, __self: this }, player2Name || "China", /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/934f9cfe-5d2d-463e-98e4-f860b21e4776/-/format/auto/", alt: "China", className: "w-8 h-8 rounded-full inline-block ml-2", __source: { fileName: "", lineNumber: 528, columnNumber: 21 }, __self: this })))), winner ? /*#__PURE__*/ React.createElement("div", { className: "text-xl text-white mb-2", __source: { fileName: "", lineNumber: 538, columnNumber: 17 }, __self: this }, winner === 1 ? player1Name : player2Name, " Wins! 🎉") : /*#__PURE__*/ React.createElement("div", { className: "text-xl text-white mb-2", __source: { fileName: "", lineNumber: 542, columnNumber: 17 }, __self: this }, currentPlayer === 1 ? player1Name : player2Name, "'s Turn"), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-[#4a4a4a] text-white px-4 py-2 rounded hover:bg-[#5a5a5a] mb-8", __source: { fileName: "", lineNumber: 546, columnNumber: 15 }, __self: this }, "Back to Lobby")), (status === "active" || status === "completed") && /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-4 rounded-lg", __source: { fileName: "", lineNumber: 556, columnNumber: 13 }, __self: this }, board.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex justify-center", __source: { fileName: "", lineNumber: 558, columnNumber: 17 }, __self: this }, row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: colIndex, onClick: ()=>status === "active" && dropPiece(colIndex), className: "w-[50px] h-[50px] md:w-[70px] md:h-[70px] m-1 rounded-full bg-[#3a3a3a] flex items-center justify-center cursor-pointer", __source: { fileName: "", lineNumber: 560, columnNumber: 21 }, __self: this }, cell && /*#__PURE__*/ React.createElement("img", { src: cell === 1 ? "https://ucarecdn.com/85518ee8-839d-4118-b4f8-2bf2385cc8d7/-/format/auto/" : "https://ucarecdn.com/934f9cfe-5d2d-463e-98e4-f860b21e4776/-/format/auto/", alt: cell === 1 ? "USA" : "China", className: "w-[80%] h-[80%] rounded-full object-cover", __source: { fileName: "", lineNumber: 566, columnNumber: 25 }, __self: this }))))))))); }