react-simple-game-engine 0.3.25 → 0.3.27

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,EAAE,YAAY,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAOrE,OAAO,EACL,cAAc,EAEf,MAAM,qCAAqC,CAAC;AAE7C,oBAAY,oBAAoB,GAAG;IACjC,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,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,GACN,EAAE,oBAAoB,eAwDtB"}
+{"version":3,"file":"movement-control.d.ts","sourceRoot":"","sources":["../../src/ui-components/movement-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AAOf,OAAO,EACL,cAAc,EAEf,MAAM,qCAAqC,CAAC;AAE7C,oBAAY,oBAAoB,GAAG;IACjC,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,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,GACN,EAAE,oBAAoB,eAoFtB"}

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

@@ -10,17 +10,33 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, } from "react";
 import { JoystickActionType } from "../export-enums";
 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;
+    var refJoyWrap = useRef(null);
+    var refStick = useRef(null);
+    var refStickBasePosition = useRef(null);
     var scene = useContext(UISceneContext);
     var defaultShow = useMemo(function () {
         return scene.getInitialData();
     }, [scene]).joystick;
+    var debutStickPosition = useCallback(function (x, y) {
+        refJoyWrap.current.style.setProperty("--stick-center-x", x.toString());
+        refJoyWrap.current.style.setProperty("--stick-center-y", y.toString());
+    }, []);
+    useEffect(function () {
+        refStick.current = refJoyWrap.current.querySelectorAll("button")[0];
+        var _a = refStick.current.getBoundingClientRect(), left = _a.left, top = _a.top;
+        refStickBasePosition.current = {
+            x: left,
+            y: top,
+        };
+        debutStickPosition(left, top);
+    }, [debutStickPosition]);
     var el = useMemo(function () {
         var onAction = function (e) {
             if (e.type === JoystickActionType.MOVE) {
@@ -37,19 +53,24 @@ export function MovementControl(_a) {
                     type: e.type,
                 });
             }
+            var _a = refStick.current.getBoundingClientRect(), left = _a.left, top = _a.top;
+            var stickCenterX = left - refStickBasePosition.current.x;
+            var stickCenterY = top - refStickBasePosition.current.y;
+            debutStickPosition(stickCenterX, stickCenterY);
         };
-        return (_jsx("div", __assign({ style: {
+        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({ ref: refJoyWrap, style: {
                 position: "absolute",
                 left: right != null ? undefined : left,
                 right: right,
                 bottom: top != null ? undefined : bottom,
                 top: top,
-            } }, { children: _jsx(Joystick, __assign({ size: 60, baseColor: "#2D2D2D", stickColor: "rgb(120,121,122)", throttle: 100 }, props, { start: onAction, move: onAction, stop: onAction })) })));
-    }, [props]);
+            } }, { children: render ? render(joystick) : joystick })));
+    }, [props, debutStickPosition]);
     return (_jsx(Watcher, __assign({ initialValues: {
             isShow: defaultShow,
         }, names: "control-visible" }, { children: function (_a) {
             var isShow = _a.isShow;
-            return (isShow ? (render ? render(el) : el) : null);
+            return (isShow ? el : null);
         } })));
 }

package/package.json

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