Merge pull request #1582 from thecodingmachine/end-to-end-tests

Making the loader resizable

front/src/Phaser/Components/Loader.ts

@@ -6,73 +6,114 @@ const TextName: string = "Loading...";
 const LogoResource: string = "static/images/logo.png";
 const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
 
-export const addLoader = (scene: Phaser.Scene): void => {
+const loadingBarHeight: number = 16;
+const padding: number = 5;
+
+export class Loader {
+    private progressContainer!: Phaser.GameObjects.Graphics;
+    private progress!: Phaser.GameObjects.Graphics;
+    private progressAmount: number = 0;
+    private logo: Phaser.GameObjects.Image|undefined;
+    private loadingText: Phaser.GameObjects.Text | null = null;
+
+    public constructor(private scene: Phaser.Scene) {
+    }
+
+    public addLoader(): void {
         // If there is nothing to load, do not display the loader.
-    if (scene.load.list.entries.length === 0) {
+        if (this.scene.load.list.entries.length === 0) {
             return;
         }
-    let loadingText: Phaser.GameObjects.Text | null = null;
+
-    const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3);
+        const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
-    const loadingBarHeight: number = 16;
-    const padding: number = 5;
 
         const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
-        if (scene.load.textureManager.exists(LogoNameIndex)) {
+            if (this.scene.load.textureManager.exists(LogoNameIndex)) {
                 return res(
-                scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
+                    this.logo = this.scene.add.image(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 150, LogoNameIndex)
                 );
             } else {
                 //add loading if logo image is not ready
-            loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName);
+                this.loadingText = this.scene.add.text(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 50, TextName);
             }
-        scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
+            this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
-        scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
+            this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
-            if (loadingText) {
+                if (this.loadingText) {
-                loadingText.destroy();
+                    this.loadingText.destroy();
                 }
                 return res(
-                scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
+                    this.logo = this.scene.add.image(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 150, LogoNameIndex)
                 );
             });
         });
 
-    const progressContainer = scene.add.graphics();
+        this.progressContainer = this.scene.add.graphics();
-    const progress = scene.add.graphics();
+        this.progress = this.scene.add.graphics();
-    progressContainer.fillStyle(0x444444, 0.8);
+        this.progressContainer.fillStyle(0x444444, 0.8);
-    progressContainer.fillRect(
-        (scene.game.renderer.width - loadingBarWidth) / 2 - padding,
-        scene.game.renderer.height / 2 + 50 - padding,
-        loadingBarWidth + padding * 2,
-        loadingBarHeight + padding * 2
-    );
 
