pixi-fusion 2.0.1 → 2.2.0

package/dist/src/assets-manager/AssetsManager.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { AssetsManagerContext } from "./AssetsManager.context";
 import { Assets } from "pixi.js";
+import { AssetsManagerContext } from "./AssetsManager.context";
 export const AssetsManager = ({ children }) => {
     const [isFetching, setIsFetching] = useState(false);
     const [isFetched, setIsFetched] = useState(false);
@@ -23,7 +23,7 @@ export const AssetsManager = ({ children }) => {
         finally {
             setIsFetching(false);
         }
-    }, [isFetching, isError, isFetched, error]);
+    }, []);
     const unload = useCallback((groupId) => {
         Assets.unloadBundle(groupId);
     }, []);

package/dist/src/camera/Camera.js

@@ -22,10 +22,10 @@ export const Camera = ({ children, clampZoom }) => {
         : null, [size, application]);
     const addObject = useCallback((thing) => {
         setThings((oldThings) => [...oldThings, thing]);
-    }, [things]);
+    }, []);
     const removeObject = useCallback((thing) => {
         setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-    }, [application]);
+    }, []);
     const conextValue = useMemo(() => ({
         addObject,
         removeObject
@@ -34,7 +34,7 @@ export const Camera = ({ children, clampZoom }) => {
         if (viewport && clampZoom && application) {
             viewport.clampZoom(clampZoom);
         }
-    }, [clampZoom]);
+    }, [clampZoom, application, viewport]);
     useEffect(() => {
         if (viewport) {
             if (size.width) {
@@ -44,7 +44,7 @@ export const Camera = ({ children, clampZoom }) => {
                 viewport.height = size.height;
             }
         }
-    }, [size, viewport?.uid, application]);
+    }, [size, viewport, application]);
     useEffect(() => {
         if (!application || !viewport) {
             return;
@@ -61,7 +61,7 @@ export const Camera = ({ children, clampZoom }) => {
             removeObjectFromStage(viewport);
             setIsReady(false);
         };
-    }, [viewport?.uid]);
+    }, [viewport, addObjectToStage, removeObjectFromStage]);
     useEffect(() => {
         if (!viewport || !isReady) {
             return;
@@ -83,16 +83,16 @@ export const Camera = ({ children, clampZoom }) => {
     }, [isReady, viewport, ensureVisibleOptions]);
     const followCallback = useCallback((container) => {
         setFollowContainer(container);
-    }, [followContainer]);
+    }, []);
     const ensureVisibleCallback = useCallback((options) => {
         setEnsureVisibleOptions(options);
-    }, [followContainer]);
+    }, []);
     const value = useMemo(() => {
         return {
             follow: followCallback,
             ensureVisible: ensureVisibleCallback
         };
-    }, [followCallback]);
+    }, [followCallback, ensureVisibleCallback]);
     return (React.createElement(CameraContext.Provider, { value: value },
         React.createElement(LayerContext.Provider, { value: conextValue },
             React.createElement(Layer, null, children))));

package/dist/src/game-context/Game.context.d.ts

@@ -6,6 +6,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;

