react-simple-game-engine 0.2.31 → 0.2.33

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.
Files changed (9) hide show
  1. package/lib/classes/scaler.d.ts +9 -0
  2. package/lib/classes/scaler.d.ts.map +1 -1
  3. package/lib/classes/scaler.js +46 -4
  4. package/lib/ui-components/control.d.ts +1 -1
  5. package/lib/ui-components/control.d.ts.map +1 -1
  6. package/lib/ui-components/control.js +28 -8
  7. package/lib/ui-components/scene-runner.d.ts.map +1 -1
  8. package/lib/ui-components/scene-runner.js +2 -2
  9. package/package.json +1 -1
package/lib/classes/scaler.d.ts CHANGED
@@ -5,11 +5,20 @@ export declare class Scaler {
5
5
  private readonly _canvasSize;
6
6
  private _layoutMode;
7
7
  private _value;
8
+ private _scaledSize;
9
+ private _zoneDelta;
10
+ private _zoneDeltaHalf;
8
11
  constructor(_screenSize: Size, _canvasSize: Size, _layoutMode: LayoutMode);
9
12
  get value(): number;
10
13
  get layoutMode(): LayoutMode;
11
14
  get canvasSize(): Size;
12
15
  get screenSize(): Size;
16
+ get scaledSize(): Size;
17
+ get zoneDelta(): Size;
18
+ get zoneDeltaHalf(): Size;
19
+ set zoneDelta(_zoneDelta: Size);
20
+ set scaledSize(_scaledSize: Size);
21
+ set value(_value: number);
13
22
  set screenSize(_screenSize: Size);
14
23
  set canvasSize(_canvasSize: Size);
15
24
  set layoutMode(_layoutMode: LayoutMode);
package/lib/classes/scaler.d.ts.map CHANGED
@@ -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,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"}
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;IAMf,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,WAAW;IAPrB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAO;IAC1B,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,cAAc,CAAO;gBAEV,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,IAAI,EAC1B,WAAW,EAAE,UAAU;IAKjC,IAAI,KAAK,IA4CS,MAAM,CA1CvB;IAED,IAAI,UAAU,IAiEc,UAAU,CA/DrC;IAED,IAAI,UAAU,IAwDc,IAAI,CAtD/B;IAED,IAAI,UAAU,IA+Cc,IAAI,CA7C/B;IAED,IAAI,UAAU,IAoBc,IAAI,CAlB/B;IAED,IAAI,SAAS,IAQa,IAAI,CAN7B;IAED,IAAI,aAAa,SAEhB;IAED,IAAI,SAAS,CAAC,UAAU,EAAE,IAAI,EAM7B;IAED,IAAI,UAAU,CAAC,WAAW,EAAE,IAAI,EAM/B;IAED,IAAI,KAAK,CAAC,MAAM,EAAE,MAAM,EAMvB;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
@@ -11,6 +11,13 @@ var Scaler = /** @class */ (function () {
11
11
  get: function () {
12
12
  return this._value;
13
13
  },
14
+ set: function (_value) {
15
+ this._value = _value;
16
+ this.scaledSize = {
17
+ width: this._canvasSize.width * _value,
18
+ height: this._canvasSize.height * _value,
19
+ };
20
+ },
14
21
  enumerable: false,
15
22
  configurable: true
16
23
  });
@@ -53,24 +60,59 @@ var Scaler = /** @class */ (function () {
53
60
  enumerable: false,
54
61
  configurable: true
55
62
  });
63
+ Object.defineProperty(Scaler.prototype, "scaledSize", {
64
+ get: function () {
65
+ return this._scaledSize;
66
+ },
67
+ set: function (_scaledSize) {
68
+ this._scaledSize = _scaledSize;
69
+ this.zoneDelta = {
70
+ width: this._screenSize.width - _scaledSize.width,
71
+ height: this._screenSize.height - _scaledSize.height,
72
+ };
73
+ },
74
+ enumerable: false,
75
+ configurable: true
76
+ });
77
+ Object.defineProperty(Scaler.prototype, "zoneDelta", {
78
+ get: function () {
79
+ return this._zoneDelta;
80
+ },
81
+ set: function (_zoneDelta) {
82
+ this._zoneDelta = _zoneDelta;
83
+ this._zoneDeltaHalf = {
84
+ width: _zoneDelta.width / 2,
85
+ height: _zoneDelta.height / 2,
86
+ };
87
+ },
88
+ enumerable: false,
89
+ configurable: true
90
+ });
91
+ Object.defineProperty(Scaler.prototype, "zoneDeltaHalf", {
92
+ get: function () {
93
+ return this._zoneDeltaHalf;
94
+ },
95
+ enumerable: false,
96
+ configurable: true
97
+ });
56
98
  Scaler.prototype.screenUnitToCanvasUnit = function (px) {
57
99
  return px / this._value;
58
100
  };
59
101
  Scaler.prototype.update = function () {
60
102
  if (this._layoutMode === LayoutMode.LANDSCAPE) {
61
103
  if (this._screenSize.width >= this._screenSize.height) {
62
- this._value = this._screenSize.width / this._canvasSize.width;
104
+ this.value = this._screenSize.width / this._canvasSize.width;
63
105
  }
64
106
  else {
65
- this._value = this._screenSize.height / this._canvasSize.height;
107
+ this.value = this._screenSize.height / this._canvasSize.height;
66
108
  }
67
109
  }
68
110
  else {
69
111
  if (this._screenSize.height >= this._screenSize.width) {
70
- this._value = this._screenSize.width / this._canvasSize.width;
112
+ this.value = this._screenSize.width / this._canvasSize.width;
71
113
  }
72
114
  else {
73
- this._value = this._screenSize.height / this._canvasSize.height;
115
+ this.value = this._screenSize.height / this._canvasSize.height;
74
116
  }
75
117
  }
76
118
  };
package/lib/ui-components/control.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare type ControlProps = {
8
8
  right?: number;
9
9
  bottom?: number;
10
10
  render?: (el: ReactElement) => ReactNode;
11
- props: IJoystickProps;
11
+ props?: IJoystickProps;
12
12
  };
13
13
  export declare function Control({ scene, render, top, left, right, bottom, props, }: ControlProps): JSX.Element;
14
14
  //# sourceMappingURL=control.d.ts.map
package/lib/ui-components/control.d.ts.map CHANGED
@@ -1 +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,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"}
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,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,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,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAS,EACT,KAAK,EACL,MAAW,EACX,KAAK,GACN,EAAE,YAAY,eA6Dd"}
package/lib/ui-components/control.js CHANGED
@@ -12,17 +12,37 @@ var __assign = (this && this.__assign) || function () {
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { useMemo } from "react";
14
14
  import { Watcher } from "../utilities";
15
- import { FloatContainer } from "./float-container";
16
15
  import { Joystick } from "./react-joystick-component";
17
16
  export function Control(_a) {
18
17
  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
18
  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)) })));
