@lagless/pixi-react 0.0.33

package/dist/lib/neutrino-particles/use-vfx-container.js

@@ -0,0 +1,96 @@
+// ===== File: src/components/vfx/useVFXContainer.ts =====
+import { useCallback, useEffect, useRef } from 'react';
+import { Assets } from 'pixi.js';
+import { Effect, Pause } from 'neutrinoparticles.pixi';
+import { useTick } from '@pixi/react';
+export const useVFXContainer = () => {
+    const containerRef = useRef(null);
+    const effectsRef = useRef([]);
+    const isUnmountedRef = useRef(false);
+    // Обновление всех эффектов
+    useTick((ticker) => {
+        const now = performance.now();
+        const dt = ticker.deltaMS / 1000;
+        effectsRef.current = effectsRef.current.filter(({ effect, removeAt, onComplete }) => {
+            // Проверяем время жизни
+            if (removeAt !== undefined && now >= removeAt) {
+                effect.parent?.removeChild(effect);
+                effect.destroy();
+                onComplete?.();
+                return false;
+            }
+            // Обновляем эффект
+            if (effect.ready()) {
+                effect.update(dt);
+                // Если нет duration — удаляем когда частиц 0
+                if (removeAt === undefined && effect.getNumParticles() === 0) {
+                    effect.parent?.removeChild(effect);
+                    effect.destroy();
+                    onComplete?.();
+                    return false;
+                }
+            }
+            return true;
+        });
+    });
+    // Спавн эффекта
+    const spawn = useCallback((effectAlias, position, options) => {
+        if (isUnmountedRef.current)
+            return null;
+        const effectModel = Assets.get(effectAlias);
+        if (!effectModel) {
+            console.error(`Effect model "${effectAlias}" not found`);
+            return null;
+        }
+        const container = containerRef.current;
+        if (!container) {
+            console.error('VFX container not mounted');
+            return null;
+        }
+        // Нормализуем scale
+        const scale = options?.scale;
+        const normalizedScale = typeof scale === 'number' ? [scale, scale, scale] :
+            scale ?? [1, 1, 1];
+        const effect = new Effect(effectModel, {
+            position,
+            rotation: options?.rotation ?? 0,
+            scale: normalizedScale,
+            pause: Pause.BEFORE_UPDATE_OR_RENDER,
+            autoInit: true,
+        });
+        container.addChild(effect);
+        effectsRef.current.push({
+            effect,
+            removeAt: options?.duration ? performance.now() + options.duration : undefined,
+            onComplete: options?.onComplete,
+        });
+        return effect;
+    }, []);
+    // Очистка при размонтировании
+    useEffect(() => {
+        isUnmountedRef.current = false;
+        return () => {
+            isUnmountedRef.current = true;
+            effectsRef.current.forEach(({ effect }) => {
+                effect.parent?.removeChild(effect);
+                effect.destroy();
+            });
+            effectsRef.current = [];
+        };
+    }, []);
+    // Принудительная очистка всех эффектов
+    const clear = useCallback(() => {
+        effectsRef.current.forEach(({ effect }) => {
+            effect.parent?.removeChild(effect);
+            effect.destroy();
+        });
+        effectsRef.current = [];
+    }, []);
+    return {
+        containerRef,
+        spawn,
+        clear,
+        /** Текущее количество активных эффектов */
+        get activeCount() { return effectsRef.current.length; }
+    };
+};

package/dist/lib/virtual-joystick/virtual-joystick-ctx.d.ts

@@ -0,0 +1,18 @@
+export type VJDirectionListener = (direction: number) => void;
+export type VJUnsubscribe = () => void;
+export declare class VirtualJoystickCtx {
+    private _direction;
+    private _axisX;
+    private _axisY;
+    private _power;
+    private readonly _directionListeners;
+    get direction(): number;
+    get axisX(): number;
+    get axisY(): number;
+    get power(): number;
+    setPower(power: number): void;
+    setAxis(x: number, y: number): void;
+    setDirection(direction: number): void;
+    addDirectionChangeListener(handler: VJDirectionListener): VJUnsubscribe;
+}
+//# sourceMappingURL=virtual-joystick-ctx.d.ts.map

