@wallarm-org/design-system 0.58.1 → 0.59.0

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

@@ -0,0 +1,112 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GameHud } from "../GameHud.js";
+import { useGameKeyboard } from "./useGameKeyboard.js";
+const GATE_TARGET = 5;
+const useGame = ({ game, isHalftone, excludeCardSize, canvasRef })=>{
+    const engineRef = useRef(null);
+    const gameRef = useRef(game);
+    const hasStartedRoundRef = useRef(false);
+    const [stats, setStats] = useState({
+        kills: 0,
+        stopped: 0,
+        escaped: 0,
+        spawned: 0,
+        done: false
+    });
+    const [catchKey, setCatchKey] = useState(0);
+    const [soundOn, setSoundOn] = useState(true);
+    useEffect(()=>{
+        gameRef.current = game;
+    });
+    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 onEngineCreated = useCallback((engine)=>{
+        engineRef.current = engine;
+        engine.onStats((s)=>{
+            setStats(s);
+            if (gameRef.current && !s.done) setCatchKey((prev)=>prev + 1);
+        });
+    }, []);
+    const onEngineDestroyed = useCallback(()=>{
+        engineRef.current = null;
+    }, []);
+    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
+    ]);
+    const soundCapable = game;
+    useEffect(()=>{
+        engineRef.current?.setSound(soundCapable && soundOn);
+    }, [
+        soundCapable,
+        soundOn
+    ]);
+    const toggleSound = useCallback(()=>{
+        setSoundOn((prev)=>!prev);
+    }, []);
+    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, toggleSound);
+    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,
+        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
+    });
+    return {
+        gameActive,
+        onPointerDown: gameActive ? onPointerDown : void 0,
+        hudElement: gameActive ? hudElement : null,
+        onEngineCreated,
+        onEngineDestroyed,
+        soundOn,
+        toggleSound
+    };
+};
+export { useGame };

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

@@ -1,3 +1,3 @@
 import type { MutableRefObject, RefObject } from 'react';
 import type { SweepEngine } from './index';
-export declare const useGameKeyboard: (engineRef: RefObject<SweepEngine | null>, game: boolean, armed: boolean, roundOver: boolean, hasStartedRoundRef: MutableRefObject<boolean>) => void;
+export declare const useGameKeyboard: (engineRef: RefObject<SweepEngine | null>, game: boolean, armed: boolean, roundOver: boolean, hasStartedRoundRef: MutableRefObject<boolean>, toggleSound: () => void) => void;

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

@@ -1,5 +1,22 @@
-import { useEffect } from "react";
-const useGameKeyboard = (engineRef, game, armed, roundOver, hasStartedRoundRef)=>{
+import { useCallback, useEffect } from "react";
+const useGameKeyboard = (engineRef, game, armed, roundOver, hasStartedRoundRef, toggleSound)=>{
+    const handleCommonKey = useCallback((e)=>{
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            engineRef.current?.exitGame();
+            hasStartedRoundRef.current = false;
+            return true;
+        }
+        if ('m' === e.key || 'M' === e.key) {
+            toggleSound();
+            return true;
+        }
+        return false;
+    }, [
+        engineRef,
+        hasStartedRoundRef,
+        toggleSound
+    ]);
     useEffect(()=>{
         if (!game || !armed || roundOver) return;
         const held = {
@@ -11,6 +28,7 @@ const useGameKeyboard = (engineRef, game, armed, roundOver, hasStartedRoundRef)=
             engineRef.current?.setCannonDir(dir);
         }
         function onKeyDown(e) {
+            if (handleCommonKey(e)) return;
             if ('ArrowLeft' === e.key) {
                 e.preventDefault();
                 held.left = true;
@@ -22,10 +40,6 @@ const useGameKeyboard = (engineRef, game, armed, roundOver, hasStartedRoundRef)=
             } else if (' ' === e.key || 'Spacebar' === e.key) {
                 e.preventDefault();
                 if (!e.repeat) engineRef.current?.setFiring(true);
-            } else if ('Escape' === e.key) {
-                e.preventDefault();
-                engineRef.current?.exitGame();
-                hasStartedRoundRef.current = false;
             }
         }
         function onKeyUp(e) {
@@ -50,24 +64,19 @@ const useGameKeyboard = (engineRef, game, armed, roundOver, hasStartedRoundRef)=
         armed,
         roundOver,
         engineRef,
-        hasStartedRoundRef
+        handleCommonKey
     ]);
     useEffect(()=>{
         if (!game || !roundOver) return;
         function onKeyDown(e) {
-            if ('Escape' === e.key) {
-                e.preventDefault();
-                engineRef.current?.exitGame();
-                hasStartedRoundRef.current = false;
-            }
+            handleCommonKey(e);
         }
         window.addEventListener('keydown', onKeyDown);
         return ()=>window.removeEventListener('keydown', onKeyDown);
     }, [
         game,
         roundOver,
-        engineRef,
-        hasStartedRoundRef
+        handleCommonKey
     ]);
 };
 export { useGameKeyboard };

package/dist/components/Flex/Flex.d.ts

@@ -7,7 +7,7 @@ declare const flexVariants: (props?: ({
     align?: "center" | "end" | "baseline" | "start" | "stretch" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "reverse" | "nowrap" | "wrap" | null | undefined;
-    gap?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 12 | 20 | 32 | 40 | 24 | 56 | 48 | 28 | 36 | 64 | 96 | 112 | 128 | 144 | null | undefined;
     grow?: boolean | null | undefined;
     shrink?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/components/SegmentedControl/SegmentedControlSeparator.d.ts

@@ -2,7 +2,7 @@ import type { ComponentRef, FC, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { Separator, type SeparatorProps } from '../Separator';
 declare const segmentedControlSeparatorVariants: (props?: ({
-    mx?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    mx?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 12 | 20 | 32 | 40 | 24 | 56 | 48 | 28 | 36 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SegmentedControlSeparatorVariants = VariantProps<typeof segmentedControlSeparatorVariants>;
 /**

package/dist/components/Separator/Separator.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
-    spacing?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    spacing?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 12 | 20 | 32 | 40 | 24 | 56 | 48 | 28 | 36 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SeparatorProps = ComponentPropsWithoutRef<'div'> & VariantProps<typeof separatorVariants> & TestableProps & {
     ref?: Ref<HTMLDivElement>;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const skeletonVariants: (props?: ({
     transparent?: boolean | null | undefined;
-    rounded?: 2 | 4 | 6 | "none" | 8 | 16 | 24 | 12 | "full" | 32 | null | undefined;
+    rounded?: 2 | 4 | 6 | "none" | 8 | 16 | 12 | 32 | 24 | "full" | null | undefined;
     withDimensions?: boolean | null | undefined;
     withChildren?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ declare const stackVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
     flexGrow?: boolean | null | undefined;
     flexShrink?: boolean | null | undefined;
-    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 12 | 40 | 48 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 12 | 20 | 32 | 40 | 24 | 56 | 48 | 28 | 36 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StackNativeProps = HTMLAttributes<HTMLDivElement>;
 type StackVariantProps = VariantProps<typeof stackVariants>;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.58.0",
-  "generatedAt": "2026-06-12T16:11:56.418Z",
+  "version": "0.58.1",
+  "generatedAt": "2026-06-13T22:37:33.156Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

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