function MainComponent() { const [count, setCount] = React.useState(0); const [clicksPerClick, setClicksPerClick] = React.useState(1); const [clicksPerSecond, setClicksPerSecond] = React.useState(0); const incrementCount = ()=>{ setCount((prevCount)=>prevCount + clicksPerClick); }; const buyUpgrade = (cost, type)=>{ if (count >= cost) { setCount((prevCount)=>prevCount - cost); if (type === 'click') { setClicksPerClick((prev)=>prev + 1); } else if (type === 'second') { setClicksPerSecond((prev)=>prev + 1); } } }; React.useEffect(()=>{ const interval = setInterval(()=>{ setCount((prevCount)=>prevCount + clicksPerSecond); }, 1000); return ()=>clearInterval(interval); }, [ clicksPerSecond ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-between md:flex-row h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:flex-1 text-center my-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Clicks: ", count), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Per Click: ", clicksPerClick), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Per Second: ", clicksPerSecond)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center justify-center my-8", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-8 rounded-full", onClick: incrementCount, style: { animation: 'planeFloating 3s ease-in-out infinite' }, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "cartoony-plane.png", alt: "Cartoony plane", className: "w-[200px] h-[200px] object-contain", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#4CAF50] text-white rounded-md shadow font-roboto", onClick: ()=>buyUpgrade(10, 'click'), __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Increase Clicks Per Click"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#2196F3] text-white rounded-md shadow font-roboto", onClick: ()=>buyUpgrade(100, 'second'), __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Increase Clicks Per Second"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, ` @keyframes planeFloating { 0%, 100% { transform: translatey(0); } 50% { transform: translatey(-20px); } } `)); }