function MainComponent() { const [balance, setBalance] = React.useState(0); const [coins, setCoins] = React.useState(Array.from({ length: 5 }, (_, i)=>({ id: i, x: Math.random() * 100, y: Math.random() * 100 }))); const gunRef = React.useRef(null); const calculateNewPosition = (currentPos)=>{ const direction = Math.random() < 0.5 ? -1 : 1; let newPos = currentPos + direction * Math.random() * 5; if (newPos > 100 || newPos < 0) { newPos = currentPos - direction * Math.random() * 5; } return newPos; }; React.useEffect(()=>{ const shoot = (e)=>{ setCoins((prevCoins)=>{ const newCoins = prevCoins.filter((coin)=>{ const coinEl = document.querySelector(`.coin[data-id="${coin.id}"]`); if (!coinEl) return false; const rect = coinEl.getBoundingClientRect(); const inTargetRange = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom; if (inTargetRange) { setBalance((prev)=>prev + 1); return false; } return true; }); return newCoins.length < 4 ? generateCoins(newCoins, 4 - newCoins.length + Math.floor(Math.random() * 4)) : newCoins; }); }; const generateCoins = (currentCoinsArray, additionalCoins)=>[ ...currentCoinsArray, ...Array.from({ length: additionalCoins }, (_, i)=>({ id: currentCoinsArray.reduce((acc, curr)=>acc > curr.id ? acc : curr.id, 0) + i + 1, x: Math.random() * 100, y: Math.random() * 100 })) ]; const moveCoinsInterval = setInterval(()=>{ setCoins((prevCoins)=>{ const movedCoins = prevCoins.map((coin)=>({ ...coin, x: calculateNewPosition(coin.x), y: calculateNewPosition(coin.y) })); return movedCoins.length < 4 ? generateCoins(movedCoins, 4 - movedCoins.length + Math.floor(Math.random() * 4)) : movedCoins; }); }, 2000); window.addEventListener('click', shoot); return ()=>{ window.removeEventListener('click', shoot); clearInterval(moveCoinsInterval); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-[#010101] overflow-hidden flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#F0E68C] text-5xl", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "🔫 Coin Shooter"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#ADFF2F] mt-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Shoot the moving coins!"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#FFFF00]", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Balance: ", balance, " 💰")), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[500px]", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, coins.map((coin)=>/*#__PURE__*/ React.createElement("div", { key: coin.id, "data-id": coin.id, className: `coin absolute w-[60px] h-[60px] bg-[#FFD700] rounded-full`, style: { left: `${coin.x}%`, top: `${coin.y}%` }, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { ref: gunRef, className: "cursor-pointer absolute bottom-0 left-1/2 transform -translate-x-1/2 mx-auto w-[100px] h-[100px] bg-no-repeat bg-center", style: { backgroundImage: "url('/gun.png')" }, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-20px);} } .coin { animation: bounce 3s infinite linear; } `)); }