pixi-fusion 2.0.1 → 2.2.0

package/package.json

@@ -5,22 +5,35 @@
         "url": "https://github.com/laverve/fusion/issues"
     },
     "dependencies": {
-        "@types/matter-js": "^0.19.8",
+        "@types/matter-js": "^0.20.2",
         "matter-js": "^0.20.0",
-        "pixi.js": "^8.8.0",
-        "pixi-viewport": "^6.0.3"
+        "pixi-viewport": "^6.0.3",
+        "pixi.js": "^8.14.0"
     },
     "peerDependencies": {
-        "react": "^19.0.0"
+        "react": "^19.x.x"
     },
     "devDependencies": {
-        "@laverve/eslint-utils": "^5.1.11",
-        "@laverve/test-utils": "^5.1.11",
-        "@types/react": "^19.0.10",
-        "husky": "9.1.7",
-        "lint-staged": "^15.4.3",
-        "ts-node": "^10.9.1",
-        "typescript": "^5.7.3"
+        "@eslint-community/eslint-plugin-eslint-comments": "^4.5.0",
+        "@eslint/js": "9.39.1",
+        "@types/react": "^19.2.2",
+        "eslint": "^9.39.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jest": "^29.0.1",
+        "eslint-plugin-jsonc": "^2.21.0",
+        "eslint-plugin-prettier": "^5.5.4",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "husky": "^9.1.7",
+        "jest": "^30.2.0",
+        "jest-watch-typeahead": "^3.0.1",
+        "lint-staged": "^16.2.6",
+        "react-app-polyfill": "^3.0.0",
+        "ts-jest": "^29.4.5",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.46.3"
     },
     "description": "This module offers a set of common components needed for playing games.",
     "keywords": [
@@ -50,14 +63,14 @@
         "url": "https://github.com/laverve/fusion.git"
     },
     "scripts": {
-        "lint": "eslint ./src/",
-        "lint:fix": "eslint ./src/ --fix",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
         "lint:staged": "lint-staged",
         "prepare": "husky",
         "test": "jest --passWithNoTests",
         "build": "tsc",
         "build:dev": "tsc -w"
     },
-    "version": "2.0.1",
+    "version": "2.2.0",
     "webpack": "./src/index.ts"
 }

package/src/assets-manager/AssetsManager.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
-import { Asset, AssetsManagerContext, AssetsManagerContextValue } from "./AssetsManager.context";
 import { Assets } from "pixi.js";
+import { Asset, AssetsManagerContext, AssetsManagerContextValue } from "./AssetsManager.context";
 
 export const AssetsManager: React.FC<PropsWithChildren> = ({ children }) => {
     const [isFetching, setIsFetching] = useState(false);
@@ -12,22 +12,19 @@ export const AssetsManager: React.FC<PropsWithChildren> = ({ children }) => {
         Assets.cache.reset();
     }, []);
 
-    const load = useCallback(
-        async (groupId: string, localAsset: Asset[]) => {
-            try {
-                Assets.addBundle(groupId, localAsset);
-                await Assets.loadBundle(groupId);
-                setIsFetched(true);
-            } catch (e) {
-                setIsError(true);
-                setIsFetched(false);
-                setError(e);
-            } finally {
-                setIsFetching(false);
-            }
-        },
-        [isFetching, isError, isFetched, error]
-    );
+    const load = useCallback(async (groupId: string, localAsset: Asset[]) => {
+        try {
+            Assets.addBundle(groupId, localAsset);
+            await Assets.loadBundle(groupId);
+            setIsFetched(true);
+        } catch (e) {
+            setIsError(true);
+            setIsFetched(false);
+            setError(e);
+        } finally {
+            setIsFetching(false);
+        }
+    }, []);
 
     const unload = useCallback((groupId: string) => {
         Assets.unloadBundle(groupId);

package/src/camera/Camera.tsx

@@ -32,19 +32,13 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
         [size, application]
     );
 
-    const addObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => [...oldThings, thing]);
-        },
-        [things]
-    );
+    const addObject = useCallback((thing: Container) => {
+        setThings((oldThings) => [...oldThings, thing]);
+    }, []);
 