19
+ var zoneDeltaHalf = Renderer.scaler.zoneDeltaHalf;
20
+ var positionLeft = left != null
21
+ ? {
22
+ left: left + zoneDeltaHalf.width,
23
+ }
24
+ : undefined;
25
+ var positionRight = right != null
26
+ ? {
27
+ right: right + -zoneDeltaHalf.width,
28
+ }
29
+ : undefined;
30
+ var positionTop = top != null
31
+ ? {
32
+ top: zoneDeltaHalf.height,
33
+ }
34
+ : undefined;
35
+ var positionBottom = bottom != null
36
+ ? {
37
+ bottom: bottom + -zoneDeltaHalf.height,
38
+ }
39
+ : undefined;
40
+ return (_jsx("div", __assign({ style: __assign(__assign(__assign(__assign({ position: "absolute" }, positionLeft), positionRight), positionTop), positionBottom) }, { children: _jsx(Joystick, __assign({ size: 100, baseColor: "#2D2D2D", stickColor: "##303134", throttle: 500 }, props)) })));
21
41
  }, [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
- } })) }));
42
+ return (_jsx(Watcher, __assign({ initialValues: {
43
+ isShow: true,
44
+ }, scene: scene, names: "control-visible" }, { children: function (_a) {
45
+ var isShow = _a.isShow;
46
+ return (isShow ? (render ? render(el) : el) : null);
47
+ } })));
28
48
  }
package/lib/ui-components/scene-runner.d.ts.map CHANGED
@@ -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;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"}
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,eA4IlB"}
package/lib/ui-components/scene-runner.js CHANGED
@@ -26,7 +26,7 @@ export function SceneRunner(_a) {
26
26
  var refScaler = useRef(new Scaler(screenSize, { width: width, height: height }, layoutMode));
27
27
  var _c = useState(false), isBootDone = _c[0], setBootDone = _c[1];
28
28
  useMemo(function () {
29
- refScaler.current.canvasSize = {
29
+ refScaler.current.screenSize = {
30
30
  width: screenSize.width,
31
31
  height: screenSize.height,
32
32
  };
@@ -93,5 +93,5 @@ export function SceneRunner(_a) {
93
93
  }
94
94
  return rendered;
95
95
  })()
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", {})) })) }))] })));
96
+ : assetsLoader })) : (_jsx(_Fragment, { children: isBootDone ? (_jsx(ScalerContainer, __assign({ value: refScaler.current.value, height: height, width: width }, { children: _jsxs(FloatContainer, { children: [_jsx(current.UI, __assign({ scene: current }, current.UIProps)), joystick && _jsx(Control, __assign({ scene: current }, joystick))] }) }))) : (_jsx("div", {})) })) }))] })));
97
97
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simple-game-engine",
3
- "version": "0.2.31",
3
+ "version": "0.2.33",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib",