function MainComponent() { const [bananas, setBananas] = React.useState(0); const [priceIncrease, setPriceIncrease] = React.useState({ plusOne: 10, plusFive: 50, plusTen: 100 }); const [bananasPerClick, setBananasPerClick] = React.useState(1); const [showShop, setShowShop] = React.useState(false); const [rebirthMultiplier, setRebirthMultiplier] = React.useState(1); const [rebirthPrice, setRebirthPrice] = React.useState(2000); const [isMonkeyClicked, setIsMonkeyClicked] = React.useState(false); const handleMonkeyClick = ()=>{ setBananas((prev)=>prev + bananasPerClick * rebirthMultiplier); setIsMonkeyClicked(true); setTimeout(()=>setIsMonkeyClicked(false), 300); }; const handleShopToggle = ()=>{ setShowShop((prev)=>!prev); }; const handleRebirth = ()=>{ if (bananas >= rebirthPrice) { setRebirthMultiplier((prev)=>prev + 0.5); setBananas(0); setRebirthPrice((prev)=>prev + 1000); setBananasPerClick(1); setPriceIncrease({ plusOne: priceIncrease.plusOne * 2, plusFive: priceIncrease.plusFive * 2, plusTen: priceIncrease.plusTen * 2 }); } }; const handlePurchase = (item)=>{ const cost = priceIncrease[item]; const increase = item === 'plusOne' ? 2 : item === 'plusFive' ? 10 : 20; if (bananas >= cost) { setBananas((prev)=>prev - cost); setBananasPerClick((prev)=>prev + increase); setPriceIncrease((prev)=>({ ...prev, [item]: prev[item] + cost })); } }; const monkeyClass = isMonkeyClicked ? 'scale-110' : 'scale-100'; const buyButtons = [ 'plusOne', 'plusFive', 'plusTen' ].map((item)=>/*#__PURE__*/ React.createElement("button", { key: item, className: "px-4 py-2 m-2 text-white bg-blue-500 hover:bg-blue-700 rounded-md", onClick: ()=>handlePurchase(item), name: item, __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, "+", item === 'plusOne' ? '1' : item === 'plusFive' ? '5' : '10', " (Cost: ", priceIncrease[item], ")")); return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gray-200", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, ` @keyframes monkey-click { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } `), /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "🐵 Monkey Clicker"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Bananas:", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-green-600", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, bananas)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Bananas per click:", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-orange-600", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, bananasPerClick)), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "Multiplier:", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-purple-600", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, rebirthMultiplier, "x"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-32 h-32 text-4xl transition-transform transform ${monkeyClass}`, style: { animation: isMonkeyClicked ? 'monkey-click 300ms linear' : undefined }, onClick: handleMonkeyClick, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "🐒")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-white bg-indigo-500 hover:bg-indigo-700 rounded-md", onClick: handleShopToggle, name: "shop", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Shop")), showShop && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Upgrades:"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, buyButtons)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-white bg-red-500 hover:bg-red-700 rounded-md", onClick: handleRebirth, disabled: bananas < rebirthPrice, name: "rebirth", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "Rebirth (Cost: ", rebirthPrice, ")")))); }