-    const removeObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-        },
-        [application]
-    );
+    const removeObject = useCallback((thing: Container) => {
+        setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
+    }, []);
 
     const conextValue = useMemo<StageContextValue>(
         () => ({
@@ -58,7 +52,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
         if (viewport && clampZoom && application) {
             viewport.clampZoom(clampZoom);
         }
-    }, [clampZoom]);
+    }, [clampZoom, application, viewport]);
 
     useEffect(() => {
         if (viewport) {
@@ -69,7 +63,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
                 viewport.height = size.height;
             }
         }
-    }, [size, viewport?.uid, application]);
+    }, [size, viewport, application]);
 
     useEffect(() => {
         if (!application || !viewport) {
@@ -90,7 +84,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
             removeObjectFromStage(viewport);
             setIsReady(false);
         };
-    }, [viewport?.uid]);
+    }, [viewport, addObjectToStage, removeObjectFromStage]);
 
     useEffect(() => {
         if (!viewport || !isReady) {
@@ -122,26 +116,20 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
         }
     }, [isReady, viewport, ensureVisibleOptions]);
 
-    const followCallback = useCallback(
-        (container: Container) => {
-            setFollowContainer(container);
-        },
-        [followContainer]
-    );
+    const followCallback = useCallback((container: Container) => {
+        setFollowContainer(container);
+    }, []);
 
-    const ensureVisibleCallback = useCallback(
-        (options: EnsureVisibleOptions) => {
-            setEnsureVisibleOptions(options);
-        },
-        [followContainer]
-    );
+    const ensureVisibleCallback = useCallback((options: EnsureVisibleOptions) => {
+        setEnsureVisibleOptions(options);
+    }, []);
 
     const value = useMemo(() => {
         return {
             follow: followCallback,
             ensureVisible: ensureVisibleCallback
         };
-    }, [followCallback]);
+    }, [followCallback, ensureVisibleCallback]);
 
     return (
         <CameraContext.Provider value={value}>

package/src/game-context/Game.context.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, createContext, useMemo, useRef, useState } from "react";
+import React, { PropsWithChildren, createContext, useCallback, useMemo, useRef, useState } from "react";
 import { GameStatus, GameStatusChangeEvent } from "../types";
 
 export type GameContextValue = {
@@ -7,6 +7,7 @@ export type GameContextValue = {
     readonly pause: () => void;
     readonly stop: () => void;
     readonly timeout: number;
+    readonly gameId: number;
     readonly status: GameStatus;
     readonly startTime: number | null;
     readonly pauseTime: number;
@@ -27,6 +28,7 @@ export const GameContext = createContext<GameContextValue>({
     start: () => {},
     stop: () => {},
     timeout: 0,
+    gameId: 0,
     status: GameStatus.READY,
     startTime: null,
     pauseTime: 0,
@@ -45,6 +47,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
 }) => {
     const timerRef = useRef<NodeJS.Timeout>(null);
     const timeout = Math.max(0, inputTimeout);
+    const [gameId, setGemaId] = useState(0);
 
     const [status, setStatus] = useState(GameStatus.READY);
     const [startTime, setStartTime] = useState<number | null>(null);
@@ -52,7 +55,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
     const [pauseTime, setPauseTime] = useState<number>(0);
     const [pausedAtTime, setPausedAtTime] = useState<number | null>(null);
 
-    const onTimedOut = () => {
+    const onTimedOut = useCallback(() => {
         const newEndTime = +new Date();
         const newStatus = GameStatus.TIMEDOUT;
 
@@ -66,9 +69,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime: null,
             pauseTime
         });
-    };
+    }, [events, pauseTime, startTime]);
 
-    const start = () => {
+    const start = useCallback(() => {
         const newStartTime = startTime || +new Date();
         const newStatus = GameStatus.IN_PROGRESS;
         const newEndTime = null;
@@ -93,9 +96,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime: null,
             pauseTime: newPauseTime
         });
-    };
+    }, [events, onTimedOut, pauseTime, pausedAtTime, startTime, timeout]);
 