package/dist/src/game-context/Game.context.js

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useRef, useState } from "react";
+import React, { createContext, useCallback, useMemo, useRef, useState } from "react";
 import { GameStatus } from "../types";
 export const GameContext = createContext({
     reset: () => { },
@@ -6,6 +6,7 @@ export const GameContext = createContext({
     start: () => { },
     stop: () => { },
     timeout: 0,
+    gameId: 0,
     status: GameStatus.READY,
     startTime: null,
     pauseTime: 0,
@@ -14,12 +15,13 @@ export const GameContext = createContext({
 export const GameContextProvider = ({ children, timeout: inputTimeout = 0, events }) => {
     const timerRef = useRef(null);
     const timeout = Math.max(0, inputTimeout);
+    const [gameId, setGemaId] = useState(0);
     const [status, setStatus] = useState(GameStatus.READY);
     const [startTime, setStartTime] = useState(null);
     const [endTime, setEndTime] = useState(null);
     const [pauseTime, setPauseTime] = useState(0);
     const [pausedAtTime, setPausedAtTime] = useState(null);
-    const onTimedOut = () => {
+    const onTimedOut = useCallback(() => {
         const newEndTime = +new Date();
         const newStatus = GameStatus.TIMEDOUT;
         setEndTime(newEndTime);
@@ -31,8 +33,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime: null,
             pauseTime
         });
-    };
-    const start = () => {
+    }, [events, pauseTime, startTime]);
+    const start = useCallback(() => {
         const newStartTime = startTime || +new Date();
         const newStatus = GameStatus.IN_PROGRESS;
         const newEndTime = null;
@@ -54,8 +56,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime: null,
             pauseTime: newPauseTime
         });
-    };
-    const reset = () => {
+    }, [events, onTimedOut, pauseTime, pausedAtTime, startTime, timeout]);
+    const reset = useCallback(() => {
         const newStartTime = null;
         const newStatus = GameStatus.READY;
         const newEndTime = null;
@@ -66,6 +68,7 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
         setEndTime(newEndTime);
         setPauseTime(newPauseTime);
         setPausedAtTime(newPausedAtTime);
+        setGemaId((current) => current++);
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
@@ -76,8 +79,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime: newPausedAtTime,
             pauseTime: newPauseTime
         });
-    };
-    const stop = () => {
+    }, [events]);
+    const stop = useCallback(() => {
         const newStatus = GameStatus.COMPLETED;
         const newEndTime = +new Date();
         if (timerRef.current) {
@@ -92,8 +95,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime,
             pauseTime
         });
-    };
-    const pause = () => {
+    }, [events, pauseTime, pausedAtTime, startTime]);
+    const pause = useCallback(() => {
         const newStatus = GameStatus.PAUSED;
         const newPausedAtTime = +new Date();
         if (timerRef.current) {
@@ -108,7 +111,7 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             status: newStatus,
             pauseTime
         });
-    };
+    }, [events, pauseTime, startTime]);
     const contextValue = useMemo(() => ({
         status,
         startTime,
@@ -118,7 +121,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
         stop,
         start,
         reset,
-        pause
-    }), [timeout, status, startTime, endTime, pauseTime, pausedAtTime]);
+        pause,
+        gameId
+    }), [timeout, status, startTime, endTime, pauseTime, pause, reset, start, stop, gameId]);
     return React.createElement(GameContext.Provider, { value: contextValue }, children);
 };

package/dist/src/game-objects/usePhysicalObject.js

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

package/dist/src/game-objects/usePhysicalObjectFromConfig.d.ts

@@ -1,6 +1,6 @@
 import { Body } from "matter-js";
-import { GameObjectPhysicalObjectConfig } from "./GameObjectPhysicalObjectConfig";
 import { Nullable } from "../types";
+import { GameObjectPhysicalObjectConfig } from "./GameObjectPhysicalObjectConfig";
 export declare const usePhysicalObjectFromConfig: <PhysicalObjectType extends Nullable<Body> = Body>({ position, ...physicalObjectConfig }: GameObjectPhysicalObjectConfig) => {
     physicalObject: PhysicalObjectType;
 };

package/dist/src/game-objects/usePhysicalObjectFromConfig.js

@@ -7,7 +7,7 @@ export const usePhysicalObjectFromConfig = ({ position = { x: 0, y: 0 }, ...phys
             return Body.create({ position, ...physicalObjectConfig });
         }
         return null;
-    }, []);
+    }, [physicalObjectConfig, position]);
     usePhysicalObject({ physicalObject });
     return { physicalObject };
 };

package/dist/src/game-objects/useWalls.js

@@ -49,11 +49,11 @@ 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);
         return () => {
             removeBody(body);
         };
-    }, [body.id]);
+    }, [body, addBody, removeBody]);
 };

package/dist/src/hooks/useAnimatedSprite.js

@@ -14,19 +14,19 @@ export const useAnimatedSprite = ({ texture, spritesheet: spritesheetJSON, anima
             return sheet;
         }
         return null;
-    }, [spritesheetJSON]);
+    }, [spritesheetJSON, isFetched, textures]);
     const sprite = useMemo(() => {
         if (spritesheet?.animations?.[animation]) {
             return new AnimatedSprite({ textures: spritesheet?.animations?.[animation] });
         }
         return null;
-    }, [texture, spritesheetJSON, animation]);
+    }, [animation, spritesheet?.animations]);
     useObject({ object: sprite, ...options });
     useEffect(() => {
         if (sprite) {
             sprite.animationSpeed = animationSpeed;
         }
-    }, [animationSpeed, sprite?.uid]);
+    }, [animationSpeed, sprite]);
     useEffect(() => {
         if (sprite) {
             if (isPlaying) {
@@ -36,6 +36,6 @@ export const useAnimatedSprite = ({ texture, spritesheet: spritesheetJSON, anima
                 sprite.stop();
             }
         }
-    }, [isPlaying, sprite?.uid]);
+    }, [isPlaying, sprite]);
     return sprite;
 };

