Updated to phaser 3.10.0

TODO.md

@@ -4,7 +4,6 @@ To-Do-list
 Phaser 3 migration
 ------------------
 
-* Pause the game when the window isn't focused (except in headless)
 * Fit the game in window size
 * Fix top-right messages positions
 * Fix valuebar requiring to be in root display list
@@ -109,6 +108,7 @@ Common UI
 Technical
 ---------
 
+* Pause timers when the game is paused (at least animation timers)
 * Pack sounds
 * Add toggles for shaders, automatically disable them if too slow, and initially disable them on mobile
 * Add cache for image texture lookup (getImageInfo)

package-lock.json

@@ -4919,9 +4919,9 @@
       }
     },
     "phaser": {
-      "version": "3.9.0",
+      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.10.0.tgz",
-      "integrity": "sha1-CsZGUDGwoUpK9DIPr5Xzn2cVmdc=",
+      "integrity": "sha512-e/sL7/h2j2k8Cnrxp8bN637N6LYoqJlBFPGeYhmZiyRvGtt7IbK2v1q+wjFlNRtPvgFQ7v5K4X5Wy2lpU7Uj7Q==",
       "requires": {
         "eventemitter3": "^3.1.0"
       }

package.json

@@ -39,7 +39,7 @@
   "dependencies": {
     "jasmine-core": "^3.1.0",
     "parse": "^1.11.1",
-    "phaser": "^3.9.0",
+    "phaser": "^3.10.0",
     "process-pool": "^0.3.5"
   }
 }

src/MainUI.ts

@@ -53,6 +53,13 @@ module TK.SpaceTac {
             this.session_token = null;
 
             if (!headless) {
+                this.events.on("blur", () => {
+                    this.scene.scenes.forEach(scene => this.scene.pause(scene));
+                });
+                this.events.on("focus", () => {
+                    this.scene.scenes.forEach(scene => this.scene.resume(scene));
+                });
+
                 this.scene.add('boot', UI.Boot);
                 this.scene.add('loading', UI.AssetLoading);
                 this.scene.add('mainmenu', UI.MainMenu);

src/ui/common/InputManager.spec.ts

@@ -6,6 +6,7 @@ module TK.SpaceTac.UI.Specs {
             let inputs = testgame.view.inputs;
 
             let pointer = new Phaser.Input.Pointer(testgame.view.input.manager, 0);
+            pointer.buttons = 1;
             function newButton(): [UIImage, { enter: Mock<Function>, leave: Mock<Function>, click: Mock<Function> }] {
                 let button = new UIImage(testgame.view, 0, 0, "fake");
                 let mocks = {
@@ -96,6 +97,17 @@ module TK.SpaceTac.UI.Specs {
                 check.called(mocks.leave, 1);
                 check.called(mocks.click, 0);
             });
+
+            [button, mocks] = newButton();
+            pointer.buttons = 2;
+            check.in("No right button", check => {
+                enter(button);
+                press(button);
+                release(button);
+                check.called(mocks.enter, 0);
+                check.called(mocks.leave, 0);
+                check.called(mocks.click, 0);
+            });
         });
     });
 }

src/ui/common/InputManager.ts

