@wallarm-org/design-system 0.58.1 → 0.59.0

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

@@ -14,6 +14,8 @@ function createSweepEngine(canvas, options) {
         w: 0,
         h: 0,
         dots: [],
+        gridCols: 0,
+        gridSp: 0,
         opts,
         tanTilt: Math.tan(options.tilt * Math.PI / 180),
         exclusionBox: null
@@ -57,7 +59,10 @@ function createSweepEngine(canvas, options) {
         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);
+        const grid = buildGrid(host.w, host.h, opts.spacing);
+        host.dots = grid.dots;
+        host.gridCols = grid.cols;
+        host.gridSp = grid.sp;
         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));
@@ -119,9 +124,10 @@ function createSweepEngine(canvas, options) {
         ctx.fillRect(0, 0, host.w, host.h);
         if ('halftone' === opts.texture) {
             drawHalftone(t);
-            gr.drawCaughtEffects(t);
             gr.drawCannon(t);
             gr.drawBullets();
+            gr.drawCelOverlay(t);
+            gr.drawCaughtEffects(t);
         } else drawClean(t);
     }
     const DT_CLAMP = 0.05;
@@ -137,7 +143,10 @@ function createSweepEngine(canvas, options) {
             if (lastLatch > -1 / 0) lastLatch += skip;
         }
         lastFrameT = now;
-        if ('halftone' === opts.texture) game.gameSim(now, dt);
+        if ('halftone' === opts.texture) {
+            game.stepCel(now, dt, rc.caughtPalette[rc.caughtPalette.length - 1], rc.dotPalette[rc.dotPalette.length - 1]);
+            game.gameSim(now, dt);
+        }
         game.pruneCaughtEffects(now);
         frame(now);
         rafId = requestAnimationFrame(tick);
@@ -182,7 +191,12 @@ function createSweepEngine(canvas, options) {
         };
         host.opts = opts;
         host.tanTilt = Math.tan(opts.tilt * Math.PI / 180);
-        if (spacingChanged) host.dots = buildGrid(host.w, host.h, opts.spacing);
+        if (spacingChanged) {
+            const grid = buildGrid(host.w, host.h, opts.spacing);
+            host.dots = grid.dots;
+            host.gridCols = grid.cols;
+            host.gridSp = grid.sp;
+        }
         resolveColors();
         if (!running) renderStatic();
     }
@@ -207,7 +221,12 @@ function createSweepEngine(canvas, options) {
         setCannonDir: (dir)=>game.setCannonDir(dir),
         setFiring: (on)=>game.setFiring(on),
         onStats: (cb)=>game.onStats(cb),
-        setExclusion: (box)=>game.setExclusion(box)
+        setExclusion: (box)=>game.setExclusion(box),
+        celebrate: (score)=>{
+            if ('halftone' !== opts.texture || !running) return;
+            game.celebrate(score);
+        },
+        setSound: (on)=>game.setSound(on)
     };
 }
 export { createSweepEngine };

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

@@ -1,3 +1,4 @@
+import type { CelState } from './celebration';
 import type { Dot } from './engine-grid';
 import type { EngineOptions, GameStats } from './types';
 export declare const ROUND_ATTACKS = 100;
