react-simple-game-engine 0.3.26 → 0.3.27
Sign up to get free protection for your applications and to get access to all the features.
@@ -1 +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,
|
1
|
+
{"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"}
|
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
|
|
10
10
|
return __assign.apply(this, arguments);
|
11
11
|
};
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
-
import { useContext, useEffect, useMemo, useRef, } from "react";
|
13
|
+
import { useCallback, useContext, useEffect, useMemo, useRef, } from "react";
|
14
14
|
import { JoystickActionType } from "../export-enums";
|
15
15
|
import { UISceneContext } from "../react-context";
|
16
16
|
import { Watcher } from "../utilities";
|
@@ -24,6 +24,10 @@ export function MovementControl(_a) {
|
|
24
24
|
var defaultShow = useMemo(function () {
|
25
25
|
return scene.getInitialData();
|
26
26
|
}, [scene]).joystick;
|
27
|
+
var debutStickPosition = useCallback(function (x, y) {
|
28
|
+
refJoyWrap.current.style.setProperty("--stick-center-x", x.toString());
|
29
|
+
refJoyWrap.current.style.setProperty("--stick-center-y", y.toString());
|
30
|
+
}, []);
|
27
31
|
useEffect(function () {
|
28
32
|
refStick.current = refJoyWrap.current.querySelectorAll("button")[0];
|
29
33
|
var _a = refStick.current.getBoundingClientRect(), left = _a.left, top = _a.top;
|
@@ -31,7 +35,8 @@ export function MovementControl(_a) {
|
|
31
35
|
x: left,
|
32
36
|
y: top,
|
33
37
|
};
|
34
|
-
|
38
|
+
debutStickPosition(left, top);
|
39
|
+
}, [debutStickPosition]);
|
35
40
|
var el = useMemo(function () {
|
36
41
|
var onAction = function (e) {
|
37
42
|
if (e.type === JoystickActionType.MOVE) {
|
@@ -49,22 +54,19 @@ export function MovementControl(_a) {
|
|
49
54
|
});
|
50
55
|
}
|
51
56
|
var _a = refStick.current.getBoundingClientRect(), left = _a.left, top = _a.top;
|
52
|
-
var
|
53
|
-
var
|
54
|
-
|
55
|
-
refJoyWrap.current.style.setProperty("--stick-base-y", stickBaseY.toString());
|
57
|
+
var stickCenterX = left - refStickBasePosition.current.x;
|
58
|
+
var stickCenterY = top - refStickBasePosition.current.y;
|
59
|
+
debutStickPosition(stickCenterX, stickCenterY);
|
56
60
|
};
|
57
61
|
var joystick = (_jsx(Joystick, __assign({ size: 60, baseColor: "#2D2D2D", stickColor: "rgb(120,121,122)", throttle: 100 }, props, { start: onAction, move: onAction, stop: onAction })));
|
58
62
|
return (_jsx("div", __assign({ ref: refJoyWrap, style: {
|
59
|
-
"--stick-base-x": refStickBasePosition.current.x,
|
60
|
-
"--stick-base-y": refStickBasePosition.current.y,
|
61
63
|
position: "absolute",
|
62
64
|
left: right != null ? undefined : left,
|
63
65
|
right: right,
|
64
66
|
bottom: top != null ? undefined : bottom,
|
65
67
|
top: top,
|
66
68
|
} }, { children: render ? render(joystick) : joystick })));
|
67
|
-
}, [props]);
|
69
|
+
}, [props, debutStickPosition]);
|
68
70
|
return (_jsx(Watcher, __assign({ initialValues: {
|
69
71
|
isShow: defaultShow,
|
70
72
|
}, names: "control-visible" }, { children: function (_a) {
|