pixi-fusion 1.1.0 → 2.0.1

package/README.md

@@ -14,14 +14,14 @@ npm i --save pixi-fusion
 
 # Basic Usage Example
 
-1. Create a component with `GameContextProvider` and `World`.
+1. Create a component with `GameContextProvider` and `Stage`.
 
 ```
 <GameContextProvider timeout={10}>
     <World size={{width: 300, height: 300}} eventMode="dynamic">
-        <layer>
+        <Layer>
             <MyAwesomeStage />
-        </Layer>
+        </layer>
     </World>
 </GameContextProvider>
 ```
@@ -76,12 +76,6 @@ export const MyAwesomeStage: React.FC<MazeHeroProps> = () => {
 };
 ```
 
-# Demos
-
--   [Maze](https://laverve.github.io/fusion/?path=/story/games-maze-gameplay--maze-story)
--   [WordSearch](https://laverve.github.io/fusion/?path=/story/games-wordsearch-gameplay--word-search-story)
--   [Spelling spree](https://laverve.github.io/fusion/?path=/story/games-spelling-spree-gameplay--spelling-spree)
-
 # Contribution guidelines
 
 You are encouraged to contribute to this project as soon as you see any defects or issues.
@@ -96,7 +90,6 @@ This monorepo contains configuration for VSCode editor. It doesn't mean that you
 2. To build monorepo use: `npm run build`
 3. To lint monorepo use: `npm run lint`
 4. To initialize pre-commit hooks use: `npm run prepare`
-5. To run storybook `npm run storybook`
 
 ## Workflow
 

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

@@ -12,7 +12,7 @@ export const GameContext = createContext({
     endTime: null
 });
 export const GameContextProvider = ({ children, timeout: inputTimeout = 0, events }) => {
-    const timerRef = useRef();
+    const timerRef = useRef(null);
     const timeout = Math.max(0, inputTimeout);
     const [status, setStatus] = useState(GameStatus.READY);
     const [startTime, setStartTime] = useState(null);
@@ -80,7 +80,9 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
     const stop = () => {
         const newStatus = GameStatus.COMPLETED;
         const newEndTime = +new Date();
-        clearTimeout(timerRef.current);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
         setEndTime(+new Date());
         setStatus(GameStatus.COMPLETED);
         events?.onStop?.({
@@ -94,7 +96,9 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
     const pause = () => {
         const newStatus = GameStatus.PAUSED;
         const newPausedAtTime = +new Date();
-        clearTimeout(timerRef.current);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
         setStatus(GameStatus.PAUSED);
         setPausedAtTime(newPausedAtTime);
         events?.onPause?.({

package/dist/src/hooks/useCamera.d.ts

@@ -1 +1 @@
-export declare const useCamera: () => import("../camera").CameraContextValue;
+export declare const useCamera: () => import("..").CameraContextValue;

package/dist/src/hooks/useGame.d.ts

@@ -1 +1 @@
-export declare const useGame: () => import("../game-context").GameContextValue;
+export declare const useGame: () => import("..").GameContextValue;

package/dist/src/hooks/useTickerCallback.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useWorld } from "../hooks";
+import { useWorld } from ".";
 export const useTickerCallback = ({ isEnabled = true, callback }) => {
     const { application } = useWorld();
     useEffect(() => {

package/dist/src/hooks/useWorld.d.ts

@@ -1 +1 @@
-export declare const useWorld: () => import("../world/World.context").WorldContextValue;
+export declare const useWorld: () => import("..").WorldContextValue;

package/package.json

@@ -5,13 +5,22 @@
         "url": "https://github.com/laverve/fusion/issues"
     },
     "dependencies": {
-        "@types/matter-js": "^0.19.7",
+        "@types/matter-js": "^0.19.8",
         "matter-js": "^0.20.0",
-        "pixi.js": "^8.5.1",
-        "pixi-viewport": "^5.0.3"
+        "pixi.js": "^8.8.0",
+        "pixi-viewport": "^6.0.3"
     },
     "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^19.0.0"
+    },
+    "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"
     },
     "description": "This module offers a set of common components needed for playing games.",
     "keywords": [
@@ -41,12 +50,14 @@
         "url": "https://github.com/laverve/fusion.git"
     },
     "scripts": {
-        "lint": "eslint .",
+        "lint": "eslint ./src/",
+        "lint:fix": "eslint ./src/ --fix",
         "lint:staged": "lint-staged",
+        "prepare": "husky",
         "test": "jest --passWithNoTests",
         "build": "tsc",
         "build:dev": "tsc -w"
     },
-    "version": "1.1.0",
+    "version": "2.0.1",
     "webpack": "./src/index.ts"
 }

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

@@ -43,7 +43,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
     timeout: inputTimeout = 0,
     events
 }) => {
-    const timerRef = useRef<NodeJS.Timeout>();
+    const timerRef = useRef<NodeJS.Timeout>(null);
     const timeout = Math.max(0, inputTimeout);
 
     const [status, setStatus] = useState(GameStatus.READY);
@@ -125,7 +125,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
         const newStatus = GameStatus.COMPLETED;
         const newEndTime = +new Date();
 
-        clearTimeout(timerRef.current);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
         setEndTime(+new Date());
         setStatus(GameStatus.COMPLETED);
 
@@ -142,7 +144,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
         const newStatus = GameStatus.PAUSED;
         const newPausedAtTime = +new Date();
 
-        clearTimeout(timerRef.current);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
         setStatus(GameStatus.PAUSED);
         setPausedAtTime(newPausedAtTime);
 

package/src/hooks/useTickerCallback.ts

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { TickerCallback } from "pixi.js";
 
-import { useWorld } from "../hooks";
+import { useWorld } from ".";
 
 export const useTickerCallback = <T = unknown>({
     isEnabled = true,