pixi-fusion 1.0.0

package/src/physics/index.ts

@@ -0,0 +1,4 @@
+export * from "./MatterPhysics.context";
+export * from "./useCollisionEventHandler";
+export * from "./usePhysicsTickerCallback";
+export * from "./usePhysicsEngineEventHandler";

package/src/physics/types.ts

@@ -0,0 +1,27 @@
+import Matter from "matter-js";
+
+export type MatterPhysicsDebugConvexHullConfig = {
+    strokeColor?: string;
+    strokeWidth?: number;
+};
+
+export type MatterPhysicsConfig = {
+    world: {
+        width: number;
+        height: number;
+    };
+    debug?: {
+        convexHull?: MatterPhysicsDebugConvexHullConfig;
+        showConvexHull?: boolean;
+    };
+};
+
+export type MatterPhysics = {
+    readonly config: MatterPhysicsConfig;
+    readonly runner: Matter.Runner;
+    readonly engine: Matter.Engine;
+    run: () => void;
+    stop: () => void;
+    addBody: (body: Matter.Body | Matter.Composite) => void;
+    removeBody: (body: Matter.Body | Matter.Composite) => void;
+};

package/src/physics/useCollisionEventHandler.ts

@@ -0,0 +1,26 @@
+import { useEffect, useContext } from "react";
+
+import { Engine, Events, ICollisionCallback, IEvent } from "matter-js";
+import { MatterPhysicsContext } from "./MatterPhysics.context";
+
+export type UseCollisionEventHandlerOptions = {
+    isEnabled?: boolean;
+    event: "collisionActive" | "collisionEnd" | "collisionStart";
+    callback: ICollisionCallback;
+};
+
+export const useCollisionEventHandler = ({ isEnabled = true, event, callback }: UseCollisionEventHandlerOptions) => {
+    const { engine } = useContext(MatterPhysicsContext);
+
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => {};
+        }
+
+        Events.on(engine, event, callback as unknown as (e: IEvent<Engine>) => void);
+
+        return () => {
+            Events.off(engine, event, callback);
+        };
+    }, [isEnabled, callback, event]);
+};

package/src/physics/usePhysicsEngineEventHandler.ts

@@ -0,0 +1,30 @@
+import { useEffect, useContext } from "react";
+
+import { Events, IEngineCallback, IEvent, Engine } from "matter-js";
+import { MatterPhysicsContext } from "./MatterPhysics.context";
+
+type UsePhysicsEngineEventHandlerOptions = {
+    isEnabled?: boolean;
+    event: "beforeUpdate" | "afterUpdate";
+    callback: IEngineCallback;
+};
+
+export const usePhysicsEngineEventHandler = ({
+    isEnabled = true,
+    event,
+    callback
+}: UsePhysicsEngineEventHandlerOptions) => {
+    const { engine } = useContext(MatterPhysicsContext);
+
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => {};
+        }
+
+        Events.on(engine, event, callback as unknown as (e: IEvent<Engine>) => void);
+
+        return () => {
+            Events.off(engine, event, callback);
+        };
+    }, [isEnabled, event, callback]);
+};

package/src/physics/usePhysicsTickerCallback.ts

@@ -0,0 +1,25 @@
+import { useEffect, useContext } from "react";
+
+import { Events, IRunnerCallback, IEvent, Runner } from "matter-js";
+import { MatterPhysicsContext } from "./MatterPhysics.context";
+
+type UsePhysicsTickerCallbackOptions = {
+    isEnabled?: boolean;
+    callback: IRunnerCallback;
+};
+
+export const usePhysicsTickerCallback = ({ isEnabled = true, callback }: UsePhysicsTickerCallbackOptions) => {
+    const { runner } = useContext(MatterPhysicsContext);
+
+    useEffect(() => {
+        if (!isEnabled) {
+            return () => {};
+        }
+
+        Events.on(runner, "tick", callback as unknown as (e: IEvent<Runner>) => void);
+
+        return () => {
+            Events.off(runner, "tick", callback);
+        };
+    }, [isEnabled, callback]);
+};

package/src/stage/Stage.context.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { Container } from "pixi.js";
+
+export type StageContextValue = {
+    addObject: (body: Container) => void;
+    removeObject: (body: Container) => void;
+};
+
+export const StageContext = createContext<StageContextValue>({} as unknown as StageContextValue);

package/src/stage/Stage.tsx

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
+import { Container } from "pixi.js";
+import { StageContext, StageContextValue } from "./Stage.context";
+import { useWorld } from "../hooks";
+import { Layer } from "../layer";
+
+export const Stage: React.FC<PropsWithChildren> = ({ children }) => {
+    const { application, isInitialized } = useWorld();
+    const [things, setThings] = useState<Container[]>([]);
+
+    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 (!isInitialized) {
+            return;
+        }
+
+        application.stage.addChild(...things);
+
+        return () => {
+            application.stage.removeChild(...things);
+        };
+    }, [things, isInitialized]);
+
+    return (
+        <StageContext.Provider value={conextValue}>
+            <Layer>{children}</Layer>
+        </StageContext.Provider>
+    );
+};

package/src/stage/index.ts

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

package/src/types.ts

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

package/src/world/World.context.tsx

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

package/src/world/World.tsx

@@ -0,0 +1,93 @@
+import React, { PropsWithChildren, createRef, useEffect, useMemo, useRef, useState } from "react";
+import { Application, EventMode } from "pixi.js";
+import { WorldContextValue, WorldContext } from "./World.context";
+import { Stage } from "../stage";
+import { AssetsManager } from "../assets-manager";
+
+type WorldProps = {
+    eventMode?: EventMode;
+    size?: {
+        width: number;
+        height: number;
+    };
+};
+
+export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, eventMode, size }) => {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const canvasRef = createRef<HTMLDivElement>();
+
+    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<WorldContextValue>(
+        () => ({
+            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 (
+        <WorldContext.Provider value={conextValue}>
+            <AssetsManager>
+                <Stage>{children}</Stage>
+                <div style={{ width: "100%", height: "100%" }} ref={canvasRef} />
+            </AssetsManager>
+        </WorldContext.Provider>
+    );
+};

package/src/world/index.ts

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