function MainComponent() { const [bigMacs, setBigMacs] = React.useState(0); const [bigMacsPerSecond, setBigMacsPerSecond] = React.useState(0); const [bigMacsPerClick, setBigMacsPerClick] = React.useState(1); const [shopOpen, setShopOpen] = React.useState(false); const purchaseItem = (cost, perSecondIncrease = 0, perClickIncrease = 0)=>{ if (bigMacs >= cost) { setBigMacs(bigMacs - cost); setBigMacsPerSecond(bigMacsPerSecond + perSecondIncrease); setBigMacsPerClick(bigMacsPerClick + perClickIncrease); } }; const toggleShop = ()=>{ setShopOpen(!shopOpen); }; React.useEffect(()=>{ const interval = setInterval(()=>{ setBigMacs(bigMacs + bigMacsPerSecond); }, 1000); return ()=>clearInterval(interval); }, [ bigMacs, bigMacsPerSecond ]); const handleClick = ()=>{ setBigMacs(bigMacs + bigMacsPerClick); }; const fries = ()=>purchaseItem(50, 1); const chickenNuggets = ()=>purchaseItem(100, 0, 1); const hashbrown = ()=>purchaseItem(200, 5); const happyMeal = ()=>purchaseItem(500, 25); const coke = ()=>purchaseItem(1000, 0, 25); const fullMeal = ()=>purchaseItem(2000, 100); const shopStyle = shopOpen ? 'translate-x-0' : 'translate-x-full'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#ffee58] font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl text-[#d32f2f] mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "🍔 ", bigMacs, " Big Macs"), /*#__PURE__*/ React.createElement("div", { className: "text-xl text-[#455a64]", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "🍟 ", bigMacsPerSecond, " per second"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#c62828] p-4 text-white text-lg rounded my-4 focus:outline-none focus:ring focus:ring-[#b71c1c] transition-transform", onMouseDown: (e)=>e.target.style.transform = 'scale(0.9)', onMouseUp: (e)=>e.target.style.transform = 'scale(1)', onMouseLeave: (e)=>e.target.style.transform = 'scale(1)', onTouchStart: (e)=>e.target.style.transform = 'scale(0.9)', onTouchEnd: (e)=>e.target.style.transform = 'scale(1)', onClick: handleClick, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Click for Big Mac"), /*#__PURE__*/ React.createElement("button", { className: "fixed top-4 right-4 bg-[#f9a825] p-2 rounded-full text-lg", onClick: toggleShop, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, shopOpen ? 'Close Shop' : 'Open Shop'), /*#__PURE__*/ React.createElement("div", { className: `fixed right-0 top-0 p-4 bg-[#fff59d] w-[300px] h-full transition-transform transform ${shopStyle}`, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#f57c00] p-3 m-1 text-white", onClick: fries, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Buy Fries - 50 BM"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#f57c00] p-3 m-1 text-white", onClick: chickenNuggets, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Buy Chicken Nuggets - 100 BM"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#f57c00] p-3 m-1 text-white", onClick: hashbrown, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Buy Hashbrown - 200 BM"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#f57c00] p-3 m-1 text-white", onClick: happyMeal, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Buy Happy Meal - 500 BM"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#f57c00] p-3 m-1 text-white", onClick: coke, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Buy Coke - 1000 BM"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#f57c00] p-3 m-1 text-white", onClick: fullMeal, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Buy Full Meal - 2000 BM")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; box-sizing: border-box; } `)); }