@wallarm-org/design-system 0.64.1 → 0.65.0

package/dist/components/AnimatedBackground/GameHud.js

@@ -108,7 +108,7 @@ const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, g
                 style: {
                     animation: 'hud-in 0.3s ease-out'
                 },
-                children: 'Click the red anomalies \u2014 catch 5 to arm the cannon, then \u2190 \u2192 move \u00B7 space fire'
+                children: `Click the red anomalies \u2014 catch 5 to arm the cannon \u00B7 m sound ${soundOn ? 'off' : 'on'}`
             })
         ]
     });

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

@@ -1,3 +1,5 @@
+import type { GamePlugins } from './game-logic';
+import type { RenderPlugins } from './game-renderer';
 import type { EngineOptions, GameStats } from './types';
 /**
  * Framework-agnostic "detection sweep" canvas engine.
@@ -31,5 +33,9 @@ export interface SweepEngine {
     } | null): void;
     celebrate(score: number): void;
     setSound(on: boolean): void;
+    setPlugins(plugins: {
+        game: GamePlugins;
+        render: RenderPlugins;
+    }): void;
 }
 export declare function createSweepEngine(canvas: HTMLCanvasElement, options: EngineOptions): SweepEngine;

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

@@ -226,7 +226,11 @@ function createSweepEngine(canvas, options) {
             if ('halftone' !== opts.texture || !running) return;
             game.celebrate(score);
         },
-        setSound: (on)=>game.setSound(on)
+        setSound: (on)=>game.setSound(on),
+        setPlugins: (p)=>{
+            game.setPlugins(p.game);
+            gr.setRenderPlugins(p.render);
+        }
     };
 }
 export { createSweepEngine };

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

@@ -56,6 +56,18 @@ export interface CaughtEffect {
     label: string;
 }
 export type GameMode = 'idle' | 'armed' | 'over';
+/** Plugin interface for lazily-loaded game modules (sfx + celebration). */
+export interface GamePlugins {
+    playCoin?(): void;
+    playZap?(): void;
+    playPew?(): void;
+    playPowerUp?(): void;
+    playFanfare?(): void;
+    startCelebration?(score: number, t: number, host: GameEngineHost): CelState | null;
+    stepCelebration?(cel: CelState, t: number, dt: number, host: GameEngineHost, c1: string, c2: string): void;
+    adjustCelebrationTimeMarkers?(cel: CelState, skip: number): void;
+    tierForScore?(score: number): number;
+}
 export interface GameEngineHost {
     w: number;
     h: number;
@@ -98,5 +110,6 @@ export interface GameLogic {
     } | null): void;
     celebrate(score: number): void;
     setSound(on: boolean): void;
+    setPlugins(p: GamePlugins): void;
 }
 export declare function createGameLogic(host: GameEngineHost): GameLogic;

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

