@wallarm-org/design-system 0.55.0 → 0.55.1

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

@@ -0,0 +1,206 @@
+import { CLEAN_BASE_ALPHA, CLEAN_DOT_HALF_BASE, CLEAN_DOT_HALF_BLOOM, GLOW_INNER_ALPHA, GLOW_INNER_HALF, GLOW_LIFETIME, GLOW_OUTER_ALPHA, GLOW_OUTER_HALF, SPAWN_PROBABILITY, SWEEP_OFFSET_GUARD } from "./constants.js";
+import { FALLBACK_ACCENT, FALLBACK_BASE, FALLBACK_CAUGHT, FALLBACK_DOT, alphaIdx, buildPalette, parseColor } from "./engine-colors.js";
+import { buildGrid, sweepX } from "./engine-grid.js";
+import { CANNON_HALF_W, createGameLogic } from "./game-logic.js";
+import { createGameRenderer } from "./game-renderer.js";
+function createSweepEngine(canvas, options) {
+    const maybeCtx = canvas.getContext('2d');
+    if (!maybeCtx) throw new Error('2D canvas context unavailable');
+    const ctx = maybeCtx;
+    let opts = {
+        ...options
+    };
+    const host = {
+        w: 0,
+        h: 0,
+        dots: [],
+        opts,
+        tanTilt: Math.tan(options.tilt * Math.PI / 180)
+    };
+    const game = createGameLogic(host);
+    const rc = {
+        ctx,
+        dotPalette: buildPalette(FALLBACK_DOT),
+        accentPalette: buildPalette(FALLBACK_ACCENT),
+        caughtPalette: buildPalette(FALLBACK_CAUGHT),
+        caughtRgb: FALLBACK_CAUGHT,
+        shadowPalette: buildPalette({
+            r: 0,
+            g: 0,
+            b: 0
+        })
+    };
+    const gr = createGameRenderer(rc, game, host);
+    let baseColor = FALLBACK_BASE;
+    const latched = [];
+    let lastLatch = -1 / 0;
+    let rafId = null;
+    let running = false;
+    let lastFrameT = 0;
+    function resolveColors() {
+        const cs = getComputedStyle(canvas);
+        const dot = parseColor(cs.getPropertyValue(opts.dotColorVar)) ?? FALLBACK_DOT;
+        const accent = parseColor(cs.getPropertyValue(opts.accentColorVar)) ?? FALLBACK_ACCENT;
+        const caught = parseColor(cs.getPropertyValue(opts.caughtColorVar)) ?? FALLBACK_CAUGHT;
+        baseColor = cs.getPropertyValue(opts.baseColorVar).trim() || FALLBACK_BASE;
+        rc.dotPalette = buildPalette(dot);
+        rc.accentPalette = buildPalette(accent);
+        rc.caughtPalette = buildPalette(caught);
+        rc.caughtRgb = caught;
+    }
+    function resize() {
+        const rect = canvas.getBoundingClientRect();
+        host.w = Math.max(1, Math.round(rect.width));
+        host.h = Math.max(1, Math.round(rect.height));
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        canvas.width = Math.round(host.w * dpr);
+        canvas.height = Math.round(host.h * dpr);
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        host.dots = buildGrid(host.w, host.h, opts.spacing);
+        host.tanTilt = Math.tan(opts.tilt * Math.PI / 180);
+        resolveColors();
+        game.cannonX = Math.max(CANNON_HALF_W, Math.min(host.w - CANNON_HALF_W, game.cannonX));
+        if (!running) renderStatic();
+    }
+    function drawClean(t) {
+        const { w, h, dots, tanTilt } = host;
+        const sx = sweepX(t, w, opts.sweepPeriod);
+        const intensity = opts.intensity;
+        for (const dot of dots){
+            const dist = Math.abs(dot.x - (sx + (h / 2 - dot.y) * tanTilt));
+            const inBloom = dist < opts.bloomRadius;
+            const alpha = inBloom ? (CLEAN_BASE_ALPHA + (opts.bloomAlpha - CLEAN_BASE_ALPHA) * (1 - dist / opts.bloomRadius)) * intensity : CLEAN_BASE_ALPHA * intensity;
+            const idx = alphaIdx(alpha);
+            if (0 === idx) continue;
+            ctx.fillStyle = rc.dotPalette[idx];
+            const half = inBloom ? CLEAN_DOT_HALF_BLOOM : CLEAN_DOT_HALF_BASE;
+            ctx.fillRect(dot.x - half, dot.y - half, 2 * half, 2 * half);
+        }
+        const sweepAt = (y)=>sx + (h / 2 - y) * tanTilt;
+        if (t - lastLatch > opts.anomalyInterval && Math.random() < SPAWN_PROBABILITY && dots.length) {
+            const cand = dots[Math.random() * dots.length | 0];
+            if (cand.x < sweepAt(cand.y) - SWEEP_OFFSET_GUARD) {
+                lastLatch = t;
+                latched.push({
+                    x: cand.x,
+                    y: cand.y,
+                    t0: t
+                });
+            }
+        }
+        let kept = 0;
+        for (const glow of latched){
+            const age = t - glow.t0;
+            if (age >= GLOW_LIFETIME) continue;
+            latched[kept++] = glow;
+            const fade = 1 - age / GLOW_LIFETIME;
+            const glowIdx = alphaIdx(GLOW_OUTER_ALPHA * fade);
+            if (glowIdx > 0) {
+                ctx.fillStyle = rc.accentPalette[glowIdx];
+                ctx.fillRect(glow.x - GLOW_OUTER_HALF, glow.y - GLOW_OUTER_HALF, 2 * GLOW_OUTER_HALF, 2 * GLOW_OUTER_HALF);
+            }
+            ctx.fillStyle = rc.accentPalette[alphaIdx(GLOW_INNER_ALPHA * fade)];
+            ctx.fillRect(glow.x - GLOW_INNER_HALF, glow.y - GLOW_INNER_HALF, 2 * GLOW_INNER_HALF, 2 * GLOW_INNER_HALF);
+        }
+        latched.length = kept;
+    }
+    function drawHalftone(t) {
+        gr.drawGameDots(t);
+    }
+    function frame(t) {
+        ctx.fillStyle = baseColor;
+        ctx.fillRect(0, 0, host.w, host.h);
+        if ('halftone' === opts.texture) {
+            drawHalftone(t);
+            gr.drawCaughtEffects(t);
+            gr.drawCannon(t);
+            gr.drawBullets();
+        } else drawClean(t);
+    }
+    const DT_CLAMP = 0.05;
+    function tick(ts) {
+        if (!running) return;
+        const now = ts / 1000;
+        const rawDt = lastFrameT > 0 ? now - lastFrameT : 0;
+        const dt = Math.min(rawDt, DT_CLAMP);
+        if (rawDt > DT_CLAMP) {
+            const skip = rawDt - dt;
+            game.adjustTimeMarkers(skip);
+            for (const glow of latched)glow.t0 += skip;
+            if (lastLatch > -1 / 0) lastLatch += skip;
+        }
+        lastFrameT = now;
+        if ('halftone' === opts.texture) game.gameSim(now, dt);
+        game.pruneCaughtEffects(now);
+        frame(now);
+        rafId = requestAnimationFrame(tick);
+    }
+    function onVisibility() {
+        if (document.hidden) {
+            if (null !== rafId) cancelAnimationFrame(rafId);
+            rafId = null;
+        } else if (running && null === rafId) rafId = requestAnimationFrame(tick);
+    }
+    function start() {
+        if (running) return;
+        running = true;
+        lastFrameT = 0;
+        document.addEventListener('visibilitychange', onVisibility);
+        if (!document.hidden) rafId = requestAnimationFrame(tick);
+    }
+    function stop() {
+        running = false;
+        if (null !== rafId) cancelAnimationFrame(rafId);
+        rafId = null;
+        document.removeEventListener('visibilitychange', onVisibility);
+        game.setFiring(false);
+        game.setCannonDir(0);
+    }
+    function renderStatic(t = 1.4) {
+        const savedT = lastFrameT;
+        frame(t);
+        lastFrameT = savedT;
+    }
+    function setOptions(next) {
+        const keys = Object.keys(next);
+        if (0 === keys.length) {
+            resolveColors();
+            if (!running) renderStatic();
+            return;
+        }
+        const spacingChanged = void 0 !== next.spacing && next.spacing !== opts.spacing;
+        opts = {
+            ...opts,
+            ...next
+        };
+        host.opts = opts;
+        host.tanTilt = Math.tan(opts.tilt * Math.PI / 180);
+        if (spacingChanged) host.dots = buildGrid(host.w, host.h, opts.spacing);
+        resolveColors();
+        if (!running) renderStatic();
+    }
+    function exitGame() {
+        game.exitGame();
+    }
+    resize();
+    return {
+        start,
+        stop,
+        setOptions,
+        renderStatic,
+        resize,
+        setGameActive: (active)=>game.setGameActive(active),
+        catchAt: (x, y)=>game.catchAt(x, y, running),
+        setMode: (mode)=>game.setMode(mode),
+        startRound: ()=>{
+            game.startRound();
+            lastFrameT = performance.now() / 1000;
+        },
+        exitGame,
+        setCannonDir: (dir)=>game.setCannonDir(dir),
+        setFiring: (on)=>game.setFiring(on),
+        onStats: (cb)=>game.onStats(cb),
+        setExclusion: (box)=>game.setExclusion(box)
+    };
+}
+export { createSweepEngine };

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

