Restored game area scaling to fit the screen

TODO.md

@@ -4,8 +4,6 @@ To-Do-list
 Phaser 3 migration
 ------------------
 
-* Fit the game in window size
-* Fix top-right messages positions
 * Fix valuebar requiring to be in root display list
 * Restore unit tests about boundaries (in UITools)
 

out/index.html

@@ -46,7 +46,6 @@
     <script src="build.js"></script>
 
     <script>
-        window.oncontextmenu = function (e) { e.preventDefault(); };
         window.onload = function () {
             window.game = new TK.SpaceTac.MainUI();
         };

src/MainUI.ts

@@ -38,13 +38,18 @@ module TK.SpaceTac {
         // Debug mode
         debug = false
 
+        // Current scaling
+        scaling = 1
+
         constructor(headless: boolean = false) {
             super({
                 width: 1920,
                 height: 1080,
                 type: headless ? Phaser.HEADLESS : Phaser.AUTO,
                 backgroundColor: '#000000',
-                parent: '-space-tac'
+                parent: '-space-tac',
+                disableContextMenu: true,
+                "render.autoResize": true,
             });
 
             this.storage = localStorage;
@@ -69,10 +74,27 @@ module TK.SpaceTac {
                 this.scene.add('creation', UI.FleetCreationView);
                 this.scene.add('universe', UI.UniverseMapView);
 
+                this.resizeToFitWindow();
+                window.addEventListener("resize", () => this.resizeToFitWindow());
+
                 this.goToScene('boot');
             }
         }
 
+        resize(width: number, height: number, scaling?: number) {
+            super.resize(width, height);
+
+            this.scaling = scaling ? scaling : 1;
+            cfilter(this.scene.scenes, UI.BaseView).forEach(scene => scene.resize());
+        }
+
+        resizeToFitWindow() {
+            let width = window.innerWidth;
+            let height = window.innerHeight;
+            let scale = Math.min(width / 1920, height / 1080);
+            this.resize(1920 * scale, 1080 * scale, scale);
+        }
+
         boot() {
             super.boot();
             this.options = new UI.GameOptions(this);

src/ui/AssetLoading.ts

@@ -33,9 +33,9 @@ module TK.SpaceTac.UI {
         }
 
         preload() {
-            let bg = this.add.image(643, 435, "preload-background");
+            let bg = this.add.image(this.getX(0.5) - 317, this.getY(0.5) - 105, "preload-background");
             bg.setOrigin(0);
-            let bar = this.add.image(643, 435, "preload-bar");
+            let bar = this.add.image(this.getX(0.5) - 317, this.getY(0.5) - 105, "preload-bar");
             bar.setOrigin(0);
             let mask = this.make.graphics({ x: bar.x, y: bar.y, add: false });
             mask.fillStyle(0xffffff);
@@ -46,7 +46,7 @@ module TK.SpaceTac.UI {
                 mask.fillRect(0, 0, value * bar.width, bar.height);
             });
 
-            let text = this.add.text(this.getMidWidth(), 466, "... Loading ...", { font: "normal 36pt SpaceTac", fill: "#dbeff9" });
+            let text = this.add.text(this.getX(0.5), this.getY(0.5) - 74, "... Loading ...", { font: "normal 36pt SpaceTac", fill: "#dbeff9" });
             text.setOrigin(0.5);
 
             if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {

src/ui/BaseView.ts

@@ -39,16 +39,16 @@ module TK.SpaceTac.UI {
 
         // Get the size of display
         getWidth(): number {
-            return this.cameras.main.width;
+            return 1920;
         }
         getHeight(): number {
-            return this.cameras.main.height;
+            return 1080;
         }
         getMidWidth(): number {
-            return this.getWidth() / 2;
+            return 960;
         }
         getMidHeight(): number {
-            return this.getHeight() / 2;
+            return 540;
         }
 
         init(data: object) {
@@ -93,6 +93,8 @@ module TK.SpaceTac.UI {
             this.messages = new Messages(this);
             this.dialogs_opened = [];
 
+            this.resize();
+
             // Browser console variable (for debugging purpose)
             if (typeof window != "undefined") {
                 let session = this.gameui.session;
@@ -105,6 +107,20 @@ module TK.SpaceTac.UI {
             }
         }
 
+        resize() {
+            if (this.gameui) {
+                if (this.layers) {
+                    this.layers.setScale(this.gameui.scaling);
+                }
+                if (this.dialogs_layer) {
+                    this.dialogs_layer.setScale(this.gameui.scaling);
+                }
+                if (this.cameras.main) {
+                    this.cameras.main.setViewport(0, 0, 1920 * this.gameui.scaling, 1080 * this.gameui.scaling);
+                }
+            }
+        }
+
         get options() {
             return this.gameui.options;
         }
@@ -134,6 +150,19 @@ module TK.SpaceTac.UI {
             }
         }
 
+        /**
+         * Get proportional locations on screen
+         */
+        getScaling(): number {
+            return this.gameui.scaling;
+        }
+        getX(propx: number, scaled = true): number {
+            return propx * 1920 * (scaled ? this.getScaling() : 1);
+        }
+        getY(propy: number, scaled = true): number {
+            return propy * 1080 * (scaled ? this.getScaling() : 1);
+        }
+
         /**
          * Get a network connection to the backend server
          */

src/ui/battle/Arena.ts

@@ -9,7 +9,7 @@ module TK.SpaceTac.UI {
         view: BattleView
 
         // Boundaries of the arena
-        boundaries: IBounded = { x: 0, y: 0, width: 1808, height: 948 }
+        private boundaries: IBounded = { x: 0, y: 0, width: 1808, height: 948 }
 
         // Hint for weapon or move range
         range_hint: RangeHint
@@ -114,7 +114,7 @@ module TK.SpaceTac.UI {
                     return;
                 }
 
-                let location = new ArenaLocation(pointer.x, pointer.y);
+                let location = new ArenaLocation(pointer.x / this.view.getScaling(), pointer.y / this.view.getScaling());
                 let ship = this.getShip(location);
                 this.callbacks_hover.forEach(callback => callback(location, ship));
             }, null);
@@ -273,8 +273,18 @@ module TK.SpaceTac.UI {
         /**
          * Get the boundaries of the arena on display
          */
-        getBoundaries(): IBounded {
+        getBoundaries(scaled = false): IBounded {
-            return this.boundaries;
+            if (scaled) {
+                let scaling = this.view.getScaling();
+                return {
+                    x: Math.ceil(this.boundaries.x * scaling),
+                    y: Math.ceil(this.boundaries.y * scaling),
+                    width: Math.floor(this.boundaries.width * scaling),
+                    height: Math.floor(this.boundaries.height * scaling),
+                }
+            } else {
+                return this.boundaries;
+            }
         }
 
         /**

src/ui/battle/ShipTooltip.ts

@@ -21,7 +21,7 @@ module TK.SpaceTac.UI {
 
             let builder = this.getBuilder();
 
-            builder.configure(10, 6, this.battleview.arena.getBoundaries());
+            builder.configure(10, 6, this.battleview.arena.getBoundaries(true));
 
             ShipTooltip.fillInfo(builder, ship, this.battleview.battle, this.battleview.player);
 

src/ui/common/Messages.ts

@@ -20,7 +20,7 @@ module TK.SpaceTac.UI {
             UITools.drawBackground(this.text, this.background, 6);
 
             let bounds = UITools.getBounds(this);
-            this.setPosition(parent.view.getWidth() - bounds.width - 10, 10);
+            this.setPosition(parent.view.getX(1) - bounds.width - 25, 25);
             parent.view.timer.schedule(duration, () => this.hide());
         }
 
@@ -52,13 +52,11 @@ module TK.SpaceTac.UI {
          */
         addMessage(text: string, duration: number = 3000): void {
             let message = new Message(this, text, duration);
-            this.container.add(message);
-
             let bounds = UITools.getBounds(message);
-
             cfilter(this.container.list, Message).forEach(child => {
-                child.y += bounds.height + 5;
+                child.y += bounds.height + 15;
             });
+            this.container.add(message);
         }
     }
 }

src/ui/common/Tooltip.ts

@@ -43,7 +43,12 @@ module TK.SpaceTac.UI {
         }
 
         getBestPosition(item: IBounded, width: number, height: number): [number, number] {
-            let viewport = this.viewport || { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() };
+            let viewport = this.viewport || {
+                x: this.view.getX(0),
+                y: this.view.getY(0),
+                width: this.view.getX(1) - this.view.getX(0),
+                height: this.view.getY(1) - this.view.getY(0)
+            };
             let candidates = [
                 this.tryPosition(viewport, { x: item.x + item.width / 2 - width / 2, y: item.y + item.height + this.margin, width: width, height: height }),
                 this.tryPosition(viewport, { x: item.x + item.width + this.margin, y: item.y + item.height / 2 - height / 2, width: width, height: height }),

src/ui/common/UIBuilder.ts

@@ -148,6 +148,7 @@ module TK.SpaceTac.UI {
             });
             result.setFont(`${style.bold ? "bold " : ""}${style.size}pt SpaceTac`);
             result.setOrigin(style.center ? 0.5 : 0, style.vcenter ? 0.5 : 0);
+            result.setScaleMode(Phaser.ScaleModes.LINEAR);
             if (style.width) {
                 result.setWordWrapWidth(style.width);
             }