react-simple-game-engine 0.3.27 → 0.3.29
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,12 +1,20 @@
|
|
1
|
-
import { ReactElement, ReactNode } from "react";
|
1
|
+
import { MutableRefObject, ReactElement, ReactNode } from "react";
|
2
2
|
import { IJoystickProps } from "./react-joystick-component/Joystick";
|
3
|
+
declare type TouchEvent = {
|
4
|
+
onPressed?: (container: HTMLDivElement, stick: HTMLButtonElement) => void;
|
5
|
+
onReleased?: (container: HTMLDivElement, stick: HTMLButtonElement) => void;
|
6
|
+
};
|
3
7
|
export declare type MovementControlProps = {
|
8
|
+
containerRef?: MutableRefObject<HTMLDivElement>;
|
4
9
|
top?: number;
|
5
10
|
left?: number;
|
6
11
|
right?: number;
|
7
12
|
bottom?: number;
|
8
13
|
render?: (el: ReactElement) => ReactNode;
|
14
|
+
joystickTouchEvent?: TouchEvent;
|
15
|
+
containerTouchEvent?: TouchEvent;
|
9
16
|
props?: Omit<IJoystickProps, "start" | "move" | "stop">;
|
10
17
|
};
|
11
|
-
export declare function MovementControl({ render, top, left, right, bottom, props, }: MovementControlProps): JSX.Element;
|
18
|
+
export declare function MovementControl({ render, top, left, right, bottom, props, containerTouchEvent, joystickTouchEvent, containerRef, }: MovementControlProps): JSX.Element;
|
19
|
+
export {};
|
12
20
|
//# sourceMappingURL=movement-control.d.ts.map
|
@@ -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,gBAAgB,EAChB,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,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,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,YAAY,GACb,EAAE,oBAAoB,eA4GtB"}
|
@@ -10,33 +10,46 @@ 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 {
|
13
|
+
import { 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";
|
17
17
|
import { Joystick } from "./react-joystick-component";
|
18
18
|
export function MovementControl(_a) {
|
19
|
-
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;
|
19
|
+
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, containerRef = _a.containerRef;
|
20
20
|
var refJoyWrap = useRef(null);
|
21
21
|
var refStick = useRef(null);
|
22
|
-
var refStickBasePosition = useRef(null);
|
23
22
|
var scene = useContext(UISceneContext);
|
24
23
|
var defaultShow = useMemo(function () {
|
25
24
|
return scene.getInitialData();
|
26
25
|
}, [scene]).joystick;
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
26
|
+
useEffect(function () {
|
27
|
+
if (containerRef) {
|
28
|
+
containerRef.current = refJoyWrap.current;
|
29
|
+
}
|
30
|
+
}, [containerRef]);
|
31
31
|
useEffect(function () {
|
32
32
|
refStick.current = refJoyWrap.current.querySelectorAll("button")[0];
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
33
|
+
if (!joystickTouchEvent) {
|
34
|
+
return;
|
35
|
+
}
|
36
|
+
var handlePointerdown = function (event) {
|
37
|
+
var _a;
|
38
|
+
event.target.setPointerCapture(event.pointerId);
|
39
|
+
(_a = joystickTouchEvent.onPressed) === null || _a === void 0 ? void 0 : _a.call(joystickTouchEvent, refJoyWrap.current, refStick.current);
|
40
|
+
};
|
41
|
+
var handlePointerup = function (event) {
|
42
|
+
var _a;
|
43
|
+
event.target.releasePointerCapture(event.pointerId);
|
44
|
+
(_a = joystickTouchEvent.onReleased) === null || _a === void 0 ? void 0 : _a.call(joystickTouchEvent, refJoyWrap.current, refStick.current);
|
45
|
+
};
|
46
|
+
refStick.current.addEventListener("pointerdown", handlePointerdown);
|
47
|
+
refStick.current.addEventListener("pointerup", handlePointerup);
|
48
|
+
return function () {
|
49
|
+
refStick.current.removeEventListener("pointerdown", handlePointerdown);
|
50
|
+
refStick.current.removeEventListener("pointerup", handlePointerup);
|
37
51
|
};
|
38
|
-
|
39
|
-
}, [debutStickPosition]);
|
52
|
+
}, [joystickTouchEvent]);
|
40
53
|
var el = useMemo(function () {
|
41
54
|
var onAction = function (e) {
|
42
55
|
if (e.type === JoystickActionType.MOVE) {
|
@@ -53,20 +66,24 @@ export function MovementControl(_a) {
|
|
53
66
|
type: e.type,
|
54
67
|
});
|
55
68
|
}
|
56
|
-
var _a = refStick.current.getBoundingClientRect(), left = _a.left, top = _a.top;
|
57
|
-
var stickCenterX = left - refStickBasePosition.current.x;
|
58
|
-
var stickCenterY = top - refStickBasePosition.current.y;
|
59
|
-
debutStickPosition(stickCenterX, stickCenterY);
|
60
69
|
};
|
61
70
|
var joystick = (_jsx(Joystick, __assign({ size: 60, baseColor: "#2D2D2D", stickColor: "rgb(120,121,122)", throttle: 100 }, props, { start: onAction, move: onAction, stop: onAction })));
|
62
|
-
return (_jsx("div", __assign({ ref: refJoyWrap,
|
71
|
+
return (_jsx("div", __assign({ ref: refJoyWrap, onPointerDown: function (event) {
|
72
|
+
var _a;
|
73
|
+
event.target.setPointerCapture(event.pointerId);
|
74
|
+
(_a = containerTouchEvent === null || containerTouchEvent === void 0 ? void 0 : containerTouchEvent.onPressed) === null || _a === void 0 ? void 0 : _a.call(containerTouchEvent, refJoyWrap.current, refStick.current);
|
75
|
+
}, onPointerUp: function (event) {
|
76
|
+
var _a;
|
77
|
+
event.target.releasePointerCapture(event.pointerId);
|
78
|
+
(_a = containerTouchEvent === null || containerTouchEvent === void 0 ? void 0 : containerTouchEvent.onReleased) === null || _a === void 0 ? void 0 : _a.call(containerTouchEvent, refJoyWrap.current, refStick.current);
|
79
|
+
}, style: {
|
63
80
|
position: "absolute",
|
64
81
|
left: right != null ? undefined : left,
|
65
82
|
right: right,
|
66
83
|
bottom: top != null ? undefined : bottom,
|
67
84
|
top: top,
|
68
85
|
} }, { children: render ? render(joystick) : joystick })));
|
69
|
-
}, [props,
|
86
|
+
}, [props, containerTouchEvent]);
|
70
87
|
return (_jsx(Watcher, __assign({ initialValues: {
|
71
88
|
isShow: defaultShow,
|
72
89
|
}, names: "control-visible" }, { children: function (_a) {
|