pixi-fusion 1.0.0

package/dist/src/stage/Stage.js

@@ -0,0 +1,29 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { StageContext } from "./Stage.context";
+import { useWorld } from "../hooks";
+import { Layer } from "../layer";
+export const Stage = ({ children }) => {
+    const { application, isInitialized } = 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
+    }), [addObject, removeObject]);
+    useEffect(() => {
+        if (!isInitialized) {
+            return;
+        }
+        application.stage.addChild(...things);
+        return () => {
+            application.stage.removeChild(...things);
+        };
+    }, [things, isInitialized]);
+    return (React.createElement(StageContext.Provider, { value: conextValue },
+        React.createElement(Layer, null, children)));
+};

package/dist/src/stage/index.d.ts

@@ -0,0 +1 @@
+export * from "./Stage";

package/dist/src/stage/index.js

@@ -0,0 +1 @@
+export * from "./Stage";

package/dist/src/types.d.ts

@@ -0,0 +1,7 @@
+export declare enum GameStatus {
+    READY = 0,
+    IN_PROGRESS = 1,
+    TIMEDOUT = 2,
+    COMPLETED = 3
+}
+export type Nullable<T> = T | null;

package/dist/src/types.js

@@ -0,0 +1,7 @@
+export var GameStatus;
+(function (GameStatus) {
+    GameStatus[GameStatus["READY"] = 0] = "READY";
+    GameStatus[GameStatus["IN_PROGRESS"] = 1] = "IN_PROGRESS";
+    GameStatus[GameStatus["TIMEDOUT"] = 2] = "TIMEDOUT";
+    GameStatus[GameStatus["COMPLETED"] = 3] = "COMPLETED";
+})(GameStatus || (GameStatus = {}));

package/dist/src/world/World.context.d.ts

@@ -0,0 +1,10 @@
+import { Application } from "pixi.js";
+export type WorldContextValue = {
+    readonly size: {
+        width: number;
+        height: number;
+    };
+    readonly application: Application;
+    readonly isInitialized: boolean;
+};
+export declare const WorldContext: import("react").Context<WorldContextValue>;

package/dist/src/world/World.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const WorldContext = createContext({});

package/dist/src/world/World.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from "react";
+import { EventMode } from "pixi.js";
+type WorldProps = {
+    eventMode?: EventMode;
+    size?: {
+        width: number;
+        height: number;
+    };
+};
+export declare const World: React.FC<PropsWithChildren & WorldProps>;
+export {};

package/dist/src/world/World.js

@@ -0,0 +1,66 @@
+import React, { createRef, useEffect, useMemo, useRef, useState } from "react";
+import { Application } from "pixi.js";
+import { WorldContext } from "./World.context";
+import { Stage } from "../stage";
+import { AssetsManager } from "../assets-manager";
+export const World = ({ children, eventMode, size }) => {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const canvasRef = createRef();
+    const application = useRef(new Application());
+    const worldSize = useMemo(() => {
+        if (size) {
+            return { ...size };
+        }
+        if (canvasRef?.current) {
+            const { width, height } = canvasRef.current.getBoundingClientRect();
+            return {
+                width,
+                height
+            };
+        }
+        if (!isInitialized) {
+            return {
+                width: 0,
+                height: 0
+            };
+        }
+        return {
+            width: application.current.screen.width,
+            height: application.current.screen.height
+        };
+    }, [size, canvasRef, isInitialized]);
+    useEffect(() => {
+        if (canvasRef.current && !isInitialized) {
+            application.current
+                .init({
+                resizeTo: canvasRef.current
+            })
+                .then(() => {
+                setIsInitialized(true);
+            });
+        }
+    }, [canvasRef.current, isInitialized]);
+    const conextValue = useMemo(() => ({
+        application: application.current,
+        size: worldSize,
+        isInitialized
+    }), [isInitialized, worldSize]);
+    useEffect(() => {
+        if (!isInitialized) {
+            return;
+        }
+        canvasRef.current?.appendChild(application.current.canvas);
+        return () => {
+            canvasRef.current?.removeChild(application.current.canvas);
+        };
+    }, [canvasRef.current, isInitialized]);
+    useEffect(() => {
+        if (application.current) {
+            application.current.stage.eventMode = eventMode;
+        }
+    }, [eventMode, application.current, isInitialized]);
+    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 }))));
+};

package/dist/src/world/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./World.context";
+export * from "./World";

package/dist/src/world/index.js

@@ -0,0 +1,2 @@
+export * from "./World.context";
+export * from "./World";

package/package.json