package/dist/lib/virtual-joystick/virtual-joystick-ctx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-joystick-ctx.d.ts","sourceRoot":"","sources":["../../../src/lib/virtual-joystick/virtual-joystick-ctx.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,mBAAmB,GAAG,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;AAC9D,MAAM,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC;AAEvC,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAkC;IAEtE,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,IAAW,KAAK,IAAI,MAAM,CAEzB;IAEM,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAKnC,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAKrC,0BAA0B,CAAC,OAAO,EAAE,mBAAmB,GAAG,aAAa;CAM/E"}

package/dist/lib/virtual-joystick/virtual-joystick-ctx.js

@@ -0,0 +1,37 @@
+import { toFloat32 } from '@lagless/binary';
+export class VirtualJoystickCtx {
+    _direction = 0;
+    _axisX = 0;
+    _axisY = 0;
+    _power = 0;
+    _directionListeners = new Set();
+    get direction() {
+        return this._direction;
+    }
+    get axisX() {
+        return this._axisX;
+    }
+    get axisY() {
+        return this._axisY;
+    }
+    get power() {
+        return this._power;
+    }
+    setPower(power) {
+        this._power = toFloat32(power);
+    }
+    setAxis(x, y) {
+        this._axisX = toFloat32(x);
+        this._axisY = toFloat32(y);
+    }
+    setDirection(direction) {
+        this._direction = toFloat32(direction);
+        this._directionListeners.forEach((listener) => listener(this._direction));
+    }
+    addDirectionChangeListener(handler) {
+        this._directionListeners.add(handler);
+        return () => {
+            this._directionListeners.delete(handler);
+        };
+    }
+}

package/dist/lib/virtual-joystick/virtual-joystick.d.ts

@@ -0,0 +1,14 @@
+import { Texture } from 'pixi.js';
+import { FC, ReactNode } from 'react';
+import { VirtualJoystickCtx } from './virtual-joystick-ctx';
+interface VirtualJoystickAssets {
+    joystick: Texture;
+    joystickHandle: Texture;
+}
+export declare const useVirtualJoystick: () => VirtualJoystickCtx;
+export declare const loadVirtualJoystickAssets: () => Promise<VirtualJoystickAssets>;
+export declare const VirtualJoystickProvider: FC<{
+    children: ReactNode;
+}>;
+export {};
+//# sourceMappingURL=virtual-joystick.d.ts.map

package/dist/lib/virtual-joystick/virtual-joystick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-joystick.d.ts","sourceRoot":"","sources":["../../../src/lib/virtual-joystick/virtual-joystick.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,OAAO,EAAyB,MAAM,SAAS,CAAC;AACpF,OAAO,EAAiB,EAAE,EAAE,SAAS,EAAiE,MAAM,OAAO,CAAC;AACpH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAI5D,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;CACzB;AAKD,eAAO,MAAM,kBAAkB,0BAE9B,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,qBAAqB,CAM/E,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAmB/D,CAAC"}