@@ -59,6 +60,8 @@ export interface GameEngineHost {
     w: number;
     h: number;
     dots: Dot[];
+    gridCols: number;
+    gridSp: number;
     opts: EngineOptions;
     tanTilt: number;
     exclusionBox: {
@@ -75,7 +78,10 @@ export interface GameLogic {
     cannonX: number;
     armT: number;
     fontLoaded: boolean;
+    cel: CelState | null;
+    cannonAway: boolean;
     gameSim(t: number, dt: number): void;
+    stepCel(t: number, dt: number, caughtColor: string, dotColor: string): void;
     pruneCaughtEffects(t: number): void;
     adjustTimeMarkers(skip: number): void;
     setGameActive(active: boolean): void;
@@ -90,5 +96,7 @@ export interface GameLogic {
         width: number;
         height: number;
     } | null): void;
+    celebrate(score: number): void;
+    setSound(on: boolean): void;
 }
 export declare function createGameLogic(host: GameEngineHost): GameLogic;

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

@@ -1,5 +1,7 @@
+import { adjustCelebrationTimeMarkers, startCelebration, stepCelebration, tierForScore } from "./celebration.js";
 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";
+import { playCoin, playFanfare, playPew, playPowerUp, playZap } from "./sfx.js";
 const ROUND_ATTACKS = 100;
 const MAX_TARGETS = 8;
 const MAX_BULLETS = 24;
@@ -43,7 +45,9 @@ function createGameLogic(host) {
         gameMode: 'idle',
         cannonX: 0,
         armT: 0,
-        fontLoaded: false
+        fontLoaded: false,
+        cel: null,
+        cannonAway: false
     };
     const anomalies = [];
     const bullets = [];
@@ -57,11 +61,15 @@ function createGameLogic(host) {
     let roundSpawned = 0;
     let roundDone = false;
     let lastSpawn = -1 / 0;
+    let soundOn = false;
     let statsCb = null;
     let exclusionBox = null;
-    if ("u" > typeof document) document.fonts.load('9px "Press Start 2P"').then(()=>{
-        state.fontLoaded = true;
-    }).catch(()=>{});
+    function loadFont() {
+        if (state.fontLoaded || "u" < typeof document) return;
+        document.fonts.load('9px "Press Start 2P"').then(()=>{
+            state.fontLoaded = true;
+        }).catch(()=>{});
+    }
     function emitStats() {
         statsCb?.({
             kills: killTotal,
@@ -181,7 +189,10 @@ function createGameLogic(host) {
     }
     function recordKill() {
         killTotal += 1;
-        if ('armed' === state.gameMode) roundKills += 1;
+        if ('armed' === state.gameMode) {
+            roundKills += 1;
+            if (soundOn) playZap();
+        } else if (soundOn) playCoin();
         emitStats();
     }
     function endRound() {
@@ -190,6 +201,11 @@ function createGameLogic(host) {
         bullets.length = 0;
         firing = false;
         cannonDir = 0;
+        const faced = roundKills + roundEscaped;
+        const accuracy = faced > 0 ? Math.round(roundKills / faced * 100) : 100;
+        const now = performance.now() / 1000;
+        state.cel = startCelebration(accuracy, now, host);
+        if (soundOn && tierForScore(accuracy) >= 1) playFanfare();
         emitStats();
     }
     function isHittable(anomaly, t) {
@@ -210,6 +226,7 @@ function createGameLogic(host) {
         anomalies.length = kept;
     }
     function idleSim(t) {
+        if (state.cel) return void pruneExpired(t);
         let liveCount = 0;
         for (const anomaly of anomalies)if (!anomaly.caught) liveCount++;
         if (liveCount < 2 && t - lastSpawn > host.opts.anomalyInterval) {
@@ -233,6 +250,7 @@ function createGameLogic(host) {
                 y: host.h - CANNON_BARREL_Y
             });
             lastFire = t;
+            if (soundOn) playPew();
         }
     }
     function moveBullets(dt) {
@@ -327,25 +345,42 @@ function createGameLogic(host) {
         for (const effect of caughtEffects)effect.t0 += skip;
         if (state.armT > 0) state.armT += skip;
         if (lastSpawn > -1 / 0 && 0 !== lastSpawn) lastSpawn += skip;
+        if (state.cel) adjustCelebrationTimeMarkers(state.cel, skip);
+    }
+    function resetRoundState() {
+        roundKills = 0;
+        roundEscaped = 0;
+        roundSpawned = 0;
+        roundDone = false;
+        bullets.length = 0;
+        anomalies.length = 0;
+        caughtEffects.length = 0;
+        firing = false;
+        cannonDir = 0;
+        state.cel = null;
+        state.cannonAway = false;
     }
     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;
+        if (active) {
+            lastSpawn = -1 / 0;
+            loadFont();
+        } else {
+            resetRoundState();
             state.gameMode = 'idle';
             killTotal = 0;
-            roundKills = 0;
-            roundEscaped = 0;
-            roundSpawned = 0;
-            roundDone = false;
-            firing = false;
-            cannonDir = 0;
         }
     }
+    function celebrate(score) {
+        const now = performance.now() / 1000;
+        state.cel = null;
+        state.cannonAway = false;
+        anomalies.length = 0;
+        state.armT = now;
+        state.cel = startCelebration(score, now, host);
+        if (soundOn && tierForScore(score) >= 1) playFanfare();
+    }
     function catchAt(x, y, running) {
         if (!running) return false;
         const now = performance.now() / 1000;
@@ -372,38 +407,24 @@ function createGameLogic(host) {
         if ('idle' === mode) {
             state.gameMode = 'idle';
             lastSpawn = -1 / 0;
+            state.cel = null;
+            state.cannonAway = false;
         } else state.gameMode = 'armed';
     }
     function startRound() {
-        const { w } = host;
         const now = performance.now() / 1000;
-        roundKills = 0;
-        roundEscaped = 0;
-        roundSpawned = 0;
-        roundDone = false;
+        resetRoundState();
         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;
+        state.cannonX = host.w / 2;
+        if (soundOn) playPowerUp();
         emitStats();
     }
     function exitGame() {
-        killTotal = 0;
-        roundKills = 0;
-        roundEscaped = 0;
-        roundSpawned = 0;
-        roundDone = false;
+        resetRoundState();
         state.gameMode = 'idle';
-        bullets.length = 0;
-        anomalies.length = 0;
-        caughtEffects.length = 0;
-        firing = false;
-        cannonDir = 0;
+        killTotal = 0;
         lastSpawn = -1 / 0;
         emitStats();
     }
@@ -419,6 +440,9 @@ function createGameLogic(host) {
     function onStats(cb) {
         statsCb = cb;
     }
+    function setSound(on) {
+        soundOn = on;
+    }
     function setExclusion(box) {
         if (!box) {
             exclusionBox = null;
@@ -432,6 +456,11 @@ function createGameLogic(host) {
         exclusionBox = val;
         host.exclusionBox = val;
     }
+    function stepCel(t, dt, caughtColor, dotColor) {
+        if (!state.cel) return;
+        stepCelebration(state.cel, t, dt, host, caughtColor, dotColor);
+        if (state.cel.liftStarted) state.cannonAway = true;
+    }
     return {
         anomalies,
         bullets,
@@ -439,6 +468,7 @@ function createGameLogic(host) {
         gameSim,
         pruneCaughtEffects,
         adjustTimeMarkers,
+        stepCel,
         setGameActive,
         catchAt,
         setMode,
@@ -448,6 +478,20 @@ function createGameLogic(host) {
         setFiring,
         onStats,
         setExclusion,
+        celebrate,
+        setSound,
+        get cel () {
+            return state.cel;
+        },
+        set cel (v){
+            state.cel = v;
+        },
+        get cannonAway () {
+            return state.cannonAway;
+        },
+        set cannonAway (v){
+            state.cannonAway = v;
+        },
         get gameActive () {
             return state.gameActive;
         },

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

@@ -13,4 +13,5 @@ export declare function createGameRenderer(rc: GameRenderCtx, game: GameLogic, h
     drawCaughtEffects: (t: number) => void;
     drawCannon: (t: number) => void;
     drawBullets: () => void;
+    drawCelOverlay: (t: number) => void;
 };

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

@@ -1,4 +1,6 @@
-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 { CEL_CAUGHT_COL, celDotEffect, computeCelFrameParams } from "./celebration.js";
+import { drawCelebrationOverlay, getCelCannonOffset } from "./celebration-renderer.js";
+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 } 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";
@@ -6,7 +8,7 @@ function createGameRenderer(rc, game, host) {
     let envCache = [];
     let revealedCache = [];
     function drawGameDots(t) {
-        const { ctx, dotPalette, accentPalette } = rc;
+        const { ctx, dotPalette, accentPalette, caughtPalette } = rc;
         const { w, h, dots, opts, tanTilt, exclusionBox } = host;
         const sx = sweepX(t, w, opts.sweepPeriod);
         const intensity = opts.intensity;
@@ -14,6 +16,9 @@ function createGameRenderer(rc, game, host) {
         const liveAnomalies = game.anomalies;
         const aLen = liveAnomalies.length;
         const isIdle = 'idle' === game.gameMode;
+        const cel = game.cel;
+        let celParams = null;
+        if (cel) celParams = computeCelFrameParams(cel, t, w, h);
         const exL = exclusionBox ? (w - exclusionBox.width) / 2 : 0;
         const exR = exclusionBox ? (w + exclusionBox.width) / 2 : 0;
         const exT = exclusionBox ? (h - exclusionBox.height) / 2 : 0;
@@ -32,10 +37,11 @@ function createGameRenderer(rc, game, host) {
                 revealedCache[i] = isIdle ? true : anomaly.x < sx || t - anomaly.t0 > REVEAL_DELAY;
             }
         }
-        for (const dot of dots){
+        for(let di = 0; di < dots.length; di++){
+            const dot = dots[di];
             if (exclusionBox && dot.x >= exL && dot.x <= exR && dot.y >= exT && dot.y <= exB) continue;
             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 amb = AMB_SCALE * (0.5 + 0.5 * Math.sin(dot.noiseSpatial + 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;
@@ -54,12 +60,32 @@ function createGameRenderer(rc, game, host) {
                 const ao = env * (1 - dist / ANOMALY_R);
                 if (ao > maxAo) maxAo = ao;
             }
+            let celBoost = 0;
+            let celCol = null;
+            if (celParams) {
+                const eff = celDotEffect(di, dot.x, dot.y, celParams, w, h);
+                if (eff) {
+                    celBoost = eff.celBoost;
+                    celCol = eff.celCol;
+                }
+            }
             const val = Math.min(1, Math.max(amb + bloom, maxAo));
-            if (val < MIN_DOT_VALUE) continue;
-            const step = Math.round(5 * val);
+            if (val < MIN_DOT_VALUE && celBoost < 0.02) continue;
+            const effVal = Math.min(1, val + celBoost);
+            const step = Math.round(5 * effVal);
             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)];
+            else if (celBoost > 0.02) {
+                const celAlpha = Math.min(1, 0.15 + 0.85 * effVal);
+                if (celCol === CEL_CAUGHT_COL) ctx.fillStyle = caughtPalette[alphaIdx(celAlpha)];
+                else if (celCol) {
+                    ctx.globalAlpha = celAlpha;
+                    ctx.fillStyle = celCol;
+                    ctx.fillRect(dot.x - half, dot.y - half, 2 * half, 2 * half);
+                    ctx.globalAlpha = 1;
+                    continue;
+                } else ctx.fillStyle = caughtPalette[alphaIdx(celAlpha)];
+            } 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);
         }
     }
@@ -94,8 +120,11 @@ function createGameRenderer(rc, game, host) {
     }
     function drawCannon(t) {
         const { ctx, dotPalette } = rc;
-        if ('armed' !== game.gameMode && 'over' !== game.gameMode) return;
-        if ('armed' === game.gameMode) {
+        const cel = game.cel;
+        const hasCel = null !== cel;
+        if ('armed' !== game.gameMode && 'over' !== game.gameMode && !hasCel) return;
+        const liftOffset = getCelCannonOffset(cel, game.cannonAway, t, host.h);
+        if ('armed' === game.gameMode && !hasCel) {
             const riseP = Math.min(1, (t - game.armT) / ARM_RISE);
             const ease = 1 - (1 - riseP) * (1 - riseP);
             const offsetY = (1 - ease) * 40;
@@ -103,24 +132,34 @@ function createGameRenderer(rc, game, host) {
             ctx.globalAlpha = ease;
             ctx.translate(0, offsetY);
         }
-        const baseY = host.h - CANNON_BASE_OFFSET;
+        const baseY = host.h - CANNON_BASE_OFFSET - liftOffset;
+        if (baseY < -40) {
+            if ('armed' === game.gameMode && !hasCel) ctx.restore();
+            return;
+        }
         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();
+        if ('armed' === game.gameMode && !hasCel) 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);
     }
+    function drawCelOverlay(t) {
+        const cel = game.cel;
+        if (!cel) return;
+        drawCelebrationOverlay(rc, cel, t, host, game.fontLoaded);
+    }
     return {
         drawGameDots,
         drawCaughtEffects,
         drawCannon,
-        drawBullets
+        drawBullets,
+        drawCelOverlay
     };
 }
 export { createGameRenderer };

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

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

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

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

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

@@ -0,0 +1,4 @@
+/** Shared easing and clamping helpers used across game modules. */
+export declare function easeOut(t: number): number;
+export declare function easeIn(t: number): number;
+export declare function clamp01(v: number): number;

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

@@ -0,0 +1,10 @@
+function easeOut(t) {
+    return 1 - (1 - t) * (1 - t);
+}
+function easeIn(t) {
+    return t * t;
+}
+function clamp01(v) {
+    return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+export { clamp01, easeIn, easeOut };

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

@@ -0,0 +1,15 @@
+/**
+ * Synthesized 8-bit SFX for the shooter easter egg.
+ *
+ * All sounds use the Web Audio API — square waves + band-passed noise,
+ * the way original hardware made them. No audio files, no deps, no bundle weight.
+ *
+ * SSR-safe: nothing runs at import time (typeof window guard).
+ * Autoplay-safe: AudioContext created lazily on the first play call,
+ * which is always downstream of a user gesture.
+ */
+export declare function playPew(): void;
+export declare function playZap(): void;
+export declare function playCoin(): void;
+export declare function playPowerUp(): void;
+export declare function playFanfare(): void;

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

@@ -0,0 +1,143 @@
+const MASTER_VOLUME = 0.06;
+let ctx = null;
+let master = null;
+function ensureAudio() {
+    if ("u" < typeof window) return null;
+    if (!ctx) {
+        ctx = new AudioContext();
+        master = ctx.createGain();
+        master.gain.value = MASTER_VOLUME;
+        master.connect(ctx.destination);
+    }
+    if ('suspended' === ctx.state) ctx.resume();
+    if (!master) return null;
+    return {
+        ac: ctx,
+        out: master
+    };
+}
+function scheduleNotes(ac, out, notes, step, volume = 0.4) {
+    const now = ac.currentTime;
+    for(let i = 0; i < notes.length; i++){
+        const t = now + i * step;
+        const osc = ac.createOscillator();
+        osc.type = 'square';
+        osc.frequency.value = notes[i];
+        const gain = ac.createGain();
+        gain.gain.setValueAtTime(volume, t);
+        gain.gain.setValueAtTime(volume, t + 0.85 * step);
+        gain.gain.linearRampToValueAtTime(0, t + step);
+        osc.connect(gain).connect(out);
+        osc.start(t);
+        osc.stop(t + step);
+    }
+    return now + notes.length * step;
+}
+function playPew() {
+    const audio = ensureAudio();
+    if (!audio) return;
+    const { ac, out } = audio;
+    const now = ac.currentTime;
+    const dur = 0.08;
+    const osc = ac.createOscillator();
+    osc.type = 'square';
+    osc.frequency.setValueAtTime(980, now);
+    osc.frequency.linearRampToValueAtTime(180, now + dur);
+    const gain = ac.createGain();
+    gain.gain.setValueAtTime(0.5, now);
+    gain.gain.linearRampToValueAtTime(0, now + dur);
+    osc.connect(gain).connect(out);
+    osc.start(now);
+    osc.stop(now + dur);
+}
+function playZap() {
+    const audio = ensureAudio();
+    if (!audio) return;
+    const { ac, out } = audio;
+    const now = ac.currentTime;
+    const osc = ac.createOscillator();
+    osc.type = 'square';
+    osc.frequency.setValueAtTime(320, now);
+    osc.frequency.linearRampToValueAtTime(70, now + 0.06);
+    const oscGain = ac.createGain();
+    oscGain.gain.setValueAtTime(0.45, now);
+    oscGain.gain.linearRampToValueAtTime(0, now + 0.06);
+    osc.connect(oscGain).connect(out);
+    osc.start(now);
+    osc.stop(now + 0.06);
+    const bufLen = Math.ceil(0.07 * ac.sampleRate);
+    const buf = ac.createBuffer(1, bufLen, ac.sampleRate);
+    const data = buf.getChannelData(0);
+    for(let i = 0; i < bufLen; i++)data[i] = 2 * Math.random() - 1;
+    const noise = ac.createBufferSource();
+    noise.buffer = buf;
+    const bp = ac.createBiquadFilter();
+    bp.type = 'bandpass';
+    bp.frequency.setValueAtTime(1400, now);
+    bp.frequency.linearRampToValueAtTime(300, now + 0.07);
+    bp.Q.value = 2;
+    const noiseGain = ac.createGain();
+    noiseGain.gain.setValueAtTime(0.4, now);
+    noiseGain.gain.linearRampToValueAtTime(0, now + 0.07);
+    noise.connect(bp).connect(noiseGain).connect(out);
+    noise.start(now);
+    noise.stop(now + 0.07);
+}
+function playCoin() {
+    const audio = ensureAudio();
+    if (!audio) return;
+    const { ac, out } = audio;
+    const now = ac.currentTime;
+    const osc1 = ac.createOscillator();
+    osc1.type = 'square';
+    osc1.frequency.value = 988;
+    const gain1 = ac.createGain();
+    gain1.gain.setValueAtTime(0.4, now);
+    gain1.gain.setValueAtTime(0.4, now + 0.07);
+    gain1.gain.linearRampToValueAtTime(0, now + 0.08);
+    osc1.connect(gain1).connect(out);
+    osc1.start(now);
+    osc1.stop(now + 0.08);
+    const osc2 = ac.createOscillator();
+    osc2.type = 'square';
+    osc2.frequency.value = 1319;
+    const gain2 = ac.createGain();
+    gain2.gain.setValueAtTime(0, now);
+    gain2.gain.setValueAtTime(0.4, now + 0.08);
+    gain2.gain.setValueAtTime(0.4, now + 0.38);
+    gain2.gain.linearRampToValueAtTime(0, now + 0.46);
+    osc2.connect(gain2).connect(out);
+    osc2.start(now + 0.08);
+    osc2.stop(now + 0.46);
+}
+function playPowerUp() {
+    const audio = ensureAudio();
+    if (!audio) return;
+    scheduleNotes(audio.ac, audio.out, [
+        392,
+        523,
+        659,
+        784
+    ], 0.06);
+}
+function playFanfare() {
+    const audio = ensureAudio();
+    if (!audio) return;
+    const { ac, out } = audio;
+    const finalT = scheduleNotes(ac, out, [
+        523,
+        659,
+        784
+    ], 0.09);
+    const osc = ac.createOscillator();
+    osc.type = 'square';
+    osc.frequency.value = 1046;
+    const gain = ac.createGain();
+    gain.gain.setValueAtTime(0.45, finalT);
+    gain.gain.setValueAtTime(0.45, finalT + 0.16);
+    gain.gain.linearRampToValueAtTime(0, finalT + 0.22);
+    osc.connect(gain).connect(out);
+    osc.start(finalT);
+    osc.stop(finalT + 0.22);
+}
+export { playCoin, playFanfare, playPew, playPowerUp, playZap };

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

@@ -0,0 +1,22 @@
+import type { PointerEvent, ReactElement, RefObject } from 'react';
+import type { SweepEngine } from './index';
+interface UseGameParams {
+    game: boolean;
+    isHalftone: boolean;
+    excludeCardSize?: {
+        width: number;
+        height: number;
+    };
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+}
+interface UseGameReturn {
+    gameActive: boolean;
+    onPointerDown: ((e: PointerEvent<HTMLCanvasElement>) => void) | undefined;
+    hudElement: ReactElement | null;
+    onEngineCreated: (engine: SweepEngine) => void;
+    onEngineDestroyed: () => void;
+    soundOn: boolean;
+    toggleSound: () => void;
+}
+export declare const useGame: ({ game, isHalftone, excludeCardSize, canvasRef, }: UseGameParams) => UseGameReturn;
+export {};