@@ -0,0 +1,52 @@
+{
+    "author": "Victor Pishuk <victor.pishuk@gmail.com>",
+    "type": "module",
+    "bugs": {
+        "url": "https://github.com/laverve/fusion/issues"
+    },
+    "dependencies": {
+        "@types/matter-js": "^0.19.7",
+        "matter-js": "^0.20.0",
+        "pixi.js": "^8.4.1",
+        "pixi-viewport": "^5.0.3"
+    },
+    "peerDependencies": {
+        "react": "^18.2.0"
+    },
+    "description": "This module offers a set of common components needed for playing games.",
+    "keywords": [
+        "game",
+        "engine",
+        "pixi.js",
+        "matter-js",
+        "react"
+    ],
+    "license": "MIT",
+    "main": "./dist/src/index.js",
+    "types": "./dist/src/index.d.ts",
+    "name": "pixi-fusion",
+    "files": [
+        "./dist/src/",
+        "./src/",
+        "package.json",
+        "package-lock.json",
+        "README.md",
+        "LICENSE"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/laverve/fusion.git"
+    },
+    "scripts": {
+        "lint": "eslint .",
+        "lint:staged": "lint-staged",
+        "test": "jest --passWithNoTests",
+        "build": "tsc",
+        "build:dev": "tsc -w"
+    },
+    "version": "1.0.0",
+    "webpack": "./src/index.ts"
+}

package/src/assets-manager/AssetsManager.context.tsx

@@ -0,0 +1,23 @@
+import { Texture } from "pixi.js";
+import { createContext } from "react";
+
+export type Asset = {
+    src: string;
+    alias: string;
+};
+
+export type AssetsManagerContextValue = {
+    isFetching: boolean;
+    isFetched: boolean;
+    isError: boolean;
+    error?: unknown;
+    load: (groupId: string, asset: Asset[]) => Promise<void>;
+    unload: (groupIdOrAlias: string) => void;
+    getAsset: (alias: string) => Texture | undefined;
+};
+
+export const AssetsManagerContext = createContext<AssetsManagerContextValue>({
+    isFetching: false,
+    isFetched: false,
+    isError: false
+} as unknown as AssetsManagerContextValue);

package/src/assets-manager/AssetsManager.tsx

