react-simple-game-engine 0.3.24 → 0.3.26

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

@@ -1 +1 @@
-{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/ui-components/control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGpE,oBAAY,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;IAEjD,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACvC,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,iBAAyB,EACzB,iBAAyB,EACzB,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,WAAwB,EACxB,SAAwB,EACxB,QAAa,GACd,EAAE,YAAY,eA6Bd"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/ui-components/control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGpE,oBAAY,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;IAEjD,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACvC,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,iBAAyB,EACzB,iBAAyB,EACzB,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,WAAwB,EACxB,SAAwB,EACxB,QAAa,GACd,EAAE,YAAY,eAgCd"}

package/lib/ui-components/control.js

@@ -21,8 +21,8 @@ export function Control(_a) {
         var y = yAxisOriginCenter ? "".concat(top != null ? -50 : 50, "%") : 0;
         return "translate(".concat(x, ",").concat(y, ")");
     }, [left, top, xAxisOriginCenter, yAxisOriginCenter]);
-    return (_jsx("div", __assign({ className: getClassName("ui-control"), style: {
-            top: top,
+    return (_jsx("div", __assign({ className: getClassName("ui-control"), "data-set-top": top != null, style: {
+            "--top": top,
             left: left,
             right: right,
             bottom: bottom,

package/lib/ui-components/game-bootstrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"game-bootstrap.d.ts","sourceRoot":"","sources":["../../src/ui-components/game-bootstrap.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG1E,OAAO,EAAe,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAErE,aAAK,cAAc,GAAG,sBAAsB,GAAG;IAC7C,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eAiN3E"}
+{"version":3,"file":"game-bootstrap.d.ts","sourceRoot":"","sources":["../../src/ui-components/game-bootstrap.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG1E,OAAO,EAAe,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAErE,aAAK,cAAc,GAAG,sBAAsB,GAAG;IAC7C,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eA2N3E"}

package/lib/ui-components/game-bootstrap.js

@@ -57,7 +57,7 @@ export function GameBootstrap(_a) {
         var gameLoggerClass = getClassName("game-logger");
         var uiControlClass = getClassName("ui-control");
         var controlContainerClass = getClassName("control-container");
-        style.appendChild(document.createTextNode("\n          .".concat(getClassName("assets-fail-view"), "{\n            background-color: #f28181a1;\n            min-height: 100px;\n            padding: 10px;\n            color: #000;\n          }\n          \n          .").concat(getClassName("game-modal"), " {\n            position: fixed;\n            top: 0;\n            left: 0;\n          }\n\n          .").concat(getClassName("scene-modal-stack"), "{\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 0;\n            z-index: 2;\n          }\n          \n          .").concat(getClassName("modal-content-main"), "{\n            position: relative;\n            z-index: 1;\n            min-width: 200px;\n            min-height: 200px;\n          }\n\n          .").concat(getClassName("modal-content-closer"), "{\n            width: 100%;\n            height: 100%;\n            position: absolute;\n            z-index: 0;\n          }\n          .").concat(getClassName("modal-content-centered"), "{\n            width: 100%;\n            height: 100%;\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n\n          .").concat(getClassName("modal-content-wrap"), "{\n            width: 100%;\n            height: 100%;\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .").concat(gameRootClass, ", .").concat(gameRootClass, " *,\n          .").concat(gameLoggerClass, ", .").concat(gameLoggerClass, " *\n          {\n              box-sizing: border-box;\n              -webkit-touch-callout: none;\n              -webkit-tap-highlight-color: rgba(0,0,0,0);\n              -webkit-user-select: none;\n              -ms-user-select: none;\n              user-select: none;\n              text-size-adjust: none;\n          }\n\n          .").concat(gameRootClass, " {\n            overflow: hidden;\n            position: relative;\n          }\n\n          .").concat(gameLoggerClass, " {\n            z-index: 4;\n            position: fixed;\n            top:0;\n            right:0;\n          }\n\n          .").concat(getClassName("message-stack"), " {\n              width: cacl(100vw - 40px);\n              max-width: 300px;\n              max-height: calc(50vh - 50px);\n              min-width: 200px;\n              min-height: 150px;\n              position: absolute;\n              top: 5px;\n              right: 5px;\n              padding: 5px;\n              background-color: #0000007b;\n              color: #fff;\n              font-size: 0.8rem;\n\n              display: flex;\n              flex-direction: column;\n          }\n\n          .").concat(getClassName("message-stack-heading"), "{\n            width: 100%;\n            display: flex;\n            justify-content: flex-end;\n          }\n\n          .").concat(getClassName("message-stack-content"), "{\n            flex: 1;\n            width: 100%;\n            overflow-x: hidden;\n            overflow-y: auto;\n          }\n\n\n          .").concat(getClassName("float-container"), " {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .").concat(getClassName("float-container"), " > div {\n            position: relative;\n            width: 100%;\n            height: 100%;\n          }\n          \n          .").concat(uiControlClass, " {\n            position: absolute;\n            display: inline-flex;\n          }\n\n          .").concat(controlContainerClass, " {\n            width: 100%;\n            position: relative;\n          }\n\n          .").concat(controlContainerClass, "[data-stack=\"true\"] .").concat(uiControlClass, " {\n            position: relative;\n            display: flex;\n          }\n\n          .").concat(getClassName("scaler-container"), " {\n            width: 100%;\n            height: 100%;\n            position: relative;\n            top: 0;\n            left: 0;\n          }\n\n          .").concat(getClassName("scaler-container"), " > div {\n            transform-origin: left top;\n            position: relative;\n            top: 50%;\n            left: 50%;\n          }\n    ")));
+        style.appendChild(document.createTextNode("\n          .".concat(getClassName("assets-fail-view"), "{\n            background-color: #f28181a1;\n            min-height: 100px;\n            padding: 10px;\n            color: #000;\n          }\n          \n          .").concat(getClassName("game-modal"), " {\n            position: fixed;\n            top: 0;\n            left: 0;\n          }\n\n          .").concat(getClassName("scene-modal-stack"), "{\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 0;\n            z-index: 2;\n          }\n          \n          .").concat(getClassName("modal-content-main"), "{\n            position: relative;\n            z-index: 1;\n            min-width: 200px;\n            min-height: 200px;\n          }\n\n          .").concat(getClassName("modal-content-closer"), "{\n            width: 100%;\n            height: 100%;\n            position: absolute;\n            z-index: 0;\n          }\n          .").concat(getClassName("modal-content-centered"), "{\n            width: 100%;\n            height: 100%;\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n\n          .").concat(getClassName("modal-content-wrap"), "{\n            width: 100%;\n            height: 100%;\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .").concat(gameRootClass, ", .").concat(gameRootClass, " *,\n          .").concat(gameLoggerClass, ", .").concat(gameLoggerClass, " *\n          {\n              box-sizing: border-box;\n              -webkit-touch-callout: none;\n              -webkit-tap-highlight-color: rgba(0,0,0,0);\n              -webkit-user-select: none;\n              -ms-user-select: none;\n              user-select: none;\n              text-size-adjust: none;\n          }\n\n          .").concat(gameRootClass, " {\n            overflow: hidden;\n            position: relative;\n          }\n\n          .").concat(gameLoggerClass, " {\n            z-index: 4;\n            position: fixed;\n            top:0;\n            right:0;\n          }\n\n          .").concat(getClassName("message-stack"), " {\n              width: cacl(100vw - 40px);\n              max-width: 300px;\n              max-height: calc(50vh - 50px);\n              min-width: 200px;\n              min-height: 150px;\n              position: absolute;\n              top: 5px;\n              right: 5px;\n              padding: 5px;\n              background-color: #0000007b;\n              color: #fff;\n              font-size: 0.8rem;\n\n              display: flex;\n              flex-direction: column;\n          }\n\n          .").concat(getClassName("message-stack-heading"), "{\n            width: 100%;\n            display: flex;\n            justify-content: flex-end;\n          }\n\n          .").concat(getClassName("message-stack-content"), "{\n            flex: 1;\n            width: 100%;\n            overflow-x: hidden;\n            overflow-y: auto;\n          }\n\n\n          .").concat(getClassName("float-container"), " {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .").concat(getClassName("float-container"), " > div {\n            position: relative;\n            width: 100%;\n            height: 100%;\n          }\n          \n          .").concat(uiControlClass, " {\n            position: absolute;\n            display: inline-flex;\n          }\n           \n          .").concat(uiControlClass, "[data-set-top=\"true\"] {\n            top: calc(var(--top) * 1px);\n          }\n\n          .").concat(controlContainerClass, " {\n            width: 100%;\n            position: relative;\n          }\n\n          .").concat(controlContainerClass, "[data-stack=\"true\"] .").concat(uiControlClass, " {\n            position: relative;\n            display: flex;\n          \n          }\n          \n          .").concat(controlContainerClass, "[data-stack=\"true\"] .").concat(uiControlClass, "[data-set-top=\"true\"] {\n            top: unset;\n            margin-top: calc(var(--top) * 1px);\n          }\n\n          .").concat(getClassName("scaler-container"), " {\n            width: 100%;\n            height: 100%;\n            position: relative;\n            top: 0;\n            left: 0;\n          }\n\n          .").concat(getClassName("scaler-container"), " > div {\n            transform-origin: left top;\n            position: relative;\n            top: 50%;\n            left: 50%;\n          }\n    ")));
     }, []);
     return (_jsxs(_Fragment, { children: [_jsx(SceneRunner, __assign({ current: currentScene }, props), currentScene.sessionId), logPopup && _jsx(Logger, {})] }));
 }

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,EAKV,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,eA0FtB"}

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

@@ -10,17 +10,28 @@ 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 { 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;
+    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,
+        };
+    }, []);
     var el = useMemo(function () {
         var onAction = function (e) {
             if (e.type === JoystickActionType.MOVE) {
@@ -37,19 +48,27 @@ export function MovementControl(_a) {
                     type: e.type,
                 });
             }
+            var _a = refStick.current.getBoundingClientRect(), left = _a.left, top = _a.top;
+            var stickBaseX = left - refStickBasePosition.current.x;
+            var stickBaseY = top - refStickBasePosition.current.y;
+            refJoyWrap.current.style.setProperty("--stick-base-x", stickBaseX.toString());
+            refJoyWrap.current.style.setProperty("--stick-base-y", stickBaseY.toString());
         };
-        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: {
+                "--stick-base-x": refStickBasePosition.current.x,
+                "--stick-base-y": refStickBasePosition.current.y,
                 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 })) })));
+            } }, { children: render ? render(joystick) : joystick })));
     }, [props]);
     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.24",
+  "version": "0.3.26",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",