-    const reset = () => {
+    const reset = useCallback(() => {
         const newStartTime = null;
         const newStatus = GameStatus.READY;
         const newEndTime = null;
@@ -107,6 +110,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
         setEndTime(newEndTime);
         setPauseTime(newPauseTime);
         setPausedAtTime(newPausedAtTime);
+        setGemaId((current) => current++);
 
         if (timerRef.current) {
             clearTimeout(timerRef.current);
@@ -119,9 +123,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime: newPausedAtTime,
             pauseTime: newPauseTime
         });
-    };
+    }, [events]);
 
-    const stop = () => {
+    const stop = useCallback(() => {
         const newStatus = GameStatus.COMPLETED;
         const newEndTime = +new Date();
 
@@ -138,9 +142,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime,
             pauseTime
         });
-    };
+    }, [events, pauseTime, pausedAtTime, startTime]);
 
-    const pause = () => {
+    const pause = useCallback(() => {
         const newStatus = GameStatus.PAUSED;
         const newPausedAtTime = +new Date();
 
@@ -157,7 +161,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             status: newStatus,
             pauseTime
         });
-    };
+    }, [events, pauseTime, startTime]);
 
     const contextValue = useMemo(
         () => ({
@@ -169,9 +173,10 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             stop,
             start,
             reset,
-            pause
+            pause,
+            gameId
         }),
-        [timeout, status, startTime, endTime, pauseTime, pausedAtTime]
+        [timeout, status, startTime, endTime, pauseTime, pause, reset, start, stop, gameId]
     );
 
     return <GameContext.Provider value={contextValue}>{children}</GameContext.Provider>;

package/src/game-objects/usePhysicalObject.ts

@@ -16,7 +16,7 @@ export const usePhysicalObject = ({ physicalObject }: { physicalObject: Nullable
         return () => {
             removeBody(physicalObject);
         };
-    }, [physicalObject?.id]);
+    }, [physicalObject, addBody, removeBody]);
 
     return {
         physicalObject

package/src/game-objects/usePhysicalObjectFromConfig.ts

@@ -1,8 +1,8 @@
 import { Body } from "matter-js";
 import { useMemo } from "react";
+import { Nullable } from "../types";
 import { GameObjectPhysicalObjectConfig } from "./GameObjectPhysicalObjectConfig";
 import { usePhysicalObject } from "./usePhysicalObject";
-import { Nullable } from "../types";
 
 export const usePhysicalObjectFromConfig = <PhysicalObjectType extends Nullable<Body> = Body>({
     position = { x: 0, y: 0 },
@@ -14,7 +14,7 @@ export const usePhysicalObjectFromConfig = <PhysicalObjectType extends Nullable<
         }
 
         return null;
-    }, []) as PhysicalObjectType;
+    }, [physicalObjectConfig, position]) as PhysicalObjectType;
 
     usePhysicalObject({ physicalObject });
 

package/src/game-objects/useWalls.ts

@@ -81,7 +81,7 @@ export const useWalls = ({ left = true, right = true, top = true, bottom = true
         Composite.add(walls, parts);
 
         return walls;
-    }, [width, height]);
+    }, [width, height, bottom, center.x, center.y, left, right, top]);
 
     useEffect(() => {
         addBody(body);
@@ -89,5 +89,5 @@ export const useWalls = ({ left = true, right = true, top = true, bottom = true
         return () => {
             removeBody(body);
         };
-    }, [body.id]);
+    }, [body, addBody, removeBody]);
 };

package/src/hooks/useAnimatedSprite.ts

@@ -33,7 +33,7 @@ export const useAnimatedSprite = ({
             return sheet;
         }
         return null;
-    }, [spritesheetJSON]);
+    }, [spritesheetJSON, isFetched, textures]);
 
     const sprite = useMemo(() => {
         if (spritesheet?.animations?.[animation]) {
@@ -41,7 +41,7 @@ export const useAnimatedSprite = ({
         }
 
         return null;
-    }, [texture, spritesheetJSON, animation]);
+    }, [animation, spritesheet?.animations]);
 
     useObject({ object: sprite, ...options });
 
