function MainComponent() { const [bigMacs, setBigMacs] = React.useState(0); const [bigMacsPerSecond, setBigMacsPerSecond] = React.useState(0); const [bigMacsPerClick, setBigMacsPerClick] = React.useState(1); const [shopVisible, setShopVisible] = React.useState(false); const PRODUCTS = [ { name: 'Fries', cost: 50, bigMacsPerSecond: 1 }, { name: 'Chicken nuggets', cost: 100, bigMacsPerClick: 1 }, { name: 'Hashbrown', cost: 200, bigMacsPerSecond: 5 }, { name: 'Happy meal', cost: 500, bigMacsPerSecond: 25 }, { name: 'Coke', cost: 1000, bigMacsPerClick: 25 }, { name: 'Full meal', cost: 2000, bigMacsPerSecond: 100 }, { name: 'Milkshake', cost: 5000, bigMacsPerSecond: 200 }, { name: 'Cookie', cost: 25000, bigMacsPerSecond: 2000 }, { name: 'Ice cream', cost: 50000, bigMacsPerClick: 3000 }, { name: 'Wrap', cost: 250000, bigMacsPerSecond: 10000 } ]; function handleBigMacClick() { setBigMacs(bigMacs + bigMacsPerClick); } function buyProduct(product) { if (bigMacs >= product.cost) { setBigMacs(bigMacs - product.cost); setBigMacsPerSecond(bigMacsPerSecond + (product.bigMacsPerSecond || 0)); setBigMacsPerClick(bigMacsPerClick + (product.bigMacsPerClick || 0)); } } function toggleShop() { setShopVisible(!shopVisible); } React.useEffect(()=>{ const interval = setInterval(()=>{ setBigMacs(bigMacs + bigMacsPerSecond); }, 1000); return ()=>clearInterval(interval); }, [ bigMacs, bigMacsPerSecond ]); const shop = PRODUCTS.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#ffffff] my-2 p-4 rounded shadow-md flex justify-between items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, product.bigMacsPerSecond ? `${product.bigMacsPerSecond} big mac(s) per second` : `${product.bigMacsPerClick} click power`)), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffcc00] px-4 py-2 rounded", onClick: ()=>buyProduct(product), __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Buy - ", product.cost))); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffcc00] h-screen w-screen flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 bg-[#ffcc00] p-2 rounded", onClick: toggleShop, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-store", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mt-8 text-3xl", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, bigMacs, " Big Macs"), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "Big Macs per second: ", bigMacsPerSecond), /*#__PURE__*/ React.createElement("img", { src: "/mcdonalds_big_mac.png", alt: "Click on Big Mac to get more", className: "w-[200px] cursor-pointer mt-8", onClick: handleBigMacClick, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }), shopVisible && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 bg-[#d3d3d3] w-[300px] h-full p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 bg-[#ffcc00] p-2 rounded", onClick: toggleShop, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })), shop), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, ` body { margin: 0; overflow: hidden; } @media (max-width: 640px) { .shop-container { width: 100%; } } `)); }