react-simple-game-engine 0.3.28 → 0.3.30

package/lib/ui-components/movement-control.d.ts

@@ -4,7 +4,8 @@ declare type TouchEvent = {
     onPressed?: (container: HTMLDivElement, stick: HTMLButtonElement) => void;
     onReleased?: (container: HTMLDivElement, stick: HTMLButtonElement) => void;
 };
-export declare type MovementControlProps = TouchEvent & {
+export declare type MovementControlProps = {
+    onLoaded?: (container: HTMLDivElement, stick: HTMLButtonElement) => void;
     top?: number;
     left?: number;
     right?: number;
@@ -14,6 +15,6 @@ export declare type MovementControlProps = TouchEvent & {
     containerTouchEvent?: TouchEvent;
     props?: Omit<IJoystickProps, "start" | "move" | "stop">;
 };
-export declare function MovementControl({ render, top, left, right, bottom, props, containerTouchEvent, joystickTouchEvent, }: MovementControlProps): JSX.Element;
+export declare function MovementControl({ render, top, left, right, bottom, props, containerTouchEvent, joystickTouchEvent, onLoaded, }: MovementControlProps): JSX.Element;
 export {};
 //# sourceMappingURL=movement-control.d.ts.map

package/lib/ui-components/movement-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"movement-control.d.ts","sourceRoot":"","sources":["../../src/ui-components/movement-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAMf,OAAO,EACL,cAAc,EAEf,MAAM,qCAAqC,CAAC;AAE7C,aAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC5E,CAAC;AACF,oBAAY,oBAAoB,GAAG,UAAU,GAAG;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,SAAS,CAAC;IACzC,kBAAkB,CAAC,EAAE,UAAU,CAAC;IAChC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;CACzD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,GAAG,EACH,IAAS,EACT,KAAK,EACL,MAAW,EACX,KAAK,EACL,mBAAmB,EACnB,kBAAkB,GACnB,EAAE,oBAAoB,eAwGtB"}
+{"version":3,"file":"movement-control.d.ts","sourceRoot":"","sources":["../../src/ui-components/movement-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAMf,OAAO,EACL,cAAc,EAEf,MAAM,qCAAqC,CAAC;AAE7C,aAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC5E,CAAC;AACF,oBAAY,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,SAAS,CAAC;IACzC,kBAAkB,CAAC,EAAE,UAAU,CAAC;IAChC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;CACzD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,GAAG,EACH,IAAS,EACT,KAAK,EACL,MAAW,EACX,KAAK,EACL,mBAAmB,EACnB,kBAAkB,EAClB,QAAQ,GACT,EAAE,oBAAoB,eAyGtB"}

package/lib/ui-components/movement-control.js

@@ -16,7 +16,7 @@ import { UISceneContext } from "../react-context";
 import { Watcher } from "../utilities";
 import { Joystick } from "./react-joystick-component";
 export function MovementControl(_a) {
-    var render = _a.render, top = _a.top, _b = _a.left, left = _b === void 0 ? 50 : _b, right = _a.right, _c = _a.bottom, bottom = _c === void 0 ? 50 : _c, props = _a.props, containerTouchEvent = _a.containerTouchEvent, joystickTouchEvent = _a.joystickTouchEvent;
+    var render = _a.render, top = _a.top, _b = _a.left, left = _b === void 0 ? 50 : _b, right = _a.right, _c = _a.bottom, bottom = _c === void 0 ? 50 : _c, props = _a.props, containerTouchEvent = _a.containerTouchEvent, joystickTouchEvent = _a.joystickTouchEvent, onLoaded = _a.onLoaded;
     var refJoyWrap = useRef(null);
     var refStick = useRef(null);
     var scene = useContext(UISceneContext);
@@ -25,6 +25,9 @@ export function MovementControl(_a) {
     }, [scene]).joystick;
     useEffect(function () {
         refStick.current = refJoyWrap.current.querySelectorAll("button")[0];
+        onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(refJoyWrap.current, refStick.current);
+    }, [onLoaded]);
+    useEffect(function () {
         if (!joystickTouchEvent) {
             return;
         }
@@ -63,7 +66,7 @@ export function MovementControl(_a) {
             }
         };
         var joystick = (_jsx(Joystick, __assign({ size: 60, baseColor: "#2D2D2D", stickColor: "rgb(120,121,122)", throttle: 100 }, props, { start: onAction, move: onAction, stop: onAction })));
-        return (_jsx("div", __assign({ onPointerDown: function (event) {
+        return (_jsx("div", __assign({ ref: refJoyWrap, onPointerDown: function (event) {
                 var _a;
                 event.target.setPointerCapture(event.pointerId);
                 (_a = containerTouchEvent === null || containerTouchEvent === void 0 ? void 0 : containerTouchEvent.onPressed) === null || _a === void 0 ? void 0 : _a.call(containerTouchEvent, refJoyWrap.current, refStick.current);
@@ -71,9 +74,7 @@ export function MovementControl(_a) {
                 var _a;
                 event.target.releasePointerCapture(event.pointerId);
                 (_a = containerTouchEvent === null || containerTouchEvent === void 0 ? void 0 : containerTouchEvent.onReleased) === null || _a === void 0 ? void 0 : _a.call(containerTouchEvent, refJoyWrap.current, refStick.current);
-            }, ref: refJoyWrap, style: {
-                "--stick-center-x": 0,
-                "--stick-center-y": 0,
+            }, style: {
                 position: "absolute",
                 left: right != null ? undefined : left,
                 right: right,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-game-engine",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",