function MainComponent() { const [ammo, setAmmo] = React.useState(10); const [enemies, setEnemies] = React.useState([]); const [score, setScore] = React.useState(0); const [isReloading, setIsReloading] = React.useState(false); const spawnEnemy = ()=>{ const newEnemy = { id: Math.random(), health: 100, position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight } }; setEnemies((prevEnemies)=>[ ...prevEnemies, newEnemy ]); }; const updateEnemies = ()=>{ setEnemies((prevEnemies)=>prevEnemies.filter((enemy)=>enemy.health > 0)); }; const shoot = ()=>{ if (ammo > 0 && !isReloading) { setAmmo(ammo - 1); setEnemies((prevEnemies)=>prevEnemies.map((enemy)=>{ if (enemyInRange(enemy.position)) { return { ...enemy, health: enemy.health - 50 }; } return enemy; })); } }; const enemyInRange = (enemyPosition)=>{ const crosshairRect = { left: window.innerWidth / 2 - 25, right: window.innerWidth / 2 + 25, top: window.innerHeight / 2 - 25, bottom: window.innerHeight / 2 + 25 }; return enemyPosition.x > crosshairRect.left && enemyPosition.x < crosshairRect.right && enemyPosition.y > crosshairRect.top && enemyPosition.y < crosshairRect.bottom; }; const reload = ()=>{ if (!isReloading) { setIsReloading(true); setTimeout(()=>{ setAmmo(10); setIsReloading(false); }, 2000); // mimic reload time } }; React.useEffect(()=>{ const enemySpawnInterval = setInterval(()=>{ spawnEnemy(); }, 3000); const scoreUpdateInterval = setInterval(()=>{ updateEnemies(); const killedEnemies = enemies.filter((enemy)=>enemy.health <= 0).length; if (killedEnemies > 0) { setScore(score + killedEnemies); setEnemies((enemies)=>enemies.filter((enemy)=>enemy.health > 0)); } }, 100); return ()=>{ clearInterval(enemySpawnInterval); clearInterval(scoreUpdateInterval); }; }, [ enemies, score ]); React.useEffect(()=>{ const handleKeyPress = (event)=>{ if (event.code === 'Space') { shoot(); } else if (event.code === 'KeyR') { reload(); } }; window.addEventListener('keydown', handleKeyPress); return ()=>{ window.removeEventListener('keydown', handleKeyPress); }; }, [ ammo, isReloading ]); const crosshairStyle = { width: '50px', height: '50px', position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', border: '2px solid red', borderRadius: '50%' }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full relative bg-[#010101] overflow-hidden font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: crosshairStyle, __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }), enemies.map((enemy)=>/*#__PURE__*/ React.createElement("div", { key: enemy.id, style: { width: '60px', height: '60px', backgroundColor: 'gray', position: 'absolute', left: `${enemy.position.x}px`, top: `${enemy.position.y}px` }, __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "absolute text-white text-xs left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, enemy.health))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 text-white", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "Ammo: ", ammo), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "Score: ", score), isReloading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 119, columnNumber: 25 }, __self: this }, "Reloading..."))); }