@@ -0,0 +1,54 @@
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
+import { Asset, AssetsManagerContext, AssetsManagerContextValue } from "./AssetsManager.context";
+import { Assets } from "pixi.js";
+
+export const AssetsManager: React.FC<PropsWithChildren> = ({ children }) => {
+    const [isFetching, setIsFetching] = useState(false);
+    const [isFetched, setIsFetched] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const [error, setError] = useState<unknown>();
+
+    useEffect(() => {
+        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 unload = useCallback((groupId: string) => {
+        Assets.unloadBundle(groupId);
+    }, []);
+
+    const getAsset = useCallback((alias: string) => {
+        return Assets.get(alias);
+    }, []);
+
+    const conextValue = useMemo<AssetsManagerContextValue>(
+        () => ({
+            load,
+            unload,
+            getAsset,
+            isFetching,
+            isFetched,
+            isError,
+            error
+        }),
+        [load, unload, getAsset, isFetching, isFetched, isError, error]
+    );
+
+    return <AssetsManagerContext.Provider value={conextValue}>{children}</AssetsManagerContext.Provider>;
+};

package/src/assets-manager/index.ts

@@ -0,0 +1,3 @@
+export * from "./AssetsManager";
+export * from "./AssetsManager.context";
+export * from "./useAssetManager";

package/src/assets-manager/useAssetManager.ts

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+
+import { AssetsManagerContext } from "./AssetsManager.context";
+
+export const useAssetManager = () => {
+    return useContext(AssetsManagerContext);
+};

package/src/camera/Camera.context.tsx

@@ -0,0 +1,17 @@
+import { Container } from "pixi.js";
+import { createContext } from "react";
+
+export type EnsureVisibleOptions = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    resizeToFit?: boolean;
+};
+
+export type CameraContextValue = {
+    follow: (object: Container) => void;
+    ensureVisible: (options: EnsureVisibleOptions) => void;
+};
+
+export const CameraContext = createContext<CameraContextValue>({} as unknown as CameraContextValue);

package/src/camera/Camera.tsx

@@ -0,0 +1,153 @@
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
+import { Container } from "pixi.js";
+import { Viewport as ViewportContainer } from "pixi-viewport";
+import { StageContextValue } from "../stage/Stage.context";
+import { Layer } from "../layer";
+import { useStage, useWorld } from "../hooks";
+import { LayerContext } from "../layer/Layer.context";
+import { CameraContext, EnsureVisibleOptions } from "./Camera.context";
+
+type CameraProps = {
+    clampZoom?: Parameters<ViewportContainer["clampZoom"]>[0];
+};
+
+export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, clampZoom }) => {
+    const [isReady, setIsReady] = useState(false);
+    const [followContainer, setFollowContainer] = useState<Container | null>(null);
+    const [ensureVisibleOptions, setEnsureVisibleOptions] = useState<EnsureVisibleOptions | null>(null);
+    const { application, isInitialized, size } = useWorld();
+    const { addObject: addObjectToStage, removeObject: removeObjectFromStage } = useStage();
+    const [things, setThings] = useState<Container[]>([]);
+    const viewport = useMemo(
+        () =>
+            isInitialized
+                ? new ViewportContainer({
+                      worldHeight: size.height,
+                      worldWidth: size.width,
+                      screenHeight: application.canvas.height,
+                      screenWidth: application.canvas.width,
+                      events: application?.renderer?.events
+                  })
+                : null,
+        [size, application, isInitialized]
+    );
+
+    const addObject = useCallback(
+        (thing: Container) => {
+            setThings((oldThings) => [...oldThings, thing]);
+        },
+        [things]
+    );
+
+    const removeObject = useCallback(
+        (thing: Container) => {
+            setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
+        },
+        [application]
+    );
+
+    const conextValue = useMemo<StageContextValue>(
+        () => ({
+            addObject,
+            removeObject
+        }),
+        [addObject, removeObject]
+    );
+
+    useEffect(() => {
+        if (viewport && clampZoom) {
+            viewport.clampZoom(clampZoom);
+        }
+    }, [clampZoom, isInitialized]);
+
+    useEffect(() => {
+        if (viewport) {
+            if (size.width) {
+                viewport.width = size.width;
+            }
+            if (size.height) {
+                viewport.height = size.height;
+            }
+        }
+    }, [size, viewport?.uid, isInitialized]);
+
+    useEffect(() => {
+        if (!isInitialized || !viewport) {
+            return;
+        }
+        viewport?.moveCenter(0, 0);
+    }, [viewport, size, isInitialized]);
+
+    useEffect(() => {
+        if (!viewport) {
+            return;
+        }
+
+        addObjectToStage(viewport);
+        setIsReady(true);
+
+        return () => {
+            removeObjectFromStage(viewport);
+            setIsReady(false);
+        };
+    }, [application, isInitialized]);
+
+    useEffect(() => {
+        if (!viewport || !isReady) {
+            return;
+        }
+
+        viewport.addChild(...things);
+
+        return () => {
+            viewport.removeChild(...things);
+        };
+    }, [things, viewport, isReady]);
+
+    useEffect(() => {
+        if (isReady && viewport && followContainer) {
+            viewport.follow(followContainer, { radius: 300 });
+        }
+    }, [isReady, viewport, followContainer]);
+
+    useEffect(() => {
+        if (isReady && viewport && ensureVisibleOptions) {
+            viewport.ensureVisible(
+                ensureVisibleOptions.x,
+                ensureVisibleOptions.y,
+                ensureVisibleOptions.width,
+                ensureVisibleOptions.height,
+                ensureVisibleOptions.resizeToFit
+            );
+        }
+    }, [isReady, viewport, ensureVisibleOptions]);
+
+    const followCallback = useCallback(
+        (container: Container) => {
+            setFollowContainer(container);
+        },
+        [followContainer]
+    );
+
+    const ensureVisibleCallback = useCallback(
+        (options: EnsureVisibleOptions) => {
+            setEnsureVisibleOptions(options);
+        },
+        [followContainer]
+    );
+
+    const value = useMemo(() => {
+        return {
+            follow: followCallback,
+            ensureVisible: ensureVisibleCallback
+        };
+    }, [followCallback]);
+
+    return (
+        <CameraContext.Provider value={value}>
+            <LayerContext.Provider value={conextValue}>
+                <Layer>{children}</Layer>
+            </LayerContext.Provider>
+        </CameraContext.Provider>
+    );
+};

package/src/camera/index.ts

@@ -0,0 +1,2 @@
+export * from "./Camera";
+export * from "./Camera.context";

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