package/dist/src/hooks/useCollisionDetection.js

@@ -1,5 +1,5 @@
-import { useTickerCallback } from "./useTickerCallback";
 import { useCallback } from "react";
+import { useTickerCallback } from "./useTickerCallback";
 export const useCollisionDetection = ({ objectA, objectB, onCollide, isEnabled }) => {
     const testForAABB = useCallback(() => {
         if (!objectA || !objectB) {

package/dist/src/hooks/useObject.js

@@ -1,5 +1,5 @@
-import { useLayerContext } from "./useLayerContext";
 import { useEffect } from "react";
+import { useLayerContext } from "./useLayerContext";
 export const useObject = ({ object, anchor, position, skew, scale, width, angle, alpha, visible = true }) => {
     const { addObject, removeObject } = useLayerContext();
     useEffect(() => {
@@ -10,45 +10,45 @@ export const useObject = ({ object, anchor, position, skew, scale, width, angle,
         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/dist/src/hooks/useSprite.js

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

package/dist/src/hooks/useTexture.js

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

package/dist/src/hooks/useTilingSprite.js

@@ -15,12 +15,12 @@ export const useTilingSprite = ({ texture = "", tilePosition, ...options }) => {
             return TilingSprite.from(texture);
         }
         return new TilingSprite({});
-    }, [texture, frames]);
+    }, [texture, isFetched]);
     useObject({ object: sprite, ...options });
     useEffect(() => {
         if (tilePosition && sprite) {
             sprite.tilePosition = tilePosition;
         }
-    }, [tilePosition, sprite?.uid]);
+    }, [tilePosition, sprite]);
     return sprite;
 };

package/dist/src/index.d.ts

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

package/dist/src/index.js

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

package/dist/src/layer/Layer.js

@@ -19,16 +19,16 @@ export const Layer = ({ options, children }) => {
         return () => {
             removeObjectFromStaeg(container);
         };
-    }, [container?.uid]);
+    }, [container, addObjectIntoParent, addObjectIntoStage, removeObjectFromParent, removeObjectFromStaeg]);
     const addObject = useCallback((thing) => {
         container.addChild(thing);
-    }, [container?.uid]);
+    }, [container]);
     const removeObject = useCallback((thing) => {
         container.removeChild(thing);
-    }, [container?.uid]);
+    }, [container]);
     const conextValue = useMemo(() => ({
         addObject,
         removeObject
-    }), [container?.uid]);
+    }), [addObject, removeObject]);
     return React.createElement(LayerContext.Provider, { value: conextValue }, children);
 };

package/dist/src/physics/MatterPhysics.context.js

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Engine, Runner, World } from "matter-js";
 export const MatterPhysicsContext = createContext({
     config: {
@@ -31,28 +31,28 @@ export const MatterPhysicsContextProvider = ({ isRunning = false, children, conf
         });
     }, [world]);
     const runner = useMemo(() => Runner.create(), []);
-    const addBody = (body) => {
+    const addBody = useCallback((body) => {
         if (engine?.world) {
             World.add(engine?.world, body);
         }
-    };
-    const removeBody = (body) => {
+    }, [engine]);
+    const removeBody = useCallback((body) => {
         if (engine?.world) {
             World.remove(engine?.world, body);
         }
-    };
-    const run = () => {
+    }, [engine]);
+    const run = useCallback(() => {
         if (!isRunningRef.current) {
             Runner.run(runner, engine);
             isRunningRef.current = true;
         }
-    };
-    const stop = () => {
+    }, [runner, engine]);
+    const stop = useCallback(() => {
         if (isRunningRef.current) {
             Runner.stop(runner);
             isRunningRef.current = false;
         }
-    };
+    }, [runner]);
     const conextValue = useMemo(() => ({
         config: localConfig,
         runner,
@@ -61,7 +61,7 @@ export const MatterPhysicsContextProvider = ({ isRunning = false, children, conf
         stop,
         addBody,
         removeBody
-    }), [runner, engine, localConfig]);
+    }), [runner, engine, localConfig, addBody, removeBody, run, stop]);
     useEffect(() => {
         if (isRunning) {
             run();
@@ -69,6 +69,6 @@ export const MatterPhysicsContextProvider = ({ isRunning = false, children, conf
         return () => {
             stop();
         };
-    }, [isRunning]);
+    }, [isRunning, run, stop]);
     return React.createElement(MatterPhysicsContext.Provider, { value: conextValue }, children);
 };

