Merge pull request #293 from thecodingmachine/responsive_scenes

Making scenes responsive

front/src/Phaser/Components/TextInput.ts

@@ -38,4 +38,16 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
     getText(): string {
         return this.text;
     }
+
+    setX(x: number): this {
+        super.setX(x);
+        this.underLine.x = x;
+        return this;
+    }
+
+    setY(y: number): this {
+        super.setY(y);
+        this.underLine.y = y+1;
+        return this;
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -45,6 +45,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager";
 import {RoomConnection} from "../../Connexion/RoomConnection";
 import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
 import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
+import {ResizableScene} from "../Login/ResizableScene";
 
 
 export enum Textures {
@@ -86,7 +87,7 @@ interface DeleteGroupEventInterface {
     groupId: number
 }
 
-export class GameScene extends Phaser.Scene implements CenterListener {
+export class GameScene extends ResizableScene implements CenterListener {
     GameManager : GameManager;
     Terrains : Array<Phaser.Tilemaps.Tileset>;
     CurrentPlayer!: CurrentGamerInterface;
@@ -132,7 +133,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
     private startLayerName: string|undefined;
     private presentationModeSprite!: Sprite;
     private chatModeSprite!: Sprite;
-    private onResizeCallback!: (this: Window, ev: UIEvent) => void;
     private gameMap!: GameMap;
     private actionableItems: Map<number, ActionableItem> = new Map<number, ActionableItem>();
     // The item that can be selected by pressing the space key.
@@ -271,7 +271,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
 
                 this.scene.stop(this.scene.key);
                 this.scene.remove(this.scene.key);
-                window.removeEventListener('resize', this.onResizeCallback);
             })
 
             connection.onActionableEvent((message => {
@@ -565,8 +564,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
             this.switchLayoutMode();
         });
 
-        this.onResizeCallback = this.onResize.bind(this);
-        window.addEventListener('resize', this.onResizeCallback);
         this.reposition();
 
         // From now, this game scene will be notified of reposition events
@@ -957,7 +954,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
             this.simplePeer.unregister();
             this.scene.stop();
             this.scene.remove(this.scene.key);
-            window.removeEventListener('resize', this.onResizeCallback);
             this.scene.start(nextSceneKey.key, {
                 startLayerName: nextSceneKey.hash
             });
@@ -1156,7 +1152,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
         this.connection.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
-    private onResize(): void {
+    public onResize(): void {
         this.reposition();
 
         // Send new viewport to server

front/src/Phaser/Login/CustomizeScene.ts

@@ -6,6 +6,7 @@ import {LAYERS, loadAllLayers} from "../Entity/body_character";
 import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
+import {ResizableScene} from "./ResizableScene";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -16,7 +17,7 @@ enum CustomizeTextures{
     arrowUp = "arrow_up",
 }
 
-export class CustomizeScene extends Phaser.Scene {
+export class CustomizeScene extends ResizableScene {
 
     private textField!: TextField;
     private enterField!: TextField;
@@ -35,8 +36,6 @@ export class CustomizeScene extends Phaser.Scene {
     private containersRow: Array<Array<Container>> = new Array<Array<Container>>();
     private activeRow = 0;
 
-    private repositionCallback!: (this: Window, ev: UIEvent) => void;
-
     constructor() {
         super({
             key: CustomizeSceneName
@@ -144,10 +143,6 @@ export class CustomizeScene extends Phaser.Scene {
                 this.moveLayers();
             }
         });
-
-        this.repositionCallback = this.reposition.bind(this);
-        window.addEventListener('resize', this.repositionCallback);
-
     }
     update(time: number, delta: number): void {
         super.update(time, delta);
@@ -249,7 +244,7 @@ export class CustomizeScene extends Phaser.Scene {
         }
      }
 
-     private reposition() {
+     public onResize(): void {
         this.moveLayers();
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;

front/src/Phaser/Login/LoginScene.ts

@@ -7,6 +7,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
 import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
+import {ResizableScene} from "./ResizableScene";
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
@@ -15,12 +16,12 @@ enum LoginTextures {
     mainFont = "main_font"
 }
 
-export class LoginScene extends Phaser.Scene {
+export class LoginScene extends ResizableScene {
-    private nameInput: TextInput|null = null;
+    private nameInput!: TextInput;
-    private textField: TextField|null = null;
+    private textField!: TextField;
-    private infoTextField: TextField|null = null;
+    private infoTextField!: TextField;
-    private pressReturnField: TextField|null = null;
+    private pressReturnField!: TextField;
-    private logo: Image|null = null;
+    private logo!: Image;
     private name: string = '';
 
     constructor() {
@@ -93,4 +94,14 @@ export class LoginScene extends Phaser.Scene {
 
         this.scene.start(SelectCharacterSceneName);
     }
+
+    public onResize(ev: UIEvent): void {
+        this.textField.x = this.game.renderer.width / 2;
+        this.nameInput.setX(this.game.renderer.width / 2 - 64);
+        this.pressReturnField.x = this.game.renderer.width / 2;
+        this.logo.x = this.game.renderer.width - 30;
+        this.logo.y = this.game.renderer.height - 20;
+        this.infoTextField.y = this.game.renderer.height - 35;
+    }
+
 }

front/src/Phaser/Login/ResizableScene.ts

@@ -0,0 +1,5 @@
+import {Scene} from "phaser";
+
+export abstract class ResizableScene extends Scene {
+    public abstract onResize(ev: UIEvent): void;
+}

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -5,6 +5,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
 import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
+import {ResizableScene} from "./ResizableScene";
 
 
 //todo: put this constants in a dedicated file
@@ -17,7 +18,7 @@ enum LoginTextures {
     customizeButtonSelected = "customize_button_selected"
 }
 
-export class SelectCharacterScene extends Phaser.Scene {
+export class SelectCharacterScene extends ResizableScene {
     private readonly nbCharactersPerRow = 4;
     private textField!: TextField;
     private pressReturnField!: TextField;
@@ -242,4 +243,26 @@ export class SelectCharacterScene extends Phaser.Scene {
             window.localStorage.setItem('selectedPlayer', String(playerNumber));
         }
     }
+
+    public onResize(ev: UIEvent): void {
+        this.textField.x = this.game.renderer.width / 2;
+        this.pressReturnField.x = this.game.renderer.width / 2;
+        this.logo.x = this.game.renderer.width - 30;
+        this.logo.y = this.game.renderer.height - 20;
+        this.customizeButton.x = this.game.renderer.width / 2;
+        this.customizeButtonSelected.x = this.game.renderer.width / 2;
+
+        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
+            const player = this.players[i];
+
+            const col = i % this.nbCharactersPerRow;
+            const row = Math.floor(i / this.nbCharactersPerRow);
+
+            const [x, y] = this.getCharacterPosition(col, row);
+            player.x = x;
+            player.y = y;
+        }
+        this.updateSelectedPlayer();
+    }
+
 }

front/src/index.ts

@@ -12,6 +12,7 @@ import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
 import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {connectionManager} from "./Connexion/ConnectionManager";
+import {ResizableScene} from "./Phaser/Login/ResizableScene";
 
 //CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
 connectionManager.init();
@@ -55,6 +56,13 @@ window.addEventListener('resize', function (event) {
     const {width, height} = CoWebsiteManager.getGameSize();
 
     game.scale.resize(width / RESOLUTION, height / RESOLUTION);
+
+    // Let's trigger the onResize method of any active scene that is a ResizableScene
+    for (const scene of game.scene.getScenes(true)) {
+        if (scene instanceof ResizableScene) {
+            scene.onResize(event);
+        }
+    }
 });
 CoWebsiteManager.onStateChange(() => {
     const {width, height} = CoWebsiteManager.getGameSize();