react-simple-game-engine 0.2.24 → 0.2.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/classes/scaler.d.ts +5 -3
- package/lib/classes/scaler.d.ts.map +1 -1
- package/lib/classes/scaler.js +17 -11
- package/lib/classes/scene.d.ts.map +1 -1
- package/lib/ui-components/control.d.ts +14 -0
- package/lib/ui-components/control.d.ts.map +1 -0
- package/lib/ui-components/control.js +28 -0
- package/lib/ui-components/float-container.d.ts +8 -0
- package/lib/ui-components/float-container.d.ts.map +1 -0
- package/lib/ui-components/float-container.js +16 -0
- package/lib/ui-components/scene-runner.d.ts +3 -1
- package/lib/ui-components/scene-runner.d.ts.map +1 -1
- package/lib/ui-components/scene-runner.js +16 -24
- package/package.json +6 -2
package/lib/classes/scaler.d.ts
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { LayoutMode } from "../export-enums";
|
|
2
2
|
import { Size } from "../export-types";
|
|
3
3
|
export declare class Scaler {
|
|
4
|
-
private readonly
|
|
4
|
+
private readonly _screenSize;
|
|
5
5
|
private readonly _canvasSize;
|
|
6
6
|
private _layoutMode;
|
|
7
7
|
private _value;
|
|
8
|
-
constructor(
|
|
8
|
+
constructor(_screenSize: Size, _canvasSize: Size, _layoutMode: LayoutMode);
|
|
9
9
|
get value(): number;
|
|
10
10
|
get layoutMode(): LayoutMode;
|
|
11
11
|
get canvasSize(): Size;
|
|
12
|
-
|
|
12
|
+
get screenSize(): Size;
|
|
13
|
+
set screenSize(_screenSize: Size);
|
|
13
14
|
set canvasSize(_canvasSize: Size);
|
|
14
15
|
set layoutMode(_layoutMode: LayoutMode);
|
|
16
|
+
screenUnitToCanvasUnit(px: number): number;
|
|
15
17
|
private update;
|
|
16
18
|
}
|
|
17
19
|
//# sourceMappingURL=scaler.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scaler.d.ts","sourceRoot":"","sources":["../../src/classes/scaler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGvC,qBAAa,MAAM;IAGf,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,WAAW;IAJrB,OAAO,CAAC,MAAM,CAAS;gBAEJ,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,IAAI,EAC1B,WAAW,EAAE,UAAU;IAKjC,IAAI,KAAK,WAER;IAED,IAAI,UAAU,
|
|
1
|
+
{"version":3,"file":"scaler.d.ts","sourceRoot":"","sources":["../../src/classes/scaler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGvC,qBAAa,MAAM;IAGf,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,WAAW;IAJrB,OAAO,CAAC,MAAM,CAAS;gBAEJ,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,IAAI,EAC1B,WAAW,EAAE,UAAU;IAKjC,IAAI,KAAK,WAER;IAED,IAAI,UAAU,IA6Bc,UAAU,CA3BrC;IAED,IAAI,UAAU,IAoBc,IAAI,CAlB/B;IAED,IAAI,UAAU,IAWc,IAAI,CAT/B;IASD,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAG/B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAG/B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,UAAU,EAGrC;IAED,sBAAsB,CAAC,EAAE,EAAE,MAAM;IAIjC,OAAO,CAAC,MAAM;CAef"}
|
package/lib/classes/scaler.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { LayoutMode } from "../export-enums";
|
|
2
2
|
import { copyProperties } from "../utils";
|
|
3
3
|
var Scaler = /** @class */ (function () {
|
|
4
|
-
function Scaler(
|
|
5
|
-
this.
|
|
4
|
+
function Scaler(_screenSize, _canvasSize, _layoutMode) {
|
|
5
|
+
this._screenSize = _screenSize;
|
|
6
6
|
this._canvasSize = _canvasSize;
|
|
7
7
|
this._layoutMode = _layoutMode;
|
|
8
8
|
this.update();
|
|
@@ -36,35 +36,41 @@ var Scaler = /** @class */ (function () {
|
|
|
36
36
|
enumerable: false,
|
|
37
37
|
configurable: true
|
|
38
38
|
});
|
|
39
|
-
Object.defineProperty(Scaler.prototype, "
|
|
39
|
+
Object.defineProperty(Scaler.prototype, "screenSize", {
|
|
40
|
+
get: function () {
|
|
41
|
+
return this._screenSize;
|
|
42
|
+
},
|
|
40
43
|
// private get scaledSize() {
|
|
41
44
|
// return {
|
|
42
45
|
// width: this._canvasSize.width * this._value,
|
|
43
46
|
// height: this._canvasSize.height * this._value,
|
|
44
47
|
// };
|
|
45
48
|
// }
|
|
46
|
-
set: function (
|
|
47
|
-
copyProperties(this.
|
|
49
|
+
set: function (_screenSize) {
|
|
50
|
+
copyProperties(this._screenSize, _screenSize);
|
|
48
51
|
this.update();
|
|
49
52
|
},
|
|
50
53
|
enumerable: false,
|
|
51
54
|
configurable: true
|
|
52
55
|
});
|
|
56
|
+
Scaler.prototype.screenUnitToCanvasUnit = function (px) {
|
|
57
|
+
return px / this._value;
|
|
58
|
+
};
|
|
53
59
|
Scaler.prototype.update = function () {
|
|
54
60
|
if (this._layoutMode === LayoutMode.LANDSCAPE) {
|
|
55
|
-
if (this.
|
|
56
|
-
this._value = this.
|
|
61
|
+
if (this._screenSize.width >= this._screenSize.height) {
|
|
62
|
+
this._value = this._screenSize.width / this._canvasSize.width;
|
|
57
63
|
}
|
|
58
64
|
else {
|
|
59
|
-
this._value = this.
|
|
65
|
+
this._value = this._screenSize.height / this._canvasSize.height;
|
|
60
66
|
}
|
|
61
67
|
}
|
|
62
68
|
else {
|
|
63
|
-
if (this.
|
|
64
|
-
this._value = this.
|
|
69
|
+
if (this._screenSize.height >= this._screenSize.width) {
|
|
70
|
+
this._value = this._screenSize.width / this._canvasSize.width;
|
|
65
71
|
}
|
|
66
72
|
else {
|
|
67
|
-
this._value = this.
|
|
73
|
+
this._value = this._screenSize.height / this._canvasSize.height;
|
|
68
74
|
}
|
|
69
75
|
}
|
|
70
76
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../../src/classes/scene.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../../src/classes/scene.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from "react";
|
|
2
|
+
import { IJoystickProps } from "react-joystick-component/build/lib/Joystick";
|
|
3
|
+
import { Scene } from "../classes/scene";
|
|
4
|
+
export declare type ControlProps = {
|
|
5
|
+
scene: Scene;
|
|
6
|
+
top?: number;
|
|
7
|
+
left?: number;
|
|
8
|
+
right?: number;
|
|
9
|
+
bottom?: number;
|
|
10
|
+
render?: (el: ReactElement) => ReactNode;
|
|
11
|
+
props: IJoystickProps;
|
|
12
|
+
};
|
|
13
|
+
export declare function Control({ scene, render, top, left, right, bottom, props, }: ControlProps): JSX.Element;
|
|
14
|
+
//# sourceMappingURL=control.d.ts.map
|
|
@@ -0,0 +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,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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { useMemo } from "react";
|
|
14
|
+
import { Joystick, } from "react-joystick-component/build/lib/Joystick";
|
|
15
|
+
import { Watcher } from "../utilities";
|
|
16
|
+
import { FloatContainer } from "./float-container";
|
|
17
|
+
export function Control(_a) {
|
|
18
|
+
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;
|
|
19
|
+
var el = useMemo(function () {
|
|
20
|
+
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)) })));
|
|
21
|
+
}, [props]);
|
|
22
|
+
return (_jsx(FloatContainer, { children: _jsx(Watcher, __assign({ initialValues: {
|
|
23
|
+
isShow: true,
|
|
24
|
+
}, scene: scene, names: "control-visible" }, { children: function (_a) {
|
|
25
|
+
var isShow = _a.isShow;
|
|
26
|
+
return (isShow ? (render ? render(el) : el) : null);
|
|
27
|
+
} })) }));
|
|
28
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from "react";
|
|
2
|
+
declare type FloatContainerProps = {
|
|
3
|
+
style?: CSSProperties;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
};
|
|
6
|
+
export declare function FloatContainer({ children, style }: FloatContainerProps): JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=float-container.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
export function FloatContainer(_a) {
|
|
14
|
+
var children = _a.children, style = _a.style;
|
|
15
|
+
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 })) })));
|
|
16
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentType, ReactNode } from "react";
|
|
2
2
|
import { AssetsFailBehavior, Scene } from "../classes/scene";
|
|
3
3
|
import { LayoutMode } from "../export-enums";
|
|
4
|
+
import { ControlProps } from "./control";
|
|
4
5
|
export declare type SceneRunnerPublicProps = {
|
|
5
6
|
width: number;
|
|
6
7
|
height: number;
|
|
@@ -9,10 +10,11 @@ export declare type SceneRunnerPublicProps = {
|
|
|
9
10
|
assetsFailBehavior?: AssetsFailBehavior;
|
|
10
11
|
layoutMode?: LayoutMode;
|
|
11
12
|
voidSpace?: ReactNode;
|
|
13
|
+
joystick?: Omit<ControlProps, "scene">;
|
|
12
14
|
};
|
|
13
15
|
declare type SceneRunnerProps = SceneRunnerPublicProps & {
|
|
14
16
|
current: Scene;
|
|
15
17
|
};
|
|
16
|
-
export declare function SceneRunner({ width, height, current, layoutMode, voidSpace, assetsDelay, assetsFailBehavior, assetsLoader: AssetsLoader, }: SceneRunnerProps): JSX.Element;
|
|
18
|
+
export declare function SceneRunner({ width, height, current, layoutMode, voidSpace, assetsDelay, assetsFailBehavior, assetsLoader: AssetsLoader, joystick, }: SceneRunnerProps): JSX.Element;
|
|
17
19
|
export {};
|
|
18
20
|
//# sourceMappingURL=scene-runner.d.ts.map
|
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -11,24 +11,26 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
13
|
import { useEffect, useMemo, useRef, useState, } from "react";
|
|
14
|
-
import { useWindowSize } from "../utils";
|
|
15
|
-
import { LayoutMode } from "../export-enums";
|
|
16
|
-
import { ScalerContainer } from "./scaler-container";
|
|
17
14
|
import { Scaler } from "../classes/scaler";
|
|
15
|
+
import { ScalerContainer } from "./scaler-container";
|
|
18
16
|
import { Sketch } from "./sketch";
|
|
17
|
+
import { useWindowSize } from "../utils";
|
|
18
|
+
import { LayoutMode } from "../export-enums";
|
|
19
|
+
import { Control } from "./control";
|
|
20
|
+
import { FloatContainer } from "./float-container";
|
|
19
21
|
export function SceneRunner(_a) {
|
|
20
22
|
var width = _a.width, height = _a.height, current = _a.current, _b = _a.layoutMode, layoutMode = _b === void 0 ? LayoutMode.LANDSCAPE : _b,
|
|
21
23
|
//
|
|
22
|
-
voidSpace = _a.voidSpace, assetsDelay = _a.assetsDelay, assetsFailBehavior = _a.assetsFailBehavior, AssetsLoader = _a.assetsLoader;
|
|
23
|
-
var
|
|
24
|
-
var refScaler = useRef(new Scaler(
|
|
24
|
+
voidSpace = _a.voidSpace, assetsDelay = _a.assetsDelay, assetsFailBehavior = _a.assetsFailBehavior, AssetsLoader = _a.assetsLoader, joystick = _a.joystick;
|
|
25
|
+
var screenSize = useWindowSize();
|
|
26
|
+
var refScaler = useRef(new Scaler(screenSize, { width: width, height: height }, layoutMode));
|
|
25
27
|
var _c = useState(false), isBootDone = _c[0], setBootDone = _c[1];
|
|
26
28
|
useMemo(function () {
|
|
27
29
|
refScaler.current.canvasSize = {
|
|
28
|
-
width:
|
|
29
|
-
height:
|
|
30
|
+
width: screenSize.width,
|
|
31
|
+
height: screenSize.height,
|
|
30
32
|
};
|
|
31
|
-
}, [
|
|
33
|
+
}, [screenSize]);
|
|
32
34
|
useMemo(function () {
|
|
33
35
|
if (window.Renderer) {
|
|
34
36
|
window.Renderer.resizeCanvas(width, height);
|
|
@@ -59,8 +61,8 @@ export function SceneRunner(_a) {
|
|
|
59
61
|
return (AssetsLoader !== null && AssetsLoader !== void 0 ? AssetsLoader : _jsx("div", { children: "Assets loading..." }));
|
|
60
62
|
}, [AssetsLoader]);
|
|
61
63
|
return (_jsxs("div", __assign({ style: {
|
|
62
|
-
width:
|
|
63
|
-
height:
|
|
64
|
+
width: screenSize.width,
|
|
65
|
+
height: screenSize.height,
|
|
64
66
|
overflow: "hidden",
|
|
65
67
|
position: "relative",
|
|
66
68
|
boxSizing: "border-box",
|
|
@@ -71,22 +73,12 @@ export function SceneRunner(_a) {
|
|
|
71
73
|
msUserSelect: "none",
|
|
72
74
|
userSelect: "none",
|
|
73
75
|
textSizeAdjust: "none",
|
|
74
|
-
} }, { children: [_jsx(
|
|
75
|
-
position: "absolute",
|
|
76
|
-
top: 0,
|
|
77
|
-
left: 0,
|
|
78
|
-
width: "100%",
|
|
79
|
-
height: "100%",
|
|
76
|
+
} }, { children: [_jsx(FloatContainer, __assign({ style: {
|
|
80
77
|
zIndex: -1,
|
|
81
78
|
backgroundColor: "rgb(41,41,41)",
|
|
82
79
|
} }, { children: voidSpace })), _jsx(ScalerContainer, __assign({ value: refScaler.current.value, width: width, height: height }, { children: current.loadedAssets && (
|
|
83
80
|
// canvas
|
|
84
|
-
_jsx(Sketch, { onSetup: setup, onDraw: draw, scaler: refScaler.current })) })), _jsx(
|
|
85
|
-
position: "absolute",
|
|
86
|
-
top: 0,
|
|
87
|
-
left: 0,
|
|
88
|
-
width: "100%",
|
|
89
|
-
height: "100%",
|
|
81
|
+
_jsx(Sketch, { onSetup: setup, onDraw: draw, scaler: refScaler.current })) })), _jsx(FloatContainer, __assign({ style: {
|
|
90
82
|
zIndex: 2,
|
|
91
83
|
} }, { children: !current.loadedAssets ? (_jsx(_Fragment, { children: current.renderAssetsFail
|
|
92
84
|
? (function () {
|
|
@@ -101,5 +93,5 @@ export function SceneRunner(_a) {
|
|
|
101
93
|
}
|
|
102
94
|
return rendered;
|
|
103
95
|
})()
|
|
104
|
-
: assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (
|
|
96
|
+
: 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", {})) })) }))] })));
|
|
105
97
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-simple-game-engine",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.26",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib",
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
"@types/matter-js": "^0.17.7",
|
|
10
10
|
"@types/p5": "^1.4.2",
|
|
11
11
|
"matter-js": "^0.18.0",
|
|
12
|
-
"p5": "^1.4.1"
|
|
12
|
+
"p5": "^1.4.1",
|
|
13
|
+
"react-joystick-component": "^4.0.1"
|
|
13
14
|
},
|
|
14
15
|
"devDependencies": {
|
|
15
16
|
"@types/node": "^16.7.13",
|
|
@@ -36,6 +37,9 @@
|
|
|
36
37
|
"react simple game engine",
|
|
37
38
|
"reactjs game",
|
|
38
39
|
"reactjs game engine",
|
|
40
|
+
"joystick game engine",
|
|
41
|
+
"joystick engine",
|
|
42
|
+
"joystick",
|
|
39
43
|
"reactjs simple game engine"
|
|
40
44
|
]
|
|
41
45
|
}
|