@wallarm-org/design-system 0.58.1 → 0.59.0

package/dist/components/AnimatedBackground/AnimatedBackground.js

@@ -1,9 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { cn } from "../../utils/cn.js";
-import { GameHud } from "./GameHud.js";
-import { createSweepEngine, resolveOptions, useGameKeyboard } from "./module/index.js";
-const GATE_TARGET = 5;
+import { createSweepEngine, resolveOptions, useGame } from "./module/index.js";
 const AnimatedBackground = (props)=>{
     const { ref, texture, paused, game = false, excludeCardSize, className, children, ...rest } = props;
     const canvasRef = useRef(null);
@@ -12,37 +10,23 @@ const AnimatedBackground = (props)=>{
     const options = resolveOptions(props);
     const optionsRef = useRef(options);
     const pausedRef = useRef(paused);
-    const gameRef = useRef(game);
     useEffect(()=>{
         optionsRef.current = options;
         pausedRef.current = paused;
-        gameRef.current = game;
-    }, []);
-    const [stats, setStats] = useState({
-        kills: 0,
-        stopped: 0,
-        escaped: 0,
-        spawned: 0,
-        done: false
     });
-    const [catchKey, setCatchKey] = useState(0);
     const isHalftone = (texture ?? 'halftone') === 'halftone';
-    const gameActive = game && isHalftone;
-    const caught = stats.kills;
-    const armed = game && caught >= GATE_TARGET;
-    const roundOver = armed && stats.done;
-    const faced = stats.stopped + stats.escaped;
-    const accuracy = faced > 0 ? Math.round(stats.stopped / faced * 100) : 100;
-    const hasStartedRoundRef = useRef(false);
+    const { gameActive, onPointerDown, hudElement, onEngineCreated, onEngineDestroyed } = useGame({
+        game,
+        isHalftone,
+        excludeCardSize,
+        canvasRef
+    });
     useEffect(()=>{
         const canvas = canvasRef.current;
         if (!canvas) return;
         const engine = createSweepEngine(canvas, optionsRef.current);
         engineRef.current = engine;
-        engine.onStats((s)=>{
-            setStats(s);
-            if (gameRef.current && !s.done) setCatchKey((prev)=>prev + 1);
-        });
+        onEngineCreated(engine);
         const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
         reducedMotionRef.current = reduced;
         const apply = ()=>{
@@ -75,8 +59,12 @@ const AnimatedBackground = (props)=>{
             cancelAnimationFrame(frame);
             engine.stop();
             engineRef.current = null;
+            onEngineDestroyed();
         };
-    }, []);
+    }, [
+        onEngineCreated,
+        onEngineDestroyed
+    ]);
     const syncKey = `${JSON.stringify(options)}|${paused}`;
     useEffect(()=>{
         const engine = engineRef.current;
@@ -90,58 +78,6 @@ const AnimatedBackground = (props)=>{
     }, [
         syncKey
     ]);
-    useEffect(()=>{
-        engineRef.current?.setGameActive(game && isHalftone);
-    }, [
-        game,
-        isHalftone
-    ]);
-    const exW = excludeCardSize?.width;
-    const exH = excludeCardSize?.height;
-    useEffect(()=>{
-        engineRef.current?.setExclusion(null != exW && null != exH ? {
-            width: exW,
-            height: exH
-        } : null);
-    }, [
-        exW,
-        exH
-    ]);
-    useEffect(()=>{
-        if (!game || !armed) return;
-        if (hasStartedRoundRef.current) return void engineRef.current?.setMode('armed');
-        hasStartedRoundRef.current = true;
-        engineRef.current?.startRound();
-    }, [
-        game,
-        armed
-    ]);
-    useGameKeyboard(engineRef, game, armed, roundOver, hasStartedRoundRef);
-    const onPointerDown = useCallback((e)=>{
-        if (!game) return;
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const rect = canvas.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        engineRef.current?.catchAt(x, y);
-    }, [
-        game
-    ]);
-    const handleTryAgain = useCallback(()=>{
-        engineRef.current?.startRound();
-    }, []);
-    const gameHud = gameActive && /*#__PURE__*/ jsx(GameHud, {
-        caught: caught,
-        armed: armed,
-        roundOver: roundOver,
-        stats: stats,
-        accuracy: accuracy,
-        faced: faced,
-        catchKey: catchKey,
-        gateTarget: GATE_TARGET,
-        onTryAgain: handleTryAgain
-    });
     if (null == children) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("canvas", {
@@ -154,9 +90,9 @@ const AnimatedBackground = (props)=>{
                 },
                 "aria-hidden": "true",
                 className: cn('h-full w-full pointer-events-none', gameActive && 'pointer-events-auto', className),
-                onPointerDown: gameActive ? onPointerDown : void 0
+                onPointerDown: onPointerDown
             }),
-            gameHud
+            hudElement
         ]
     });
     return /*#__PURE__*/ jsxs("div", {
@@ -169,9 +105,9 @@ const AnimatedBackground = (props)=>{
                 ref: canvasRef,
                 "aria-hidden": "true",
                 className: cn('absolute inset-0 h-full w-full pointer-events-none', gameActive && 'pointer-events-auto'),
-                onPointerDown: gameActive ? onPointerDown : void 0
+                onPointerDown: onPointerDown
             }),
-            gameHud,
+            hudElement,
             /*#__PURE__*/ jsx("div", {
                 className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
                 children: /*#__PURE__*/ jsx("div", {

package/dist/components/AnimatedBackground/GameHud.d.ts

@@ -10,6 +10,7 @@ interface GameHudProps {
     catchKey: number;
     gateTarget: number;
     onTryAgain: () => void;
+    soundOn: boolean;
 }
 export declare const GameHud: FC<GameHudProps>;
 export {};

package/dist/components/AnimatedBackground/GameHud.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, gateTarget, onTryAgain })=>{
+const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, gateTarget, onTryAgain, soundOn })=>{
     const showCounter = caught > 0;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -99,7 +99,7 @@ const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, g
                     }),
                     armed && !roundOver && /*#__PURE__*/ jsx("span", {
                         className: "text-2xs leading-sm text-text-secondary",
-                        children: '← → move · space fire · esc to exit'
+                        children: `\u2190 \u2192 move \u00B7 space fire \u00B7 esc exit \u00B7 m sound ${soundOn ? 'off' : 'on'}`
                     })
                 ]
             }),

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

