function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, members, openProfile, share }) { const VIBE = { colors: { bg: '#050510', accent: '#66FCF1', accentDark: '#45A29E', black: '#0B0C10', red: '#FF003C', white: '#FFFFFF', success: '#39FF14', glow: 'rgba(102, 252, 241, 0.5)', }, fonts: { display: '"Courier New", Courier, monospace', body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', } }; const canvasRef = useRef(null); const requestRef = useRef(null); const particlesRef = useRef([]); const projectilesRef = useRef([]); const starsRef = useRef([]); const bowRef = useRef({ pulling: false, pullStartX: 0, pullStartY: 0, power: 0, angle: -Math.PI / 2 }); const lastSpawnRef = useRef(0); const lastTimeRef = useRef(0); const [showInfo, setShowInfo] = useState(false); const scoreSavedRef = useRef(false); const appData = isMultiplayer ? sharedData : data; const writePatch = useCallback((patch) => { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData({ ...(data || {}), ...patch }); } }, [isMultiplayer, patchSharedData, setData, data]); const leaderboard = appData?.leaderboard || []; const [gameState, setGameState] = useState({ score: 0, wave: 1, lives: 4, maxLives: 4, enemies: [], powerUps: [], activePower: null, waveKills: 0, showWaveBanner: false, waveMessage: null, allies: [], isBossFight: false, bossDefeated: false, screenFlash: 0, flashColor: '', }); const gameStateRef = useRef(gameState); gameStateRef.current = gameState; const getKillsForWave = (wave) => 6 + (wave * 2); const WAVE_PAUSE_DURATION = 4000; const BOSS_WAVES = [3, 5, 7]; const BOSSES = { 3: { icon: '🛸', name: 'ELITE SQUADRON', hp: 15, speed: 0.02, scoreVal: 200, pattern: 'zigzag', message: "Incoming elite fighters! Stay on target!" }, 5: { icon: '🦖', name: 'HEAVY WALKER', hp: 25, speed: 0.012, scoreVal: 400, pattern: 'tank', message: "Armor is too strong for blasters! Aim for the weak spots!" }, 7: { icon: '🌑', name: 'DARK LORD', hp: 35, speed: 0.025, scoreVal: 800, pattern: 'teleport', message: "I have you now..." }, }; const WAVE_MESSAGES = [ { title: "Great shot, kid!", sub: "That was one in a million!" }, { title: "Stay on target!", sub: "Sector is clearing up..." }, { title: "Direct hit!", sub: "The Force is with you!" }, { title: "Impressive!", sub: "Most impressive." }, { title: "Good job!", sub: "Don't get cocky!" }, { title: "Sector Secure!", sub: "Awaiting next wave..." }, ]; const BOSS_DEFEAT_MESSAGES = { 3: { title: "THREAT NEUTRALIZED!", sub: "Reinforcements arriving soon." }, 5: { title: "WALKER DESTROYED!", sub: "The shield generators are safe!" }, 7: { title: "GALAXY SAVED!", sub: "The Force will be with you, always." }, }; const POWER_UPS = { multi: { icon: '☄️', name: 'Scatter Blaster', color: '#FF00FF', duration: 8000 }, bounce: { icon: '🌀', name: 'Homing Bolts', color: '#66FCF1', duration: 10000 }, bomb: { icon: '💣', name: 'Thermal Detonator', color: '#FF003C', duration: 6000 }, }; const lastPowerUpSpawnRef = useRef(0); const waveBannerTimeoutRef = useRef(null); const wavePauseUntilRef = useRef(0); const activeMembers = useMemo(() => { if (isMultiplayer && members?.length > 0) return members; return [{ id: user?.id || 'guest', displayName: user?.name || 'Player', avatarUrl: user?.avatarUrl, isMe: true }]; }, [isMultiplayer, members, user]); // Initialize stars once useEffect(() => { starsRef.current = Array.from({ length: 150 }, () => ({ x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 2 + 0.5, speed: Math.random() * 0.05 + 0.01, opacity: Math.random(), blinkSpeed: Math.random() * 0.05 + 0.01 })); }, []); useEffect(() => { if (gameState.lives <= 0 && gameState.score > 0 && !scoreSavedRef.current) { scoreSavedRef.current = true; const newEntry = { score: gameState.score, wave: gameState.wave, _user: { id: user?.id, displayName: user?.displayName || user?.name || 'Player', handle: user?.handle, profileImageUrl: user?.avatarUrl }, _timestamp: Date.now() }; const newHighScore = Math.max(appData?.highScore || 0, gameState.score); // Deduplicate by user ID for highest score const currentBoard = appData?.leaderboard || []; const existingIdx = (currentBoard || []).findIndex(e => e._user?.id === user?.id); let nextBoard = [...currentBoard]; if (existingIdx >= 0) { if (gameState.score > nextBoard[existingIdx].score) { nextBoard[existingIdx] = newEntry; } } else { nextBoard.push(newEntry); } const updatedLeaderboard = nextBoard .sort((a, b) => b.score - a.score) .slice(0, 5); writePatch({ highScore: newHighScore, leaderboard: updatedLeaderboard }); } }, [gameState.lives, gameState.score, gameState.wave, user, appData, writePatch]); const spawnEnemy = (timestamp) => { if (gameStateRef.current.lives <= 0) return; if (Date.now() < wavePauseUntilRef.current) return; const wave = gameStateRef.current.wave; const isBossFight = gameStateRef.current.isBossFight; if (isBossFight) return; if (timestamp - lastSpawnRef.current > 800) { const baseTypes = [ { icon: '🤖', hp: 1, speed: 0.08, score: 10, type: 'basic', pattern: 'straight' }, { icon: '🪖', hp: 2, speed: 0.05, score: 20, type: 'medium', pattern: 'straight' }, { icon: '👾', hp: 3, speed: 0.03, score: 50, type: 'heavy', pattern: 'straight' }, { icon: '🛸', hp: 1, speed: 0.12, score: 30, type: 'fast', pattern: 'straight' } ]; const advancedTypes = wave >= 2 ? [ { icon: '👽', hp: 2, speed: 0.06, score: 25, type: 'zigzag', pattern: 'zigzag' }, { icon: '🚀', hp: 1, speed: 0.1, score: 35, type: 'wave', pattern: 'sine' }, ] : []; const allTypes = [...baseTypes, ...advancedTypes]; const difficulty = Math.min(2, 1 + (wave * 0.1)); const hpScale = wave >= 6 ? 1 + (wave - 5) * 0.3 : 1; const type = allTypes[Math.floor(Math.random() * (allTypes || []).length)]; const scaledHp = Math.ceil(type.hp * hpScale); const newEnemy = { id: Math.random().toString(36).substr(2, 9), x: 10 + Math.random() * 80, spawnTime: Date.now(), speed: type.speed * difficulty, icon: type.icon, hp: scaledHp, maxHp: scaledHp, scoreVal: Math.ceil(type.score * hpScale), type: type.type, pattern: type.pattern, patternOffset: Math.random() * Math.PI * 2, }; setGameState(prev => ({ ...prev, enemies: [...prev.enemies, newEnemy] })); lastSpawnRef.current = timestamp; } }; const spawnBoss = (bossWave) => { const boss = BOSSES[bossWave]; if (!boss) return; const bossEnemy = { id: 'boss_' + bossWave, x: 50, spawnTime: Date.now(), speed: boss.speed, icon: boss.icon, hp: boss.hp, maxHp: boss.hp, scoreVal: boss.scoreVal, type: 'boss', pattern: boss.pattern, patternOffset: 0, isBoss: true, bossWave: bossWave, }; setGameState(prev => ({ ...prev, enemies: [bossEnemy], isBossFight: true, showWaveBanner: true, waveMessage: { title: '⚠️ WARNING ⚠️', sub: boss.message } })); setTimeout(() => { setGameState(p => ({ ...p, showWaveBanner: false, waveMessage: null })); }, 3000); }; const spawnAllies = () => { const now = Date.now(); const allies = [ { id: 'ally1', x: -10, targetX: 20, y: 55, spawnTime: now, type: 'archer', wanderAngle: Math.random() * Math.PI * 2, wanderSpeed: 0.015 + Math.random() * 0.01 }, { id: 'ally2', x: 110, targetX: 80, y: 45, spawnTime: now, type: 'archer', wanderAngle: Math.random() * Math.PI * 2, wanderSpeed: 0.015 + Math.random() * 0.01 }, ]; setGameState(prev => ({ ...prev, allies: [...prev.allies, ...allies] })); }; const spawnCoach = () => { const coach = { id: 'coach1', x: -10, targetX: 50, y: 35, spawnTime: Date.now(), type: 'coach', wanderAngle: Math.random() * Math.PI * 2, wanderSpeed: 0.012 + Math.random() * 0.008 }; setGameState(prev => ({ ...prev, allies: [...prev.allies, coach] })); }; const createParticles = (x, y, color, count = 5, isExplosion = false) => { for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const speed = isExplosion ? Math.random() * 15 + 5 : Math.random() * 5 + 2; particlesRef.current.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 1.0, color, decay: isExplosion ? 0.02 : 0.05, size: isExplosion ? Math.random() * 4 + 2 : Math.random() * 2 + 1 }); } if (isExplosion) { // Add an expanding ring particlesRef.current.push({ x, y, radius: 5, maxRadius: 60 + Math.random() * 40, life: 1.0, color, isRing: true, decay: 0.05 }); } }; const handlePointerDown = (e) => { const canvas = canvasRef.current; if (!canvas) return; if (gameStateRef.current.lives <= 0) return; const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; bowRef.current.pulling = true; bowRef.current.pullStartX = x; bowRef.current.pullStartY = y; bowRef.current.currX = x; bowRef.current.currY = y; }; const handlePointerMove = (e) => { if (!bowRef.current.pulling) return; const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); bowRef.current.currX = e.clientX - rect.left; bowRef.current.currY = e.clientY - rect.top; const dx = bowRef.current.pullStartX - bowRef.current.currX; const dy = bowRef.current.pullStartY - bowRef.current.currY; const dist = Math.sqrt(dx*dx + dy*dy); const maxPull = 120; bowRef.current.power = Math.min(dist / maxPull, 1.0); bowRef.current.angle = Math.atan2(dy, dx); }; const handlePointerUp = () => { if (!bowRef.current.pulling) return; bowRef.current.pulling = false; if (bowRef.current.power > 0.15) { const canvas = canvasRef.current; const startX = canvas.width / 2; const wallY = canvas.height - 180; const startY = wallY + 20; const speed = 25 + (bowRef.current.power * 10); // Faster lasers const angle = Math.atan2( bowRef.current.currY - bowRef.current.pullStartY, bowRef.current.currX - bowRef.current.pullStartX ); const activePower = gameStateRef.current.activePower; const hasMulti = activePower && activePower.type === 'multi' && Date.now() < activePower.expiresAt; const arrowAngles = hasMulti ? [angle - 0.15, angle, angle + 0.15] : [angle]; const laserColor = hasMulti ? '#FF00FF' : VIBE.colors.red; (arrowAngles || []).forEach((arrowAngle, idx) => { projectilesRef.current.push({ x: startX, y: startY, vx: Math.cos(arrowAngle) * speed, vy: Math.sin(arrowAngle) * speed, rotation: arrowAngle, id: Date.now() + idx, color: laserColor }); }); createParticles(startX, startY, laserColor, hasMulti ? 10 : 5); // Mini recoil screen shake effect via flashing edge setGameState(p => ({ ...p, screenFlash: 0.1, flashColor: laserColor })); } bowRef.current.power = 0; }; const animate = (time) => { if (!canvasRef.current) return; const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const dt = time - lastTimeRef.current; lastTimeRef.current = time; if (canvas.width !== canvas.offsetWidth || canvas.height !== canvas.offsetHeight) { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; } const w = canvas.width; const h = canvas.height; // Space Background ctx.fillStyle = VIBE.colors.bg; ctx.fillRect(0, 0, w, h); // Stars ctx.fillStyle = '#FFF'; (starsRef.current || []).forEach(star => { star.y += star.speed; if (star.y > 100) star.y = 0; star.opacity += Math.sin(time * star.blinkSpeed) * 0.05; const alpha = Math.max(0.1, Math.min(1, star.opacity)); ctx.globalAlpha = alpha; ctx.beginPath(); ctx.arc((star.x / 100) * w, (star.y / 100) * h, star.size, 0, Math.PI * 2); ctx.fill(); }); ctx.globalAlpha = 1.0; // Nebula effect const nebulaGlow = ctx.createRadialGradient(w * 0.5, h * 0.3, 0, w * 0.5, h * 0.3, w * 0.8); nebulaGlow.addColorStop(0, 'rgba(102, 252, 241, 0.05)'); nebulaGlow.addColorStop(0.5, 'rgba(69, 162, 158, 0.02)'); nebulaGlow.addColorStop(1, 'transparent'); ctx.fillStyle = nebulaGlow; ctx.fillRect(0, 0, w, h); spawnEnemy(time); // Base Geometry const wallY = h - 180; const wallHeight = 20; // Floor grid (Death star trench style) ctx.fillStyle = '#0F1519'; ctx.fillRect(0, wallY + wallHeight, w, h - wallY - wallHeight); ctx.strokeStyle = '#1F2833'; ctx.lineWidth = 2; ctx.beginPath(); // Perspective grid for (let x = -w; x < w * 2; x += 40) { ctx.moveTo(x, h); ctx.lineTo(w/2 + (x - w/2) * 0.2, wallY + wallHeight); } for (let y = wallY + wallHeight; y < h; y += Math.pow((y - wallY)/h * 10, 2) + 10) { ctx.moveTo(0, y); ctx.lineTo(w, y); } ctx.stroke(); // Wall/Shield Generator ctx.fillStyle = '#1A1A24'; ctx.fillRect(0, wallY, w, wallHeight); ctx.strokeStyle = VIBE.colors.accentDark; ctx.lineWidth = 2; ctx.strokeRect(0, wallY, w, wallHeight); // Shield Barrier const livesRatio = gameStateRef.current.lives / gameStateRef.current.maxLives; if (livesRatio > 0) { const shieldPulse = Math.sin(time * 0.005) * 0.2 + 0.8; const shieldGradient = ctx.createLinearGradient(0, wallY - 30, 0, wallY); shieldGradient.addColorStop(0, `rgba(102, 252, 241, 0)`); shieldGradient.addColorStop(1, `rgba(102, 252, 241, ${0.4 * livesRatio * shieldPulse})`); ctx.fillStyle = shieldGradient; ctx.fillRect(0, wallY - 40, w, 40); ctx.strokeStyle = `rgba(102, 252, 241, ${0.8 * livesRatio})`; ctx.beginPath(); ctx.moveTo(0, wallY - 1); ctx.lineTo(w, wallY - 1); ctx.stroke(); } // Screen flash effect from state if (gameStateRef.current.screenFlash > 0) { ctx.fillStyle = gameStateRef.current.flashColor || VIBE.colors.accent; ctx.globalAlpha = gameStateRef.current.screenFlash; ctx.fillRect(0, 0, w, h); ctx.globalAlpha = 1.0; setGameState(p => ({ ...p, screenFlash: Math.max(0, p.screenFlash - 0.02) })); } const currentTime = Date.now(); const enemiesToRemove = []; const calcEnemyPosition = (enemy, w, h) => { const elapsed = currentTime - enemy.spawnTime; const progress = (elapsed * enemy.speed) / 1000; const baseY = progress * h; let baseX = (enemy.x / 100) * w; switch (enemy.pattern) { case 'zigzag': baseX += Math.sin(progress * 8 + enemy.patternOffset) * 60; break; case 'sine': baseX += Math.sin(progress * 4 + enemy.patternOffset) * 80; break; case 'teleport': if (Math.floor(elapsed / 1500) % 2 === 1) { baseX = (30 + (elapsed % 40)) / 100 * w; } break; case 'tank': baseX += Math.sin(progress * 2) * 30; break; default: break; } baseX = Math.max(30, Math.min(w - 30, baseX)); return { x: baseX, y: baseY }; }; const activeEnemies = (gameStateRef.current.enemies || []).filter(e => { const pos = calcEnemyPosition(e, w, h); const breachY = e.isBoss ? wallY - 50 : wallY - 20; if (pos.y >= breachY) { enemiesToRemove.push(e.id); return false; } return true; }); if ((enemiesToRemove || []).length > 0) { const bossBreached = (gameStateRef.current.enemies || []).find(e => (enemiesToRemove || []).includes(e.id) && e.isBoss); const livesLost = bossBreached ? 3 : (enemiesToRemove || []).length; setGameState(prev => { const remainingEnemies = (prev.enemies || []).filter(e => !(enemiesToRemove || []).includes(e.id)); const newLives = Math.max(0, prev.lives - livesLost); return { ...prev, enemies: remainingEnemies, lives: newLives, isBossFight: bossBreached ? false : prev.isBossFight, screenFlash: 0.4, flashColor: VIBE.colors.red }; }); for (let i = 0; i < (enemiesToRemove || []).length; i++) { createParticles(w / 2, wallY, VIBE.colors.red, 20, true); } } (activeEnemies || []).forEach(enemy => { const pos = calcEnemyPosition(enemy, w, h); const x = pos.x; const y = pos.y; enemy._currX = x; enemy._currY = y; enemy._radius = enemy.isBoss ? 40 : 20; const glowPulse = Math.sin(time * 0.005 + enemy.spawnTime) * 0.3 + 0.7; const glowSize = enemy.isBoss ? 80 : 40; const glowColor = enemy.isBoss ? 'rgba(255, 0, 60, 0.4)' : 'rgba(255, 100, 100, 0.2)'; const glowGradient = ctx.createRadialGradient(x, y, 0, x, y, glowSize * glowPulse); glowGradient.addColorStop(0, glowColor); glowGradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = glowGradient; ctx.beginPath(); ctx.arc(x, y, glowSize * glowPulse, 0, Math.PI * 2); ctx.fill(); if (enemy.isBoss) { ctx.font = 'bold 16px ' + VIBE.fonts.display; ctx.fillStyle = VIBE.colors.red; ctx.textAlign = 'center'; ctx.fillText(BOSSES[enemy.bossWave]?.name || 'BOSS', x, y - 55); } ctx.fillStyle = '#000000'; ctx.font = enemy.isBoss ? '64px "Apple Color Emoji", "Segoe UI Emoji", sans-serif' : '36px "Apple Color Emoji", "Segoe UI Emoji", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(enemy.icon, x, y); if (enemy.maxHp > 1 || enemy.isBoss) { const hpPct = enemy.hp / enemy.maxHp; const barWidth = enemy.isBoss ? 80 : 30; const barY = enemy.isBoss ? y - 45 : y - 28; ctx.fillStyle = 'rgba(0,0,0,0.8)'; ctx.fillRect(x - barWidth/2, barY, barWidth, enemy.isBoss ? 8 : 5); ctx.fillStyle = enemy.isBoss ? VIBE.colors.red : '#4CAF50'; ctx.fillRect(x - barWidth/2 + 1, barY + 1, (barWidth - 2) * hpPct, enemy.isBoss ? 6 : 3); } }); if (time - lastPowerUpSpawnRef.current > 10000 && Math.random() < 0.4 && gameStateRef.current.lives > 0) { const types = ['multi', 'bounce', 'bomb']; const type = types[Math.floor(Math.random() * (types || []).length)]; const newPowerUp = { id: Math.random().toString(36).substr(2, 9), type, x: 15 + Math.random() * 70, y: -10, spawnTime: Date.now(), }; setGameState(prev => ({ ...prev, powerUps: [...prev.powerUps, newPowerUp] })); lastPowerUpSpawnRef.current = time; } const activePowerUps = (gameStateRef.current.powerUps || []).filter(pu => { const age = currentTime - pu.spawnTime; return age < 15000; }); (activePowerUps || []).forEach(pu => { const puDef = POWER_UPS[pu.type]; const x = (pu.x / 100) * w; const age = currentTime - pu.spawnTime; const progress = (age * 0.03) / 1000; const y = progress * h * 0.5; pu._currX = x; pu._currY = y; const float = Math.sin(time * 0.004 + pu.spawnTime) * 8; const pulse = Math.sin(time * 0.006) * 0.2 + 1; const puGlow = ctx.createRadialGradient(x, y + float, 0, x, y + float, 50 * pulse); puGlow.addColorStop(0, puDef.color + '99'); puGlow.addColorStop(0.5, puDef.color + '44'); puGlow.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = puGlow; ctx.beginPath(); ctx.arc(x, y + float, 50 * pulse, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000000'; ctx.font = '32px "Apple Color Emoji", "Segoe UI Emoji", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.shadowColor = puDef.color; ctx.shadowBlur = 15; ctx.fillText(puDef.icon, x, y + float); ctx.shadowBlur = 0; ctx.font = 'bold 12px ' + VIBE.fonts.display; ctx.fillStyle = '#fff'; ctx.fillText(puDef.name, x, y + float + 26); if (age > 12000) { const blink = Math.sin(time * 0.03) > 0; if (!blink) ctx.globalAlpha = 0.3; } ctx.globalAlpha = 1; }); if ((gameStateRef.current.powerUps || []).length !== (activePowerUps || []).length) { setGameState(prev => ({ ...prev, powerUps: (prev.powerUps || []).filter(pu => currentTime - pu.spawnTime < 15000) })); } const activePower = gameStateRef.current.activePower; if (activePower && currentTime < activePower.expiresAt) { const puDef = POWER_UPS[activePower.type]; const remaining = activePower.expiresAt - currentTime; const pct = remaining / puDef.duration; const secondsLeft = Math.ceil(remaining / 1000); ctx.fillStyle = 'rgba(11, 12, 16, 0.8)'; ctx.strokeStyle = puDef.color; ctx.lineWidth = 2; ctx.beginPath(); ctx.roundRect(w * 0.2, 115, w * 0.6, 40, 4); ctx.fill(); ctx.stroke(); ctx.fillStyle = 'rgba(255,255,255,0.1)'; ctx.fillRect(w * 0.25, 142, w * 0.5, 6); ctx.shadowColor = puDef.color; ctx.shadowBlur = 10; ctx.fillStyle = puDef.color; ctx.fillRect(w * 0.25, 142, w * 0.5 * pct, 6); ctx.shadowBlur = 0; ctx.font = 'bold 14px ' + VIBE.fonts.display; ctx.textAlign = 'center'; ctx.fillStyle = '#fff'; ctx.fillText('⚡ ' + puDef.name.toUpperCase() + ' ⚡', w / 2, 134); if (pct < 0.3 && Math.sin(time * 0.015) > 0) { ctx.fillStyle = 'rgba(255, 0, 0, 0.1)'; ctx.fillRect(0, 0, w, h); } } const allies = gameStateRef.current.allies || []; (allies || []).forEach(ally => { const elapsed = currentTime - ally.spawnTime; const walkProgress = Math.min(1, elapsed / 3000); const easeOut = 1 - Math.pow(1 - walkProgress, 3); let currentX, currentY; if (walkProgress < 1) { currentX = ally.x + (ally.targetX - ally.x) * easeOut; currentY = ally.y; } else { if (!ally._wanderX) { ally._wanderX = ally.targetX; ally._wanderY = ally.y; } ally.wanderAngle = (ally.wanderAngle || 0) + (Math.random() - 0.5) * 0.08; const speed = ally.wanderSpeed || 0.015; ally._wanderX += Math.cos(ally.wanderAngle) * speed * 16; ally._wanderY += Math.sin(ally.wanderAngle) * speed * 16; const minX = 15, maxX = 85; const minY = 25, maxY = ally.type === 'coach' ? 50 : 60; if (ally._wanderX < minX) { ally._wanderX = minX; ally.wanderAngle = Math.PI - ally.wanderAngle; } if (ally._wanderX > maxX) { ally._wanderX = maxX; ally.wanderAngle = Math.PI - ally.wanderAngle; } if (ally._wanderY < minY) { ally._wanderY = minY; ally.wanderAngle = -ally.wanderAngle; } if (ally._wanderY > maxY) { ally._wanderY = maxY; ally.wanderAngle = -ally.wanderAngle; } currentX = ally._wanderX; currentY = ally._wanderY; } const ax = (currentX / 100) * w; const ay = (currentY / 100) * h; ally._currX = ax; ally._currY = ay; ally._radius = 25; const glow = ctx.createRadialGradient(ax, ay, 0, ax, ay, 40); const glowCol = ally.type === 'coach' ? 'rgba(57, 255, 20, 0.5)' : 'rgba(102, 252, 241, 0.5)'; glow.addColorStop(0, glowCol); glow.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(ax, ay, 40, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#000'; ctx.font = '36px "Apple Color Emoji", "Segoe UI Emoji", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(ally.type === 'coach' ? '🧙‍♂️' : '👨‍🚀', ax, ay + Math.sin(time * 0.003) * 3); ctx.font = 'bold 10px ' + VIBE.fonts.display; ctx.fillStyle = ally.type === 'coach' ? VIBE.colors.success : VIBE.colors.accent; ctx.fillText(ally.type === 'coach' ? 'JEDI MENTOR' : 'WINGMAN', ax, ay + 38); }); const currentPower = gameStateRef.current.activePower; const hasBomb = currentPower && currentPower.type === 'bomb' && currentTime < currentPower.expiresAt; const hasBounce = currentPower && currentPower.type === 'bounce' && currentTime < currentPower.expiresAt; const projectilesToRemove = []; (projectilesRef.current || []).forEach((p, pIdx) => { p.x += p.vx; p.y += p.vy; // Blaster bolts don't fall as much as arrows p.vy += 0.02; p.rotation = Math.atan2(p.vy, p.vx); if (!p.isForcePush) { for (let ally of allies) { if (!ally._currX) continue; const dx = p.x - ally._currX; const dy = p.y - ally._currY; if (dx*dx + dy*dy < 900 && !p.justBounced && !ally._onCooldown) { if (ally.type === 'coach') { p.justBounced = true; ally._onCooldown = true; createParticles(ally._currX, ally._currY, VIBE.colors.success, 12); for (let fb = 0; fb < 3; fb++) { const fireAngle = -Math.PI/2 + (Math.random() - 0.5) * Math.PI * 0.8; const fireSpeed = 20 + Math.random() * 5; projectilesRef.current.push({ x: ally._currX, y: ally._currY - 30, vx: Math.cos(fireAngle) * fireSpeed, vy: Math.sin(fireAngle) * fireSpeed, rotation: fireAngle, id: Date.now() + fb + Math.random() * 1000, isForcePush: true, justBounced: true, color: VIBE.colors.success }); } projectilesToRemove.push(pIdx); setTimeout(() => { p.justBounced = false; }, 300); setTimeout(() => { ally._onCooldown = false; }, 500); } else { const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy) * 1.1; const upAngle = -Math.PI/2 + (Math.random() - 0.5) * Math.PI * 0.5; p.vx = Math.cos(upAngle) * speed; p.vy = Math.sin(upAngle) * speed; p.justBounced = true; createParticles(ally._currX, ally._currY, VIBE.colors.accent, 8); setTimeout(() => { p.justBounced = false; }, 200); } } } } if (hasBounce) { if (p.x < 0 || p.x > w) { p.vx *= -1; p.x = Math.max(0, Math.min(w, p.x)); createParticles(p.x, p.y, VIBE.colors.accent, 5); } if (p.y < 0) { p.vy *= -1; p.y = 0; createParticles(p.x, p.y, VIBE.colors.accent, 5); } } ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rotation); // Draw Blaster Bolt const projColor = p.color || (hasBomb ? '#FF003C' : hasBounce ? '#66FCF1' : '#FF003C'); ctx.shadowColor = projColor; ctx.shadowBlur = 15; ctx.fillStyle = '#FFF'; ctx.beginPath(); ctx.roundRect(-15, -2, 30, 4, 2); ctx.fill(); ctx.fillStyle = projColor; ctx.beginPath(); ctx.roundRect(-12, -1, 24, 2, 1); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); // Power up collision for (let pu of activePowerUps) { const dx = p.x - pu._currX; const dy = p.y - pu._currY; if (dx*dx + dy*dy < 1200) { const puDef = POWER_UPS[pu.type]; setGameState(prev => ({ ...prev, powerUps: (prev.powerUps || []).filter(pup => pup.id !== pu.id), activePower: { type: pu.type, expiresAt: currentTime + puDef.duration }, screenFlash: 0.5, flashColor: puDef.color })); createParticles(pu._currX, pu._currY, puDef.color, 25, true); projectilesToRemove.push(pIdx); return; } } let hit = false; const hitEnemies = []; for (let enemy of activeEnemies) { const dx = p.x - enemy._currX; const dy = p.y - enemy._currY; const hitRadius = hasBomb ? 4000 : 1600; // Bomb has large area if (dx*dx + dy*dy < hitRadius) { hit = true; hitEnemies.push(enemy); if (hasBomb) { createParticles(p.x, p.y, '#FF003C', 30, true); } else { createParticles(enemy._currX, enemy._currY, p.color || VIBE.colors.accent, 8); } } } if ((hitEnemies || []).length > 0) { const enemyIds = (hitEnemies || []).map(e => e.id); const totalScore = (hitEnemies || []).reduce((sum, e) => sum + (e.scoreVal || 10), 0); setGameState(prev => { let newEnemies = (prev.enemies || []).map(e => (enemyIds || []).includes(e.id) ? { ...e, hp: e.hp - (hasBomb ? 4 : 1) } : e ).filter(e => { if (e.hp <= 0 && e.isBoss) return true; // keep boss to trigger win below if (e.hp <= 0) { createParticles(e._currX, e._currY, VIBE.colors.accent, 15, true); } return e.hp > 0; }); const killed = (prev.enemies || []).length - (newEnemies || []).length; const scoreAdd = killed > 0 ? totalScore : 0; const newScore = prev.score + scoreAdd; const newWaveKills = prev.waveKills + killed; const bossKilled = (prev.enemies || []).find(e => e.isBoss && e.hp - (hasBomb ? 4 : 1) <= 0); if (bossKilled) { const bossMsg = BOSS_DEFEAT_MESSAGES[bossKilled.bossWave] || { title: "THREAT ELIMINATED!", sub: "Great job!" }; wavePauseUntilRef.current = Date.now() + WAVE_PAUSE_DURATION; if (waveBannerTimeoutRef.current) clearTimeout(waveBannerTimeoutRef.current); waveBannerTimeoutRef.current = setTimeout(() => { setGameState(p => ({ ...p, showWaveBanner: false, waveMessage: null })); }, WAVE_PAUSE_DURATION - 500); if (bossKilled.bossWave === 3) { setTimeout(() => spawnAllies(), 1000); } if (bossKilled.bossWave === 5) { setTimeout(() => spawnCoach(), 1000); } createParticles(bossKilled._currX, bossKilled._currY, VIBE.colors.red, 50, true); return { ...prev, enemies: [], score: newScore, waveKills: 0, lives: Math.min(prev.lives + 2, 4), maxLives: 4, showWaveBanner: true, waveMessage: bossMsg, isBossFight: false, bossDefeated: true, screenFlash: 0.6, flashColor: '#FFFFFF' }; } const killsNeeded = getKillsForWave(prev.wave); if (newWaveKills >= killsNeeded && !prev.isBossFight) { const nextWave = prev.wave + 1; const bonusLife = Math.min(prev.lives + 1, 4); const hasBossBattle = (BOSS_WAVES || []).includes(nextWave); wavePauseUntilRef.current = Date.now() + WAVE_PAUSE_DURATION; const randomMessage = WAVE_MESSAGES[Math.floor(Math.random() * (WAVE_MESSAGES || []).length)]; if (waveBannerTimeoutRef.current) clearTimeout(waveBannerTimeoutRef.current); waveBannerTimeoutRef.current = setTimeout(() => { setGameState(p => ({ ...p, showWaveBanner: false, waveMessage: null })); if (hasBossBattle) { setTimeout(() => spawnBoss(nextWave), 500); } }, WAVE_PAUSE_DURATION - 500); return { ...prev, enemies: [], score: newScore, wave: nextWave, waveKills: 0, lives: bonusLife, maxLives: 4, showWaveBanner: true, waveMessage: hasBossBattle ? { title: `SECTOR ${nextWave}`, sub: "⚠️ DANGER APPROACHING..." } : randomMessage }; } return { ...prev, enemies: (newEnemies || []).filter(e => e.hp > 0), score: newScore, waveKills: newWaveKills }; }); } const offScreen = p.y > h || (hasBounce ? false : (p.x < 0 || p.x > w)); if (hit || offScreen || p.y < -50) { projectilesToRemove.push(pIdx); } }); (projectilesToRemove || []).sort((a, b) => b - a).forEach(idx => { (projectilesRef.current || []).splice(idx, 1); }); // Particles Update (particlesRef.current || []).forEach((p, i) => { if (p.isRing) { p.radius += (p.maxRadius - p.radius) * 0.1; p.life -= p.decay; ctx.globalAlpha = Math.max(0, p.life); ctx.strokeStyle = p.color; ctx.lineWidth = 2 * p.life; ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.stroke(); } else { p.x += p.vx; p.y += p.vy; p.life -= p.decay; ctx.globalAlpha = Math.max(0, p.life); ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI*2); ctx.fill(); } ctx.globalAlpha = 1; if (p.life <= 0) (particlesRef.current || []).splice(i, 1); }); const bowX = w / 2; const bowY = wallY + 20; // Draw Aiming Help if (!bowRef.current.pulling) { ctx.font = '11px ' + VIBE.fonts.display; ctx.fillStyle = 'rgba(102, 252, 241, 0.6)'; ctx.textAlign = 'center'; ctx.fillText('DRAG TO AIM & FIRE', bowX, bowY + 50); } if (bowRef.current.pulling) { const pullPower = bowRef.current.power; const angle = Math.atan2( bowRef.current.currY - bowRef.current.pullStartY, bowRef.current.currX - bowRef.current.pullStartX ); // Laser sight line ctx.beginPath(); ctx.moveTo(bowX, bowY); ctx.lineTo(bowX + Math.cos(angle) * pullPower * 300, bowY + Math.sin(angle) * pullPower * 300); ctx.strokeStyle = `rgba(255, 0, 60, ${0.2 + pullPower * 0.5})`; ctx.lineWidth = 2; ctx.setLineDash([10, 15]); ctx.stroke(); ctx.setLineDash([]); // Reticle at current drag pos ctx.beginPath(); ctx.arc(bowRef.current.currX, bowRef.current.currY, 15, 0, Math.PI * 2); ctx.strokeStyle = VIBE.colors.accent; ctx.lineWidth = 2; ctx.stroke(); ctx.beginPath(); ctx.arc(bowRef.current.currX, bowRef.current.currY, 2, 0, Math.PI * 2); ctx.fillStyle = VIBE.colors.accent; ctx.fill(); } // Draw Sci-Fi Turret Base ctx.save(); ctx.translate(bowX, bowY); let aimAngle = -Math.PI / 2; if (bowRef.current.pulling) { aimAngle = Math.atan2( bowRef.current.currY - bowRef.current.pullStartY, bowRef.current.currX - bowRef.current.pullStartX ); } // Base Dome ctx.beginPath(); ctx.arc(0, 0, 35, Math.PI, 0); ctx.fillStyle = '#1F2833'; ctx.fill(); ctx.strokeStyle = VIBE.colors.accentDark; ctx.lineWidth = 2; ctx.stroke(); // Rotate barrel ctx.rotate(aimAngle); // Barrel const barrelLength = bowRef.current.pulling ? 40 - (bowRef.current.power * 10) : 40; // Recoil visual ctx.fillStyle = '#45A29E'; ctx.fillRect(10, -10, barrelLength, 20); ctx.strokeStyle = '#0B0C10'; ctx.lineWidth = 2; ctx.strokeRect(10, -10, barrelLength, 20); // Energy Glow in barrel if (bowRef.current.pulling) { ctx.shadowColor = VIBE.colors.red; ctx.shadowBlur = 10; ctx.fillStyle = '#FFF'; ctx.fillRect(10 + barrelLength - 8, -4, 8, 8); ctx.shadowBlur = 0; } ctx.restore(); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); const containerStyle = { position: 'relative', width: '100%', height: '100dvh', backgroundColor: VIBE.colors.bg, fontFamily: VIBE.fonts.body, overflow: 'hidden', touchAction: 'none', userSelect: 'none', }; const hudStyle = { position: 'absolute', top: 'calc(max(env(safe-area-inset-top, 12px), 12px) + 70px)', left: 0, right: 0, padding: '0 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'start', pointerEvents: 'none', zIndex: 10, }; const scoreCardStyle = { background: 'rgba(11, 12, 16, 0.7)', border: `1px solid ${VIBE.colors.accentDark}`, borderRadius: 8, padding: '8px 16px', textAlign: 'center', boxShadow: `0 0 10px rgba(102, 252, 241, 0.2), inset 0 0 10px rgba(102, 252, 241, 0.1)`, backdropFilter: 'blur(8px)', }; return (