@@ -0,0 +1,133 @@
+import React, { PropsWithChildren, createContext, useMemo, useRef, useState } from "react";
+import { GameStatus } from "../types";
+
+export type GameContextValue = {
+    readonly reset: () => void;
+    readonly start: () => void;
+    readonly stop: () => void;
+    readonly timeout: number;
+    readonly status: GameStatus;
+    readonly startTime: number | null;
+    readonly endTime: number | null;
+};
+
+export type GameContextProviderEvents = {
+    onStart?: (event: { startTime: number | null; status: GameStatus; endTime: number | null }) => unknown;
+    onStop?: (event: { startTime: number | null; status: GameStatus; endTime: number | null }) => unknown;
+    onTimedOut?: (event: { startTime: number | null; status: GameStatus; endTime: number | null }) => unknown;
+    onReset?: (event: { startTime: number | null; status: GameStatus; endTime: number | null }) => unknown;
+};
+
+export const GameContext = createContext<GameContextValue>({
+    reset: () => {},
+    start: () => {},
+    stop: () => {},
+    timeout: 0,
+    status: GameStatus.READY,
+    startTime: null,
+    endTime: null
+});
+
+export type GameContextProviderProps = PropsWithChildren & {
+    timeout?: number;
+    events?: GameContextProviderEvents;
+};
+
+export const GameContextProvider: React.FC<GameContextProviderProps> = ({
+    children,
+    timeout: inputTimeout = 0,
+    events
+}) => {
+    const timerRef = useRef<NodeJS.Timeout>();
+    const timeout = Math.max(0, inputTimeout);
+
+    const [status, setStatus] = useState(GameStatus.READY);
+    const [startTime, setStartTime] = useState<number | null>(null);
+    const [endTime, setEndTime] = useState<number | null>(null);
+
+    const onTimedOut = () => {
+        const newEndTime = +new Date();
+        const newStatus = GameStatus.TIMEDOUT;
+
+        setEndTime(newEndTime);
+        setStatus(GameStatus.TIMEDOUT);
+
+        events?.onTimedOut?.({
+            startTime,
+            endTime: newEndTime,
+            status: newStatus
+        });
+    };
+
+    const start = () => {
+        const newStartTime = +new Date();
+        const newStatus = GameStatus.IN_PROGRESS;
+        const newEndTime = null;
+
+        setStatus(newStatus);
+        setStartTime(newStartTime);
+        setEndTime(newEndTime);
+
+        if (timeout !== 0) {
+            timerRef.current = setTimeout(() => {
+                onTimedOut();
+            }, timeout * 1000);
+        }
+
+        events?.onStart?.({
+            startTime: newStartTime,
+            endTime: newEndTime,
+            status: newStatus
+        });
+    };
+
+    const reset = () => {
+        const newStartTime = null;
+        const newStatus = GameStatus.READY;
+        const newEndTime = null;
+
+        setStatus(newStatus);
+        setStartTime(newStartTime);
+        setEndTime(newEndTime);
+
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+
+        events?.onReset?.({
+            startTime: newStartTime,
+            endTime: newEndTime,
+            status: newStatus
+        });
+    };
+
+    const stop = () => {
+        const newStatus = GameStatus.COMPLETED;
+        const newEndTime = +new Date();
+
+        clearTimeout(timerRef.current);
+        setEndTime(+new Date());
+        setStatus(GameStatus.COMPLETED);
+
+        events?.onStop?.({
+            startTime,
+            endTime: newEndTime,
+            status: newStatus
+        });
+    };
+
+    const contextValue = useMemo(
+        () => ({
+            status,
+            startTime,
+            endTime,
+            timeout,
+            stop,
+            start,
+            reset
+        }),
+        [timeout, status, startTime, endTime]
+    );
+
+    return <GameContext.Provider value={contextValue}>{children}</GameContext.Provider>;
+};

package/src/game-context/index.ts

@@ -0,0 +1 @@
+export * from "./Game.context";

package/src/game-objects/GameObjectPhysicalObjectConfig.ts

@@ -0,0 +1,18 @@
+import { IBodyDefinition } from "matter-js";
+
+type PhysicalObjectConfig = Pick<
+    IBodyDefinition,
+    | "vertices"
+    | "label"
+    | "inertia"
+    | "position"
+    | "friction"
+    | "frictionAir"
+    | "frictionStatic"
+    | "parts"
+    | "isStatic"
+    | "isSensor"
+    | "collisionFilter"
+>;
+
+export type GameObjectPhysicalObjectConfig = PhysicalObjectConfig;

package/src/game-objects/index.ts

@@ -0,0 +1,2 @@
+export * from "./usePhysicalObject";
+export * from "./useWalls";

package/src/game-objects/usePhysicalObject.ts

@@ -0,0 +1,24 @@
+import { Body, Composite } from "matter-js";
+import { useContext, useEffect } from "react";
+import { MatterPhysicsContext } from "../physics";
+import { Nullable } from "../types";
+
+export const usePhysicalObject = ({ physicalObject }: { physicalObject: Nullable<Body | Composite> }) => {
+    const { addBody, removeBody } = useContext(MatterPhysicsContext);
+
+    useEffect(() => {
+        if (!physicalObject) {
+            return () => {};
+        }
+
+        addBody(physicalObject);
+
+        return () => {
+            removeBody(physicalObject);
+        };
+    }, [physicalObject?.id]);
+
+    return {
+        physicalObject
+    };
+};