Adding support for custom logos

The admin can now set custom logos for the login scene and for the loading screen.

front/src/Components/Login/LoginScene.svelte

@@ -13,6 +13,8 @@
     let name = gameManager.getPlayerName() || "";
     let startValidating = false;
 
+    let logo = gameManager.currentStartedRoom.loginSceneLogo ?? logoImg;
+
     function submit() {
         startValidating = true;
 
@@ -25,7 +27,7 @@
 
 <form class="loginScene" on:submit|preventDefault={submit}>
     <section class="text-center">
-        <img src={logoImg} alt="WorkAdventure logo" />
+        <img src={logo} alt="" />
     </section>
     <section class="text-center">
         <h2>{$LL.login.input.name.placeholder()}</h2>

front/src/Connexion/Room.ts

@@ -31,6 +31,8 @@ export class Room {
     private _group: string | null = null;
     private _expireOn: Date | undefined;
     private _canReport: boolean = false;
+    private _loadingLogo: string | undefined;
+    private _loginSceneLogo: string | undefined;
 
     private constructor(private roomUrl: URL) {
         this.id = roomUrl.pathname;
@@ -126,6 +128,8 @@ export class Room {
                     this._expireOn = new Date(data.expireOn);
                 }
                 this._canReport = data.canReport ?? false;
+                this._loadingLogo = data.loadingLogo ?? undefined;
+                this._loginSceneLogo = data.loginSceneLogo ?? undefined;
                 return new MapDetail(data.mapUrl);
             } else {
                 throw new Error("Data received by the /map endpoint of the Pusher is not in a valid format.");
@@ -233,4 +237,12 @@ export class Room {
     get canReport(): boolean {
         return this._canReport;
     }
+
+    get loadingLogo(): string | undefined {
+        return this._loadingLogo;
+    }
+
+    get loginSceneLogo(): string | undefined {
+        return this._loginSceneLogo;
+    }
 }

front/src/Phaser/Components/Loader.ts

@@ -1,9 +1,8 @@
 import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig;
 import { DirtyScene } from "../Game/DirtyScene";
+import { gameManager } from "../Game/GameManager";
 
-const LogoNameIndex: string = "logoLoading";
 const TextName: string = "Loading...";
-const LogoResource: string = "static/images/logo.png";
 const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
 
 const loadingBarHeight: number = 16;
@@ -15,6 +14,7 @@ export class Loader {
     private progressAmount: number = 0;
     private logo: Phaser.GameObjects.Image | undefined;
     private loadingText: Phaser.GameObjects.Text | null = null;
+    private logoNameIndex!: string;
 
     public constructor(private scene: Phaser.Scene) {}
 
@@ -24,15 +24,18 @@ export class Loader {
             return;
         }
 
+        const logoResource = gameManager.currentStartedRoom.loadingLogo ?? "static/images/logo.png";
+        this.logoNameIndex = "logoLoading" + logoResource;
+
         const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
 
         const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
-            if (this.scene.load.textureManager.exists(LogoNameIndex)) {
+            if (this.scene.load.textureManager.exists(this.logoNameIndex)) {
                 return res(
                     (this.logo = this.scene.add.image(
                         this.scene.game.renderer.width / 2,
                         this.scene.game.renderer.height / 2 - 150,
-                        LogoNameIndex
+                        this.logoNameIndex
                     ))
                 );
             } else {
@@ -43,8 +46,8 @@ export class Loader {
                     TextName
                 );
             }
-            this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
-            this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
+            this.scene.load.spritesheet(this.logoNameIndex, logoResource, LogoFrame);
+            this.scene.load.once(`filecomplete-spritesheet-${this.logoNameIndex}`, () => {
                 if (this.loadingText) {
                     this.loadingText.destroy();
                 }
@@ -52,7 +55,7 @@ export class Loader {
                     (this.logo = this.scene.add.image(
                         this.scene.game.renderer.width / 2,
                         this.scene.game.renderer.height / 2 - 150,
-                        LogoNameIndex
+                        this.logoNameIndex
                     ))
                 );
             });
@@ -86,8 +89,8 @@ export class Loader {
     }
 
     public removeLoader(): void {
-        if (this.scene.load.textureManager.exists(LogoNameIndex)) {
-            this.scene.load.textureManager.remove(LogoNameIndex);
+        if (this.scene.load.textureManager.exists(this.logoNameIndex)) {
+            this.scene.load.textureManager.remove(this.logoNameIndex);
         }
     }