@wallarm-org/design-system 0.55.0 → 0.55.1

package/dist/components/AnimatedBackground/module/game-logic.js

@@ -0,0 +1,472 @@
+import { ANOMALY_VIS_THRESHOLD, DOT_STEP_BASE, DOT_STEP_SCALE, IDLE_MARGIN_X, IDLE_MARGIN_Y } from "./constants.js";
+import { sweepX } from "./engine-grid.js";
+const ROUND_ATTACKS = 100;
+const MAX_TARGETS = 6;
+const MAX_BULLETS = 24;
+const BULLET_SPEED = 720;
+const FIRE_CADENCE = 0.18;
+const CANNON_SPEED = 420;
+const TARGET_LIFE = 4.0;
+const ARMED_SPAWN = 0.55;
+const HIT_R2 = 484;
+const CLICK_RADIUS = 52;
+const REVEAL_DELAY = 0.3;
+const ARM_RISE = 0.45;
+const FIRST_SPAWN_DELAY = 0.7;
+const ANOMALY_R = 42;
+const ANOMALY_R_SQ = ANOMALY_R * ANOMALY_R;
+const CAUGHT_DUR = 1.4;
+const CANNON_HALF_W = 16;
+const CANNON_BASE_OFFSET = 26;
+const CANNON_BARREL_Y = 40;
+const HUD_CLEAR_W = 120;
+const HUD_CLEAR_H = 140;
+const CARD_CLEAR_PAD = 48;
+const SPAWN_EDGE = 24;
+const CANNON_CLEAR = 72;
+const SPAWN_TRIES = 24;
+const IDLE_ANOMALY_LIFE = 2.4;
+const VERDICTS = [
+    'BLOCKED',
+    'TERMINATED',
+    'NEUTRALIZED',
+    'QUARANTINED',
+    'MITIGATED',
+    'CONTAINED'
+];
+function createGameLogic(host) {
+    const state = {
+        gameActive: false,
+        gameMode: 'idle',
+        cannonX: 0,
+        armT: 0,
+        fontLoaded: false
+    };
+    const anomalies = [];
+    const bullets = [];
+    const caughtEffects = [];
+    let cannonDir = 0;
+    let firing = false;
+    let lastFire = -1 / 0;
+    let killTotal = 0;
+    let roundKills = 0;
+    let roundEscaped = 0;
+    let roundSpawned = 0;
+    let roundDone = false;
+    let lastSpawn = -1 / 0;
+    let statsCb = null;
+    let exclusionBox = null;
+    if ("u" > typeof document) document.fonts.load('9px "Press Start 2P"').then(()=>{
+        state.fontLoaded = true;
+    }).catch(()=>{});
+    function emitStats() {
+        statsCb?.({
+            kills: killTotal,
+            stopped: roundKills,
+            escaped: roundEscaped,
+            spawned: roundSpawned,
+            done: roundDone
+        });
+    }
+    function spawnRing() {
+        const { w, h } = host;
+        if (!exclusionBox) return {
+            x: w * (0.1 + 0.8 * Math.random()),
+            y: h * (0.1 + 0.35 * Math.random())
+        };
+        const exW = Math.min(exclusionBox.width, w);
+        const exH = Math.min(exclusionBox.height, h);
+        const cl = (w - exW) / 2 - CARD_CLEAR_PAD;
+        const cr = (w + exW) / 2 + CARD_CLEAR_PAD;
+        const ct = (h - exH) / 2 - CARD_CLEAR_PAD;
+        const cb = (h + exH) / 2 + CARD_CLEAR_PAD;
+        for(let i = 0; i < SPAWN_TRIES; i++){
+            const x = SPAWN_EDGE + Math.random() * Math.max(1, w - 2 * SPAWN_EDGE);
+            const y = SPAWN_EDGE + Math.random() * Math.max(1, h - SPAWN_EDGE - CANNON_CLEAR);
+            if (!(x > cl) || !(x < cr) || !(y > ct) || !(y < cb)) {
+                if (!(x > w - HUD_CLEAR_W) || !(y < HUD_CLEAR_H)) return {
+                    x,
+                    y
+                };
+            }
+        }
+        const bands = [
+            {
+                area: cl - SPAWN_EDGE,
+                cx: (SPAWN_EDGE + cl) / 2,
+                cy: h / 2
+            },
+            {
+                area: w - SPAWN_EDGE - cr,
+                cx: (cr + w - SPAWN_EDGE) / 2,
+                cy: h / 2
+            },
+            {
+                area: ct - SPAWN_EDGE,
+                cx: w / 2,
+                cy: (SPAWN_EDGE + ct) / 2
+            },
+            {
+                area: h - CANNON_CLEAR - cb,
+                cx: w / 2,
+                cy: (cb + h - CANNON_CLEAR) / 2
+            }
+        ];
+        let best = bands[0];
+        for (const b of bands)if (b.area > best.area) best = b;
+        if (best.area > 0) return {
+            x: best.cx,
+            y: best.cy
+        };
+        return {
+            x: w / 2,
+            y: SPAWN_EDGE
+        };
+    }
+    function spawnIdleAnomaly(t) {
+        const { w, h } = host;
+        if (exclusionBox) {
+            const pos = spawnRing();
+            if (!pos) return null;
+            return {
+                x: pos.x,
+                y: pos.y,
+                t0: t,
+                life: IDLE_ANOMALY_LIFE,
+                caught: false
+            };
+        }
+        return {
+            x: IDLE_MARGIN_X + Math.random() * Math.max(1, w - 2 * IDLE_MARGIN_X),
+            y: IDLE_MARGIN_Y + Math.random() * Math.max(1, h - 2 * IDLE_MARGIN_Y),
+            t0: t,
+            life: IDLE_ANOMALY_LIFE,
+            caught: false
+        };
+    }
+    function neutralize(anomaly, t) {
+        anomaly.caught = true;
+        const cells = [];
+        const halfCap = host.opts.maxDotSize / 2;
+        const env = Math.max(0, Math.sin((t - anomaly.t0) / anomaly.life * Math.PI));
+        for (const dot of host.dots){
+            const dx = Math.abs(dot.x - anomaly.x);
+            const dy = Math.abs(dot.y - anomaly.y);
+            if (dx > ANOMALY_R || dy > ANOMALY_R) continue;
+            const distSq = dx * dx + dy * dy;
+            if (distSq > ANOMALY_R_SQ) continue;
+            const dist = Math.sqrt(distSq);
+            const ao = env * (1 - dist / ANOMALY_R);
+            if (ao < ANOMALY_VIS_THRESHOLD) continue;
+            const step = Math.min(Math.round(5 * ao) * DOT_STEP_SCALE + DOT_STEP_BASE, halfCap);
+            cells.push({
+                x: dot.x,
+                y: dot.y,
+                half: step,
+                ao
+            });
+        }
+        const label = VERDICTS[Math.random() * VERDICTS.length | 0];
+        caughtEffects.push({
+            x: anomaly.x,
+            y: anomaly.y,
+            t0: t,
+            cells,
+            label
+        });
+        recordKill();
+    }
+    function recordKill() {
+        killTotal += 1;
+        if ('armed' === state.gameMode) roundKills += 1;
+        emitStats();
+    }
+    function endRound() {
+        state.gameMode = 'over';
+        roundDone = true;
+        bullets.length = 0;
+        firing = false;
+        cannonDir = 0;
+        emitStats();
+    }
+    function isHittable(anomaly, t) {
+        if (anomaly.caught) return false;
+        const env = Math.max(0, Math.sin((t - anomaly.t0) / anomaly.life * Math.PI));
+        if (env < ANOMALY_VIS_THRESHOLD) return false;
+        const { w, h, opts, tanTilt } = host;
+        const sx = sweepX(t, w, opts.sweepPeriod);
+        if ('armed' === state.gameMode || 'over' === state.gameMode) {
+            const sxAtY = sx + (h / 2 - anomaly.y) * tanTilt;
+            return anomaly.x < sxAtY || t - anomaly.t0 > REVEAL_DELAY;
+        }
+        return anomaly.x - ANOMALY_R < sx + (h / 2 - anomaly.y) * tanTilt;
+    }
+    function pruneExpired(t) {
+        let kept = 0;
+        for (const anomaly of anomalies)if (!anomaly.caught && !(t - anomaly.t0 > anomaly.life)) anomalies[kept++] = anomaly;
+        anomalies.length = kept;
+    }
+    function idleSim(t) {
+        let liveCount = 0;
+        for (const anomaly of anomalies)if (!anomaly.caught) liveCount++;
+        if (liveCount < 2 && t - lastSpawn > host.opts.anomalyInterval) {
+            const anomaly = spawnIdleAnomaly(t);
+            if (anomaly) {
+                anomalies.push(anomaly);
+                lastSpawn = t;
+            }
+        }
+        pruneExpired(t);
+    }
+    function updateCannon(dt) {
+        const { w } = host;
+        state.cannonX += cannonDir * CANNON_SPEED * dt;
+        state.cannonX = Math.max(CANNON_HALF_W, Math.min(w - CANNON_HALF_W, state.cannonX));
+    }
+    function fireBullets(t) {
+        if (firing && t - lastFire >= FIRE_CADENCE && bullets.length < MAX_BULLETS) {
+            bullets.push({
+                x: state.cannonX,
+                y: host.h - CANNON_BARREL_Y
+            });
+            lastFire = t;
+        }
+    }
+    function moveBullets(dt) {
+        let bulletKept = 0;
+        for(let i = 0; i < bullets.length; i++){
+            const bullet = bullets[i];
+            bullet.y -= BULLET_SPEED * dt;
+            if (!(bullet.y < -14)) bullets[bulletKept++] = bullet;
+        }
+        bullets.length = bulletKept;
+    }
+    function checkCollisions(t) {
+        let bulletWrite = 0;
+        for(let bi = 0; bi < bullets.length; bi++){
+            const bullet = bullets[bi];
+            let consumed = false;
+            for (const anomaly of anomalies){
+                if (anomaly.caught) continue;
+                if (!isHittable(anomaly, t)) continue;
+                const dx = bullet.x - anomaly.x;
+                const dy = bullet.y - anomaly.y;
+                if (dx * dx + dy * dy < HIT_R2) {
+                    neutralize(anomaly, t);
+                    consumed = true;
+                    break;
+                }
+            }
+            if (!consumed) bullets[bulletWrite++] = bullet;
+        }
+        bullets.length = bulletWrite;
+    }
+    function spawnTargets(t) {
+        const sinceArm = t - state.armT;
+        if (sinceArm > FIRST_SPAWN_DELAY && roundSpawned < ROUND_ATTACKS && t - lastSpawn >= ARMED_SPAWN) {
+            let liveCount = 0;
+            for (const anomaly of anomalies)if (!anomaly.caught) liveCount++;
+            if (liveCount < MAX_TARGETS) {
+                const pos = spawnRing();
+                if (pos) {
+                    anomalies.push({
+                        x: pos.x,
+                        y: pos.y,
+                        t0: t,
+                        life: TARGET_LIFE,
+                        caught: false
+                    });
+                    roundSpawned += 1;
+                    lastSpawn = t;
+                }
+            }
+        }
+    }
+    function pruneAndCount(t) {
+        let anomalyKept = 0;
+        let escapedCount = 0;
+        for (const anomaly of anomalies)if (!anomaly.caught) {
+            if (t - anomaly.t0 > anomaly.life) {
+                escapedCount++;
+                continue;
+            }
+            anomalies[anomalyKept++] = anomaly;
+        }
+        anomalies.length = anomalyKept;
+        if (escapedCount > 0) {
+            roundEscaped += escapedCount;
+            emitStats();
+        }
+        if (roundSpawned >= ROUND_ATTACKS && 0 === anomalies.length) endRound();
+    }
+    function gameSim(t, dt) {
+        if ('idle' === state.gameMode) return void idleSim(t);
+        if ('over' === state.gameMode) return void pruneExpired(t);
+        updateCannon(dt);
+        fireBullets(t);
+        moveBullets(dt);
+        checkCollisions(t);
+        spawnTargets(t);
+        pruneAndCount(t);
+    }
+    function pruneCaughtEffects(t) {
+        let kept = 0;
+        for (const effect of caughtEffects)if (!(t - effect.t0 >= CAUGHT_DUR)) caughtEffects[kept++] = effect;
+        caughtEffects.length = kept;
+    }
+    function adjustTimeMarkers(skip) {
+        for (const anomaly of anomalies)anomaly.t0 += skip;
+        for (const effect of caughtEffects)effect.t0 += skip;
+        if (state.armT > 0) state.armT += skip;
+        if (lastSpawn > -1 / 0 && 0 !== lastSpawn) lastSpawn += skip;
+    }
+    function setGameActive(active) {
+        if (state.gameActive === active) return;
+        state.gameActive = active;
+        if (active) lastSpawn = -1 / 0;
+        else {
+            anomalies.length = 0;
+            bullets.length = 0;
+            caughtEffects.length = 0;
+            state.gameMode = 'idle';
+            killTotal = 0;
+            roundKills = 0;
+            roundEscaped = 0;
+            roundSpawned = 0;
+            roundDone = false;
+            firing = false;
+            cannonDir = 0;
+        }
+    }
+    function catchAt(x, y, running) {
+        if (!running) return false;
+        const now = performance.now() / 1000;
+        let best = null;
+        let bestDist = CLICK_RADIUS * CLICK_RADIUS;
+        for (const anomaly of anomalies){
+            if (!isHittable(anomaly, now)) continue;
+            const dx = x - anomaly.x;
+            const dy = y - anomaly.y;
+            const d2 = dx * dx + dy * dy;
+            if (d2 < bestDist) {
+                bestDist = d2;
+                best = anomaly;
+            }
+        }
+        if (best) {
+            neutralize(best, now);
+            return true;
+        }
+        return false;
+    }
+    function setMode(mode) {
+        if (mode === state.gameMode) return;
+        if ('idle' === mode) {
+            state.gameMode = 'idle';
+            lastSpawn = -1 / 0;
+        } else state.gameMode = 'armed';
+    }
+    function startRound() {
+        const { w } = host;
+        const now = performance.now() / 1000;
+        roundKills = 0;
+        roundEscaped = 0;
+        roundSpawned = 0;
+        roundDone = false;
+        state.gameMode = 'armed';
+        bullets.length = 0;
+        anomalies.length = 0;
+        caughtEffects.length = 0;
+        firing = false;
+        cannonDir = 0;
+        state.armT = now;
+        lastSpawn = now;
+        state.cannonX = w / 2;
+        emitStats();
+    }
+    function exitGame() {
+        killTotal = 0;
+        roundKills = 0;
+        roundEscaped = 0;
+        roundSpawned = 0;
+        roundDone = false;
+        state.gameMode = 'idle';
+        bullets.length = 0;
+        anomalies.length = 0;
+        caughtEffects.length = 0;
+        firing = false;
+        cannonDir = 0;
+        lastSpawn = -1 / 0;
+        emitStats();
+    }
+    function setCannonDir(dir) {
+        if ('armed' !== state.gameMode) return;
+        cannonDir = dir;
+    }
+    function setFiring(on) {
+        if ('armed' !== state.gameMode) return;
+        if (on && !firing) lastFire = -1 / 0;
+        firing = on;
+    }
+    function onStats(cb) {
+        statsCb = cb;
+    }
+    function setExclusion(box) {
+        if (!box) {
+            exclusionBox = null;
+            return;
+        }
+        exclusionBox = {
+            width: Math.min(box.width, host.w),
+            height: Math.min(box.height, host.h)
+        };
+    }
+    return {
+        anomalies,
+        bullets,
+        caughtEffects,
+        gameSim,
+        pruneCaughtEffects,
+        adjustTimeMarkers,
+        setGameActive,
+        catchAt,
+        setMode,
+        startRound,
+        exitGame,
+        setCannonDir,
+        setFiring,
+        onStats,
+        setExclusion,
+        get gameActive () {
+            return state.gameActive;
+        },
+        set gameActive (v){
+            state.gameActive = v;
+        },
+        get gameMode () {
+            return state.gameMode;
+        },
+        set gameMode (v){
+            state.gameMode = v;
+        },
+        get cannonX () {
+            return state.cannonX;
+        },
+        set cannonX (v){
+            state.cannonX = v;
+        },
+        get armT () {
+            return state.armT;
+        },
+        set armT (v){
+            state.armT = v;
+        },
+        get fontLoaded () {
+            return state.fontLoaded;
+        },
+        set fontLoaded (v){
+            state.fontLoaded = v;
+        }
+    };
+}
+export { ANOMALY_R, ANOMALY_R_SQ, ARMED_SPAWN, ARM_RISE, BULLET_SPEED, CANNON_BARREL_Y, CANNON_BASE_OFFSET, CANNON_CLEAR, CANNON_HALF_W, CANNON_SPEED, CARD_CLEAR_PAD, CAUGHT_DUR, CLICK_RADIUS, FIRE_CADENCE, FIRST_SPAWN_DELAY, HIT_R2, HUD_CLEAR_H, HUD_CLEAR_W, IDLE_ANOMALY_LIFE, MAX_BULLETS, MAX_TARGETS, REVEAL_DELAY, ROUND_ATTACKS, SPAWN_EDGE, SPAWN_TRIES, TARGET_LIFE, VERDICTS, createGameLogic };

