react-simple-game-engine 0.2.25 → 0.2.26

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

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from "react";
+import { IJoystickProps } from "react-joystick-component/build/lib/Joystick";
+import { Scene } from "../classes/scene";
+export declare type ControlProps = {
+    scene: Scene;
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+    render?: (el: ReactElement) => ReactNode;
+    props: IJoystickProps;
+};
+export declare function Control({ scene, render, top, left, right, bottom, props, }: ControlProps): JSX.Element;
+//# sourceMappingURL=control.d.ts.map

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

@@ -0,0 +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,EACL,cAAc,EAEf,MAAM,6CAA6C,CAAC;AACrD,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"}

package/lib/ui-components/control.js

@@ -0,0 +1,28 @@
+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 { useMemo } from "react";
+import { Joystick, } from "react-joystick-component/build/lib/Joystick";
+import { Watcher } from "../utilities";
+import { FloatContainer } from "./float-container";
+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 () {
+        return (_jsx("div", __assign({ style: { position: "absolute", top: top, left: left, right: right, bottom: bottom } }, { children: _jsx(Joystick, __assign({ size: 100, baseColor: "#2D2D2D", stickColor: "##303134", throttle: 500 }, props)) })));
+    }, [props]);
+    return (_jsx(FloatContainer, { children: _jsx(Watcher, __assign({ initialValues: {
+                isShow: true,
+            }, scene: scene, names: "control-visible" }, { children: function (_a) {
+                var isShow = _a.isShow;
+                return (isShow ? (render ? render(el) : el) : null);
+            } })) }));
+}

package/lib/ui-components/float-container.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from "react";
+declare type FloatContainerProps = {
+    style?: CSSProperties;
+    children: ReactNode;
+};
+export declare function FloatContainer({ children, style }: FloatContainerProps): JSX.Element;
+export {};
+//# sourceMappingURL=float-container.d.ts.map

package/lib/ui-components/float-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"float-container.d.ts","sourceRoot":"","sources":["../../src/ui-components/float-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,aAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,mBAAmB,eAiBtE"}

package/lib/ui-components/float-container.js

@@ -0,0 +1,16 @@
+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";
+export function FloatContainer(_a) {
+    var children = _a.children, style = _a.style;
+    return (_jsx("div", __assign({ style: __assign({ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, style) }, { children: _jsx("div", __assign({ style: { position: "relative", width: "100%", height: "100%" } }, { children: children })) })));
+}

package/lib/ui-components/scene-runner.d.ts

@@ -1,6 +1,7 @@
 import { ComponentType, ReactNode } from "react";
 import { AssetsFailBehavior, Scene } from "../classes/scene";
 import { LayoutMode } from "../export-enums";
+import { ControlProps } from "./control";
 export declare type SceneRunnerPublicProps = {
     width: number;
     height: number;
@@ -9,10 +10,11 @@ export declare type SceneRunnerPublicProps = {
     assetsFailBehavior?: AssetsFailBehavior;
     layoutMode?: LayoutMode;
     voidSpace?: ReactNode;
+    joystick?: Omit<ControlProps, "scene">;
 };
 declare type SceneRunnerProps = SceneRunnerPublicProps & {
     current: Scene;
 };
-export declare function SceneRunner({ width, height, current, layoutMode, voidSpace, assetsDelay, assetsFailBehavior, assetsLoader: AssetsLoader, }: SceneRunnerProps): JSX.Element;
+export declare function SceneRunner({ width, height, current, layoutMode, voidSpace, assetsDelay, assetsFailBehavior, assetsLoader: AssetsLoader, joystick, }: SceneRunnerProps): JSX.Element;
 export {};
 //# sourceMappingURL=scene-runner.d.ts.map

package/lib/ui-components/scene-runner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene-runner.d.ts","sourceRoot":"","sources":["../../src/ui-components/scene-runner.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAK7C,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,aAAK,gBAAgB,GAAG,sBAAsB,GAAG;IAC/C,OAAO,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAiC,EAEjC,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,YAAY,EAAE,YAAY,GAC3B,EAAE,gBAAgB,eAmJlB"}
+{"version":3,"file":"scene-runner.d.ts","sourceRoot":"","sources":["../../src/ui-components/scene-runner.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAQ7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAGlD,oBAAY,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;CACxC,CAAC;AAEF,aAAK,gBAAgB,GAAG,sBAAsB,GAAG;IAC/C,OAAO,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAiC,EAEjC,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,YAAY,EAAE,YAAY,EAC1B,QAAQ,GACT,EAAE,gBAAgB,eA0IlB"}

package/lib/ui-components/scene-runner.js

@@ -11,15 +11,17 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState, } from "react";
-import { useWindowSize } from "../utils";
-import { LayoutMode } from "../export-enums";
-import { ScalerContainer } from "./scaler-container";
 import { Scaler } from "../classes/scaler";
+import { ScalerContainer } from "./scaler-container";
 import { Sketch } from "./sketch";
+import { useWindowSize } from "../utils";
+import { LayoutMode } from "../export-enums";
+import { Control } from "./control";
+import { FloatContainer } from "./float-container";
 export function SceneRunner(_a) {
     var width = _a.width, height = _a.height, current = _a.current, _b = _a.layoutMode, layoutMode = _b === void 0 ? LayoutMode.LANDSCAPE : _b, 
     //
-    voidSpace = _a.voidSpace, assetsDelay = _a.assetsDelay, assetsFailBehavior = _a.assetsFailBehavior, AssetsLoader = _a.assetsLoader;
+    voidSpace = _a.voidSpace, assetsDelay = _a.assetsDelay, assetsFailBehavior = _a.assetsFailBehavior, AssetsLoader = _a.assetsLoader, joystick = _a.joystick;
     var screenSize = useWindowSize();
     var refScaler = useRef(new Scaler(screenSize, { width: width, height: height }, layoutMode));
     var _c = useState(false), isBootDone = _c[0], setBootDone = _c[1];
@@ -71,22 +73,12 @@ export function SceneRunner(_a) {
             msUserSelect: "none",
             userSelect: "none",
             textSizeAdjust: "none",
-        } }, { children: [_jsx("div", __assign({ style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
+        } }, { children: [_jsx(FloatContainer, __assign({ style: {
                     zIndex: -1,
                     backgroundColor: "rgb(41,41,41)",
                 } }, { children: voidSpace })), _jsx(ScalerContainer, __assign({ value: refScaler.current.value, width: width, height: height }, { children: current.loadedAssets && (
                 // canvas
-                _jsx(Sketch, { onSetup: setup, onDraw: draw, scaler: refScaler.current })) })), _jsx("div", __assign({ style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
+                _jsx(Sketch, { onSetup: setup, onDraw: draw, scaler: refScaler.current })) })), _jsx(FloatContainer, __assign({ style: {
                     zIndex: 2,
                 } }, { children: !current.loadedAssets ? (_jsx(_Fragment, { children: current.renderAssetsFail
                         ? (function () {
@@ -101,5 +93,5 @@ export function SceneRunner(_a) {
                             }
                             return rendered;
                         })()
-                        : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsx(ScalerContainer, __assign({ value: refScaler.current.value, height: height, width: width }, { children: _jsx(current.UI, __assign({ scene: current }, current.UIProps)) }))) : (_jsx("div", {})) })) }))] })));
+                        : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsxs(ScalerContainer, __assign({ value: refScaler.current.value, height: height, width: width }, { children: [joystick && _jsx(Control, __assign({ scene: current }, joystick)), _jsx(current.UI, __assign({ scene: current }, current.UIProps))] }))) : (_jsx("div", {})) })) }))] })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-game-engine",
-  "version": "0.2.25",
+  "version": "0.2.26",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",
@@ -9,7 +9,8 @@
     "@types/matter-js": "^0.17.7",
     "@types/p5": "^1.4.2",
     "matter-js": "^0.18.0",
-    "p5": "^1.4.1"
+    "p5": "^1.4.1",
+    "react-joystick-component": "^4.0.1"
   },
   "devDependencies": {
     "@types/node": "^16.7.13",
@@ -36,6 +37,9 @@
     "react simple game engine",
     "reactjs game",
     "reactjs game engine",
+    "joystick game engine",
+    "joystick engine",
+    "joystick",
     "reactjs simple game engine"
   ]
 }