react-simple-game-engine 0.2.28 → 0.2.30

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;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAMzC,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

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Watcher } from "../utilities";
 import { FloatContainer } from "./float-container";
-var Joystick = require("react-joystick-component").Joystick;
+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":["./Joystick.d.d.ts"],"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":[".././enums/shape.enum.d.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":["./index.d.d.ts"],"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":[".././shapes/shape.bounds.factory.d.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":[".././shapes/shape.factory.d.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.28",
+  "version": "0.2.30",
   "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"