function MainComponent() { const [playerPosition, setPlayerPosition] = useState({ x: 200, y: 500 }); const [bullets, setBullets] = useState([]); const [targets, setTargets] = useState([]); const [score, setScore] = useState(0); const [gameStarted, setGameStarted] = useState(false); const [lives, setLives] = useState(3); const [gameOver, setGameOver] = useState(false); const [level, setLevel] = useState(1); const [showLevelUp, setShowLevelUp] = useState(false); const [stars, setStars] = useState([ ...Array.from({ length: 50 }) ].map(()=>({ x: Math.random() * 400, y: Math.random() * 600, size: Math.random() * 2 + 1 }))); const [touchStartX, setTouchStartX] = useState(null); const [showInstall, setShowInstall] = useState(false); const [deferredPrompt, setDeferredPrompt] = useState(null); useEffect(()=>{ window.addEventListener("beforeinstallprompt", (e)=>{ e.preventDefault(); setDeferredPrompt(e); setShowInstall(true); }); }, []); useEffect(()=>{ if (!gameStarted || gameOver) return; const handleKeyPress = (e)=>{ if (e.key === "ArrowLeft") { setPlayerPosition((prev)=>({ ...prev, x: Math.max(0, prev.x - 25) })); } if (e.key === "ArrowRight") { setPlayerPosition((prev)=>({ ...prev, x: Math.min(360, prev.x + 25) })); } if (e.key === " ") { setBullets((prev)=>[ ...prev, { x: playerPosition.x + 18, y: playerPosition.y } ]); } }; const handleTouchStart = (e)=>{ const touch = e.touches[0]; setTouchStartX(touch.clientX); setBullets((prev)=>[ ...prev, { x: playerPosition.x + 18, y: playerPosition.y } ]); }; const handleTouchMove = (e)=>{ if (touchStartX === null) return; const touch = e.touches[0]; const diff = touch.clientX - touchStartX; setTouchStartX(touch.clientX); setPlayerPosition((prev)=>({ ...prev, x: Math.max(0, Math.min(360, prev.x + diff)) })); }; const handleTouchEnd = ()=>{ setTouchStartX(null); }; window.addEventListener("keydown", handleKeyPress); window.addEventListener("touchstart", handleTouchStart); window.addEventListener("touchmove", handleTouchMove); window.addEventListener("touchend", handleTouchEnd); const targetInterval = setInterval(()=>{ setTargets((prev)=>[ ...prev, { x: Math.random() * 380, y: -20 } ]); }, 2000 / (1 + level * 0.2)); const gameLoop = setInterval(()=>{ setBullets((prev)=>prev.map((bullet)=>({ ...bullet, y: bullet.y - 8 })).filter((bullet)=>bullet.y > 0)); setTargets((prev)=>prev.map((target)=>({ ...target, y: target.y + (3 + level) })).filter((target)=>{ if (target.y >= 600) { setLives((prev)=>{ const newLives = prev - 1; if (newLives <= 0) { setGameOver(true); } return newLives; }); return false; } return true; })); setBullets((prev)=>{ const newBullets = [ ...prev ]; setTargets((prevTargets)=>{ const newTargets = prevTargets.filter((target)=>{ const hit = newBullets.some((bullet)=>Math.abs(bullet.x - target.x) < 25 && Math.abs(bullet.y - target.y) < 25); if (hit) { setScore((s)=>{ const newScore = s + 10; if (newScore % 100 === 0) { setLevel((l)=>l + 1); setShowLevelUp(true); setTimeout(()=>setShowLevelUp(false), 2000); } return newScore; }); } return !hit; }); return newTargets; }); return newBullets; }); }, 16); return ()=>{ window.removeEventListener("keydown", handleKeyPress); window.removeEventListener("touchstart", handleTouchStart); window.removeEventListener("touchmove", handleTouchMove); window.removeEventListener("touchend", handleTouchEnd); clearInterval(targetInterval); clearInterval(gameLoop); }; }, [ playerPosition.x, playerPosition.y, gameStarted, gameOver, level ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#000814] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 148, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "data:image/svg+xml,", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-[400px] h-[600px] bg-gradient-to-b from-[#000814] via-[#001233] to-[#001d3d] rounded-lg border-2 border-[#ffd60a] overflow-hidden shadow-[0_0_50px_rgba(255,214,10,0.3)]", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, stars.map((star, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute bg-white rounded-full animate-twinkle", style: { left: `${star.x}px`, top: `${star.y}px`, width: `${star.size}px`, height: `${star.size}px`, opacity: Math.random() * 0.7 + 0.3, animationDelay: `${Math.random() * 2}s` }, __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-x-0 top-0 h-[100px] bg-gradient-to-b from-[#ffd60a] to-transparent opacity-10", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-x-0 bottom-0 h-[100px] bg-gradient-to-t from-[#ffd60a] to-transparent opacity-10", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-y-0 left-0 w-[50px] bg-gradient-to-r from-[#ffd60a] to-transparent opacity-10", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-y-0 right-0 w-[50px] bg-gradient-to-l from-[#ffd60a] to-transparent opacity-10", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[50px] left-[20px] w-[40px] h-[150px] bg-[#1a1a1a] rounded-lg border border-[#ffd60a] opacity-50 shadow-[0_0_15px_rgba(255,214,10,0.2)] animate-glow", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[50px] right-[20px] w-[40px] h-[150px] bg-[#1a1a1a] rounded-lg border border-[#ffd60a] opacity-50 shadow-[0_0_15px_rgba(255,214,10,0.2)] animate-glow", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this })), !gameStarted && !gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-b from-black to-[rgba(0,0,0,0.9)] z-50", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-title-entrance", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#ffd60a] text-6xl font-bold mb-2 font-roboto text-center text-shadow-lg", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, "Galaxy Guardian"), /*#__PURE__*/ React.createElement("p", { className: "text-[#ffd60a] text-lg mb-8 text-center opacity-80", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, "Defend the galaxy from invasion")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameStarted(true), className: "bg-gradient-to-r from-[#ffd60a] to-[#ffc300] text-[#000814] px-12 py-4 rounded-full font-bold text-lg hover:scale-105 transition-all duration-300 shadow-[0_0_20px_rgba(255,214,10,0.3)] animate-button-entrance mb-4", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "Start Mission"), showInstall && /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ if (deferredPrompt) { await deferredPrompt.prompt(); const result = await deferredPrompt.userChoice; if (result.outcome === "accepted") { setShowInstall(false); } setDeferredPrompt(null); } }, className: "bg-[#ffd60a20] border-2 border-[#ffd60a] text-[#ffd60a] px-8 py-3 rounded-full font-bold hover:bg-[#ffd60a30] transition-all duration-300 animate-button-entrance-delayed", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, "Install App"), /*#__PURE__*/ React.createElement("div", { className: "mt-12 text-white text-center font-roboto bg-[#00000080] p-6 rounded-xl border border-[#ffffff20] animate-controls-entrance", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-4 text-[#ffd60a]", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, "Mission Controls:"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#ffd60a] mb-2", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }, "Desktop"), /*#__PURE__*/ React.createElement("p", { className: "opacity-80", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, "← → Arrow Keys to Move"), /*#__PURE__*/ React.createElement("p", { className: "opacity-80", __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this }, "Space to Fire")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#ffd60a] mb-2", __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }, "Mobile"), /*#__PURE__*/ React.createElement("p", { className: "opacity-80", __source: { fileName: "", lineNumber: 224, columnNumber: 19 }, __self: this }, "Swipe to Move"), /*#__PURE__*/ React.createElement("p", { className: "opacity-80", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, "Tap to Fire"))))), gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-b from-black to-[rgba(0,0,0,0.9)] z-50 animate-fade-in", __source: { fileName: "", lineNumber: 233, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8 animate-game-over", __source: { fileName: "", lineNumber: 234, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#ff4d4d] text-5xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }, "Mission Failed"), /*#__PURE__*/ React.createElement("p", { className: "text-[#ffd60a] text-2xl font-roboto mb-2", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "Final Score: ", score), /*#__PURE__*/ React.createElement("p", { className: "text-[#ffd60a] text-xl font-roboto opacity-80", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, "Level Reached: ", level)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setGameStarted(true); setGameOver(false); setScore(0); setLives(3); setLevel(1); setTargets([]); setBullets([]); }, className: "bg-gradient-to-r from-[#ffd60a] to-[#ffc300] text-[#000814] px-12 py-4 rounded-full font-bold text-lg hover:scale-105 transition-all duration-300 shadow-[0_0_20px_rgba(255,214,10,0.3)] animate-button-entrance", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, "Try Again")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-0 right-0 flex items-center justify-between px-6 animate-fade-in", __source: { fileName: "", lineNumber: 262, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 bg-[#00000080] px-4 py-2 rounded-full border border-[#ffffff20]", __source: { fileName: "", lineNumber: 263, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd60a] font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, score), /*#__PURE__*/ React.createElement("div", { className: "w-[2px] h-[20px] bg-[#ffffff20]", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd60a] font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, "Lvl ", level), /*#__PURE__*/ React.createElement("div", { className: "w-[2px] h-[20px] bg-[#ffffff20]", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, [ ...Array(lives) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "text-[#ff0000] text-xl animate-pulse", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }, "❤️"))))), showLevelUp && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center animate-level-up z-50", __source: { fileName: "", lineNumber: 282, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd60a] text-4xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 283, columnNumber: 13 }, __self: this }, "Level Up!"), /*#__PURE__*/ React.createElement("div", { className: "text-[#ffd60a] text-2xl font-roboto", __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this }, "Level ", level)), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[40px] h-[60px] transition-all duration-100", style: { left: `${playerPosition.x}px`, top: `${playerPosition.y}px` }, __source: { fileName: "", lineNumber: 291, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full relative animate-hover", __source: { fileName: "", lineNumber: 298, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 299, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-[20px] h-[30px] bg-[#ffd60a] rounded-t-full shadow-[0_0_15px_#ffd60a]", __source: { fileName: "", lineNumber: 300, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 w-[40px] h-[35px] bg-[#ffd60a] rounded-lg shadow-[0_0_15px_#ffd60a]", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-[12px] h-[15px] bg-[#ff4d4d] clip-path-fin transform -skew-x-[20deg]", __source: { fileName: "", lineNumber: 302, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-0 w-[12px] h-[15px] bg-[#ff4d4d] clip-path-fin transform skew-x-[20deg]", __source: { fileName: "", lineNumber: 303, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[-8px] left-1/2 -translate-x-1/2 w-[16px] h-[12px] bg-[#ff0000] animate-flame", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this })))), bullets.map((bullet, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute w-[4px] h-[12px] bg-gradient-to-b from-[#ff0000] to-[#ff6b6b] rounded-full animate-pulse shadow-[0_0_8px_#ff0000]", style: { left: `${bullet.x}px`, top: `${bullet.y}px` }, __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this })), targets.map((target, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute", style: { left: `${target.x}px`, top: `${target.y}px` }, __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[30px] h-[40px] relative", __source: { fileName: "", lineNumber: 323, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-[15px] h-[15px] bg-[#8B4513] rounded-full", __source: { fileName: "", lineNumber: 324, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[-5px] left-1/2 -translate-x-1/2 w-[20px] h-[10px] bg-[#2F4F4F] rounded-t-full", __source: { fileName: "", lineNumber: 325, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[15px] left-1/2 -translate-x-1/2 w-[20px] h-[15px] bg-[#556B2F]", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[15px] left-[2px] w-[8px] h-[12px] bg-[#556B2F] rounded-full transform rotate-[-20deg]", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[15px] right-[2px] w-[8px] h-[12px] bg-[#556B2F] rounded-full transform rotate-[20deg]", __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-[5px] w-[8px] h-[12px] bg-[#556B2F] rounded-full transform rotate-[20deg]", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-[5px] w-[8px] h-[12px] bg-[#556B2F] rounded-full transform rotate-[-20deg]", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[18px] right-[-8px] w-[15px] h-[4px] bg-[#2F4F4F]", __source: { fileName: "", lineNumber: 331, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 336, columnNumber: 9 }, __self: this }, ` .clip-path-fin { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } @keyframes flame { 0% { transform: translateX(-50%) scaleY(0.8); } 50% { transform: translateX(-50%) scaleY(1.2); } 100% { transform: translateX(-50%) scaleY(0.8); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes twinkle { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } @keyframes hover { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } } @keyframes glow { 0% { opacity: 0.3; } 50% { opacity: 0.6; } 100% { opacity: 0.3; } } @keyframes title-entrance { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes button-entrance { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes button-entrance-delayed { 0% { transform: translateY(20px); opacity: 0; } 50% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes controls-entrance { 0% { transform: translateY(20px); opacity: 0; } 70% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes game-over { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes level-up { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } `))); }