All customized logo (#2168)

* Change dynamic logo in reconnecting scene

* Add cowebsite customized logo

* Fix prettier issues

* Fix prettier issues (2)

* Fix login scene PoweredBy

* Delete all console logs

front/src/Components/Login/LoginScene.svelte

@@ -64,7 +64,7 @@
         <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">{$LL.login.continue()}</button>
     </section>
     {#if logo !== logoImg && gameManager.currentStartedRoom.showPoweredBy !== false}
-        <section class="text-center powered-by">
+        <section class="text-right powered-by">
             <img src={poweredByWorkAdventureImg} alt="Powered by WorkAdventure" />
         </section>
     {/if}
@@ -144,6 +144,7 @@
             &.powered-by {
                 position: fixed;
                 bottom: 0;
+                right: 10px;
             }
         }
     }

front/src/Components/Menu/MenuIcon.svelte

@@ -11,6 +11,9 @@
     import { showShareLinkMapModalStore } from "../../Stores/ModalStore";
     import LL from "../../i18n/i18n-svelte";
     import { analyticsClient } from "../../Administration/AnalyticsClient";
+    import { gameManager } from "../../Phaser/Game/GameManager";
+
+    let miniLogo = gameManager.currentStartedRoom.miniLogo ?? logoWA;
 
     function showMenu() {
         menuVisiblilityStore.set(!get(menuVisiblilityStore));
@@ -57,7 +60,7 @@
         />
     {:else}
         <img
-            src={logoWA}
+            src={miniLogo}
             alt={$LL.menu.icon.open.menu()}
             class="nes-pointer"
             draggable="false"

front/src/Connexion/Room.ts

@@ -23,6 +23,8 @@ export class Room {
     private _group: string | null = null;
     private _expireOn: Date | undefined;
     private _canReport: boolean = false;
+    private _miniLogo: string | undefined;
+    private _loadingCowebsiteLogo: string | undefined;
     private _loadingLogo: string | undefined;
     private _loginSceneLogo: string | undefined;
     private _showPoweredBy: boolean | undefined = true;
@@ -119,6 +121,8 @@ export class Room {
                     this._expireOn = new Date(data.expireOn);
                 }
                 this._canReport = data.canReport ?? false;
+                this._miniLogo = data.miniLogo ?? undefined;
+                this._loadingCowebsiteLogo = data.loadingCowebsiteLogo ?? undefined;
                 this._loadingLogo = data.loadingLogo ?? undefined;
                 this._loginSceneLogo = data.loginSceneLogo ?? undefined;
                 this._showPoweredBy = data.showPoweredBy ?? true;
@@ -208,10 +212,18 @@ export class Room {
         return this._canReport;
     }
 
+    get loadingCowebsiteLogo(): string | undefined {
+        return this._loadingCowebsiteLogo;
+    }
+
     get loadingLogo(): string | undefined {
         return this._loadingLogo;
     }
 
+    get miniLogo(): string | undefined {
+        return this._miniLogo;
+    }
+
     get loginSceneLogo(): string | undefined {
         return this._loginSceneLogo;
     }

front/src/Phaser/Login/EntryScene.ts

@@ -24,7 +24,6 @@ export class EntryScene extends Scene {
 
     // From the very start, let's preload images used in the ReconnectingScene.
     preload() {
-        this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
         this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -2,6 +2,7 @@ import { TextField } from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import LL from "../../i18n/i18n-svelte";
 import { get } from "svelte/store";
+import { gameManager } from "../Game/GameManager";
 
 export const ReconnectingSceneName = "ReconnectingScene";
 export enum ReconnectingTextures {
@@ -20,7 +21,10 @@ export class ReconnectingScene extends Phaser.Scene {
     }
 
     preload() {
-        this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png");
+        this.load.image(
+            ReconnectingTextures.icon,
+            gameManager.currentStartedRoom.miniLogo ?? "static/images/favicons/favicon-32x32.png"
+        );
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
         this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });
@@ -30,9 +34,10 @@ export class ReconnectingScene extends Phaser.Scene {
         this.logo = new Image(
             this,
             this.game.renderer.width - 30,
-            this.game.renderer.height - 20,
+            this.game.renderer.height - 30,
             ReconnectingTextures.icon
         );
+        this.logo.setDisplaySize(32, 32);
         this.add.existing(this.logo);
 
         this.reconnectingField = new TextField(

front/src/Stores/MenuStore.ts

@@ -5,6 +5,7 @@ import { CONTACT_URL, IDENTITY_URL, PROFILE_URL } from "../Enum/EnvironmentVaria
 import type { Translation } from "../i18n/i18n-types";
 import axios from "axios";
 import { localUserStore } from "../Connexion/LocalUserStore";
+import { connectionManager } from "../Connexion/ConnectionManager";
 
 export const menuIconVisiblilityStore = writable(false);
 export const menuVisiblilityStore = writable(false);
@@ -183,9 +184,9 @@ export function handleMenuUnregisterEvent(menuName: string) {
 }
 
 export function getProfileUrl() {
-    return PROFILE_URL + `?token=${localUserStore.getAuthToken()}`;
+    return PROFILE_URL + `?token=${localUserStore.getAuthToken()}&playUri=${connectionManager.currentRoom?.key}`;
 }
 
 export function getMeUrl() {
-    return IDENTITY_URL + `?token=${localUserStore.getAuthToken()}`;
+    return IDENTITY_URL + `?token=${localUserStore.getAuthToken()}&playUri=${connectionManager.currentRoom?.key}`;
 }

front/src/WebRtc/CoWebsiteManager.ts

@@ -9,6 +9,7 @@ import { LayoutMode } from "./LayoutManager";
 import type { CoWebsite } from "./CoWebsite/CoWesbite";
 import type CancelablePromise from "cancelable-promise";
 import { analyticsClient } from "../Administration/AnalyticsClient";
+import { gameManager } from "../Phaser/Game/GameManager";
 
 export enum iframeStates {
     closed = 1,
@@ -357,6 +358,16 @@ class CoWebsiteManager {
 
     private activateMainLoaderAnimation() {
         this.desactivateMainLoaderAnimation();
+        const customLogo = gameManager.currentStartedRoom.loadingCowebsiteLogo;
+
+        if (customLogo) {
+            const logo = document.createElement("img");
+            logo.id = "custom-logo";
+            logo.src = customLogo;
+            this.cowebsiteLoaderDom.parentNode?.replaceChild(logo, this.cowebsiteLoaderDom);
+            this.cowebsiteLoaderDom.style.display = "block";
+            return;
+        }
 
         this.cowebsiteLoaderDom.style.display = "block";
         this.loaderAnimationInterval.interval = setInterval(() => {

front/style/cowebsite/_global.scss

@@ -5,6 +5,10 @@
   background-color: rgba(10, 9, 9, 0.8);
   display: none;
 
+  #cowebsite-slot-main #custom-logo{
+    max-width: 30%;
+  }
+
   main {
     iframe {
       width: 100%;