function MainComponent() { const [cookieCount, setCookieCount] = React.useState(0); const [items, setItems] = React.useState([ { id: 1, name: "Cursor", cost: 15, cookiesPerSecond: 0.1, count: 0 }, { id: 2, name: "Grandma", cost: 100, cookiesPerSecond: 1, count: 0 }, { id: 3, name: "Farm", cost: 1100, cookiesPerSecond: 8, count: 0 }, { id: 4, name: "Mine", cost: 12000, cookiesPerSecond: 47, count: 0 }, { id: 5, name: "Factory", cost: 130000, cookiesPerSecond: 260, count: 0 }, { id: 6, name: "Bank", cost: 1400000, cookiesPerSecond: 1400, count: 0 }, { id: 7, name: "Temple", cost: 20000000, cookiesPerSecond: 7800, count: 0 }, { id: 8, name: "Wizard Tower", cost: 330000000, cookiesPerSecond: 44000, count: 0 }, { id: 9, name: "Shipment", cost: 5100000000, cookiesPerSecond: 260000, count: 0 }, { id: 10, name: "Alchemy Lab", cost: 75000000000, cookiesPerSecond: 1600000, count: 0 } ]); const incrementCookieCount = ()=>{ setCookieCount((prevCount)=>prevCount + 1); }; const purchaseItem = (itemId)=>{ setItems((currentItems)=>currentItems.map((item)=>{ if (item.id === itemId && cookieCount >= item.cost) { setCookieCount((prevCount)=>prevCount - item.cost); return { ...item, count: item.count + 1, cost: Math.round(item.cost * 1.15) }; } return item; })); }; React.useEffect(()=>{ const interval = setInterval(()=>{ setCookieCount((prevCount)=>prevCount + items.reduce((accumulator, item)=>accumulator + item.cookiesPerSecond * item.count, 0)); }, 1000); return ()=>clearInterval(interval); }, [ items ]); const itemList = items.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "flex justify-center items-center mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-40 h-10 flex items-center justify-center text-lg rounded-md ${cookieCount >= item.cost ? 'bg-[#87CEFA]' : 'bg-[#A9A9A9]'} text-white`, onClick: ()=>purchaseItem(item.id), disabled: cookieCount < item.cost, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, item.name, " (Cost: ", item.cost, ")"), /*#__PURE__*/ React.createElement("div", { className: "ml-4 text-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "x", item.count))); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center min-h-screen bg-[#FFF8DC] font-comic-sans", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full text-center mb-8", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#D2691E]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "🍪 Cookie Clicker 🍪")), /*#__PURE__*/ React.createElement("button", { className: "w-48 h-48 mb-5 rounded-full bg-[#F4A460] flex items-center justify-center text-6xl text-white", onClick: incrementCookieCount, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "🍪"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl text-[#8B4513] my-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Cookies: ", cookieCount.toFixed(1)), /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, itemList))); }