@@ -49,7 +49,7 @@ export const useAnimatedSprite = ({
         if (sprite) {
             sprite.animationSpeed = animationSpeed;
         }
-    }, [animationSpeed, sprite?.uid]);
+    }, [animationSpeed, sprite]);
 
     useEffect(() => {
         if (sprite) {
@@ -59,7 +59,7 @@ export const useAnimatedSprite = ({
                 sprite.stop();
             }
         }
-    }, [isPlaying, sprite?.uid]);
+    }, [isPlaying, sprite]);
 
     return sprite;
 };

package/src/hooks/useCollisionDetection.ts

@@ -1,6 +1,6 @@
 import { Container } from "pixi.js";
-import { useTickerCallback } from "./useTickerCallback";
 import { useCallback } from "react";
+import { useTickerCallback } from "./useTickerCallback";
 
 type UseCollisionDetectionOptions = {
     objectA?: Container | null;

package/src/hooks/useObject.ts

@@ -1,6 +1,6 @@
 import { Sprite, SpriteOptions, TilingSprite } from "pixi.js";
-import { useLayerContext } from "./useLayerContext";
 import { useEffect } from "react";
+import { useLayerContext } from "./useLayerContext";
 
 type UseObjectOptions = Omit<SpriteOptions, "texture"> & {
     object: Sprite | TilingSprite | null;
@@ -29,53 +29,53 @@ export const useObject = ({
         return () => {
             removeObject(object);
         };
-    }, [object?.uid]);
+    }, [object, addObject, removeObject]);
 
     useEffect(() => {
         if (anchor !== undefined && object) {
             object.anchor = anchor;
         }
-    }, [anchor, object?.uid]);
+    }, [anchor, object]);
 
     useEffect(() => {
         if (angle !== undefined && object) {
             object.angle = angle;
         }
-    }, [angle, object?.uid]);
+    }, [angle, object]);
 
     useEffect(() => {
         if (object && position !== undefined) {
             object.position = position;
         }
-    }, [position, object?.uid]);
+    }, [position, object]);
 
     useEffect(() => {
         if (object && skew !== undefined) {
             object.skew = skew;
         }
-    }, [skew, object?.uid]);
+    }, [skew, object]);
 
     useEffect(() => {
         if (object && alpha !== undefined) {
             object.alpha = alpha;
         }
-    }, [alpha, object?.uid]);
+    }, [alpha, object]);
 
     useEffect(() => {
         if (object && scale !== undefined) {
             object.scale = scale;
         }
-    }, [scale, object?.uid]);
+    }, [scale, object]);
 
     useEffect(() => {
         if (object) {
             object.visible = visible;
         }
-    }, [visible, object?.uid]);
+    }, [visible, object]);
 
     useEffect(() => {
         if (object && width !== undefined) {
             object.width = width;
         }
-    }, [width, object?.uid]);
+    }, [width, object]);
 };

package/src/hooks/useSprite.ts

@@ -25,7 +25,7 @@ export const useSprite = ({ texture = "", ...options }: UseSpriteOptions) => {
         }
 
         return new Sprite({});
-    }, [texture, frames, isFetched]);
+    }, [texture, isFetched]);
 
     useObject({ object: sprite, ...options });
 

package/src/hooks/useTexture.ts

@@ -8,7 +8,7 @@ export const useTextures = ({ keys = [] }: { keys?: string[] }) => {
 
     const textures = useMemo(() => {
         return isFetched ? keys.map((key) => getAsset(key) as Texture) : [];
-    }, [keys, isFetched, isFetching, isError]);
+    }, [keys, isFetched, getAsset]);
 
     return useMemo(
         () => ({

package/src/hooks/useTilingSprite.ts

@@ -25,7 +25,7 @@ export const useTilingSprite = ({ texture = "", tilePosition, ...options }: UseT
         }
 
         return new TilingSprite({});
-    }, [texture, frames]);
+    }, [texture, isFetched]);
 
     useObject({ object: sprite, ...options });
 
@@ -33,7 +33,7 @@ export const useTilingSprite = ({ texture = "", tilePosition, ...options }: UseT
         if (tilePosition && sprite) {
             sprite.tilePosition = tilePosition;
         }
-    }, [tilePosition, sprite?.uid]);
+    }, [tilePosition, sprite]);
 
     return sprite;
 };

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./game-context";
-export * from "./assets-manager";
 export * from "./world";
 export * from "./camera";
 export * from "./layer";

