react-simple-game-engine 0.2.17 → 0.2.19

package/lib/classes/scaler.d.ts

@@ -8,7 +8,7 @@ export declare class Scaler {
     constructor(_windowSize: Size, _canvasSize: Size, _layoutMode: LayoutMode);
     get value(): number;
     get layoutMode(): LayoutMode;
-    private get scaledSize();
+    get canvasSize(): Size;
     set windowSize(_windowSize: Size);
     set canvasSize(_canvasSize: Size);
     set layoutMode(_layoutMode: LayoutMode);

package/lib/classes/scaler.d.ts.map

@@ -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,IAqBc,UAAU,CAnBrC;IAED,OAAO,KAAK,UAAU,GAKrB;IAED,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,OAAO,CAAC,MAAM;CAef"}
+{"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,IAyBc,UAAU,CAvBrC;IAED,IAAI,UAAU,IAgBc,IAAI,CAd/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,OAAO,CAAC,MAAM;CAef"}

package/lib/classes/scaler.js

@@ -25,17 +25,24 @@ var Scaler = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "scaledSize", {
+    Object.defineProperty(Scaler.prototype, "canvasSize", {
         get: function () {
-            return {
-                width: this._canvasSize.width * this._value,
-                height: this._canvasSize.height * this._value,
-            };
+            return this._canvasSize;
+        },
+        set: function (_canvasSize) {
+            copyProperties(this._canvasSize, _canvasSize);
+            this.update();
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Scaler.prototype, "windowSize", {
+        // private get scaledSize() {
+        //   return {
+        //     width: this._canvasSize.width * this._value,
+        //     height: this._canvasSize.height * this._value,
+        //   };
+        // }
         set: function (_windowSize) {
             copyProperties(this._windowSize, _windowSize);
             this.update();
@@ -43,14 +50,6 @@ var Scaler = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Scaler.prototype, "canvasSize", {
-        set: function (_canvasSize) {
-            copyProperties(this._canvasSize, _canvasSize);
-            this.update();
-        },
-        enumerable: false,
-        configurable: true
-    });
     Scaler.prototype.update = function () {
         if (this._layoutMode === LayoutMode.LANDSCAPE) {
             if (this._windowSize.width >= this._windowSize.height) {

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

@@ -18,13 +18,13 @@ export function ScalerContainer(_a) {
             position: "relative",
             top: 0,
             left: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
         } }, { children: _jsx("div", __assign({ style: {
                 width: width,
                 height: height,
-                transform: "scale(".concat(value, ")"),
+                transform: "scale(".concat(value, ") translate(-50%, -50%)"),
                 transformOrigin: "left top",
+                position: "relative",
+                top: "50%",
+                left: "50%",
             } }, { children: children })) })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-game-engine",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "",
   "main": "lib/index.js",
   "types": "lib",