function MainComponent() { const [towers, setTowers] = React.useState([]); const [enemies, setEnemies] = React.useState([]); const [resources, setResources] = React.useState(100); const [score, setScore] = React.useState(0); const addTower = (x, y)=>{ if (resources >= 50) { setResources(resources - 50); setTowers([ ...towers, { id: Date.now(), x, y } ]); } }; const addEnemy = ()=>{ setEnemies([ ...enemies, { id: Date.now(), x: 0, y: Math.random() * window.innerHeight } ]); }; React.useEffect(()=>{ const interval = setInterval(addEnemy, 2000); return ()=>clearInterval(interval); }, []); React.useEffect(()=>{ const gameLoop = setInterval(()=>{ setEnemies((oldEnemies)=>oldEnemies.map((enemy)=>({ ...enemy, x: enemy.x + 1 }))); }, 100); return ()=>clearInterval(gameLoop); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Musical Tower Defense"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[600px] border bg-white flex justify-center items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, towers.map((tower)=>/*#__PURE__*/ React.createElement("div", { key: tower.id, className: "absolute", style: { left: tower.x, top: tower.y }, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-guitar text-red-500 text-3xl", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }))), enemies.map((enemy)=>/*#__PURE__*/ React.createElement("div", { key: enemy.id, className: "absolute", style: { left: enemy.x, top: enemy.y }, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music text-blue-500 text-2xl", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>addTower(e.clientX, e.clientY), className: "mt-4 p-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Add Tower (-50 Resources)"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Resources: ", resources), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Score: ", score))); }