From 79b5c5de93cd5e9e3d47da2403dd29638514b5ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 7 Oct 2020 18:03:34 +0200
Subject: [PATCH] Making login scene responsive

---
 front/src/Phaser/Components/TextInput.ts | 12 ++++++++++++
 front/src/Phaser/Login/LoginScene.ts     | 23 +++++++++++++++++------
 front/src/Phaser/Login/ResizableScene.ts |  5 +++++
 front/src/index.ts                       |  8 ++++++++
 4 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 front/src/Phaser/Login/ResizableScene.ts

diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts
index 7a549d1f..47f713e0 100644
--- a/front/src/Phaser/Components/TextInput.ts
+++ b/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;
+    }
 }
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 308ba3ae..6e6bf291 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/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 {
-    private nameInput: TextInput|null = null;
-    private textField: TextField|null = null;
-    private infoTextField: TextField|null = null;
-    private pressReturnField: TextField|null = null;
-    private logo: Image|null = null;
+export class LoginScene extends ResizableScene {
+    private nameInput!: TextInput;
+    private textField!: TextField;
+    private infoTextField!: TextField;
+    private pressReturnField!: TextField;
+    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;
+    }
+
 }
diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts
new file mode 100644
index 00000000..82123e2b
--- /dev/null
+++ b/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;
+}
diff --git a/front/src/index.ts b/front/src/index.ts
index 8e235c7a..177c56c0 100644
--- a/front/src/index.ts
+++ b/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();