-    scene.load.on("progress", (value: number) => {
+        this.resize();
-        progress.clear();
+
-        progress.fillStyle(0xbbbbbb, 1);
+        this.scene.load.on("progress", (value: number) => {
-        progress.fillRect(
+            this.progressAmount = value;
-            (scene.game.renderer.width - loadingBarWidth) / 2,
+            this.drawProgress();
-            scene.game.renderer.height / 2 + 50,
-            loadingBarWidth * value,
-            loadingBarHeight
-        );
         });
-    scene.load.on("complete", () => {
+        this.scene.load.on("complete", () => {
-        if (loadingText) {
+            if (this.loadingText) {
-            loadingText.destroy();
+                this.loadingText.destroy();
             }
             promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
                 resLoadingImage.destroy();
             });
-        progress.destroy();
+            this.progress.destroy();
-        progressContainer.destroy();
+            this.progressContainer.destroy();
-        if (scene instanceof DirtyScene) {
+            if (this.scene instanceof DirtyScene) {
-            scene.markDirty();
+                this.scene.markDirty();
             }
         });
-};
-
-export const removeLoader = (scene: Phaser.Scene): void => {
-    if (scene.load.textureManager.exists(LogoNameIndex)) {
-        scene.load.textureManager.remove(LogoNameIndex);
     }
-};
+
+
+    public removeLoader(): void {
+        if (this.scene.load.textureManager.exists(LogoNameIndex)) {
+            this.scene.load.textureManager.remove(LogoNameIndex);
+        }
+    }
+
+    public resize(): void {
+        const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
+
+        this.progressContainer.clear();
+        this.progressContainer.fillStyle(0x444444, 0.8);
+        this.progressContainer.fillRect(
+            (this.scene.game.renderer.width - loadingBarWidth) / 2 - padding,
+            this.scene.game.renderer.height / 2 + 50 - padding,
+            loadingBarWidth + padding * 2,
+            loadingBarHeight + padding * 2
+        );
+
+        this.drawProgress();
+
+        if (this.loadingText) {
+            this.loadingText.x = this.scene.game.renderer.width / 2;
+            this.loadingText.y = this.scene.game.renderer.height / 2 - 50;
+        }
+
+        if (this.logo) {
+            this.logo.x = this.scene.game.renderer.width / 2;
+            this.logo.y = this.scene.game.renderer.height / 2 - 150;
+        }
+    }
+
+    private drawProgress() {
+        const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
+
+        this.progress.clear();
+        this.progress.fillStyle(0xbbbbbb, 1);
+        this.progress.fillRect(
+            (this.scene.game.renderer.width - loadingBarWidth) / 2,
+            this.scene.game.renderer.height / 2 + 50,
+            loadingBarWidth * this.progressAmount,
+            loadingBarHeight
+        );
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -28,7 +28,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 import { mediaManager } from "../../WebRtc/MediaManager";
 import { SimplePeer } from "../../WebRtc/SimplePeer";
-import { addLoader, removeLoader } from "../Components/Loader";
+import { Loader } from "../Components/Loader";
 import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
 import { RemotePlayer } from "../Entity/RemotePlayer";
 import type { ActionableItem } from "../Items/ActionableItem";
@@ -203,6 +203,7 @@ export class GameScene extends DirtyScene {
     private sharedVariablesManager!: SharedVariablesManager;
     private objectsByType = new Map<string, ITiledMapObject[]>();
     private embeddedWebsiteManager!: EmbeddedWebsiteManager;
+    private loader: Loader;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
         super({
@@ -221,6 +222,7 @@ export class GameScene extends DirtyScene {
         this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
             this.connectionAnswerPromiseResolve = resolve;
         });
+        this.loader = new Loader(this);
     }
 
     //hook preload scene
@@ -297,7 +299,7 @@ export class GameScene extends DirtyScene {
             //if SpriteSheetFile (WOKA file) don't display error and give an access for user
             if (this.preloading && !(file instanceof SpriteSheetFile)) {
                 //remove loader in progress
-                removeLoader(this);
+                this.loader.removeLoader();
 
                 //display an error scene
                 this.scene.start(ErrorSceneName, {
@@ -331,7 +333,7 @@ export class GameScene extends DirtyScene {
         });
 
         //this function must stay at the end of preload function
-        addLoader(this);
+        this.loader.addLoader();
     }
 
     // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
@@ -1832,6 +1834,8 @@ ${escapedMessage}
             right: camera.scrollX + camera.width,
             bottom: camera.scrollY + camera.height,
         });
+
+        this.loader.resize();
     }
     private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
         for (const layer of this.mapFile.layers) {

front/src/Phaser/Login/CustomizeScene.ts

@@ -4,7 +4,7 @@ import { loadAllLayers } from "../Entity/PlayerTexturesLoadingManager";
 import Sprite = Phaser.GameObjects.Sprite;
 import { gameManager } from "../Game/GameManager";
 import { localUserStore } from "../../Connexion/LocalUserStore";
-import { addLoader } from "../Components/Loader";
+import { Loader } from "../Components/Loader";
 import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
 import { AbstractCharacterScene } from "./AbstractCharacterScene";
 import { areCharacterLayersValid } from "../../Connexion/LocalUser";
@@ -30,10 +30,13 @@ export class CustomizeScene extends AbstractCharacterScene {
     private moveHorizontally: number = 0;
     private moveVertically: number = 0;
 
+    private loader: Loader;
+
     constructor() {
         super({
             key: CustomizeSceneName,
         });
+        this.loader = new Loader(this);
     }
 
     preload() {
@@ -55,7 +58,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.lazyloadingAttempt = false;
 
         //this function must stay at the end of preload function
-        addLoader(this);
+        this.loader.addLoader();
     }
 
     create() {

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -4,7 +4,7 @@ import { EnableCameraSceneName } from "./EnableCameraScene";
 import { CustomizeSceneName } from "./CustomizeScene";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
-import { addLoader } from "../Components/Loader";
+import { Loader} from "../Components/Loader";
 import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
 import { AbstractCharacterScene } from "./AbstractCharacterScene";
 import { areCharacterLayersValid } from "../../Connexion/LocalUser";
@@ -31,11 +31,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     protected pointerTimer: number = 0;
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
+    private loader: Loader;
 
     constructor() {
         super({
             key: SelectCharacterSceneName,
         });
+        this.loader = new Loader(this);
     }
 
     preload() {
@@ -49,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.lazyloadingAttempt = false;
 
         //this function must stay at the end of preload function
-        addLoader(this);
+        this.loader.addLoader();
     }
 
     create() {

front/src/Phaser/Login/SelectCompanionScene.ts

@@ -1,4 +1,4 @@
-import { addLoader } from "../Components/Loader";
+import { Loader } from "../Components/Loader";
 import { gameManager } from "../Game/GameManager";
 import { ResizableScene } from "./ResizableScene";
 import { EnableCameraSceneName } from "./EnableCameraScene";
@@ -22,11 +22,13 @@ export class SelectCompanionScene extends ResizableScene {
     private currentCompanion = 0;
     private pointerClicked: boolean = false;
     private pointerTimer: number = 0;
+    private loader: Loader;
 
     constructor() {
         super({
             key: SelectCompanionSceneName,
         });
+        this.loader = new Loader(this);
     }
 
     preload() {
@@ -35,7 +37,7 @@ export class SelectCompanionScene extends ResizableScene {
         });
 
         //this function must stay at the end of preload function
-        addLoader(this);
+        this.loader.addLoader();
     }
 
     create() {