function MainComponent() { const [selectedGame, setSelectedGame] = React.useState(null); const [nickname, setNickname] = React.useState(''); const [walletAmount, setWalletAmount] = React.useState(100); const [showModal, setShowModal] = React.useState(false); const [tab, setTab] = React.useState('games'); const games = [ { id: 1, bet: 10, players: 5, potentialWin: 50, winChances: 'High', winAmount: 20 }, { id: 2, bet: 20, players: 3, potentialWin: 60, winChances: 'Medium', winAmount: 30 }, { id: 3, bet: 15, players: 4, potentialWin: 75, winChances: 'Low', winAmount: 40 }, { id: 4, bet: 5, players: 10, potentialWin: 100, winChances: 'Very High', winAmount: 50 } ]; function handleCardClick(game) { setSelectedGame(game); } function handleParticipate() { if (walletAmount >= selectedGame.bet) { setWalletAmount((prev)=>prev - selectedGame.bet); setShowModal(true); } else { alert("You don't have enough money in your wallet to join this game"); } } function handleCloseModal() { setShowModal(false); } function handleNicknameChange(event) { setNickname(event.target.value); } function handleNicknameSubmit(event) { event.preventDefault(); } function handleWithdraw() { // Withdraw process } function handleFeedAccount() { // Feed account process } const gameDetails = selectedGame && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Bet: $", selectedGame.bet), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "Players: ", selectedGame.players), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "Potential Win: $", selectedGame.potentialWin), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Win Chances: ", selectedGame.winChances), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Win Amount: $", selectedGame.winAmount), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white font-roboto py-2 px-4", onClick: handleParticipate, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Participate"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white font-roboto py-2 px-4", onClick: ()=>setSelectedGame(null), __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Back to Games")), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Welcome to the game: ", selectedGame.id), /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white font-roboto py-2 px-4 mx-auto mt-4 block", onClick: handleCloseModal, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Close")))); const profileManagement = /*#__PURE__*/ React.createElement("form", { className: "p-4", onSubmit: handleNicknameSubmit, __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "nickname", className: "border p-2 font-roboto text-[#121212] w-full", placeholder: "Set nickname", value: nickname, onChange: handleNicknameChange, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#010101] text-white font-roboto py-2 px-4 w-full mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Save"), nickname && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 20 }, __self: this }, "Nickname: ", nickname)); const walletTab = /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "Wallet Amount: $", walletAmount), /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white font-roboto py-2 px-4 w-full mt-4", onClick: handleWithdraw, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "Withdraw"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white font-roboto py-2 px-4 w-full mt-4", onClick: handleFeedAccount, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "Feed Account")); const gamesList = selectedGame ? gameDetails : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, games.map((game)=>/*#__PURE__*/ React.createElement("div", { key: game.id, className: "p-4 border cursor-pointer", onClick: ()=>handleCardClick(game), __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "Bet: $", game.bet), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Players: ", game.players), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Potential Win: $", game.potentialWin), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Win Chances: ", game.winChances), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Win Amount: $", game.winAmount)))); const currentTabContent = ()=>{ if (tab === 'profile') { return profileManagement; } else if (tab === 'wallet') { return walletTab; } else { return gamesList; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen", __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around bg-gray-100 p-2", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-roboto", onClick: ()=>{ setTab('games'); setSelectedGame(null); }, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Games"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto", onClick: ()=>setTab('profile'), __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto", onClick: ()=>setTab('wallet'), __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "Wallet")), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, currentTabContent())); }