react-simple-game-engine
Version:
[WIP] not able to use in currently. <!-- Document cumming soon... -->
88 lines (87 loc) • 4.57 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx } from "react/jsx-runtime";
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, containerTouchEvent = _a.containerTouchEvent, onLoaded = _a.onLoaded;
var refJoyWrap = useRef(null);
var refStick = useRef(null);
var scene = useContext(UISceneContext);
var joystickConfigs = useMemo(function () {
return scene.getInitialConfigs();
}, [scene]).joystick;
useEffect(function () {
if (!refJoyWrap.current) {
return;
}
refStick.current = refJoyWrap.current.querySelectorAll("button")[0];
onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded(refJoyWrap.current, refStick.current);
}, [onLoaded]);
var el = useMemo(function () {
var onAction = function (e) {
if (e.type === JoystickActionType.MOVE) {
scene.emitJoystickActionEvent({
type: e.type,
vector: Renderer.createVector(e.x, -e.y).normalize(),
weight: e.distance / 100,
length: e.distance,
direction: e.direction,
});
}
else {
scene.emitJoystickActionEvent({
type: e.type,
});
}
};
var joystick = (_jsx(Joystick, __assign({ size: 60, baseColor: "#2D2D2D", stickColor: "rgb(120,121,122)", throttle: 100 }, props, { start: onAction, move: onAction, stop: onAction })));
var isReleased = false;
var handleTouchDown = function () {
var _a, _b, _c;
isReleased = false;
(_a = containerTouchEvent === null || containerTouchEvent === void 0 ? void 0 : containerTouchEvent.onPressed) === null || _a === void 0 ? void 0 : _a.call(containerTouchEvent, refJoyWrap.current, refStick.current);
(_c = (_b = joystickConfigs === null || joystickConfigs === void 0 ? void 0 : joystickConfigs.containerTouchEvent) === null || _b === void 0 ? void 0 : _b.onPressed) === null || _c === void 0 ? void 0 : _c.call(_b, refJoyWrap.current, refStick.current);
};
var handleTouchUp = function () {
var _a, _b, _c;
if (isReleased) {
return;
}
isReleased = true;
(_a = containerTouchEvent === null || containerTouchEvent === void 0 ? void 0 : containerTouchEvent.onReleased) === null || _a === void 0 ? void 0 : _a.call(containerTouchEvent, refJoyWrap.current, refStick.current);
(_c = (_b = joystickConfigs === null || joystickConfigs === void 0 ? void 0 : joystickConfigs.containerTouchEvent) === null || _b === void 0 ? void 0 : _b.onReleased) === null || _c === void 0 ? void 0 : _c.call(_b, refJoyWrap.current, refStick.current);
};
return (_jsx("div", __assign({ ref: refJoyWrap, onPointerDown: function (event) {
event.target.setPointerCapture(event.pointerId);
handleTouchDown();
}, onPointerUp: function (event) {
event.target.releasePointerCapture(event.pointerId);
handleTouchUp();
}, onMouseLeave: handleTouchUp, style: {
position: "absolute",
left: right != null ? undefined : left,
right: right,
bottom: top != null ? undefined : bottom,
top: top,
} }, { children: render ? render(joystick) : joystick })));
}, [props, containerTouchEvent]);
return (_jsx(Watcher, __assign({ initialValues: {
isShow: !!joystickConfigs,
}, names: "control-visible" }, { children: function (_a) {
var isShow = _a.isShow;
return (isShow ? el : null);
} })));
}