package/dist/components/AnimatedBackground/module/game-renderer.d.ts

@@ -0,0 +1,16 @@
+import type { RGB } from './engine-colors';
+import type { GameEngineHost, GameLogic } from './game-logic';
+export interface GameRenderCtx {
+    ctx: CanvasRenderingContext2D;
+    dotPalette: string[];
+    accentPalette: string[];
+    caughtPalette: string[];
+    caughtRgb: RGB;
+    shadowPalette: string[];
+}
+export declare function createGameRenderer(rc: GameRenderCtx, game: GameLogic, host: GameEngineHost): {
+    drawGameDots: (t: number) => void;
+    drawCaughtEffects: (t: number) => void;
+    drawCannon: (t: number) => void;
+    drawBullets: () => void;
+};

package/dist/components/AnimatedBackground/module/game-renderer.js

@@ -0,0 +1,121 @@
+import { AMB_SCALE, ANOMALY_ALPHA_BASE, ANOMALY_VIS_THRESHOLD, DOT_STEP_BASE, DOT_STEP_SCALE, HALFTONE_BASE_ALPHA, HALFTONE_BLOOM_PEAK, LABEL_ALPHA_BOOST, LABEL_DRIFT, LABEL_MIN_Y, LABEL_OFFSET_Y, LABEL_SHADOW_ALPHA, MIN_DOT_VALUE, NOISE_FREQ_T, NOISE_FREQ_X, NOISE_FREQ_Y } from "./constants.js";
+import { ALPHA_STEPS, alphaIdx } from "./engine-colors.js";
+import { sweepX } from "./engine-grid.js";
+import { ANOMALY_R, ANOMALY_R_SQ, ARM_RISE, CANNON_BASE_OFFSET, CANNON_HALF_W, CAUGHT_DUR, REVEAL_DELAY } from "./game-logic.js";
+function createGameRenderer(rc, game, host) {
+    let envCache = [];
+    let revealedCache = [];
+    function drawGameDots(t) {
+        const { ctx, dotPalette, accentPalette } = rc;
+        const { w, h, dots, opts, tanTilt } = host;
+        const sx = sweepX(t, w, opts.sweepPeriod);
+        const intensity = opts.intensity;
+        const halfCap = opts.maxDotSize / 2;
+        const liveAnomalies = game.anomalies;
+        const aLen = liveAnomalies.length;
+        const isIdle = 'idle' === game.gameMode;
+        if (envCache.length < aLen) {
+            envCache = new Array(aLen);
+            revealedCache = new Array(aLen);
+        }
+        for(let i = 0; i < aLen; i++){
+            const anomaly = liveAnomalies[i];
+            if (anomaly.caught) {
+                envCache[i] = 0;
+                revealedCache[i] = false;
+            } else {
+                envCache[i] = Math.max(0, Math.sin((t - anomaly.t0) / anomaly.life * Math.PI));
+                revealedCache[i] = isIdle ? true : anomaly.x < sx || t - anomaly.t0 > REVEAL_DELAY;
+            }
+        }
+        for (const dot of dots){
+            const sxAt = sx + (h / 2 - dot.y) * tanTilt;
+            const amb = AMB_SCALE * (0.5 + 0.5 * Math.sin(dot.x * NOISE_FREQ_X + dot.y * NOISE_FREQ_Y + t * NOISE_FREQ_T));
+            const distToSweep = Math.abs(dot.x - sxAt);
+            const bloom = distToSweep < opts.bloomRadius ? HALFTONE_BLOOM_PEAK * (1 - distToSweep / opts.bloomRadius) : 0;
+            let maxAo = 0;
+            for(let i = 0; i < aLen; i++){
+                const env = envCache[i];
+                if (0 === env) continue;
+                const anomaly = liveAnomalies[i];
+                const dx = Math.abs(dot.x - anomaly.x);
+                if (dx > ANOMALY_R) continue;
+                const dy = Math.abs(dot.y - anomaly.y);
+                if (dy > ANOMALY_R) continue;
+                const distSq = dx * dx + dy * dy;
+                if (distSq > ANOMALY_R_SQ) continue;
+                if (isIdle ? dot.x >= sxAt : !revealedCache[i]) continue;
+                const dist = Math.sqrt(distSq);
+                const ao = env * (1 - dist / ANOMALY_R);
+                if (ao > maxAo) maxAo = ao;
+            }
+            const val = Math.min(1, Math.max(amb + bloom, maxAo));
+            if (val < MIN_DOT_VALUE) continue;
+            const step = Math.round(5 * val);
+            const half = Math.min(step * DOT_STEP_SCALE + DOT_STEP_BASE, halfCap);
+            if (maxAo > ANOMALY_VIS_THRESHOLD) ctx.fillStyle = accentPalette[alphaIdx(Math.min(1, ANOMALY_ALPHA_BASE + maxAo))];
+            else ctx.fillStyle = dotPalette[alphaIdx((HALFTONE_BASE_ALPHA + val * (opts.bloomAlpha - HALFTONE_BASE_ALPHA)) * intensity)];
+            ctx.fillRect(dot.x - half, dot.y - half, 2 * half, 2 * half);
+        }
+    }
+    function drawCaughtEffects(t) {
+        const { ctx, caughtPalette, shadowPalette } = rc;
+        const effects = game.caughtEffects;
+        for (const effect of effects){
+            const age = t - effect.t0;
+            if (age >= CAUGHT_DUR) continue;
+            const progress = age / CAUGHT_DUR;
+            const fade = 1 - progress * progress;
+            for (const cell of effect.cells){
+                const alpha = Math.min(1, ANOMALY_ALPHA_BASE + cell.ao) * fade;
+                const idx = alphaIdx(alpha);
+                if (0 !== idx) {
+                    ctx.fillStyle = caughtPalette[idx];
+                    ctx.fillRect(cell.x - cell.half, cell.y - cell.half, 2 * cell.half, 2 * cell.half);
+                }
+            }
+            if (game.fontLoaded) {
+                const labelY = Math.round(Math.max(LABEL_MIN_Y, effect.y - LABEL_OFFSET_Y - progress * LABEL_DRIFT));
+                const labelX = Math.round(effect.x);
+                ctx.font = '9px "Press Start 2P"';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'bottom';
+                ctx.fillStyle = shadowPalette[alphaIdx(LABEL_SHADOW_ALPHA * fade)];
+                ctx.fillText(effect.label, labelX + 1, labelY + 1);
+                ctx.fillStyle = caughtPalette[alphaIdx(Math.min(1, fade * LABEL_ALPHA_BOOST))];
+                ctx.fillText(effect.label, labelX, labelY);
+            }
+        }
+    }
+    function drawCannon(t) {
+        const { ctx, dotPalette } = rc;
+        if ('armed' !== game.gameMode && 'over' !== game.gameMode) return;
+        if ('armed' === game.gameMode) {
+            const riseP = Math.min(1, (t - game.armT) / ARM_RISE);
+            const ease = 1 - (1 - riseP) * (1 - riseP);
+            const offsetY = (1 - ease) * 40;
+            ctx.save();
+            ctx.globalAlpha = ease;
+            ctx.translate(0, offsetY);
+        }
+        const baseY = host.h - CANNON_BASE_OFFSET;
+        const cx = Math.round(game.cannonX);
+        ctx.fillStyle = dotPalette[ALPHA_STEPS];
+        ctx.fillRect(cx - CANNON_HALF_W, baseY, 2 * CANNON_HALF_W, 8);
+        ctx.fillRect(cx - 6, baseY - 6, 12, 6);
+        ctx.fillRect(cx - 2, baseY - 12, 4, 6);
+        if ('armed' === game.gameMode) ctx.restore();
+    }
+    function drawBullets() {
+        const { ctx, dotPalette } = rc;
+        ctx.fillStyle = dotPalette[ALPHA_STEPS];
+        for (const bullet of game.bullets)ctx.fillRect(bullet.x - 2, bullet.y - 7, 4, 14);
+    }
+    return {
+        drawGameDots,
+        drawCaughtEffects,
+        drawCannon,
+        drawBullets
+    };
+}
+export { createGameRenderer };