@@ -8,7 +8,6 @@ module TK.SpaceTac.UI {
         private debug = false
         private view: BaseView
         private game: MainUI
-        private input: Phaser.Input.InputManager
 
         private cheats_allowed: boolean
         private cheat: boolean
@@ -23,7 +22,6 @@ module TK.SpaceTac.UI {
         constructor(view: BaseView) {
             this.view = view;
             this.game = view.gameui;
-            this.input = view.input.manager;
             this.cheats_allowed = true;
             this.cheat = false;
 
@@ -49,7 +47,7 @@ module TK.SpaceTac.UI {
             });
 
             if (!this.game.headless) {
-                this.input.keyboard.on("keyup", (event: KeyboardEvent) => {
+                this.view.input.keyboard.on("keyup", (event: KeyboardEvent) => {
                     if (this.debug) {
                         console.log(event);
                     }
@@ -70,7 +68,7 @@ module TK.SpaceTac.UI {
          * Remove the bindings
          */
         destroy(): void {
-            this.input.keyboard.removeAllListeners("keyup");
+            this.view.input.keyboard.removeAllListeners("keyup");
         }
 
         /**
@@ -159,7 +157,10 @@ module TK.SpaceTac.UI {
                 let bounds = obj.getBounds();
                 bounds.x -= obj.x;
                 bounds.y -= obj.y;
-                obj.setInteractive(bounds, Phaser.Geom.Rectangle.Contains);
+                obj.setInteractive({
+                    hitArea: bounds,
+                    hitAreaCallback: Phaser.Geom.Rectangle.Contains,
+                });
             }
 
             let prevententer = () => {
@@ -221,8 +222,8 @@ module TK.SpaceTac.UI {
                 effectiveleave();
             });
 
-            obj.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
+            obj.on("pointerdown", (pointer?: Phaser.Input.Pointer) => {
-                if (destroyed || pointer.buttons != 1) return;
+                if (destroyed || (pointer && pointer.buttons != 1)) return;
 
                 if (UITools.isVisible(obj)) {
                     holdstart = Timer.nowMs();
@@ -235,8 +236,8 @@ module TK.SpaceTac.UI {
                 }
             });
 
-            obj.on("pointerup", (pointer: Phaser.Input.Pointer) => {
+            obj.on("pointerup", (pointer?: Phaser.Input.Pointer) => {
-                if (destroyed || pointer.buttons != 1) return;
+                if (destroyed || (pointer && pointer.buttons != 1)) return;
 
                 if (!cursorinside) {
                     effectiveleave();

src/ui/common/UIButton.ts

@@ -75,12 +75,16 @@ module TK.SpaceTac.UI {
             let interactive = bool(clickable || tooltip);
 
             if (interactive) {
-                this.setInteractive(new Phaser.Geom.Rectangle(
+                this.setInteractive({
-                    options.center ? 0 : base.width / 2,
+                    hitArea: new Phaser.Geom.Rectangle(
-                    options.center ? 0 : base.height / 2,
+                        options.center ? 0 : base.width / 2,
-                    base.width,
+                        options.center ? 0 : base.height / 2,
-                    base.height
+                        base.width,
-                ), (rect: Phaser.Geom.Rectangle, x: number, y: number) => Phaser.Geom.Rectangle.Contains(rect, x, y) && UITools.isVisible(this));
+                        base.height
+                    ),
+                    hitAreaCallback: Phaser.Geom.Rectangle.Contains,
+                    useHandCursor: clickable
+                });
 
                 // On mask
                 if (onoffcallback) {

src/ui/common/UIGraphics.ts

@@ -23,7 +23,7 @@ module TK.SpaceTac.UI {
      */
     export class UIGraphics extends Phaser.GameObjects.Graphics {
         constructor(view: BaseView, name: string, visible = true, x = 0, y = 0) {
-            super(view, {});
+            super(view);
             this.setName(name);
             this.setVisible(visible);
             this.setPosition(x, y);

src/ui/common/UIOverlay.ts

@@ -14,7 +14,10 @@ module TK.SpaceTac.UI {
 
             let rect = { x: 0, y: 0, width: view.getWidth(), height: view.getHeight() };
             this.addRectangle(rect, options.color, undefined, undefined, options.alpha);
-            this.setInteractive(rect, (rect: Phaser.Geom.Rectangle, x: number, y: number) => Phaser.Geom.Rectangle.Contains(rect, x, y) && UITools.isVisible(this));
+            this.setInteractive({
+                hitArea: rect,
+                hitAreaCallback: Phaser.Geom.Rectangle.Contains,
+            });
             this.on("pointerup", options.on_click || nop);
         }
     }