react-simple-game-engine 0.2.27 → 0.2.29

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

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
-import { IJoystickProps } from "react-joystick-component/build/lib/Joystick";
 import { Scene } from "../classes/scene";
+import { IJoystickProps } from "./react-joystick-component/Joystick";
 export declare type ControlProps = {
     scene: Scene;
     top?: number;

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,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAIzC,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,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,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAS,EACT,KAAK,EACL,MAAW,EACX,KAAK,GACN,EAAE,YAAY,eA4Bd"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/ui-components/control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAIzC,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAErE,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,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,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAS,EACT,KAAK,EACL,MAAW,EACX,KAAK,GACN,EAAE,YAAY,eA4Bd"}

package/lib/ui-components/control.js

@@ -11,9 +11,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Joystick } from "react-joystick-component";
 import { Watcher } from "../utilities";
 import { FloatContainer } from "./float-container";
+import { Joystick } from "./react-joystick-component";
 export function Control(_a) {
     var scene = _a.scene, 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 el = useMemo(function () {

package/lib/ui-components/react-joystick-component/Joystick.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { JoystickShape } from "./enums/shape.enum";
+export interface IJoystickProps {
+    size?: number;
+    baseColor?: string;
+    stickColor?: string;
+    throttle?: number;
+    disabled?: boolean;
+    sticky?: boolean;
+    move?: (event: IJoystickUpdateEvent) => void;
+    stop?: (event: IJoystickUpdateEvent) => void;
+    start?: (event: IJoystickUpdateEvent) => void;
+    stickImage?: string;
+    baseImage?: string;
+    followCursor?: boolean;
+    baseShape?: JoystickShape;
+    stickShape?: JoystickShape;
+    controlPlaneShape?: JoystickShape;
+    minDistance?: number;
+}
+export interface IJoystickUpdateEvent {
+    type: "move" | "stop" | "start";
+    x: number | null;
+    y: number | null;
+    direction: JoystickDirection | null;
+    distance: number | null;
+}
+export interface IJoystickState {
+    dragging: boolean;
+    coordinates?: IJoystickCoordinates;
+}
+declare type JoystickDirection = "FORWARD" | "RIGHT" | "LEFT" | "BACKWARD";
+export interface IJoystickCoordinates {
+    relativeX: number;
+    relativeY: number;
+    axisX: number;
+    axisY: number;
+    direction: JoystickDirection;
+    distance: number;
+}
+declare class Joystick extends React.Component<IJoystickProps, IJoystickState> {
+    private readonly _stickRef;
+    private readonly _baseRef;
+    private readonly _throttleMoveCallback;
+    private _baseSize;
+    private _radius;
+    private _parentRect;
+    private _pointerId;
+    constructor(props: IJoystickProps);
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    /**
+     * Update position of joystick - set state and trigger DOM manipulation
+     * @param coordinates
+     * @private
+     */
+    private _updatePos;
+    /**
+     * Handle pointerdown event
+     * @param e PointerEvent
+     * @private
+     */
+    private _pointerDown;
+    /**
+     * Use ArcTan2 (4 Quadrant inverse tangent) to identify the direction the joystick is pointing
+     * https://docs.oracle.com/cd/B12037_01/olap.101/b10339/x_arcsin003.htm
+     * @param atan2: number
+     * @private
+     */
+    private _getDirection;
+    /**
+     * Hypotenuse distance calculation
+     * @param x: number
+     * @param y: number
+     * @private
+     */
+    private _distance;
+    private _distanceToPercentile;
+    /**
+     * Calculate X/Y and ArcTan within the bounds of the joystick
+     * @param event
+     * @private
+     */
+    private _pointerMove;
+    /**
+     * Handle pointer up and de-register listen events
+     * @private
+     */
+    private _pointerUp;
+    /**
+     * Get the shape stylings for the base
+     * @private
+     */
+    private getBaseShapeStyle;
+    /**
+     * Get the shape stylings for the stick
+     * @private
+     */
+    private getStickShapeStyle;
+    /**
+     * Calculate base styles for pad
+     * @private
+     */
+    private _getBaseStyle;
+    /**
+     * Calculate  base styles for joystick and translate
+     * @private
+     */
+    private _getStickStyle;
+    render(): JSX.Element;
+}
+export { Joystick };

package/lib/ui-components/react-joystick-component/Joystick.js

@@ -0,0 +1,320 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Joystick = void 0;
+var React = require("react");
+var shape_enum_1 = require("./enums/shape.enum");
+var shape_factory_1 = require("./shapes/shape.factory");
+var shape_bounds_factory_1 = require("./shapes/shape.bounds.factory");
+var InteractionEvents;
+(function (InteractionEvents) {
+    InteractionEvents["PointerDown"] = "pointerdown";
+    InteractionEvents["PointerMove"] = "pointermove";
+    InteractionEvents["PointerUp"] = "pointerup";
+})(InteractionEvents || (InteractionEvents = {}));
+/**
+ * Radians identifying the direction of the joystick
+ */
+var RadianQuadrantBinding;
+(function (RadianQuadrantBinding) {
+    RadianQuadrantBinding[RadianQuadrantBinding["TopRight"] = 2.35619449] = "TopRight";
+    RadianQuadrantBinding[RadianQuadrantBinding["TopLeft"] = -2.35619449] = "TopLeft";
+    RadianQuadrantBinding[RadianQuadrantBinding["BottomRight"] = 0.785398163] = "BottomRight";
+    RadianQuadrantBinding[RadianQuadrantBinding["BottomLeft"] = -0.785398163] = "BottomLeft";
+})(RadianQuadrantBinding || (RadianQuadrantBinding = {}));
+var Joystick = /** @class */ (function (_super) {
+    __extends(Joystick, _super);
+    function Joystick(props) {
+        var _this = _super.call(this, props) || this;
+        _this._stickRef = React.createRef();
+        _this._baseRef = React.createRef();
+        _this._pointerId = null;
+        _this.state = {
+            dragging: false
+        };
+        _this._throttleMoveCallback = (function () {
+            var lastCall = 0;
+            return function (event) {
+                var now = new Date().getTime();
+                var throttleAmount = _this.props.throttle || 0;
+                if (now - lastCall < throttleAmount) {
+                    return;
+                }
+                lastCall = now;
+                if (_this.props.move) {
+                    return _this.props.move(event);
+                }
+            };
+        })();
+        return _this;
+    }
+    Joystick.prototype.componentWillUnmount = function () {
+        var _this = this;
+        if (this.props.followCursor) {
+            window.removeEventListener(InteractionEvents.PointerMove, function (event) { return _this._pointerMove(event); });
+        }
+    };
+    Joystick.prototype.componentDidMount = function () {
+        var _this = this;
+        if (this.props.followCursor) {
+            //@ts-ignore
+            this._parentRect = this._baseRef.current.getBoundingClientRect();
+            this.setState({
+                dragging: true
+            });
+            window.addEventListener(InteractionEvents.PointerMove, function (event) { return _this._pointerMove(event); });
+            if (this.props.start) {
+                this.props.start({
+                    type: "start",
+                    x: null,
+                    y: null,
+                    distance: null,
+                    direction: null
+                });
+            }
+        }
+    };
+    /**
+     * Update position of joystick - set state and trigger DOM manipulation
+     * @param coordinates
+     * @private
+     */
+    Joystick.prototype._updatePos = function (coordinates) {
+        var _this = this;
+        window.requestAnimationFrame(function () {
+            _this.setState({
+                coordinates: coordinates
+            });
+        });
+        if (typeof this.props.minDistance === 'number') {
+            if (coordinates.distance < this.props.minDistance) {
+                return;
+            }
+        }
+        this._throttleMoveCallback({
+            type: "move",
+            x: coordinates.relativeX,
+            y: -coordinates.relativeY,
+            direction: coordinates.direction,
+            distance: coordinates.distance
+        });
+    };
+    /**
+     * Handle pointerdown event
+     * @param e PointerEvent
+     * @private
+     */
+    Joystick.prototype._pointerDown = function (e) {
+        var _this = this;
+        if (this.props.disabled || this.props.followCursor) {
+            return;
+        }
+        //@ts-ignore
+        this._parentRect = this._baseRef.current.getBoundingClientRect();
+        this.setState({
+            dragging: true
+        });
+        window.addEventListener(InteractionEvents.PointerUp, function (event) { return _this._pointerUp(event); });
+        window.addEventListener(InteractionEvents.PointerMove, function (event) { return _this._pointerMove(event); });
+        this._pointerId = e.pointerId;
+        //@ts-ignore
+        this._stickRef.current.setPointerCapture(e.pointerId);
+        if (this.props.start) {
+            this.props.start({
+                type: "start",
+                x: null,
+                y: null,
+                distance: null,
+                direction: null
+            });
+        }
+    };
+    /**
+     * Use ArcTan2 (4 Quadrant inverse tangent) to identify the direction the joystick is pointing
+     * https://docs.oracle.com/cd/B12037_01/olap.101/b10339/x_arcsin003.htm
+     * @param atan2: number
+     * @private
+     */
+    Joystick.prototype._getDirection = function (atan2) {
+        if (atan2 > RadianQuadrantBinding.TopRight || atan2 < RadianQuadrantBinding.TopLeft) {
+            return "FORWARD";
+        }
+        else if (atan2 < RadianQuadrantBinding.TopRight && atan2 > RadianQuadrantBinding.BottomRight) {
+            return "RIGHT";
+        }
+        else if (atan2 < RadianQuadrantBinding.BottomLeft) {
+            return "LEFT";
+        }
+        return "BACKWARD";
+    };
+    /**
+     * Hypotenuse distance calculation
+     * @param x: number
+     * @param y: number
+     * @private
+     */
+    Joystick.prototype._distance = function (x, y) {
+        return Math.hypot(x, y);
+    };
+    Joystick.prototype._distanceToPercentile = function (distance) {
+        var percentageBaseSize = distance / (this._baseSize / 2) * 100;
+        if (percentageBaseSize > 100) {
+            return 100;
+        }
+        return percentageBaseSize;
+    };
+    /**
+     * Calculate X/Y and ArcTan within the bounds of the joystick
+     * @param event
+     * @private
+     */
+    Joystick.prototype._pointerMove = function (event) {
+        event.preventDefault();
+        if (this.state.dragging) {
+            if (!this.props.followCursor && event.pointerId !== this._pointerId)
+                return;
+            var absoluteX = event.clientX;
+            var absoluteY = event.clientY;
+            var relativeX = absoluteX - this._parentRect.left - this._radius;
+            var relativeY = absoluteY - this._parentRect.top - this._radius;
+            var dist = this._distance(relativeX, relativeY);
+            // @ts-ignore
+            var bounded = (0, shape_bounds_factory_1.shapeBoundsFactory)(
+            //@ts-ignore
+            this.props.controlPlaneShape || this.props.baseShape, absoluteX, absoluteY, relativeX, relativeY, dist, this._radius, this._baseSize, this._parentRect);
+            relativeX = bounded.relativeX;
+            relativeY = bounded.relativeY;
+            var atan2 = Math.atan2(relativeX, relativeY);
+            this._updatePos({
+                relativeX: relativeX,
+                relativeY: relativeY,
+                distance: this._distanceToPercentile(dist),
+                direction: this._getDirection(atan2),
+                axisX: absoluteX - this._parentRect.left,
+                axisY: absoluteY - this._parentRect.top
+            });
+        }
+    };
+    /**
+     * Handle pointer up and de-register listen events
+     * @private
+     */
+    Joystick.prototype._pointerUp = function (event) {
+        var _this = this;
+        if (event.pointerId !== this._pointerId)
+            return;
+        var stateUpdate = {
+            dragging: false,
+        };
+        if (!this.props.sticky) {
+            stateUpdate.coordinates = undefined;
+        }
+        window.requestAnimationFrame(function () {
+            _this.setState(stateUpdate);
+        });
+        window.removeEventListener(InteractionEvents.PointerUp, function (event) { return _this._pointerUp(event); });
+        window.removeEventListener(InteractionEvents.PointerMove, function (event) { return _this._pointerMove(event); });
+        this._pointerId = null;
+        if (this.props.stop) {
+            this.props.stop({
+                type: "stop",
+                // @ts-ignore
+                x: this.props.sticky ? this.state.coordinates.relativeX : null,
+                // @ts-ignore
+                y: this.props.sticky ? this.state.coordinates.relativeY : null,
+                // @ts-ignore
+                direction: this.props.sticky ? this.state.coordinates.direction : null,
+                // @ts-ignore
+                distance: this.props.sticky ? this.state.coordinates.distance : null
+            });
+        }
+    };
+    /**
+     * Get the shape stylings for the base
+     * @private
+     */
+    Joystick.prototype.getBaseShapeStyle = function () {
+        var shape = this.props.baseShape || shape_enum_1.JoystickShape.Circle;
+        return (0, shape_factory_1.shapeFactory)(shape, this._baseSize);
+    };
+    /**
+     * Get the shape stylings for the stick
+     * @private
+     */
+    Joystick.prototype.getStickShapeStyle = function () {
+        var shape = this.props.stickShape || shape_enum_1.JoystickShape.Circle;
+        return (0, shape_factory_1.shapeFactory)(shape, this._baseSize);
+    };
+    /**
+     * Calculate base styles for pad
+     * @private
+     */
+    Joystick.prototype._getBaseStyle = function () {
+        var baseColor = this.props.baseColor !== undefined ? this.props.baseColor : "#000033";
+        var baseSizeString = "".concat(this._baseSize, "px");
+        var padStyle = __assign(__assign({}, this.getBaseShapeStyle()), { height: baseSizeString, width: baseSizeString, background: baseColor, display: 'flex', justifyContent: 'center', alignItems: 'center' });
+        if (this.props.baseImage) {
+            padStyle.background = "url(".concat(this.props.baseImage, ")");
+            padStyle.backgroundSize = '100%';
+        }
+        return padStyle;
+    };
+    /**
+     * Calculate  base styles for joystick and translate
+     * @private
+     */
+    Joystick.prototype._getStickStyle = function () {
+        var stickColor = this.props.stickColor !== undefined ? this.props.stickColor : "#3D59AB";
+        var stickSize = "".concat(this._baseSize / 1.5, "px");
+        var stickStyle = __assign(__assign({}, this.getStickShapeStyle()), { background: stickColor, cursor: "move", height: stickSize, width: stickSize, border: 'none', flexShrink: 0, touchAction: 'none' });
+        if (this.props.stickImage) {
+            stickStyle.background = "url(".concat(this.props.stickImage, ")");
+            stickStyle.backgroundSize = '100%';
+        }
+        if (this.state.coordinates !== undefined) {
+            stickStyle = Object.assign({}, stickStyle, {
+                position: 'absolute',
+                transform: "translate3d(".concat(this.state.coordinates.relativeX, "px, ").concat(this.state.coordinates.relativeY, "px, 0)")
+            });
+        }
+        return stickStyle;
+    };
+    Joystick.prototype.render = function () {
+        var _this = this;
+        this._baseSize = this.props.size || 100;
+        this._radius = this._baseSize / 2;
+        var baseStyle = this._getBaseStyle();
+        var stickStyle = this._getStickStyle();
+        //@ts-ignore
+        return (React.createElement("div", { className: this.props.disabled ? 'joystick-base-disabled' : '', ref: this._baseRef, style: baseStyle },
+            React.createElement("button", { ref: this._stickRef, disabled: this.props.disabled, onPointerDown: function (event) { return _this._pointerDown(event); }, className: this.props.disabled ? 'joystick-disabled' : '', style: stickStyle })));
+    };
+    return Joystick;
+}(React.Component));
+exports.Joystick = Joystick;
+//# sourceMappingURL=Joystick.js.map

package/lib/ui-components/react-joystick-component/Joystick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Joystick.js","sourceRoot":"","sources":["../../src/Joystick.tsx"],"names":[],"mappings":"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"}

package/lib/ui-components/react-joystick-component/Joystick.stories.d.ts

@@ -0,0 +1 @@
+import './stories.css';

package/lib/ui-components/react-joystick-component/Joystick.stories.js

@@ -0,0 +1,123 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var ReactDOM = require("react-dom");
+var react_1 = require("@storybook/react");
+var addon_actions_1 = require("@storybook/addon-actions");
+var react_parallax_tilt_1 = require("react-parallax-tilt");
+var Joystick_1 = require("./Joystick");
+var shape_enum_1 = require("./enums/shape.enum");
+var react_2 = require("react");
+require("./stories.css");
+var joystickStories = (0, react_1.storiesOf)('Joystick Examples', module);
+joystickStories.add("Default joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("Default joystick with 50% minDistance", function () { return React.createElement(Joystick_1.Joystick, { minDistance: 50, start: (0, addon_actions_1.action)("Started"), move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("Control plane override", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), controlPlaneShape: shape_enum_1.JoystickShape.Square, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("Square joystick", function () { return React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', padding: '25px' } },
+    React.createElement(Joystick_1.Joystick, { throttle: 100, start: (0, addon_actions_1.action)("Started"), baseShape: shape_enum_1.JoystickShape.Square, stickShape: shape_enum_1.JoystickShape.Square, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    React.createElement(Joystick_1.Joystick, { throttle: 100, start: (0, addon_actions_1.action)("Started"), baseShape: shape_enum_1.JoystickShape.Square, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") })); });
+joystickStories.add("Yellow (custom colors) joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), baseColor: "#FFFF99", stickColor: "#FFD300", move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("50ms throttled joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("100ms throttled joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), throttle: 100, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("200ms throttled joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), throttle: 200, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("500ms throttled joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), throttle: 500, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("Sticky joystick", function () { return React.createElement(Joystick_1.Joystick, { sticky: true, start: (0, addon_actions_1.action)("Started"), throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("Images", function () { return React.createElement(Joystick_1.Joystick, { baseImage: "http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/fire.png", stickImage: "https://i.imgflip.com/1cf8by.jpg", start: (0, addon_actions_1.action)("Started"), throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }); });
+joystickStories.add("Follow Cursor", function () { return (React.createElement("div", { style: { padding: "50px", display: 'flex' } },
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }))); });
+joystickStories.add("Many follow Cursor", function () { return (React.createElement("div", { style: { padding: "50px", display: 'flex' } },
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    " ",
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    " ",
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    " ",
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }),
+    React.createElement(Joystick_1.Joystick, { followCursor: true, start: (0, addon_actions_1.action)("Started"), baseColor: 'grey', stickColor: 'black', throttle: 50, move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped") }))); });
+joystickStories.add("HUGE joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped"), size: 500 }); });
+joystickStories.add("Tiny joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped"), size: 50 }); });
+joystickStories.add("Disabled joystick", function () { return React.createElement(Joystick_1.Joystick, { start: (0, addon_actions_1.action)("Started"), move: (0, addon_actions_1.action)("Moved"), stop: (0, addon_actions_1.action)("Stopped"), disabled: true }); });
+joystickStories.add("Controlling a react-parallax-tilt ", function () {
+    var _a = (0, react_2.useState)([0, 0]), _b = _a[0], manualTiltAngleX = _b[0], manualTiltAngleY = _b[1], setManualTiltAngle = _a[1];
+    var onMove = function (stick) {
+        setManualTiltAngle([stick.y, stick.x]);
+    };
+    var onStop = function () {
+        setManualTiltAngle([0, 0]);
+    };
+    return React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tilt-manual-input" },
+            React.createElement(react_parallax_tilt_1.default, { tiltAngleXManual: manualTiltAngleX, tiltAngleYManual: manualTiltAngleY, glareEnable: true },
+                React.createElement("div", { className: "react-parallax-tilt" },
+                    React.createElement("div", null,
+                        "Axis x: ", manualTiltAngleX === null || manualTiltAngleX === void 0 ? void 0 :
+                        manualTiltAngleX.toFixed(0),
+                        "\u00B0"),
+                    React.createElement("div", null,
+                        "Axis y: ", manualTiltAngleY === null || manualTiltAngleY === void 0 ? void 0 :
+                        manualTiltAngleY.toFixed(0),
+                        "\u00B0"))),
+            React.createElement("div", { className: "manual-input" },
+                React.createElement(Joystick_1.Joystick, { baseColor: "darkgreen", stickColor: "black", move: onMove, stop: onStop })),
+            React.createElement("h3", null,
+                "Thanks to ",
+                React.createElement("a", { href: "https://github.com/mkosir/react-parallax-tilt" }, "react-parallax-tilt"))));
+});
+var DirectionComponent = /** @class */ (function (_super) {
+    __extends(DirectionComponent, _super);
+    function DirectionComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            direction: "Stopped"
+        };
+        return _this;
+    }
+    DirectionComponent.prototype._handleMove = function (data) {
+        this.setState({
+            direction: data.direction
+        });
+    };
+    DirectionComponent.prototype._handleStop = function () {
+        this.setState({
+            direction: "Stopped"
+        });
+    };
+    DirectionComponent.prototype.render = function () {
+        return (React.createElement("div", null,
+            React.createElement(Joystick_1.Joystick, { move: this._handleMove.bind(this), stop: this._handleStop.bind(this) }),
+            React.createElement("p", null, this.state.direction)));
+    };
+    return DirectionComponent;
+}(React.Component));
+joystickStories.add("Default with direction text", function () { return React.createElement(DirectionComponent, null); });
+var Modal = function (_a) {
+    var isOpen = _a.isOpen;
+    if (!isOpen)
+        return null;
+    return ReactDOM.createPortal(React.createElement(Joystick_1.Joystick, null), document.body);
+};
+joystickStories.add("Default with portal", function () {
+    var _a = (0, react_2.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
+    return React.createElement(React.Fragment, null,
+        React.createElement("button", { onClick: function () { return setIsOpen(!isOpen); } }, "Open"),
+        React.createElement(Modal, { isOpen: isOpen }));
+});
+//# sourceMappingURL=Joystick.stories.js.map

package/lib/ui-components/react-joystick-component/Joystick.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Joystick.stories.js","sourceRoot":"","sources":["../../src/Joystick.stories.tsx"],"names":[],"mappings":"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"}

package/lib/ui-components/react-joystick-component/enums/shape.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum JoystickShape {
+    Circle = "circle",
+    Square = "square"
+}

package/lib/ui-components/react-joystick-component/enums/shape.enum.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JoystickShape = void 0;
+var JoystickShape;
+(function (JoystickShape) {
+    JoystickShape["Circle"] = "circle";
+    JoystickShape["Square"] = "square";
+})(JoystickShape = exports.JoystickShape || (exports.JoystickShape = {}));
+//# sourceMappingURL=shape.enum.js.map

package/lib/ui-components/react-joystick-component/enums/shape.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.enum.js","sourceRoot":"","sources":["../../../src/enums/shape.enum.ts"],"names":[],"mappings":";;;AAAA,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,kCAAiB,CAAA;IACjB,kCAAiB,CAAA;AACrB,CAAC,EAHW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAGxB"}

package/lib/ui-components/react-joystick-component/index.d.ts

@@ -0,0 +1,2 @@
+export { Joystick } from "./Joystick";
+export { JoystickShape } from './enums/shape.enum';

package/lib/ui-components/react-joystick-component/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JoystickShape = exports.Joystick = void 0;
+var Joystick_1 = require("./Joystick");
+Object.defineProperty(exports, "Joystick", { enumerable: true, get: function () { return Joystick_1.Joystick; } });
+var shape_enum_1 = require("./enums/shape.enum");
+Object.defineProperty(exports, "JoystickShape", { enumerable: true, get: function () { return shape_enum_1.JoystickShape; } });
+//# sourceMappingURL=index.js.map

package/lib/ui-components/react-joystick-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;AAAA,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,iDAAmD;AAA1C,2GAAA,aAAa,OAAA"}

package/lib/ui-components/react-joystick-component/shapes/shape.bounds.factory.d.ts

@@ -0,0 +1,5 @@
+import { JoystickShape } from "../enums/shape.enum";
+export declare const shapeBoundsFactory: (shape: JoystickShape, absoluteX: number, absoluteY: number, relativeX: number, relativeY: number, dist: number, radius: number, baseSize: number, parentRect: DOMRect) => {
+    relativeX: number;
+    relativeY: number;
+};

package/lib/ui-components/react-joystick-component/shapes/shape.bounds.factory.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shapeBoundsFactory = void 0;
+var shape_enum_1 = require("../enums/shape.enum");
+var shapeBoundsFactory = function (shape, absoluteX, absoluteY, relativeX, relativeY, dist, radius, baseSize, parentRect) {
+    switch (shape) {
+        case shape_enum_1.JoystickShape.Square:
+            relativeX = getWithinBounds(absoluteX - parentRect.left - (baseSize / 2), baseSize);
+            relativeY = getWithinBounds(absoluteY - parentRect.top - (baseSize / 2), baseSize);
+            return { relativeX: relativeX, relativeY: relativeY };
+        default:
+            if (dist > radius) {
+                relativeX *= radius / dist;
+                relativeY *= radius / dist;
+            }
+            return { relativeX: relativeX, relativeY: relativeY };
+    }
+};
+exports.shapeBoundsFactory = shapeBoundsFactory;
+var getWithinBounds = function (value, baseSize) {
+    var halfBaseSize = baseSize / 2;
+    if (value > halfBaseSize) {
+        return halfBaseSize;
+    }
+    if (value < -(halfBaseSize)) {
+        return halfBaseSize * -1;
+    }
+    return value;
+};
+//# sourceMappingURL=shape.bounds.factory.js.map

package/lib/ui-components/react-joystick-component/shapes/shape.bounds.factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.bounds.factory.js","sourceRoot":"","sources":["../../../src/shapes/shape.bounds.factory.ts"],"names":[],"mappings":";;;AAAA,kDAAkD;AAE3C,IAAM,kBAAkB,GAAG,UAC9B,KAAoB,EACpB,SAAgB,EAChB,SAAiB,EACjB,SAAgB,EAChB,SAAgB,EAChB,IAAW,EACX,MAAa,EACb,QAAgB,EAChB,UAAmB;IACnB,QAAQ,KAAK,EAAC;QACV,KAAK,0BAAa,CAAC,MAAM;YACrB,SAAS,GAAG,eAAe,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;YACpF,SAAS,GAAG,eAAe,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;YACnF,OAAO,EAAC,SAAS,WAAA,EAAE,SAAS,WAAA,EAAC,CAAC;QAElC;YACI,IAAI,IAAI,GAAG,MAAM,EAAE;gBACf,SAAS,IAAI,MAAM,GAAG,IAAI,CAAC;gBAC3B,SAAS,IAAI,MAAM,GAAG,IAAI,CAAC;aAC9B;YACD,OAAO,EAAC,SAAS,WAAA,EAAE,SAAS,WAAA,EAAC,CAAC;KAErC;AAEL,CAAC,CAAA;AAzBY,QAAA,kBAAkB,sBAyB9B;AAED,IAAM,eAAe,GAAG,UAAC,KAAY,EAAE,QAAe;IAClD,IAAM,YAAY,GAAG,QAAQ,GAAG,CAAC,CAAC;IAClC,IAAG,KAAK,GAAG,YAAY,EAAC;QACpB,OAAO,YAAY,CAAC;KACvB;IACD,IAAG,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,EAAC;QACvB,OAAO,YAAY,GAAG,CAAC,CAAC,CAAC;KAC5B;IACD,OAAO,KAAK,CAAA;AAChB,CAAC,CAAA"}

package/lib/ui-components/react-joystick-component/shapes/shape.factory.d.ts

@@ -0,0 +1,4 @@
+import { JoystickShape } from "../enums/shape.enum";
+export declare const shapeFactory: (shape: JoystickShape, size: number) => {
+    borderRadius: number;
+};

package/lib/ui-components/react-joystick-component/shapes/shape.factory.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shapeFactory = void 0;
+var shape_enum_1 = require("../enums/shape.enum");
+var shapeFactory = function (shape, size) {
+    switch (shape) {
+        case shape_enum_1.JoystickShape.Circle:
+            return {
+                borderRadius: size,
+            };
+        case shape_enum_1.JoystickShape.Square:
+            return {
+                borderRadius: Math.sqrt(size)
+            };
+    }
+};
+exports.shapeFactory = shapeFactory;
+//# sourceMappingURL=shape.factory.js.map

package/lib/ui-components/react-joystick-component/shapes/shape.factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.factory.js","sourceRoot":"","sources":["../../../src/shapes/shape.factory.ts"],"names":[],"mappings":";;;AAAA,kDAAkD;AAE3C,IAAM,YAAY,GAAG,UAAC,KAAoB,EAAE,IAAY;IAC3D,QAAQ,KAAK,EAAC;QACV,KAAK,0BAAa,CAAC,MAAM;YACrB,OAAO;gBACH,YAAY,EAAC,IAAI;aACpB,CAAC;QACN,KAAK,0BAAa,CAAC,MAAM;YACrB,OAAQ;gBACJ,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;aAChC,CAAA;KACR;AACL,CAAC,CAAA;AAXY,QAAA,YAAY,gBAWxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-game-engine",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",
@@ -9,8 +9,7 @@
     "@types/matter-js": "^0.17.7",
     "@types/p5": "^1.4.2",
     "matter-js": "^0.18.0",
-    "p5": "^1.4.1",
-    "react-joystick-component": "^4.0.1"
+    "p5": "^1.4.1"
   },
   "devDependencies": {
     "@types/node": "^16.7.13",
@@ -19,7 +18,7 @@
     "typescript": "^4.4.2"
   },
   "scripts": {
-    "build": "rm -rf lib && tsc -p ."
+    "build": "rm -rf lib && tsc -p . && cp -R src/ui-components/react-joystick-component lib/ui-components/react-joystick-component"
   },
   "files": [
     "/lib"