function Counter({ totalCookies = 0 }) { return /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center justify-center bg-[#FFE4C4] rounded-lg p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-cookie text-2xl text-[#654321]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, totalCookies, " Cookies")); } function CounterStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Counter, { totalCookies: 0, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Counter, { totalCookies: 42, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Counter, { totalCookies: 1000, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function Cookie() { const [isClicked, setIsClicked] = useState(false); const handleClick = ()=>{ setIsClicked(true); setTimeout(()=>setIsClicked(false), 300); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleClick, className: `transition-transform ${isClicked ? "scale-95" : "scale-100"}`, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/cookie.png", alt: "Large chocolate chip cookie", className: "w-[200px] h-[200px] md:w-[300px] md:h-[300px] hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); } } `)); } function CookieStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Cookie, { __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function UpgradeShop({ onPurchase, coins = 0, upgrades = [ { id: 1, name: "Click Booster", price: 10, effect: "+1 per click", owned: false }, { id: 2, name: "Auto Clicker", price: 50, effect: "+1 per second", owned: false }, { id: 3, name: "Mega Boost", price: 100, effect: "+5 per click", owned: false } ] }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f8f9fa] rounded-lg shadow-lg w-[300px]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Shop"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-yellow-600", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-coins mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), coins)), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, upgrades.map((upgrade)=>/*#__PURE__*/ React.createElement("div", { key: upgrade.id, className: "bg-white p-3 rounded-md shadow", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-medium", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, upgrade.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, upgrade.effect)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onPurchase(upgrade.id), disabled: coins < upgrade.price || upgrade.owned, className: `px-3 py-1 rounded-full text-sm font-roboto ${upgrade.owned ? "bg-gray-200 text-gray-500 cursor-not-allowed" : coins >= upgrade.price ? "bg-green-500 text-white hover:bg-green-600" : "bg-gray-300 text-gray-500 cursor-not-allowed"}`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, upgrade.owned ? "Owned" : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-coins mr-1", __source: { fileName: "", lineNumber: 61, columnNumber: 21 }, __self: this }), upgrade.price))))))); } function UpgradeShopStory() { const [testCoins, setTestCoins] = useState(75); const [testUpgrades, setTestUpgrades] = useState([ { id: 1, name: "Click Booster", price: 10, effect: "+1 per click", owned: false }, { id: 2, name: "Auto Clicker", price: 50, effect: "+1 per second", owned: true }, { id: 3, name: "Mega Boost", price: 100, effect: "+5 per click", owned: false } ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UpgradeShop, { coins: testCoins, upgrades: testUpgrades, onPurchase: (id)=>console.log(`Purchased upgrade ${id}`), __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this })); } function MainComponent() { const [cookies, setCookies] = useState(0); const [cursors, setCursors] = useState(0); const [grandmas, setGrandmas] = useState(0); const [farms, setFarms] = useState(0); useEffect(()=>{ const savedState = localStorage.getItem("cookieGame"); if (savedState) { const { cookies, cursors, grandmas, farms } = JSON.parse(savedState); setCookies(cookies); setCursors(cursors); setGrandmas(grandmas); setFarms(farms); } }, []); useEffect(()=>{ localStorage.setItem("cookieGame", JSON.stringify({ cookies, cursors, grandmas, farms })); }, [ cookies, cursors, grandmas, farms ]); useEffect(()=>{ const interval = setInterval(()=>{ const cursorProduction = cursors * 0.1; const grandmaProduction = grandmas * 1; const farmProduction = farms * 5; setCookies((prev)=>prev + cursorProduction + grandmaProduction + farmProduction); }, 1000); return ()=>clearInterval(interval); }, [ cursors, grandmas, farms ]); const upgrades = [ { name: "Cursor", cost: Math.floor(15 * Math.pow(1.15, cursors)), count: cursors, setCount: setCursors, description: "Automatically clicks every few seconds" }, { name: "Grandma", cost: Math.floor(100 * Math.pow(1.15, grandmas)), count: grandmas, setCount: setGrandmas, description: "Bakes cookies for you" }, { name: "Farm", cost: Math.floor(500 * Math.pow(1.15, farms)), count: farms, setCount: setFarms, description: "Grows cookie plants" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen w-full font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-3/4 p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-8", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "🍪 ", Math.floor(cookies), " cookies"), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", onClick: ()=>setCookies((prev)=>prev + 1), __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "w-1/4 bg-gray-100 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Shop"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, upgrades.map((upgrade)=>/*#__PURE__*/ React.createElement("div", { key: upgrade.name, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, upgrade.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, upgrade.description), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, "Owned: ", upgrade.count)), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50", disabled: cookies < upgrade.cost, onClick: ()=>{ setCookies((prev)=>prev - upgrade.cost); upgrade.setCount((prev)=>prev + 1); }, __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, "Buy (", Math.floor(upgrade.cost), " 🍪)"))))))); }