@@ -1,7 +1,5 @@
-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;
@@ -62,6 +60,7 @@ function createGameLogic(host) {
     let roundDone = false;
     let lastSpawn = -1 / 0;
     let soundOn = false;
+    let plugins = {};
     let statsCb = null;
     let exclusionBox = null;
     function loadFont() {
@@ -191,8 +190,8 @@ function createGameLogic(host) {
         killTotal += 1;
         if ('armed' === state.gameMode) {
             roundKills += 1;
-            if (soundOn) playZap();
-        } else if (soundOn) playCoin();
+            if (soundOn) plugins.playZap?.();
+        } else if (soundOn) plugins.playCoin?.();
         emitStats();
     }
     function endRound() {
@@ -204,8 +203,8 @@ function createGameLogic(host) {
         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();
+        state.cel = plugins.startCelebration?.(accuracy, now, host) ?? null;
+        if (soundOn && (plugins.tierForScore?.(accuracy) ?? 0) >= 1) plugins.playFanfare?.();
         emitStats();
     }
     function isHittable(anomaly, t) {
@@ -250,7 +249,7 @@ function createGameLogic(host) {
                 y: host.h - CANNON_BARREL_Y
             });
             lastFire = t;
-            if (soundOn) playPew();
+            if (soundOn) plugins.playPew?.();
         }
     }
     function moveBullets(dt) {
@@ -345,7 +344,7 @@ 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);
+        if (state.cel) plugins.adjustCelebrationTimeMarkers?.(state.cel, skip);
     }
     function resetRoundState() {
         roundKills = 0;
@@ -378,8 +377,8 @@ function createGameLogic(host) {
         state.cannonAway = false;
         anomalies.length = 0;
         state.armT = now;
-        state.cel = startCelebration(score, now, host);
-        if (soundOn && tierForScore(score) >= 1) playFanfare();
+        state.cel = plugins.startCelebration?.(score, now, host) ?? null;
+        if (soundOn && (plugins.tierForScore?.(score) ?? 0) >= 1) plugins.playFanfare?.();
     }
     function catchAt(x, y, running) {
         if (!running) return false;
@@ -418,7 +417,7 @@ function createGameLogic(host) {
         state.armT = now;
         lastSpawn = now;
         state.cannonX = host.w / 2;
-        if (soundOn) playPowerUp();
+        if (soundOn) plugins.playPowerUp?.();
         emitStats();
     }
     function exitGame() {
@@ -458,7 +457,7 @@ function createGameLogic(host) {
     }
     function stepCel(t, dt, caughtColor, dotColor) {
         if (!state.cel) return;
-        stepCelebration(state.cel, t, dt, host, caughtColor, dotColor);
+        plugins.stepCelebration?.(state.cel, t, dt, host, caughtColor, dotColor);
         if (state.cel.liftStarted) state.cannonAway = true;
     }
     return {
@@ -480,6 +479,9 @@ function createGameLogic(host) {
         setExclusion,
         celebrate,
         setSound,
+        setPlugins (p) {
+            plugins = p;
+        },
         get cel () {
             return state.cel;
         },

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

@@ -0,0 +1,6 @@
+import type { GamePlugins } from './game-logic';
+import type { RenderPlugins } from './game-renderer';
+export declare function loadGamePlugins(): Promise<{
+    game: GamePlugins;
+    render: RenderPlugins;
+}>;

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

@@ -0,0 +1,31 @@
+let cached = null;
+async function loadGamePlugins() {
+    if (cached) return cached;
+    const [sfx, cel, celR] = await Promise.all([
+        import("./sfx.js"),
+        import("./celebration.js"),
+        import("./celebration-renderer.js")
+    ]);
+    cached = {
+        game: {
+            playCoin: sfx.playCoin,
+            playZap: sfx.playZap,
+            playPew: sfx.playPew,
+            playPowerUp: sfx.playPowerUp,
+            playFanfare: sfx.playFanfare,
+            startCelebration: cel.startCelebration,
+            stepCelebration: cel.stepCelebration,
+            adjustCelebrationTimeMarkers: cel.adjustCelebrationTimeMarkers,
+            tierForScore: cel.tierForScore
+        },
+        render: {
+            CEL_CAUGHT_COL: cel.CEL_CAUGHT_COL,
+            celDotEffect: cel.celDotEffect,
+            computeCelFrameParams: cel.computeCelFrameParams,
+            drawCelebrationOverlay: celR.drawCelebrationOverlay,
+            getCelCannonOffset: celR.getCelCannonOffset
+        }
+    };
+    return cached;
+}
+export { loadGamePlugins };

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

@@ -1,3 +1,4 @@
+import type { CelDotParams, CelState } from './celebration';
 import type { RGB } from './engine-colors';
 import type { GameEngineHost, GameLogic } from './game-logic';
 export interface GameRenderCtx {
@@ -8,10 +9,22 @@ export interface GameRenderCtx {
     caughtRgb: RGB;
     shadowPalette: string[];
 }
+/** Plugin interface for lazily-loaded celebration rendering modules. */
+export interface RenderPlugins {
+    CEL_CAUGHT_COL?: string;
+    celDotEffect?(di: number, x: number, y: number, params: CelDotParams, w: number, h: number): {
+        celBoost: number;
+        celCol: string | null;
+    } | null;
+    computeCelFrameParams?(cel: CelState, t: number, w: number, h: number): CelDotParams | null;
+    drawCelebrationOverlay?(rc: GameRenderCtx, cel: CelState, t: number, host: GameEngineHost, fontLoaded: boolean): void;
+    getCelCannonOffset?(cel: CelState | null, cannonAway: boolean, t: number, h: number): number;
+}
 export declare function createGameRenderer(rc: GameRenderCtx, game: GameLogic, host: GameEngineHost): {
     drawGameDots: (t: number) => void;
     drawCaughtEffects: (t: number) => void;
     drawCannon: (t: number) => void;
     drawBullets: () => void;
     drawCelOverlay: (t: number) => void;
+    setRenderPlugins: (p: RenderPlugins) => void;
 };

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

@@ -1,5 +1,3 @@
-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";
@@ -7,6 +5,7 @@ import { ANOMALY_R, ANOMALY_R_SQ, ARM_RISE, CANNON_BASE_OFFSET, CANNON_HALF_W, C
 function createGameRenderer(rc, game, host) {
     let envCache = [];
     let revealedCache = [];
+    let plugins = {};
     function drawGameDots(t) {
         const { ctx, dotPalette, accentPalette, caughtPalette } = rc;
         const { w, h, dots, opts, tanTilt, exclusionBox } = host;
@@ -18,7 +17,7 @@ function createGameRenderer(rc, game, host) {
         const isIdle = 'idle' === game.gameMode;
         const cel = game.cel;
         let celParams = null;
-        if (cel) celParams = computeCelFrameParams(cel, t, w, h);
+        if (cel) celParams = plugins.computeCelFrameParams?.(cel, t, w, h) ?? null;
         const exL = exclusionBox ? (w - exclusionBox.width) / 2 : 0;
         const exR = exclusionBox ? (w + exclusionBox.width) / 2 : 0;
         const exT = exclusionBox ? (h - exclusionBox.height) / 2 : 0;
@@ -63,7 +62,7 @@ function createGameRenderer(rc, game, host) {
             let celBoost = 0;
             let celCol = null;
             if (celParams) {
-                const eff = celDotEffect(di, dot.x, dot.y, celParams, w, h);
+                const eff = plugins.celDotEffect?.(di, dot.x, dot.y, celParams, w, h);
                 if (eff) {
                     celBoost = eff.celBoost;
                     celCol = eff.celCol;
@@ -77,7 +76,7 @@ function createGameRenderer(rc, game, host) {
             if (maxAo > ANOMALY_VIS_THRESHOLD) ctx.fillStyle = accentPalette[alphaIdx(Math.min(1, ANOMALY_ALPHA_BASE + maxAo))];
             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)];
+                if (celCol === plugins.CEL_CAUGHT_COL) ctx.fillStyle = caughtPalette[alphaIdx(celAlpha)];
                 else if (celCol) {
                     ctx.globalAlpha = celAlpha;
                     ctx.fillStyle = celCol;
@@ -123,7 +122,7 @@ function createGameRenderer(rc, game, host) {
         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);
+        const liftOffset = plugins.getCelCannonOffset?.(cel, game.cannonAway, t, host.h) ?? 0;
         if ('armed' === game.gameMode && !hasCel) {
             const riseP = Math.min(1, (t - game.armT) / ARM_RISE);
             const ease = 1 - (1 - riseP) * (1 - riseP);
@@ -152,14 +151,18 @@ function createGameRenderer(rc, game, host) {
     function drawCelOverlay(t) {
         const cel = game.cel;
         if (!cel) return;
-        drawCelebrationOverlay(rc, cel, t, host, game.fontLoaded);
+        plugins.drawCelebrationOverlay?.(rc, cel, t, host, game.fontLoaded);
+    }
+    function setRenderPlugins(p) {
+        plugins = p;
     }
     return {
         drawGameDots,
         drawCaughtEffects,
         drawCannon,
         drawBullets,
-        drawCelOverlay
+        drawCelOverlay,
+        setRenderPlugins
     };
 }
 export { createGameRenderer };

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

@@ -1,143 +1,84 @@
 const MASTER_VOLUME = 0.06;
-let ctx = null;
+let ac = null;
 let master = null;
-function ensureAudio() {
-    if ("u" < typeof window) return null;
-    if (!ctx) {
-        ctx = new AudioContext();
-        master = ctx.createGain();
+function ctx() {
+    if ("u" < typeof window || !window.AudioContext) return null;
+    if (!ac) {
+        ac = new window.AudioContext();
+        master = ac.createGain();
         master.gain.value = MASTER_VOLUME;
-        master.connect(ctx.destination);
+        master.connect(ac.destination);
     }
-    if ('suspended' === ctx.state) ctx.resume();
-    if (!master) return null;
-    return {
-        ac: ctx,
-        out: master
-    };
+    if ('suspended' === ac.state) ac.resume().catch(()=>{});
+    return ac;
 }
-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 tone(type, f0, f1, dur, vol, delay = 0) {
+    const a = ctx();
+    if (!a || !master) return;
+    const t0 = a.currentTime + delay;
+    const osc = a.createOscillator();
+    const gain = a.createGain();
+    osc.type = type;
+    osc.frequency.setValueAtTime(Math.max(1, f0), t0);
+    if (f1 !== f0) osc.frequency.exponentialRampToValueAtTime(Math.max(1, f1), t0 + dur);
+    gain.gain.setValueAtTime(vol, t0);
+    gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
+    osc.connect(gain);
+    gain.connect(master);
+    osc.start(t0);
+    osc.stop(t0 + dur + 0.02);
+}
+function hiss(dur, vol, f0, f1, delay = 0) {
+    const a = ctx();
+    if (!a || !master) return;
+    const t0 = a.currentTime + delay;
+    const n = Math.floor(a.sampleRate * dur);
+    const buf = a.createBuffer(1, n, a.sampleRate);
+    const data = buf.getChannelData(0);
+    for(let i = 0; i < n; i++)data[i] = 2 * Math.random() - 1;
+    const src = a.createBufferSource();
+    src.buffer = buf;
+    const filter = a.createBiquadFilter();
+    filter.type = 'bandpass';
+    filter.Q.value = 1.2;
+    filter.frequency.setValueAtTime(Math.max(1, f0), t0);
+    filter.frequency.exponentialRampToValueAtTime(Math.max(40, f1), t0 + dur);
+    const gain = a.createGain();
+    gain.gain.setValueAtTime(vol, t0);
+    gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
+    src.connect(filter);
+    filter.connect(gain);
+    gain.connect(master);
+    src.start(t0);
+    src.stop(t0 + dur + 0.02);
 }
 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);
+    tone('square', 980, 180, 0.08, 0.5);
 }
 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);
+    tone('square', 320, 70, 0.06, 0.45);
+    hiss(0.07, 0.3, 1400, 300);
 }
 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);
+    tone('square', 988, 988, 0.08, 0.4);
+    tone('square', 1319, 1319, 0.38, 0.4, 0.08);
 }
 function playPowerUp() {
-    const audio = ensureAudio();
-    if (!audio) return;
-    scheduleNotes(audio.ac, audio.out, [
+    const notes = [
         392,
         523,
         659,
         784
-    ], 0.06);
+    ];
+    for(let i = 0; i < notes.length; i++)tone('square', notes[i], notes[i], 0.07, 0.4, 0.06 * i);
 }
 function playFanfare() {
-    const audio = ensureAudio();
-    if (!audio) return;
-    const { ac, out } = audio;
-    const finalT = scheduleNotes(ac, out, [
+    const notes = [
         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);
+    ];
+    for(let i = 0; i < notes.length; i++)tone('square', notes[i], notes[i], 0.09, 0.4, 0.09 * i);
+    tone('square', 1046, 1046, 0.22, 0.4, 0.27);
 }
 export { playCoin, playFanfare, playPew, playPowerUp, playZap };

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

@@ -1,4 +1,4 @@
-import type { PointerEvent, ReactElement, RefObject } from 'react';
+import { type PointerEvent, type ReactElement, type RefObject } from 'react';
 import type { SweepEngine } from './index';
 interface UseGameParams {
     game: boolean;

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

@@ -1,7 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { GameHud } from "../GameHud.js";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { loadGamePlugins } from "./game-plugins.js";
 import { useGameKeyboard } from "./useGameKeyboard.js";
+const LazyGameHud = /*#__PURE__*/ lazy(()=>import("../GameHud.js").then((m)=>({
+            default: m.GameHud
+        })));
 const GATE_TARGET = 5;
 const useGame = ({ game, isHalftone, excludeCardSize, canvasRef })=>{
     const engineRef = useRef(null);
@@ -25,8 +28,19 @@ const useGame = ({ game, isHalftone, excludeCardSize, canvasRef })=>{
     const roundOver = armed && stats.done;
     const faced = stats.stopped + stats.escaped;
     const accuracy = faced > 0 ? Math.round(stats.stopped / faced * 100) : 100;
+    const soundOnRef = useRef(soundOn);
+    const isHalftoneRef = useRef(isHalftone);
+    useEffect(()=>{
+        soundOnRef.current = soundOn;
+        isHalftoneRef.current = isHalftone;
+    });
     const onEngineCreated = useCallback((engine)=>{
         engineRef.current = engine;
+        engine.setSound(gameRef.current && soundOnRef.current);
+        engine.setGameActive(gameRef.current && isHalftoneRef.current);
+        if (gameRef.current) loadGamePlugins().then((plugins)=>{
+            if (engineRef.current === engine) engine.setPlugins(plugins);
+        });
         engine.onStats((s)=>{
             setStats(s);
             if (gameRef.current && !s.done) setCatchKey((prev)=>prev + 1);
@@ -41,6 +55,19 @@ const useGame = ({ game, isHalftone, excludeCardSize, canvasRef })=>{
         game,
         isHalftone
     ]);
+    useEffect(()=>{
+        if (!game) return;
+        let cancelled = false;
+        loadGamePlugins().then((plugins)=>{
+            if (cancelled) return;
+            engineRef.current?.setPlugins(plugins);
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        game
+    ]);
     const exW = excludeCardSize?.width;
     const exH = excludeCardSize?.height;
     useEffect(()=>{
@@ -87,17 +114,20 @@ const useGame = ({ game, isHalftone, excludeCardSize, canvasRef })=>{
     const handleTryAgain = useCallback(()=>{
         engineRef.current?.startRound();
     }, []);
-    const hudElement = /*#__PURE__*/ jsx(GameHud, {
-        caught: caught,
-        armed: armed,
-        roundOver: roundOver,
-        stats: stats,
-        accuracy: accuracy,
-        faced: faced,
-        catchKey: catchKey,
-        gateTarget: GATE_TARGET,
-        onTryAgain: handleTryAgain,
-        soundOn: soundOn
+    const hudElement = /*#__PURE__*/ jsx(Suspense, {
+        fallback: null,
+        children: /*#__PURE__*/ jsx(LazyGameHud, {
+            caught: caught,
+            armed: armed,
+            roundOver: roundOver,
+            stats: stats,
+            accuracy: accuracy,
+            faced: faced,
+            catchKey: catchKey,
+            gateTarget: GATE_TARGET,
+            onTryAgain: handleTryAgain,
+            soundOn: soundOn
+        })
     });
     return {
         gameActive,

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

@@ -66,6 +66,18 @@ const useGameKeyboard = (engineRef, game, armed, roundOver, hasStartedRoundRef,
         engineRef,
         handleCommonKey
     ]);
+    useEffect(()=>{
+        if (!game || armed) return;
+        function onKeyDown(e) {
+            handleCommonKey(e);
+        }
+        window.addEventListener('keydown', onKeyDown);
+        return ()=>window.removeEventListener('keydown', onKeyDown);
+    }, [
+        game,
+        armed,
+        handleCommonKey
+    ]);
     useEffect(()=>{
         if (!game || !roundOver) return;
         function onKeyDown(e) {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.64.0",
-  "generatedAt": "2026-06-19T13:10:46.249Z",
+  "version": "0.64.1",
+  "generatedAt": "2026-06-19T16:10:22.219Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.64.1",
+  "version": "0.65.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",