package/dist/src/physics/useCollisionEventHandler.js

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

package/dist/src/physics/usePhysicsEngineEventHandler.js

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

package/dist/src/physics/usePhysicsTickerCallback.js

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

package/dist/src/stage/Stage.js

@@ -1,16 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { StageContext } from "./Stage.context";
 import { useWorld } from "../hooks";
 import { Layer } from "../layer";
+import { StageContext } from "./Stage.context";
 export const Stage = ({ children }) => {
     const { application } = useWorld();
     const [things, setThings] = useState([]);
     const addObject = useCallback((thing) => {
         setThings((oldThings) => [...oldThings, thing]);
-    }, [things]);
+    }, []);
     const removeObject = useCallback((thing) => {
         setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-    }, [application]);
+    }, []);
     const conextValue = useMemo(() => ({
         addObject,
         removeObject

package/dist/src/world/World.js

@@ -1,21 +1,36 @@
-import React, { createRef, useEffect, useMemo, useState } from "react";
+import React, { createRef, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { Application } from "pixi.js";
-import { WorldContext } from "./World.context";
 import { Stage } from "../stage";
 import { AssetsManager } from "../assets-manager";
+import { WorldContext } from "./World.context";
 export const World = ({ children, eventMode, size }) => {
     const canvasRef = createRef();
     const [applicationRef, setApplicationRef] = useState(null);
-    const worldSize = useMemo(() => {
-        if (size) {
-            return { ...size };
-        }
+    const [canvasSize, setCanvasSize] = useState(null);
+    const onCanvasRef = useCallback((ref) => {
+        const application = new Application();
+        application.init({ eventMode }).then(() => {
+            canvasRef.current = ref;
+            application.resizeTo = canvasRef.current;
+            application.resize();
+            setApplicationRef(application);
+        });
+    }, [canvasRef, eventMode]);
+    useLayoutEffect(() => {
         if (canvasRef?.current) {
             const { width, height } = canvasRef.current.getBoundingClientRect();
-            return {
+            setCanvasSize({
                 width,
                 height
-            };
+            });
+        }
+    }, [canvasRef]);
+    const worldSize = useMemo(() => {
+        if (size) {
+            return { ...size };
+        }
+        if (canvasSize) {
+            return canvasSize;
         }
         if (!applicationRef) {
             return {
@@ -24,24 +39,10 @@ export const World = ({ children, eventMode, size }) => {
             };
         }
         return {
-            width: applicationRef.screen.width,
-            height: applicationRef.screen.height
+            width: applicationRef?.screen.width,
+            height: applicationRef?.screen.height
         };
-    }, [size, canvasRef.current, applicationRef]);
-    useEffect(() => {
-        if (!applicationRef) {
-            const application = new Application();
-            application.init().then(() => {
-                setApplicationRef(application);
-            });
-        }
-    }, []);
-    useEffect(() => {
-        if (applicationRef && canvasRef.current) {
-            applicationRef.resizeTo = canvasRef.current;
-            applicationRef.resize();
-        }
-    }, [canvasRef.current, applicationRef]);
+    }, [size, canvasSize, applicationRef]);
     const conextValue = useMemo(() => ({
         application: applicationRef,
         size: worldSize
@@ -50,20 +51,16 @@ export const World = ({ children, eventMode, size }) => {
         if (!applicationRef) {
             return;
         }
-        canvasRef.current?.appendChild(applicationRef.canvas);
+        const canvas = canvasRef.current;
+        canvas?.appendChild(applicationRef.canvas);
         return () => {
             if (applicationRef) {
-                canvasRef.current?.removeChild(applicationRef.canvas);
+                canvas?.removeChild(applicationRef.canvas);
             }
         };
-    }, [canvasRef.current, applicationRef]);
-    useEffect(() => {
-        if (applicationRef) {
-            applicationRef.stage.eventMode = eventMode;
-        }
-    }, [eventMode, applicationRef]);
+    }, [canvasRef, applicationRef]);
     return (React.createElement(WorldContext.Provider, { value: conextValue },
         React.createElement(AssetsManager, null,
             React.createElement(Stage, null, children),
-            React.createElement("div", { style: { width: "100%", height: "100%" }, ref: canvasRef }))));
+            React.createElement("div", { style: { width: "100%", height: "100%" }, ref: onCanvasRef }))));
 };