@@ -0,0 +1,5 @@
+import type { CelState } from './celebration';
+import type { GameEngineHost } from './game-logic';
+import type { GameRenderCtx } from './game-renderer';
+export declare function drawCelebrationOverlay(rc: GameRenderCtx, cel: CelState, t: number, host: GameEngineHost, fontLoaded: boolean): void;
+export declare function getCelCannonOffset(cel: CelState | null, cannonAway: boolean, t: number, h: number): number;

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

@@ -0,0 +1,60 @@
+import { cannonLiftOffset, computeHeadlineY, headlineAlpha, headlineRise } from "./celebration.js";
+import { easeOut } from "./math.js";
+function drawCelebrationOverlay(rc, cel, t, host, fontLoaded) {
+    const { ctx } = rc;
+    const { w, h, gridSp } = host;
+    for (const rocket of cel.rockets){
+        const re = t - rocket.t0;
+        if (re < 0 || rocket.burst) continue;
+        if (re >= rocket.dur) continue;
+        const p = easeOut(re / rocket.dur);
+        const rx = snap(rocket.sx + (rocket.tx - rocket.sx) * p, gridSp);
+        const ry = snap(rocket.sy + (rocket.ty - rocket.sy) * p, gridSp);
+        ctx.fillStyle = rc.dotPalette[rc.dotPalette.length - 1];
+        ctx.fillRect(rx - 4, ry - 4, 8, 8);
+    }
+    for (const p of cel.particles){
+        const alpha = Math.ceil((1 - p.age / p.life) * 4) / 4;
+        if (alpha <= 0) continue;
+        const sx = snap(p.x, gridSp);
+        const sy = snap(p.y, gridSp);
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = p.color;
+        ctx.fillRect(sx - p.half, sy - p.half, 2 * p.half, 2 * p.half);
+    }
+    ctx.globalAlpha = 1;
+    if (cel.headline && fontLoaded) {
+        const alpha = headlineAlpha(cel, t);
+        if (alpha > 0) {
+            const baseY = computeHeadlineY(h, host.exclusionBox);
+            const rise = headlineRise(cel, t);
+            const y = baseY + rise;
+            ctx.save();
+            ctx.globalAlpha = alpha;
+            ctx.font = '13px "Press Start 2P"';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = `rgba(0,0,0,${(0.3 * alpha).toFixed(3)})`;
+            ctx.fillText(cel.headline, w / 2 + 1, y + 1);
+            ctx.fillStyle = rc.caughtPalette[rc.caughtPalette.length - 1];
+            ctx.fillText(cel.headline, w / 2, y);
+            if (cel.subline) {
+                ctx.font = '11px "Geist Mono", monospace';
+                ctx.globalAlpha = 0.85 * alpha;
+                ctx.fillStyle = rc.dotPalette[rc.dotPalette.length - 1];
+                ctx.fillText(cel.subline, w / 2, y + 24);
+            }
+            ctx.restore();
+        }
+    }
+}
+function getCelCannonOffset(cel, cannonAway, t, h) {
+    if (cannonAway) return h + 120;
+    if (!cel || cel.tier < 3) return 0;
+    return cannonLiftOffset(cel, t, h);
+}
+function snap(v, gridSp) {
+    if (gridSp <= 0) return v;
+    return gridSp / 2 + Math.round((v - gridSp / 2) / gridSp) * gridSp;
+}
+export { drawCelebrationOverlay, getCelCannonOffset };

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