package/src/layer/Layer.tsx

@@ -29,20 +29,20 @@ export const Layer: React.FC<PropsWithChildren & LayerOptions> = ({ options, chi
         return () => {
             removeObjectFromStaeg(container);
         };
-    }, [container?.uid]);
+    }, [container, addObjectIntoParent, addObjectIntoStage, removeObjectFromParent, removeObjectFromStaeg]);
 
     const addObject = useCallback(
         (thing: Container) => {
             container.addChild(thing);
         },
-        [container?.uid]
+        [container]
     );
 
     const removeObject = useCallback(
         (thing: Container) => {
             container.removeChild(thing);
         },
-        [container?.uid]
+        [container]
     );
 
     const conextValue = useMemo<LayerContextValue>(
@@ -50,7 +50,7 @@ export const Layer: React.FC<PropsWithChildren & LayerOptions> = ({ options, chi
             addObject,
             removeObject
         }),
-        [container?.uid]
+        [addObject, removeObject]
     );
 
     return <LayerContext.Provider value={conextValue}>{children}</LayerContext.Provider>;

package/src/physics/MatterPhysics.context.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, createContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { PropsWithChildren, createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Matter, { Engine, Runner, World } from "matter-js";
 import { MatterPhysicsConfig, MatterPhysics } from "./types";
 
@@ -47,31 +47,37 @@ export const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPh
 
     const runner = useMemo(() => Runner.create(), []);
 
-    const addBody = (body: Matter.Body | Matter.Composite) => {
-        if (engine?.world) {
-            World.add(engine?.world, body);
-        }
-    };
+    const addBody = useCallback(
+        (body: Matter.Body | Matter.Composite) => {
+            if (engine?.world) {
+                World.add(engine?.world, body);
+            }
+        },
+        [engine]
+    );
 
-    const removeBody = (body: Matter.Body | Matter.Composite) => {
-        if (engine?.world) {
-            World.remove(engine?.world, body);
-        }
-    };
+    const removeBody = useCallback(
+        (body: Matter.Body | Matter.Composite) => {
+            if (engine?.world) {
+                World.remove(engine?.world, body);
+            }
+        },
+        [engine]
+    );
 
-    const run = () => {
+    const run = useCallback(() => {
         if (!isRunningRef.current) {
             Runner.run(runner, engine);
             isRunningRef.current = true;
         }
-    };
+    }, [runner, engine]);
 
-    const stop = () => {
+    const stop = useCallback(() => {
         if (isRunningRef.current) {
             Runner.stop(runner);
             isRunningRef.current = false;
         }
-    };
+    }, [runner]);
 
     const conextValue = useMemo(
         () => ({
@@ -83,7 +89,7 @@ export const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPh
             addBody,
             removeBody
         }),
-        [runner, engine, localConfig]
+        [runner, engine, localConfig, addBody, removeBody, run, stop]
     );
 
     useEffect(() => {
@@ -94,7 +100,7 @@ export const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPh
         return () => {
             stop();
         };
-    }, [isRunning]);
+    }, [isRunning, run, stop]);
 
     return <MatterPhysicsContext.Provider value={conextValue}>{children}</MatterPhysicsContext.Provider>;
 };

package/src/physics/useCollisionEventHandler.ts

@@ -22,5 +22,5 @@ export const useCollisionEventHandler = ({ isEnabled = true, event, callback }:
         return () => {
             Events.off(engine, event, callback);
         };
-    }, [isEnabled, callback, event]);
+    }, [isEnabled, callback, event, engine]);
 };

package/src/physics/usePhysicsEngineEventHandler.ts

@@ -26,5 +26,5 @@ export const usePhysicsEngineEventHandler = ({
         return () => {
             Events.off(engine, event, callback);
         };
-    }, [isEnabled, event, callback]);
+    }, [isEnabled, event, callback, engine]);
 };

package/src/physics/usePhysicsTickerCallback.ts

@@ -21,5 +21,5 @@ export const usePhysicsTickerCallback = ({ isEnabled = true, callback }: UsePhys
         return () => {
             Events.off(runner, "tick", callback);
         };
-    }, [isEnabled, callback]);
+    }, [isEnabled, callback, runner]);
 };