@@ -0,0 +1,87 @@
+import type { Dot } from './engine-grid';
+import type { EngineOptions, GameStats } from './types';
+export declare const ROUND_ATTACKS = 100;
+export declare const MAX_TARGETS = 6;
+export declare const MAX_BULLETS = 24;
+export declare const BULLET_SPEED = 720;
+export declare const FIRE_CADENCE = 0.18;
+export declare const CANNON_SPEED = 420;
+export declare const TARGET_LIFE = 4;
+export declare const ARMED_SPAWN = 0.55;
+export declare const HIT_R2: number;
+export declare const CLICK_RADIUS = 52;
+export declare const REVEAL_DELAY = 0.3;
+export declare const ARM_RISE = 0.45;
+export declare const FIRST_SPAWN_DELAY = 0.7;
+export declare const ANOMALY_R = 42;
+export declare const ANOMALY_R_SQ: number;
+export declare const CAUGHT_DUR = 1.4;
+export declare const CANNON_HALF_W = 16;
+export declare const CANNON_BASE_OFFSET = 26;
+export declare const CANNON_BARREL_Y = 40;
+export declare const HUD_CLEAR_W = 120;
+export declare const HUD_CLEAR_H = 140;
+export declare const CARD_CLEAR_PAD = 48;
+export declare const SPAWN_EDGE = 24;
+export declare const CANNON_CLEAR = 72;
+export declare const SPAWN_TRIES = 24;
+export declare const IDLE_ANOMALY_LIFE = 2.4;
+export declare const VERDICTS: readonly ["BLOCKED", "TERMINATED", "NEUTRALIZED", "QUARANTINED", "MITIGATED", "CONTAINED"];
+export interface Anomaly {
+    x: number;
+    y: number;
+    t0: number;
+    life: number;
+    caught: boolean;
+}
+export interface Bullet {
+    x: number;
+    y: number;
+}
+export interface CaughtCell {
+    x: number;
+    y: number;
+    half: number;
+    ao: number;
+}
+export interface CaughtEffect {
+    x: number;
+    y: number;
+    t0: number;
+    cells: CaughtCell[];
+    label: string;
+}
+export type GameMode = 'idle' | 'armed' | 'over';
+export interface GameEngineHost {
+    w: number;
+    h: number;
+    dots: Dot[];
+    opts: EngineOptions;
+    tanTilt: number;
+}
+export interface GameLogic {
+    readonly anomalies: Anomaly[];
+    readonly bullets: Bullet[];
+    readonly caughtEffects: CaughtEffect[];
+    gameActive: boolean;
+    gameMode: GameMode;
+    cannonX: number;
+    armT: number;
+    fontLoaded: boolean;
+    gameSim(t: number, dt: number): void;
+    pruneCaughtEffects(t: number): void;
+    adjustTimeMarkers(skip: number): void;
+    setGameActive(active: boolean): void;
+    catchAt(x: number, y: number, running: boolean): boolean;
+    setMode(mode: 'idle' | 'armed'): void;
+    startRound(): void;
+    exitGame(): void;
+    setCannonDir(dir: number): void;
+    setFiring(on: boolean): void;
+    onStats(cb: (s: GameStats) => void): void;
+    setExclusion(box: {
+        width: number;
+        height: number;
+    } | null): void;
+}
+export declare function createGameLogic(host: GameEngineHost): GameLogic;