@@ -0,0 +1,102 @@
+import type { GameEngineHost } from './game-logic';
+export declare const CEL_DUR: readonly [0, 2.6, 3.8, 4, 5.2];
+export declare const CEL_MAX_PARTICLES = 900;
+export declare const CEL_LIFT_AT = 0.5;
+export declare const CEL_LIFT_DUR = 1.2;
+export declare const CEL_PAL: readonly ["rgb(255,60,60)", "rgb(255,180,40)", "rgb(60,220,80)", "rgb(60,200,220)", "rgb(80,100,255)", "rgb(180,80,220)", "rgb(255,100,180)"];
+/** Sentinel value for celDotEffect — means "use caught-green palette". */
+export declare const CEL_CAUGHT_COL: "__caught__";
+export interface CelParticle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    age: number;
+    life: number;
+    half: number;
+    color: string;
+    conf: boolean;
+    drag: number;
+    gravity: number;
+}
+export interface CelRocket {
+    t0: number;
+    sx: number;
+    sy: number;
+    tx: number;
+    ty: number;
+    dur: number;
+    burst: boolean;
+}
+export interface CelPulse {
+    t0: number;
+    x: number;
+    y: number;
+    dur: number;
+}
+export interface CelState {
+    t0: number;
+    tier: number;
+    score: number;
+    settled: boolean;
+    particles: CelParticle[];
+    rockets: CelRocket[];
+    pulses: CelPulse[];
+    headline: string;
+    subline: string;
+    scoreCells: Map<number, true>;
+    scoreColCount: number;
+    liftStarted: boolean;
+    confettiSpawned2: number;
+    confettiVolley1: boolean;
+    confettiVolley2: boolean;
+    burstSpawned: boolean;
+    rainAccum: number;
+}
+export declare function tierForScore(score: number): number;
+export declare function buildScoreCells(score: number, gridCols: number, gridSp: number, w: number, h: number, exclusionBox: {
+    width: number;
+    height: number;
+} | null): {
+    cells: Map<number, true>;
+    colCount: number;
+};
+export declare function startCelebration(score: number, t: number, host: GameEngineHost): CelState | null;
+export declare function stepCelebration(cel: CelState, t: number, dt: number, host: GameEngineHost, caughtColor: string, dotColor: string): void;
+export declare function adjustCelebrationTimeMarkers(cel: CelState, skip: number): void;
+export interface CelDotParams {
+    elapsed: number;
+    tier: number;
+    waveRadius: number;
+    waveStrength: number;
+    waveOriginX: number;
+    waveOriginY: number;
+    waveSigmaSq2: number;
+    blastRadius: number;
+    blastStrength: number;
+    blastOriginX: number;
+    blastOriginY: number;
+    blastSigmaSq2: number;
+    sweepX: number;
+    sweepActive: boolean;
+    rainbowQ: number;
+    rainbowActive: boolean;
+    t: number;
+    cel: CelState;
+}
+export declare function computeCelFrameParams(cel: CelState, t: number, w: number, h: number): CelDotParams;
+/**
+ * Per-dot celebration effect — returns boost/color modifiers or null.
+ * Called inside the hot dot loop only when cel !== null.
+ */
+export declare function celDotEffect(dotIndex: number, dotX: number, dotY: number, p: CelDotParams, w: number, h: number): {
+    celBoost: number;
+    celCol: string | null;
+} | null;
+export declare function computeHeadlineY(h: number, exclusionBox: {
+    width: number;
+    height: number;
+} | null): number;
+export declare function headlineAlpha(cel: CelState, t: number): number;
+export declare function headlineRise(cel: CelState, t: number): number;
+export declare function cannonLiftOffset(cel: CelState, t: number, h: number): number;