package/dist/components/AnimatedBackground/module/index.d.ts

@@ -0,0 +1,4 @@
+export { createSweepEngine, type SweepEngine } from './engine';
+export { resolveOptions } from './lib';
+export type { AnimatedBackgroundProps, EngineOptions, GameStats, Texture } from './types';
+export { useGameKeyboard } from './useGameKeyboard';

package/dist/components/AnimatedBackground/module/index.js

@@ -0,0 +1,4 @@
+import { createSweepEngine } from "./engine.js";
+import { resolveOptions } from "./lib.js";
+import { useGameKeyboard } from "./useGameKeyboard.js";
+export { createSweepEngine, resolveOptions, useGameKeyboard };

package/dist/components/AnimatedBackground/module/lib.d.ts

@@ -0,0 +1,2 @@
+import type { AnimatedBackgroundProps, EngineOptions } from './types';
+export declare const resolveOptions: (props: AnimatedBackgroundProps) => EngineOptions;

package/dist/components/AnimatedBackground/{lib.js → module/lib.js}

@@ -25,7 +25,8 @@ const resolveOptions = (props)=>{
         tilt: props.tilt ?? 16,
         dotColorVar: props.dotColorVar ?? '--animated-bg-dot',
         accentColorVar: props.accentColorVar ?? '--animated-bg-accent-dot',
-        baseColorVar: props.baseColorVar ?? '--color-component-app-shell-bg'
+        baseColorVar: props.baseColorVar ?? '--color-component-app-shell-bg',
+        caughtColorVar: props.caughtColorVar ?? '--animated-bg-caught-dot'
     };
 };
 export { resolveOptions };