package/dist/lib/virtual-joystick/virtual-joystick.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApplication, useExtend } from '@pixi/react';
+import { Assets, Container, Sprite } from 'pixi.js';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { VirtualJoystickCtx } from './virtual-joystick-ctx';
+import joystickUrl from './textures/joystick.png';
+import joystickHandleUrl from './textures/joystick-handle.png';
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const VirtualJoystickContext = createContext(null);
+export const useVirtualJoystick = () => {
+    return useContext(VirtualJoystickContext);
+};
+export const loadVirtualJoystickAssets = async () => {
+    await Assets.load([joystickUrl, joystickHandleUrl]);
+    return {
+        joystick: Assets.get(joystickUrl),
+        joystickHandle: Assets.get(joystickHandleUrl),
+    };
+};
+export const VirtualJoystickProvider = ({ children }) => {
+    useExtend({ Container, Sprite });
+    const ctx = useMemo(() => new VirtualJoystickCtx(), []);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const [assets, setAssets] = useState(null);
+    useEffect(() => {
+        loadVirtualJoystickAssets().then(setAssets, console.error);
+    }, []);
+    if (!assets)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(VirtualJoystickContext.Provider, { value: ctx, children: children }), _jsx(VirtualJoystick, { ctx: ctx, assets: assets })] }));
+};
+const joystickScale = 0.5;
+const VirtualJoystick = ({ ctx, assets }) => {
+    const { app } = useApplication();
+    const [handleOffset, setHandleOffset] = useState({ x: 0, y: 0 });
+    const joystickSize = useMemo(() => assets.joystick.width * joystickScale, [assets.joystick]);
+    const handleSize = useMemo(() => assets.joystickHandle.width * joystickScale, [assets.joystickHandle]);
+    const maxOffset = useMemo(() => (joystickSize - handleSize / 2) / 2, [joystickSize, handleSize]);
+    const getCanvasDOMRect = useCallback(() => app.renderer.canvas.getBoundingClientRect(), [app]);
+    const [canvasDOMRect, setCanvasDOMRect] = useState(() => getCanvasDOMRect());
+    useEffect(() => {
+        const canvas = app.renderer.canvas;
+        const resizeObserver = new ResizeObserver(() => {
+            setCanvasDOMRect(getCanvasDOMRect());
+        });
+        resizeObserver.observe(canvas);
+        return () => {
+            resizeObserver.unobserve(canvas);
+        };
+    }, [app, getCanvasDOMRect]);
+    const isDraggingRef = useRef(false);
+    const updateFromPointer = useCallback((event) => {
+        const container = event.currentTarget;
+        const localPos = event.getLocalPosition(container);
+        const centerX = joystickSize / 2;
+        const centerY = joystickSize / 2;
+        let dx = localPos.x - centerX;
+        let dy = localPos.y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance > maxOffset && distance > 0) {
+            const k = maxOffset / distance;
+            dx *= k;
+            dy *= k;
+        }
+        setHandleOffset({ x: dx, y: dy });
+        const radius = maxOffset > 0 ? maxOffset : 1;
+        const axisX = dx / radius;
+        const axisY = -dy / radius;
+        const power = Math.min(Math.sqrt(axisX * axisX + axisY * axisY), 1);
+        const direction = power > 0 ? Math.atan2(axisY, axisX) : 0;
+        ctx.setAxis(axisX, axisY);
+        ctx.setPower(power);
+        ctx.setDirection(direction);
+    }, [ctx, joystickSize, maxOffset]);
+    const resetJoystick = useCallback(() => {
+        isDraggingRef.current = false;
+        setHandleOffset({ x: 0, y: 0 });
+        // Reset context state
+        ctx.setAxis(0, 0);
+        ctx.setPower(0);
+        ctx.setDirection(0);
+    }, [ctx]);
+    const handlePointerDown = useCallback((event) => {
+        isDraggingRef.current = true;
+        updateFromPointer(event);
+    }, [updateFromPointer]);
+    const handlePointerMove = useCallback((event) => {
+        if (!isDraggingRef.current)
+            return;
+        updateFromPointer(event);
+    }, [updateFromPointer]);
+    const handlePointerUp = useCallback((_event) => {
+        resetJoystick();
+    }, [resetJoystick]);
+    return (_jsxs("pixiContainer", { x: canvasDOMRect.width / 2 - joystickSize / 2, y: canvasDOMRect.height - joystickSize - canvasDOMRect.height * 0.1, eventMode: "static", onPointerDown: handlePointerDown, onGlobalPointerMove: handlePointerMove, onPointerUpOutside: handlePointerUp, onPointerUp: handlePointerUp, children: [_jsx("pixiSprite", { scale: joystickScale, texture: assets.joystick }), _jsx("pixiContainer", { x: joystickSize / 2 - handleSize / 2 + handleOffset.x, y: joystickSize / 2 - handleSize / 2 + handleOffset.y, children: _jsx("pixiSprite", { scale: joystickScale, texture: assets.joystickHandle }) })] }));
+};