var __AppModules = (() => { var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // virtual:App.jsx var App_exports = {}; __export(App_exports, { default: () => App }); var W = 900, H = 500; var GRAVITY = 0.08; var GROUND_Y = H - 60; var SLING_X = 130, SLING_Y = GROUND_Y - 70; var MAX_PULL = 90; var BAND_SNAP_DIST = W * 0.1; var TOTAL_PIGS = 5; var TOTAL_LEVELS = 6; var MAT = { WOOD: { color: "#c8a060", hp: 3, scoreKill: 10, label: "W" }, STONE: { color: "#9ca3af", hp: 6, scoreKill: 20, label: "S" }, ICE: { color: "#93c5fd", hp: 2, scoreKill: 5, label: "I" } }; var audioCtx = null; var pigAudioBuffer = null; function getAudio() { if (!audioCtx) audioCtx = new AudioContext(); return audioCtx; } async function loadPigSound() { try { if (!DATA.pigWav) return; const a = getAudio(); const binary = atob(DATA.pigWav); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i); pigAudioBuffer = await a.decodeAudioData(bytes.buffer); } catch (e) { } } function playPigSound() { try { if (!pigAudioBuffer) return; const a = getAudio(); const src = a.createBufferSource(); src.buffer = pigAudioBuffer; const g = a.createGain(); g.gain.value = 0.7; src.connect(g); g.connect(a.destination); src.start(); } catch (e) { } } function playTone(freq, dur = 0.15, type = "square", vol = 0.18) { try { const a = getAudio(); const o = a.createOscillator(), g = a.createGain(); o.connect(g); g.connect(a.destination); o.type = type; o.frequency.value = freq; g.gain.setValueAtTime(vol, a.currentTime); g.gain.exponentialRampToValueAtTime(1e-3, a.currentTime + dur); o.start(); o.stop(a.currentTime + dur); } catch (e) { } } function playLaunch() { try { const a = getAudio(); const o = a.createOscillator(), g = a.createGain(); o.connect(g); g.connect(a.destination); o.type = "sine"; o.frequency.setValueAtTime(300, a.currentTime); o.frequency.exponentialRampToValueAtTime(800, a.currentTime + 0.15); g.gain.setValueAtTime(0.2, a.currentTime); g.gain.exponentialRampToValueAtTime(1e-3, a.currentTime + 0.2); o.start(); o.stop(a.currentTime + 0.2); } catch (e) { } } function playImpact(big = false) { try { const a = getAudio(); const o = a.createOscillator(), g = a.createGain(); o.connect(g); g.connect(a.destination); o.type = "sawtooth"; o.frequency.setValueAtTime(big ? 300 : 180, a.currentTime); o.frequency.exponentialRampToValueAtTime(30, a.currentTime + (big ? 0.4 : 0.25)); g.gain.setValueAtTime(big ? 0.35 : 0.22, a.currentTime); g.gain.exponentialRampToValueAtTime(1e-3, a.currentTime + (big ? 0.4 : 0.25)); o.start(); o.stop(a.currentTime + (big ? 0.4 : 0.25)); } catch (e) { } } function playBirdDie() { try { const a = getAudio(); [0, 0.1, 0.2].forEach((offset) => { const o = a.createOscillator(), g = a.createGain(); o.connect(g); g.connect(a.destination); o.type = "triangle"; o.frequency.setValueAtTime(600 - offset * 1e3, a.currentTime + offset); o.frequency.exponentialRampToValueAtTime(100, a.currentTime + offset + 0.15); g.gain.setValueAtTime(0.2, a.currentTime + offset); g.gain.exponentialRampToValueAtTime(1e-3, a.currentTime + offset + 0.15); o.start(a.currentTime + offset); o.stop(a.currentTime + offset + 0.15); }); } catch (e) { } } function playWin() { [523, 659, 784, 1046].forEach((f, i) => setTimeout(() => playTone(f, 0.3, "sine", 0.25), i * 160)); } function playLose() { [400, 300, 200, 150].forEach((f, i) => setTimeout(() => playTone(f, 0.3, "sawtooth", 0.25), i * 160)); } function generateLevel(levelIndex) { const blocks = [], birds = []; const idx = levelIndex % TOTAL_LEVELS; if (idx === 0) { const baseX = 540; [[0, MAT.WOOD], [50, MAT.WOOD], [0, MAT.ICE], [50, MAT.ICE], [0, MAT.WOOD], [50, MAT.WOOD]].forEach(([xOff, mat], row) => { }); for (let col = 0; col < 2; col++) { for (let row = 0; row < 3; row++) { const mat = row === 1 ? MAT.STONE : MAT.WOOD; blocks.push({ x: baseX + col * 54, y: GROUND_Y - (row + 1) * 36, w: 48, h: 34, mat, hp: mat.hp, maxHp: mat.hp, id: Math.random() }); } birds.push({ x: baseX + col * 54 + 24, y: GROUND_Y - 3 * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: col % 5 }); } } else if (idx === 1) { const baseX = 520; const base = 5; for (let row = 0; row < base; row++) { const count = base - row; const mat = row % 2 === 0 ? MAT.WOOD : MAT.ICE; const bw = 50, bh = 32; const totalW = count * (bw + 4); const startX = baseX + (base * (bw + 4) - totalW) / 2; for (let c = 0; c < count; c++) { blocks.push({ x: startX + c * (bw + 4), y: GROUND_Y - (row + 1) * (bh + 2), w: bw, h: bh, mat, hp: mat.hp, maxHp: mat.hp, id: Math.random() }); } } birds.push({ x: baseX + base * 27, y: GROUND_Y - base * 35 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 0 }); birds.push({ x: baseX + 20, y: GROUND_Y - 18, r: 16, alive: true, id: Math.random(), colorIdx: 1 }); } else if (idx === 2) { const baseX = 500; for (let row = 0; row < 5; row++) { blocks.push({ x: baseX, y: GROUND_Y - (row + 1) * 36, w: 44, h: 34, mat: MAT.STONE, hp: MAT.STONE.hp, maxHp: MAT.STONE.hp, id: Math.random() }); blocks.push({ x: baseX + 150, y: GROUND_Y - (row + 1) * 36, w: 44, h: 34, mat: MAT.STONE, hp: MAT.STONE.hp, maxHp: MAT.STONE.hp, id: Math.random() }); } for (let i = 0; i < 3; i++) { blocks.push({ x: baseX + 44 + i * 36, y: GROUND_Y - 6 * 36, w: 34, h: 28, mat: MAT.WOOD, hp: MAT.WOOD.hp, maxHp: MAT.WOOD.hp, id: Math.random() }); } birds.push({ x: baseX + 22, y: GROUND_Y - 6 * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 0 }); birds.push({ x: baseX + 172, y: GROUND_Y - 6 * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 2 }); birds.push({ x: baseX + 90, y: GROUND_Y - 7 * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 4 }); } else if (idx === 3) { const baseX = 480; const layout = [ [0, 0, MAT.ICE], [55, 0, MAT.ICE], [110, 0, MAT.ICE], [165, 0, MAT.ICE], [0, 1, MAT.WOOD], [55, 1, MAT.WOOD], [110, 1, MAT.STONE], [165, 1, MAT.WOOD], [0, 2, MAT.ICE], [110, 2, MAT.ICE], [27, 3, MAT.STONE], [83, 3, MAT.STONE] ]; layout.forEach(([xOff, row, mat]) => { blocks.push({ x: baseX + xOff, y: GROUND_Y - (row + 1) * 36, w: 48, h: 34, mat, hp: mat.hp, maxHp: mat.hp, id: Math.random() }); }); birds.push({ x: baseX + 24, y: GROUND_Y - 3 * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 1 }); birds.push({ x: baseX + 134, y: GROUND_Y - 3 * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 3 }); birds.push({ x: baseX + 51, y: GROUND_Y - 4 * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 2 }); } else if (idx === 4) { const towers = [ { x: 470, rows: 3, mat: MAT.WOOD }, { x: 580, rows: 5, mat: MAT.STONE }, { x: 700, rows: 2, mat: MAT.ICE } ]; towers.forEach(({ x, rows, mat }, tIdx) => { for (let row = 0; row < rows; row++) { blocks.push({ x, y: GROUND_Y - (row + 1) * 36, w: 44, h: 34, mat, hp: mat.hp, maxHp: mat.hp, id: Math.random() }); } birds.push({ x: x + 22, y: GROUND_Y - rows * 36 - 18, r: 16, alive: true, id: Math.random(), colorIdx: tIdx % 5 }); }); } else { const baseX = 460; for (let row = 0; row < 7; row++) { blocks.push({ x: baseX, y: GROUND_Y - (row + 1) * 34, w: 40, h: 32, mat: MAT.STONE, hp: MAT.STONE.hp, maxHp: MAT.STONE.hp, id: Math.random() }); blocks.push({ x: baseX + 220, y: GROUND_Y - (row + 1) * 34, w: 40, h: 32, mat: MAT.STONE, hp: MAT.STONE.hp, maxHp: MAT.STONE.hp, id: Math.random() }); } for (let col = 0; col < 4; col++) { for (let row = 0; row < 4; row++) { const mat = col % 2 === 0 ? MAT.WOOD : MAT.ICE; blocks.push({ x: baseX + 50 + col * 44, y: GROUND_Y - (row + 1) * 34, w: 40, h: 32, mat, hp: mat.hp, maxHp: mat.hp, id: Math.random() }); } } for (let col = 0; col < 6; col++) { blocks.push({ x: baseX + col * 40, y: GROUND_Y - 8 * 34, w: 38, h: 30, mat: MAT.STONE, hp: MAT.STONE.hp, maxHp: MAT.STONE.hp, id: Math.random() }); } birds.push({ x: baseX + 20, y: GROUND_Y - 8 * 34 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 0 }); birds.push({ x: baseX + 240, y: GROUND_Y - 8 * 34 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 2 }); birds.push({ x: baseX + 90, y: GROUND_Y - 9 * 34 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 3 }); birds.push({ x: baseX + 160, y: GROUND_Y - 9 * 34 - 18, r: 16, alive: true, id: Math.random(), colorIdx: 4 }); } return { blocks, birds }; } function spawnParticles(game, x, y, color, count = 8) { for (let i = 0; i < count; i++) { const a = Math.random() * Math.PI * 2; const spd = 2 + Math.random() * 4; game.particles.push({ x, y, vx: Math.cos(a) * spd, vy: Math.sin(a) * spd - 2, life: 1, color }); } } function aabb(pig, block) { return pig.x - pig.r < block.x + block.w && pig.x + pig.r > block.x && pig.y - pig.r < block.y + block.h && pig.y + pig.r > block.y; } function resolveCircleBlock(pig, block) { const cx = Math.max(block.x, Math.min(pig.x, block.x + block.w)); const cy = Math.max(block.y, Math.min(pig.y, block.y + block.h)); const dx = pig.x - cx, dy = pig.y - cy; const dist = Math.sqrt(dx * dx + dy * dy) || 0.01; if (dist < pig.r) { const pen = pig.r - dist; const nx = dx / dist, ny = dy / dist; pig.x += nx * pen; pig.y += ny * pen; const dot = pig.vx * nx + pig.vy * ny; pig.vx -= 2 * dot * nx * 0.4; pig.vy -= 2 * dot * ny * 0.4; return true; } return false; } function makeGame(levelIndex) { const { blocks, birds } = generateLevel(levelIndex); return { pig: null, pigsLeft: TOTAL_PIGS, pigsUsed: [], blocks, birds, particles: [], launched: false, dragging: false, dragX: SLING_X, dragY: SLING_Y, mouseX: 0, mouseY: 0, mouseDown: false, settled: false, settleTimer: 0, score: 0, gameOver: false, win: false, camera: 0, tick: 0 }; } function App() { const canvasRef = React.useRef(null); const [gameState, setGameState] = React.useState("ready"); const [score, setScore] = React.useState(0); const [pigsLeft, setPigsLeft] = React.useState(TOTAL_PIGS); const [birdsLeft, setBirdsLeft] = React.useState(0); const [currentLevel, setCurrentLevel] = React.useState(1); const [totalScore, setTotalScore] = React.useState(0); const gameRef = React.useRef(null); const levelRef = React.useRef(0); function initGame(levelIndex) { gameRef.current = makeGame(levelIndex); const g = gameRef.current; setBirdsLeft(g.birds.length); setPigsLeft(TOTAL_PIGS); setScore(0); } function startGame() { levelRef.current = 0; setCurrentLevel(1); setTotalScore(0); getAudio(); loadPigSound(); initGame(0); setGameState("playing"); } function nextLevel() { const nextIdx = (levelRef.current + 1) % TOTAL_LEVELS; levelRef.current = nextIdx; setCurrentLevel(nextIdx + 1); setTotalScore((s) => s + score); initGame(nextIdx); setGameState("playing"); } React.useEffect(() => { if (gameState !== "playing") return; const canvas = canvasRef.current; const g = () => gameRef.current; const onMove = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = W / rect.width; const scaleY = H / rect.height; g().mouseX = (e.clientX - rect.left) * scaleX; g().mouseY = (e.clientY - rect.top) * scaleY; }; const onDown = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = W / rect.width; const scaleY = H / rect.height; g().mouseX = (e.clientX - rect.left) * scaleX; g().mouseY = (e.clientY - rect.top) * scaleY; if (!g().launched && !g().pig && g().pigsLeft > 0) { const dx = g().mouseX - SLING_X, dy = g().mouseY - SLING_Y; if (Math.sqrt(dx * dx + dy * dy) < 40) g().dragging = true; } }; const onUp = () => { const game = g(); if (game.dragging && !game.launched) { const dx = game.dragX - SLING_X, dy = game.dragY - SLING_Y; const power = 0.13; game.pig = { x: game.dragX, y: game.dragY, r: 14, vx: -dx * power, vy: -dy * power, bounces: 0, angle: 0 }; game.launched = true; game.dragging = false; game.pigsLeft--; game.settleTimer = 0; game.settled = false; setPigsLeft(game.pigsLeft); playPigSound(); playLaunch(); } g().dragging = false; g().mouseDown = false; }; const onTouchMove = (e) => { e.preventDefault(); const t = e.touches[0]; onMove({ clientX: t.clientX, clientY: t.clientY }); }; const onTouchStart = (e) => { e.preventDefault(); const t = e.touches[0]; onDown({ clientX: t.clientX, clientY: t.clientY }); }; canvas.addEventListener("mousemove", onMove); canvas.addEventListener("mousedown", onDown); window.addEventListener("mouseup", onUp); canvas.addEventListener("touchmove", onTouchMove, { passive: false }); canvas.addEventListener("touchstart", onTouchStart, { passive: false }); window.addEventListener("touchend", onUp); return () => { canvas.removeEventListener("mousemove", onMove); canvas.removeEventListener("mousedown", onDown); window.removeEventListener("mouseup", onUp); canvas.removeEventListener("touchmove", onTouchMove); canvas.removeEventListener("touchstart", onTouchStart); window.removeEventListener("touchend", onUp); }; }, [gameState]); React.useEffect(() => { if (gameState !== "playing") return; const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); let rafId; const loop = () => { const game = gameRef.current; if (!game) { rafId = requestAnimationFrame(loop); return; } if (game.dragging) { const dx = game.mouseX - SLING_X; const dy = game.mouseY - SLING_Y; const dist = Math.sqrt(dx * dx + dy * dy); const clamped = Math.min(dist, MAX_PULL); const angle = Math.atan2(dy, dx); game.dragX = SLING_X + Math.cos(angle) * clamped; game.dragY = SLING_Y + Math.sin(angle) * clamped; } else if (!game.launched) { game.dragX = SLING_X; game.dragY = SLING_Y; } const pig = game.pig; if (pig) { pig.vy += GRAVITY; pig.x += pig.vx; pig.y += pig.vy; pig.angle += 0.04; if (pig.y + pig.r >= GROUND_Y) { pig.y = GROUND_Y - pig.r; pig.vy *= -0.35; pig.vx *= 0.75; pig.bounces++; if (Math.abs(pig.vy) > 3) playImpact(false); if (pig.bounces > 3 || Math.abs(pig.vx) < 0.5 && Math.abs(pig.vy) < 0.5) { game.pig = null; game.launched = false; } } if (pig.x - pig.r < 0) { pig.x = pig.r; pig.vx *= -0.5; } if (pig.x + pig.r > W) { pig.x = W - pig.r; pig.vx *= -0.5; } for (const block of game.blocks) { if (aabb(pig, block)) { const collided = resolveCircleBlock(pig, block); if (collided) { const speed2 = Math.sqrt(pig.vx * pig.vx + pig.vy * pig.vy); const dmg = Math.max(1, Math.floor(speed2 / 4)); block.hp -= dmg; spawnParticles(game, block.x + block.w / 2, block.y + block.h / 2, block.mat.color, 6); playImpact(speed2 > 8); if (block.hp <= 0) { game.score += block.mat.scoreKill; setScore((s) => s + block.mat.scoreKill); spawnParticles(game, block.x + block.w / 2, block.y + block.h / 2, block.mat.color, 14); } } } } game.blocks = game.blocks.filter((b) => b.hp > 0); for (const bird of game.birds) { if (!bird.alive) continue; const dx = pig.x - bird.x, dy = pig.y - bird.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < pig.r + bird.r) { bird.alive = false; game.score += 100; setScore((s) => s + 100); spawnParticles(game, bird.x, bird.y, "#fde68a", 16); playBirdDie(); const alive = game.birds.filter((b) => b.alive).length; setBirdsLeft(alive); if (alive === 0) { game.win = true; game.gameOver = true; playWin(); setTimeout(() => setGameState("win"), 800); } } } const speed = Math.sqrt(pig.vx * pig.vx + pig.vy * pig.vy); if (speed < 0.5) game.settleTimer++; else game.settleTimer = 0; if (game.settleTimer > 40) { game.pig = null; game.launched = false; game.settleTimer = 0; } } for (const block of game.blocks) { const hasSupport = block.y + block.h >= GROUND_Y - 2 || game.blocks.some((b) => b !== block && b.y >= block.y + block.h - 4 && b.y <= block.y + block.h + 4 && b.x < block.x + block.w && b.x + b.w > block.x); if (!hasSupport) { block.y += 3; if (block.y + block.h > GROUND_Y) block.y = GROUND_Y - block.h; } } for (const bird of game.birds) { if (!bird.alive) continue; const hasBlock = game.blocks.some((b) => b.y < bird.y + bird.r && b.y + b.h > bird.y - bird.r && b.x < bird.x + bird.r && b.x + b.w > bird.x - bird.r); if (!hasBlock) { bird.y += 3; if (bird.y + bird.r > GROUND_Y) bird.y = GROUND_Y - bird.r; } } if (!game.pig && !game.launched && !game.gameOver) { if (game.birds.every((b) => !b.alive)) { game.win = true; game.gameOver = true; playWin(); setTimeout(() => setGameState("win"), 600); } else if (game.pigsLeft === 0) { game.gameOver = true; playLose(); setTimeout(() => setGameState("over"), 1200); } } game.tick++; for (const p of game.particles) { p.x += p.vx; p.y += p.vy; p.vy += 0.15; p.life -= 0.025; } game.particles = game.particles.filter((p) => p.life > 0); const sky = ctx.createLinearGradient(0, 0, 0, H); sky.addColorStop(0, "#87ceeb"); sky.addColorStop(1, "#c9e8f5"); ctx.fillStyle = sky; ctx.fillRect(0, 0, W, H); ctx.fillStyle = "rgba(255,255,255,0.8)"; [[120, 60, 50], [300, 40, 40], [600, 70, 55], [780, 50, 45]].forEach(([cx, cy, r]) => { ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(cx + r * 0.7, cy + 5, r * 0.7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(cx - r * 0.6, cy + 8, r * 0.6, 0, Math.PI * 2); ctx.fill(); }); ctx.fillStyle = "#5a7c45"; ctx.fillRect(0, GROUND_Y, W, H - GROUND_Y); ctx.fillStyle = "#6b9e54"; ctx.fillRect(0, GROUND_Y, W, 12); const sY = SLING_Y + 30; ctx.strokeStyle = "#6b3a2a"; ctx.lineWidth = 7; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(SLING_X - 10, sY + 30); ctx.lineTo(SLING_X - 16, SLING_Y - 10); ctx.stroke(); ctx.beginPath(); ctx.moveTo(SLING_X + 10, sY + 30); ctx.lineTo(SLING_X + 16, SLING_Y - 10); ctx.stroke(); ctx.beginPath(); ctx.moveTo(SLING_X, sY + 30); ctx.lineTo(SLING_X, sY + 70); ctx.lineWidth = 9; ctx.stroke(); ctx.lineWidth = 3; const pigX = game.pig ? game.pig.x : game.dragging ? game.dragX : SLING_X; const pigY = game.pig ? game.pig.y : game.dragging ? game.dragY : SLING_Y; const bandDx = pigX - SLING_X, bandDy = pigY - SLING_Y; const bandDist = Math.sqrt(bandDx * bandDx + bandDy * bandDy); const showBands = !game.launched || bandDist < BAND_SNAP_DIST; if (showBands) { ctx.strokeStyle = "#8B6914"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(SLING_X - 16, SLING_Y - 10); ctx.lineTo(pigX, pigY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(SLING_X + 16, SLING_Y - 10); ctx.lineTo(pigX, pigY); ctx.stroke(); } const PIG_R = 14; const PIG_SPACING = PIG_R * 2 + 4; for (let i = 0; i < game.pigsLeft; i++) { const qBob = Math.sin(game.tick * 0.045 + i * 1.2) * 1.5; const px = 30; const py = GROUND_Y - PIG_R - i * PIG_SPACING + qBob; if (py - PIG_R > 0) drawPig(ctx, px, py, PIG_R, 1, game.tick + i * 17); } if (!game.pig && game.pigsLeft > 0) { const slingBob = Math.sin(game.tick * 0.05) * 3; drawPig(ctx, SLING_X, SLING_Y + slingBob, 14, 1, game.tick); } if (game.pig) { ctx.save(); ctx.translate(pig.x, pig.y); ctx.rotate(pig.angle); drawPig(ctx, 0, 0, pig.r, 1); ctx.restore(); let tx = pig.x, ty = pig.y, tvx = pig.vx, tvy = pig.vy; ctx.fillStyle = "rgba(255,255,255,0.4)"; for (let t = 0; t < 20; t++) { tvy += GRAVITY; tx += tvx; ty += tvy; if (ty > GROUND_Y) break; ctx.beginPath(); ctx.arc(tx, ty, 2, 0, Math.PI * 2); ctx.fill(); } } for (const block of game.blocks) { const pct = block.hp / block.maxHp; draw3DBlock(ctx, block, pct); } for (let bi = 0; bi < game.birds.length; bi++) { const bird = game.birds[bi]; if (!bird.alive) continue; const birdBob = Math.sin(game.tick * 0.04 + bi * 2.1) * 2.5; drawBird(ctx, bird.x, bird.y + birdBob, bird.r, game.tick + bi * 23, bird.colorIdx || 0); } for (const p of game.particles) { ctx.globalAlpha = p.life; ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; rafId = requestAnimationFrame(loop); }; rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, [gameState]); function drawPig(ctx, x, y, r, alpha = 1, tick = 0) { ctx.globalAlpha = alpha; ctx.save(); ctx.shadowColor = "rgba(0,0,0,0.35)"; ctx.shadowBlur = r * 0.8; ctx.shadowOffsetX = r * 0.2; ctx.shadowOffsetY = r * 0.3; const bodyGrad = ctx.createRadialGradient(x - r * 0.3, y - r * 0.3, r * 0.05, x, y, r); bodyGrad.addColorStop(0, "#ffb3d1"); bodyGrad.addColorStop(0.35, "#f06fa0"); bodyGrad.addColorStop(1, "#a03060"); ctx.fillStyle = bodyGrad; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.shadowColor = "transparent"; ctx.strokeStyle = "#a03060"; ctx.lineWidth = 1; ctx.stroke(); const earGrad1 = ctx.createRadialGradient(x - r * 0.62, y - r * 0.68, 0, x - r * 0.62, y - r * 0.68, r * 0.32); earGrad1.addColorStop(0, "#ffb3d1"); earGrad1.addColorStop(1, "#d05080"); ctx.fillStyle = earGrad1; ctx.beginPath(); ctx.ellipse(x - r * 0.6, y - r * 0.65, r * 0.2, r * 0.28, -0.4, 0, Math.PI * 2); ctx.fill(); const earGrad2 = ctx.createRadialGradient(x + r * 0.62, y - r * 0.68, 0, x + r * 0.62, y - r * 0.68, r * 0.32); earGrad2.addColorStop(0, "#ffb3d1"); earGrad2.addColorStop(1, "#d05080"); ctx.fillStyle = earGrad2; ctx.beginPath(); ctx.ellipse(x + r * 0.6, y - r * 0.65, r * 0.2, r * 0.28, 0.4, 0, Math.PI * 2); ctx.fill(); const snoutGrad = ctx.createRadialGradient(x - r * 0.1, y + r * 0.18, 0, x, y + r * 0.3, r * 0.5); snoutGrad.addColorStop(0, "#ffd0e8"); snoutGrad.addColorStop(1, "#e080b0"); ctx.fillStyle = snoutGrad; ctx.beginPath(); ctx.ellipse(x, y + r * 0.3, r * 0.45, r * 0.32, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#c06090"; ctx.lineWidth = 0.8; ctx.stroke(); ctx.fillStyle = "#a03060"; ctx.beginPath(); ctx.ellipse(x - r * 0.15, y + r * 0.3, r * 0.1, r * 0.09, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(x + r * 0.15, y + r * 0.3, r * 0.1, r * 0.09, 0, 0, Math.PI * 2); ctx.fill(); const beakGradP = ctx.createLinearGradient(x + r * 0.15, y - r * 0.08, x + r * 0.65, y + r * 0.12); beakGradP.addColorStop(0, "#f8c030"); beakGradP.addColorStop(1, "#c87010"); ctx.fillStyle = beakGradP; ctx.beginPath(); ctx.moveTo(x + r * 0.62, y + r * 0.02); ctx.lineTo(x + r * 0.18, y - r * 0.18); ctx.lineTo(x + r * 0.18, y + r * 0.16); ctx.closePath(); ctx.fill(); ctx.strokeStyle = "#9a5010"; ctx.lineWidth = 0.8; ctx.stroke(); ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(x - r * 0.3, y - r * 0.15, r * 0.22, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + r * 0.3, y - r * 0.15, r * 0.22, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#1a1a1a"; ctx.beginPath(); ctx.arc(x - r * 0.27, y - r * 0.12, r * 0.11, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + r * 0.27, y - r * 0.12, r * 0.11, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(x - r * 0.22, y - r * 0.18, r * 0.05, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + r * 0.32, y - r * 0.18, r * 0.05, 0, Math.PI * 2); ctx.fill(); const blinkPhase = tick % 180; if (blinkPhase < 6) { const blinkH = r * 0.22 * (blinkPhase < 3 ? blinkPhase / 3 : (6 - blinkPhase) / 3); ctx.fillStyle = "#a03060"; ctx.beginPath(); ctx.ellipse(x - r * 0.3, y - r * 0.15, r * 0.22, blinkH + 0.5, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(x + r * 0.3, y - r * 0.15, r * 0.22, blinkH + 0.5, 0, 0, Math.PI * 2); ctx.fill(); } const specGrad = ctx.createRadialGradient(x - r * 0.35, y - r * 0.38, 0, x - r * 0.2, y - r * 0.2, r * 0.5); specGrad.addColorStop(0, "rgba(255,255,255,0.45)"); specGrad.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = specGrad; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.restore(); ctx.globalAlpha = 1; } const BIRD_PALETTES = [ // 0: Classic red { body0: "#ff7066", body1: "#e74c3c", body2: "#7b1010", wing0: "#d44030", wing1: "#6a0e0e", tuft0: "#e74c3c", tuft1: "#ff6666", tuft2: "#c0392b", outline: "#7b1010" }, // 1: Royal blue { body0: "#70b0ff", body1: "#2980b9", body2: "#0d3a6e", wing0: "#1f6fa0", wing1: "#0a2e55", tuft0: "#2980b9", tuft1: "#5baee0", tuft2: "#1a5c8a", outline: "#0d3a6e" }, // 2: Sunny yellow { body0: "#fff066", body1: "#f1c40f", body2: "#7a5e00", wing0: "#c9a800", wing1: "#5a4400", tuft0: "#f1c40f", tuft1: "#ffe94d", tuft2: "#c08000", outline: "#7a5e00" }, // 3: Forest green { body0: "#80e880", body1: "#27ae60", body2: "#0e5c28", wing0: "#1e8a46", wing1: "#0a4020", tuft0: "#27ae60", tuft1: "#6ee88a", tuft2: "#196c38", outline: "#0e5c28" }, // 4: Purple { body0: "#cc88ff", body1: "#8e44ad", body2: "#3c1060", wing0: "#7030a0", wing1: "#2e0c4a", tuft0: "#8e44ad", tuft1: "#c07eff", tuft2: "#6020a0", outline: "#3c1060" } ]; function drawBird(ctx, x, y, r, tick = 0, colorIdx = 0) { const pal = BIRD_PALETTES[colorIdx % BIRD_PALETTES.length]; ctx.save(); ctx.shadowColor = "rgba(0,0,0,0.4)"; ctx.shadowBlur = r * 0.9; ctx.shadowOffsetX = r * 0.2; ctx.shadowOffsetY = r * 0.3; const bodyGrad = ctx.createRadialGradient(x - r * 0.3, y - r * 0.3, r * 0.05, x, y, r); bodyGrad.addColorStop(0, pal.body0); bodyGrad.addColorStop(0.4, pal.body1); bodyGrad.addColorStop(1, pal.body2); ctx.fillStyle = bodyGrad; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.shadowColor = "transparent"; ctx.strokeStyle = pal.outline; ctx.lineWidth = 1; ctx.stroke(); const wingGrad = ctx.createRadialGradient(x - r * 0.3, y + r * 0.1, 0, x - r * 0.3, y + r * 0.1, r * 0.6); wingGrad.addColorStop(0, pal.wing0); wingGrad.addColorStop(1, pal.wing1); ctx.fillStyle = wingGrad; ctx.beginPath(); ctx.ellipse(x - r * 0.3, y + r * 0.1, r * 0.5, r * 0.25, -0.5, 0, Math.PI * 2); ctx.fill(); const beakGrad = ctx.createLinearGradient(x + r * 0.2, y - r * 0.2, x + r * 0.7, y + r * 0.15); beakGrad.addColorStop(0, "#f8c030"); beakGrad.addColorStop(1, "#c87010"); ctx.fillStyle = beakGrad; ctx.beginPath(); ctx.moveTo(x + r * 0.7, y + r * 0.02); ctx.lineTo(x + r * 0.2, y - r * 0.22); ctx.lineTo(x + r * 0.2, y + r * 0.18); ctx.closePath(); ctx.fill(); ctx.strokeStyle = "#9a5010"; ctx.lineWidth = 0.8; ctx.stroke(); ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(x + r * 0.25, y - r * 0.22, r * 0.23, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#111"; ctx.beginPath(); ctx.arc(x + r * 0.3, y - r * 0.22, r * 0.12, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(x + r * 0.36, y - r * 0.28, r * 0.05, 0, Math.PI * 2); ctx.fill(); const tuftSway = Math.sin(tick * 0.07) * 0.18; ctx.save(); ctx.translate(x, y - r); ctx.rotate(tuftSway); const tuftGrad = ctx.createLinearGradient(0, 0, 0, -r * 0.5); tuftGrad.addColorStop(0, pal.tuft0); tuftGrad.addColorStop(1, pal.tuft1); ctx.fillStyle = tuftGrad; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-r * 0.15, -r * 0.45); ctx.lineTo(r * 0.2, -r * 0.2); ctx.closePath(); ctx.fill(); ctx.fillStyle = pal.tuft2; ctx.beginPath(); ctx.moveTo(r * 0.1, 0.05 * r); ctx.lineTo(r * 0.02, -r * 0.57); ctx.lineTo(r * 0.32, -r * 0.3); ctx.closePath(); ctx.fill(); ctx.restore(); const specGrad = ctx.createRadialGradient(x - r * 0.38, y - r * 0.4, 0, x - r * 0.2, y - r * 0.2, r * 0.55); specGrad.addColorStop(0, "rgba(255,255,255,0.4)"); specGrad.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = specGrad; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } function draw3DBlock(ctx, block, pct) { const { x, y, w, h, mat } = block; const bevel = 5; ctx.globalAlpha = 0.5 + pct * 0.5; ctx.save(); ctx.shadowColor = "rgba(0,0,0,0.4)"; ctx.shadowBlur = 6; ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 4; const faceGrad = ctx.createLinearGradient(x, y, x + w, y + h); const c = mat.color; faceGrad.addColorStop(0, lightenHex(c, 40)); faceGrad.addColorStop(1, darkenHex(c, 30)); ctx.fillStyle = faceGrad; ctx.fillRect(x, y, w, h); ctx.shadowColor = "transparent"; ctx.fillStyle = lightenHex(c, 60); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y); ctx.lineTo(x + w - bevel, y + bevel); ctx.lineTo(x + bevel, y + bevel); ctx.closePath(); ctx.fill(); ctx.fillStyle = lightenHex(c, 45); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + bevel, y + bevel); ctx.lineTo(x + bevel, y + h - bevel); ctx.lineTo(x, y + h); ctx.closePath(); ctx.fill(); ctx.fillStyle = darkenHex(c, 50); ctx.beginPath(); ctx.moveTo(x, y + h); ctx.lineTo(x + w, y + h); ctx.lineTo(x + w - bevel, y + h - bevel); ctx.lineTo(x + bevel, y + h - bevel); ctx.closePath(); ctx.fill(); ctx.fillStyle = darkenHex(c, 40); ctx.beginPath(); ctx.moveTo(x + w, y); ctx.lineTo(x + w, y + h); ctx.lineTo(x + w - bevel, y + h - bevel); ctx.lineTo(x + w - bevel, y + bevel); ctx.closePath(); ctx.fill(); if (mat === MAT.ICE) { const iceGrad = ctx.createLinearGradient(x, y, x + w * 0.6, y + h * 0.6); iceGrad.addColorStop(0, "rgba(255,255,255,0.35)"); iceGrad.addColorStop(0.5, "rgba(255,255,255,0.08)"); iceGrad.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = iceGrad; ctx.fillRect(x + bevel, y + bevel, w - bevel * 2, h - bevel * 2); } else if (mat === MAT.STONE) { ctx.strokeStyle = "rgba(80,80,80,0.2)"; ctx.lineWidth = 1; for (let i = 1; i < 4; i++) { ctx.beginPath(); ctx.moveTo(x + bevel, y + h / 4 * i); ctx.lineTo(x + w - bevel, y + h / 4 * i + (i % 2 === 0 ? 3 : -2)); ctx.stroke(); } } else if (mat === MAT.WOOD) { ctx.strokeStyle = "rgba(100,60,0,0.18)"; ctx.lineWidth = 1; for (let i = 1; i < 5; i++) { ctx.beginPath(); ctx.moveTo(x + bevel, y + h / 5 * i); ctx.lineTo(x + w - bevel, y + h / 5 * i); ctx.stroke(); } } if (pct < 0.7) { ctx.strokeStyle = "rgba(0,0,0,0.6)"; ctx.lineWidth = pct < 0.35 ? 2 : 1.2; const cx = x + w / 2, cy = y + h / 2; ctx.beginPath(); ctx.moveTo(cx - 8, cy - 8); ctx.lineTo(cx + 5, cy + 6); ctx.lineTo(cx + 9, cy + 2); ctx.stroke(); ctx.beginPath(); ctx.moveTo(cx - 5, cy + 2); ctx.lineTo(cx + 3, cy - 6); ctx.stroke(); if (pct < 0.35) { ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(cx + 4, cy - 10); ctx.lineTo(cx - 3, cy + 10); ctx.stroke(); ctx.beginPath(); ctx.moveTo(cx - 10, cy - 2); ctx.lineTo(cx + 8, cy - 1); ctx.stroke(); } } ctx.fillStyle = "rgba(0,0,0,0.35)"; ctx.font = `bold ${Math.min(w, h) * 0.38}px sans-serif`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(mat.label, x + w / 2, y + h / 2); ctx.restore(); ctx.globalAlpha = 1; } function parseHex(hex) { const h = hex.replace("#", ""); return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]; } function toHex(r, g, b) { return "#" + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")).join(""); } function lightenHex(hex, amt) { const [r, g, b] = parseHex(hex); return toHex(r + amt, g + amt, b + amt); } function darkenHex(hex, amt) { const [r, g, b] = parseHex(hex); return toHex(r - amt, g - amt, b - amt); } const overlayStyle = { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.65)", color: "#fff", borderRadius: 12, gap: 16, padding: 32 }; const btnStyle = { background: "#e74c3c", color: "#fff", border: "none", borderRadius: 8, padding: "12px 32px", fontSize: 18, fontWeight: "bold", cursor: "pointer", boxShadow: "0 4px 0 #922b21", transition: "transform 0.1s" }; const isLastLevel = currentLevel >= TOTAL_LEVELS; return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, padding: 12, fontFamily: "sans-serif", background: "#1a1a2e", minHeight: "100%" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 24, color: "#fff", fontSize: 16, fontWeight: "bold", background: "rgba(0,0,0,0.4)", padding: "6px 20px", borderRadius: 20 } }, /* @__PURE__ */ React.createElement("span", null, "\u{1F5FA}\uFE0F Level: ", currentLevel, "/", TOTAL_LEVELS), /* @__PURE__ */ React.createElement("span", null, "\u{1F437} Pigs: ", pigsLeft), /* @__PURE__ */ React.createElement("span", null, "\u{1F426} Birds: ", birdsLeft), /* @__PURE__ */ React.createElement("span", null, "\u2B50 Score: ", score), totalScore > 0 && /* @__PURE__ */ React.createElement("span", { style: { color: "#fde68a" } }, "\u{1F3C6} Total: ", totalScore + score)), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 12, color: "#ddd", fontSize: 12 } }, /* @__PURE__ */ React.createElement("span", { style: { color: "#c8a060" } }, "\u25A0 Wood (3hp)"), /* @__PURE__ */ React.createElement("span", { style: { color: "#9ca3af" } }, "\u25A0 Stone (6hp)"), /* @__PURE__ */ React.createElement("span", { style: { color: "#93c5fd" } }, "\u25A0 Ice (2hp)"), /* @__PURE__ */ React.createElement("span", { style: { color: "#aaa" } }, "\u2022 Bird = +100pts")), /* @__PURE__ */ React.createElement("div", { style: { position: "relative", borderRadius: 12, overflow: "hidden", boxShadow: "0 8px 32px rgba(0,0,0,0.5)" } }, /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef, width: W, height: H, style: { display: "block", maxWidth: "100%" } }), gameState === "ready" && /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: "linear-gradient(160deg, rgba(0,0,20,0.97) 0%, rgba(0,8,35,0.97) 60%, rgba(4,0,28,0.97) 100%)", borderRadius: 12, gap: 20, padding: 32, overflow: "hidden" } }, /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0, borderRadius: 12, pointerEvents: "none", backgroundImage: "linear-gradient(rgba(255,60,180,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,60,180,0.08) 1px, transparent 1px)", backgroundSize: "44px 44px" } }), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0, borderRadius: 12, pointerEvents: "none", background: "radial-gradient(ellipse 90% 90% at 50% 50%, transparent 30%, rgba(0,0,15,0.85) 100%)" } }), [ { top: 12, left: 12, borderTop: "2px solid rgba(255,60,180,0.7)", borderLeft: "2px solid rgba(255,60,180,0.7)" }, { top: 12, right: 12, borderTop: "2px solid rgba(255,60,180,0.7)", borderRight: "2px solid rgba(255,60,180,0.7)" }, { bottom: 12, left: 12, borderBottom: "2px solid rgba(255,60,180,0.7)", borderLeft: "2px solid rgba(255,60,180,0.7)" }, { bottom: 12, right: 12, borderBottom: "2px solid rgba(255,60,180,0.7)", borderRight: "2px solid rgba(255,60,180,0.7)" } ].map((s, i) => /* @__PURE__ */ React.createElement("div", { key: i, style: { position: "absolute", width: 30, height: 30, ...s } })), /* @__PURE__ */ React.createElement("div", { style: { position: "relative", textAlign: "center", zIndex: 1 } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, letterSpacing: 6, color: "#00ccff", fontFamily: "monospace", marginBottom: 8, opacity: 0.8 } }, "\u25C0 VENGEANCE PROTOCOL ONLINE \u25B6"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 48, fontWeight: 900, letterSpacing: 4, fontFamily: "monospace", color: "#fff", textShadow: "0 0 20px #ff44aa, 0 0 50px rgba(255,60,180,0.4), 0 0 3px #fff", lineHeight: 1 } }, "PIG REVENGE"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 12, letterSpacing: 5, color: "#ff88dd", fontFamily: "monospace", marginTop: 8, opacity: 0.75 } }, "\u25C8 THE PIGS STRIKE BACK \u25C8")), /* @__PURE__ */ React.createElement("div", { style: { width: 300, height: 1, background: "linear-gradient(90deg, transparent, #ff44aa 40%, #ff88dd 60%, transparent)", opacity: 0.55, zIndex: 1 } }), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 13, textAlign: "center", color: "rgba(170,220,255,0.85)", maxWidth: 360, lineHeight: 1.75, fontFamily: "monospace", letterSpacing: 0.5, zIndex: 1 } }, "The pigs have had ENOUGH \xB7 Pull & release to launch", /* @__PURE__ */ React.createElement("br", null), "Destroy all birds across", " ", /* @__PURE__ */ React.createElement("span", { style: { color: "#ff88dd", fontWeight: "bold" } }, TOTAL_LEVELS, " levels"), " ", "\xB7", " ", /* @__PURE__ */ React.createElement("span", { style: { color: "#ffcc00", fontWeight: "bold" } }, "5 pigs"), " per level"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 10, zIndex: 1 } }, [ { icon: "\u{1F437}", label: "LAUNCHERS", sub: "5 pigs/level" }, { icon: "\u{1F426}", label: "ENEMIES", sub: "+100 pts each" }, { icon: "\u{1F5FA}\uFE0F", label: "MISSIONS", sub: `${TOTAL_LEVELS} levels total` } ].map(({ icon, label, sub }) => /* @__PURE__ */ React.createElement("div", { key: label, style: { background: "rgba(255,60,180,0.06)", border: "1px solid rgba(255,60,180,0.28)", borderRadius: 6, padding: "10px 16px", textAlign: "center", fontFamily: "monospace", boxShadow: "0 0 12px rgba(255,60,180,0.08)" } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 22 } }, icon), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 10, letterSpacing: 2, color: "#ff88dd", marginTop: 4 } }, label), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 10, color: "rgba(160,220,240,0.65)", marginTop: 2 } }, sub)))), /* @__PURE__ */ React.createElement("button", { onClick: startGame, style: { zIndex: 1, background: "transparent", border: "2px solid #ff44aa", color: "#ff44aa", fontFamily: "monospace", fontWeight: "bold", fontSize: 15, letterSpacing: 5, padding: "12px 44px", borderRadius: 3, cursor: "pointer", textTransform: "uppercase", boxShadow: "0 0 22px rgba(255,60,180,0.35), inset 0 0 18px rgba(255,60,180,0.06)", textShadow: "0 0 10px #ff44aa", transition: "all 0.2s", animation: "futurePulse 2.2s ease-in-out infinite" } }, "\u{1F437} UNLEASH REVENGE"), /* @__PURE__ */ React.createElement("style", null, ` @keyframes futurePulse { 0%, 100% { box-shadow: 0 0 18px rgba(255,60,180,0.3), inset 0 0 14px rgba(255,60,180,0.05); } 50% { box-shadow: 0 0 36px rgba(255,60,180,0.7), 0 0 60px rgba(255,60,180,0.2), inset 0 0 24px rgba(255,60,180,0.12); } } `)), gameState === "over" && /* @__PURE__ */ React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 40 } }, "\u{1F622}"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 28, fontWeight: "bold" } }, "Out of Pigs!"), /* @__PURE__ */ React.createElement("div", { style: { color: "#ddd" } }, "Level ", currentLevel, " \u2014 Score: ", /* @__PURE__ */ React.createElement("b", null, score)), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 12 } }, /* @__PURE__ */ React.createElement("button", { style: btnStyle, onClick: () => { initGame(levelRef.current); setGameState("playing"); } }, "\u{1F504} Retry Level"), /* @__PURE__ */ React.createElement("button", { style: { ...btnStyle, background: "#7f8c8d", boxShadow: "0 4px 0 #555" }, onClick: startGame }, "\u21A9 Restart"))), gameState === "win" && /* @__PURE__ */ React.createElement("div", { style: { ...overlayStyle, background: "rgba(0,80,0,0.75)" } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 40 } }, isLastLevel ? "\u{1F3C6}" : "\u{1F389}"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 28, fontWeight: "bold" } }, isLastLevel ? "All Levels Complete!" : `Level ${currentLevel} Clear!`), /* @__PURE__ */ React.createElement("div", { style: { color: "#ddd" } }, "Level score: ", /* @__PURE__ */ React.createElement("b", { style: { color: "#fde68a", fontSize: 18 } }, score), totalScore > 0 && /* @__PURE__ */ React.createElement("span", null, " \xA0|\xA0 Total: ", /* @__PURE__ */ React.createElement("b", { style: { color: "#fde68a", fontSize: 18 } }, totalScore + score))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 12 } }, !isLastLevel && /* @__PURE__ */ React.createElement("button", { style: { ...btnStyle, background: "#27ae60", boxShadow: "0 4px 0 #1a7a40" }, onClick: nextLevel }, "\u27A1\uFE0F Next Level"), /* @__PURE__ */ React.createElement("button", { style: { ...btnStyle, background: isLastLevel ? "#27ae60" : "#7f8c8d", boxShadow: `0 4px 0 ${isLastLevel ? "#1a7a40" : "#555"}` }, onClick: startGame }, isLastLevel ? "\u{1F504} Play Again" : "\u21A9 Restart")))), /* @__PURE__ */ React.createElement("div", { style: { color: "#666", fontSize: 12 } }, "Drag the \u{1F437} on the slingshot to aim & shoot")); } return __toCommonJS(App_exports); })();

Pig Revenge