Merge pull request #1588 from thecodingmachine/develop

Deploy 2021-11-24 2

.github/workflows/continuous_integration.yml

@@ -62,18 +62,13 @@ jobs:
         working-directory: "front"
 
       - name: "Pretty"
-        run: yarn run pretty
+        run: yarn run pretty-check
         working-directory: "front"
 
       - name: "Jasmine"
         run: yarn test
         working-directory: "front"
 
- # We will enable prettier checks on front in a few month, when most PRs without prettier have been merged
- #     - name: "Prettier"
- #       run: yarn run pretty-check
- #       working-directory: "front"
-
   continuous-integration-pusher:
     name: "Continuous Integration Pusher"
 

.github/workflows/end_to_end_tests.yml

@@ -30,7 +30,16 @@ jobs:
         run: docker-compose up -d
 
       - name: "Wait for environment to build (and downloading testcafe image)"
-        run: (docker-compose -f docker-compose.testcafe.yml pull &) && docker-compose logs -f --tail=0 front | grep -m 1 "Compiled successfully"
+        run: (docker-compose -f docker-compose.testcafe.yml pull &) && docker-compose logs -f --tail=0 front | grep -q "Compiled successfully"
+
+#      - name: "temp debug: display logs"
+#        run: docker-compose logs
+#
+#      - name: "Wait for back start"
+#        run: docker-compose logs -f back | grep -q "WorkAdventure HTTP API starting on port"
+#
+#      - name: "Wait for pusher start"
+#        run: docker-compose logs -f pusher | grep -q "WorkAdventure starting on port"
 
       - name: "Run tests"
         run: docker-compose -f docker-compose.testcafe.yml up --exit-code-from testcafe

front/src/Administration/AnalyticsClient.ts

@@ -18,72 +18,62 @@ class AnalyticsClient {
     }
 
     identifyUser(uuid: string, email: string | null) {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.identify(uuid, { uuid, email, wa: true });
         });
     }
 
     loggedWithSso() {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-logged-sso");
         });
     }
 
     loggedWithToken() {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-logged-token");
         });
     }
 
     enteredRoom(roomId: string, roomGroup: string | null) {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("$pageView", { roomId, roomGroup });
             posthog.capture("enteredRoom");
         });
     }
 
     openedMenu() {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-opened-menu");
         });
     }
 
     launchEmote(emote: string) {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-emote-launch", { emote });
         });
     }
 
     enteredJitsi(roomName: string, roomId: string) {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-entered-jitsi", { roomName, roomId });
         });
     }
 
     validationName() {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-name-validation");
         });
     }
 
     validationWoka(scene: string) {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-woka-validation", { scene });
         });
     }
 
     validationVideo() {
-        this.posthogPromise
+        this.posthogPromise?.then((posthog) => {
-            ?.then((posthog) => {
             posthog.capture("wa-video-validation");
         });
     }

front/src/Api/Events/CloseCoWebsiteEvent.ts

@@ -2,7 +2,7 @@ import * as tg from "generic-type-guard";
 
 export const isCloseCoWebsite = new tg.IsInterface()
     .withProperties({
-        id: tg.isOptional(tg.isString)
+        id: tg.isOptional(tg.isString),
     })
     .get();
 

front/src/Api/Events/IframeEvent.ts

@@ -24,9 +24,7 @@ import type { EmbeddedWebsite } from "../iframe/Room/EmbeddedWebsite";
 import { isCreateEmbeddedWebsiteEvent } from "./EmbeddedWebsiteEvent";
 import type { LoadTilesetEvent } from "./LoadTilesetEvent";
 import { isLoadTilesetEvent } from "./LoadTilesetEvent";
-import type {
+import type { MessageReferenceEvent } from "./ui/TriggerActionMessageEvent";
-    MessageReferenceEvent,
-} from "./ui/TriggerActionMessageEvent";
 import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
 import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEvent";
 import type { ChangeLayerEvent } from "./ChangeLayerEvent";
@@ -117,19 +115,19 @@ export const iframeQueryMapTypeGuards = {
     },
     openCoWebsite: {
         query: isOpenCoWebsiteEvent,
-        answer: isCoWebsite
+        answer: isCoWebsite,
     },
     getCoWebsites: {
         query: tg.isUndefined,
-        answer:  tg.isArray(isCoWebsite)
+        answer: tg.isArray(isCoWebsite),
     },
     closeCoWebsite: {
         query: tg.isString,
-        answer: tg.isUndefined
+        answer: tg.isUndefined,
     },
     closeCoWebsites: {
         query: tg.isUndefined,
-        answer: tg.isUndefined
+        answer: tg.isUndefined,
     },
     triggerActionMessage: {
         query: isTriggerActionMessageEvent,

front/src/Api/Events/OpenCoWebsiteEvent.ts

@@ -5,7 +5,7 @@ export const isOpenCoWebsiteEvent = new tg.IsInterface()
         url: tg.isString,
         allowApi: tg.isOptional(tg.isBoolean),
         allowPolicy: tg.isOptional(tg.isString),
-        position: tg.isOptional(tg.isNumber)
+        position: tg.isOptional(tg.isNumber),
     })
     .get();
 

front/src/Api/IframeListener.ts

@@ -49,7 +49,7 @@ class IframeListener {
     public readonly openTabStream = this._openTabStream.asObservable();
 
     private readonly _loadPageStream: Subject<string> = new Subject();
-    public readonly loadPageStream = this._loadPageStream.asObservable()
+    public readonly loadPageStream = this._loadPageStream.asObservable();
 
     private readonly _disablePlayerControlStream: Subject<void> = new Subject();
     public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();

front/src/Api/iframe/nav.ts

@@ -57,7 +57,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
     async getCoWebSites(): Promise<CoWebsite[]> {
         const result = await queryWorkadventure({
             type: "getCoWebsites",
-            data: undefined
+            data: undefined,
         });
         return result.map((cowebsiteEvent) => new CoWebsite(cowebsiteEvent.id, cowebsiteEvent.position));
     }

front/src/Connexion/ConnectionManager.ts

@@ -84,7 +84,8 @@ class ConnectionManager {
         if (token) {
             this.authToken = token;
             localUserStore.setAuthToken(token);
-            //token was saved, clear url
+
+            //clean token of url
             urlParams.delete("token");
         }
 
@@ -95,8 +96,6 @@ class ConnectionManager {
             }
             urlManager.pushRoomIdToUrl(this._currentRoom);
         } else if (connexionType === GameConnexionTypes.jwt) {
-            const urlParams = new URLSearchParams(window.location.search);
-
             if (!token) {
                 const code = urlParams.get("code");
                 const state = urlParams.get("state");
@@ -139,7 +138,7 @@ class ConnectionManager {
                         "//" +
                         window.location.host +
                         roomUrl +
-                        window.location.search +
+                        urlParams.toString() + //use urlParams because the token param must be deleted
                         window.location.hash
                 )
             );
@@ -169,7 +168,7 @@ class ConnectionManager {
                     "//" +
                     window.location.host +
                     window.location.pathname +
-                    window.location.search +
+                    urlParams.toString() + //use urlParams because the token param must be deleted
                     window.location.hash;
             }
 
@@ -218,8 +217,6 @@ class ConnectionManager {
             analyticsClient.identifyUser(this.localUser.uuid, this.localUser.email);
         }
 
-        //clean history with new URL
-        window.history.pushState({}, document.title, window.location.pathname);
         this.serviceWorker = new _ServiceWorker();
         return Promise.resolve(this._currentRoom);
     }

front/src/Connexion/LocalUserStore.ts

@@ -122,7 +122,7 @@ class LocalUserStore {
 
     setLastRoomUrl(roomUrl: string): void {
         localStorage.setItem(lastRoomUrl, roomUrl.toString());
-        if ('caches' in window) {
+        if ("caches" in window) {
             caches.open(cacheAPIIndex).then((cache) => {
                 const stringResponse = new Response(JSON.stringify({ roomUrl }));
                 cache.put(`/${lastRoomUrl}`, stringResponse);
@@ -135,7 +135,7 @@ class LocalUserStore {
         );
     }
     getLastRoomUrlCacheApi(): Promise<string | undefined> {
-        if (!('caches' in window)) {
+        if (!("caches" in window)) {
             return Promise.resolve(undefined);
         }
         return caches.open(cacheAPIIndex).then((cache) => {

front/src/Connexion/Room.ts

@@ -107,7 +107,8 @@ export class Room {
             this._mapUrl = data.mapUrl;
             this._textures = data.textures;
             this._group = data.group;
-            this._authenticationMandatory = data.authenticationMandatory || DISABLE_ANONYMOUS;
+            this._authenticationMandatory =
+                data.authenticationMandatory != null ? data.authenticationMandatory : DISABLE_ANONYMOUS;
             this._iframeAuthentication = data.iframeAuthentication || OPID_LOGIN_SCREEN_PROVIDER;
             this._contactPage = data.contactPage || CONTACT_URL;
             return new MapDetail(data.mapUrl, data.textures);

front/src/Phaser/Components/Loader.ts

@@ -6,73 +6,124 @@ 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 => {
-    // If there is nothing to load, do not display the loader.
-    if (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 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 (this.scene.load.list.entries.length === 0) {
+            return;
+        }
+
+        const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
+
         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/Entity/Character.ts

@@ -128,6 +128,10 @@ export abstract class Character extends Container {
     }
 
     public addTextures(textures: string[], frame?: string | number): void {
+        if (textures.length < 1) {
+            throw new TextureError("no texture given");
+        }
+
         for (const texture of textures) {
             if (this.scene && !this.scene.textures.exists(texture)) {
                 throw new TextureError("texture not found");

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -69,13 +69,11 @@ export const lazyLoadPlayerCharacterTextures = (
     }
 
     //If the loading fail, we render the default model instead.
-    return returnPromise
+    return returnPromise.then((keys) =>
-        .then((keys) =>
         keys.map((key) => {
             return typeof key !== "string" ? key.name : key;
         })
-        )
+    );
-        .catch(() => lazyLoadPlayerCharacterTextures(loadPlugin, ["color_22", "eyes_23"]));
 };
 
 export const getRessourceDescriptor = (

front/src/Phaser/Game/GameMap.ts

@@ -12,8 +12,7 @@ export type PropertyChangeCallback = (
 
 export type layerChangeCallback = (
     layersChangedByAction: Array<ITiledMapLayer>,
-    allLayersOnNewPosition:  Array<ITiledMapLayer>,
+    allLayersOnNewPosition: Array<ITiledMapLayer>
-
 ) => void;
 
 /**
@@ -81,7 +80,7 @@ export class GameMap {
     }
 
     private getLayersByKey(key: number): Array<ITiledMapLayer> {
-        return this.flatLayers.filter(flatLayer => flatLayer.type === 'tilelayer' && flatLayer.data[key] !== 0);
+        return this.flatLayers.filter((flatLayer) => flatLayer.type === "tilelayer" && flatLayer.data[key] !== 0);
     }
 
     /**
@@ -134,14 +133,13 @@ export class GameMap {
         const enterLayers = new Set(layersByNewKey);
         const leaveLayers = new Set(layersByOldKey);
 
-        enterLayers.forEach(layer => {
+        enterLayers.forEach((layer) => {
             if (leaveLayers.has(layer)) {
                 leaveLayers.delete(layer);
                 enterLayers.delete(layer);
             }
         });
 
-
         if (enterLayers.size > 0) {
             const layerArray = Array.from(enterLayers);
             for (const callback of this.enterLayerCallbacks) {

front/src/Phaser/Game/GameMapProperties.ts

@@ -1,37 +1,37 @@
 export enum GameMapProperties {
-    ALLOW_API = 'allowApi',
+    ALLOW_API = "allowApi",
-    AUDIO_LOOP = 'audioLoop',
+    AUDIO_LOOP = "audioLoop",
-    AUDIO_VOLUME = 'audioVolume',
+    AUDIO_VOLUME = "audioVolume",
-    COLLIDES = 'collides',
+    COLLIDES = "collides",
-    DEFAULT = 'default',
+    DEFAULT = "default",
-    EXIT_URL = 'exitUrl',
+    EXIT_URL = "exitUrl",
-    EXIT_SCENE_URL = 'exitSceneUrl',
+    EXIT_SCENE_URL = "exitSceneUrl",
-    FONT_FAMILY = 'font-family',
+    FONT_FAMILY = "font-family",
-    JITSI_ADMIN_ROOM_TAG = 'jitsiRoomAdminTag',
+    JITSI_ADMIN_ROOM_TAG = "jitsiRoomAdminTag",
-    JITSI_CONFIG = 'jitsiConfig',
+    JITSI_CONFIG = "jitsiConfig",
-    JITSI_INTERFACE_CONFIG = 'jitsiInterfaceConfig',
+    JITSI_INTERFACE_CONFIG = "jitsiInterfaceConfig",
-    JITSI_ROOM = 'jitsiRoom',
+    JITSI_ROOM = "jitsiRoom",
-    JITSI_TRIGGER = 'jitsiTrigger',
+    JITSI_TRIGGER = "jitsiTrigger",
-    JITSI_TRIGGER_MESSAGE = 'jitsiTriggerMessage',
+    JITSI_TRIGGER_MESSAGE = "jitsiTriggerMessage",
-    JITSI_URL = 'jitsiUrl',
+    JITSI_URL = "jitsiUrl",
-    JITSI_WIDTH = 'jitsiWidth',
+    JITSI_WIDTH = "jitsiWidth",
-    NAME = 'name',
+    NAME = "name",
-    OPEN_TAB = 'openTab',
+    OPEN_TAB = "openTab",
-    OPEN_WEBSITE = 'openWebsite',
+    OPEN_WEBSITE = "openWebsite",
-    OPEN_WEBSITE_ALLOW_API = 'openWebsiteAllowApi',
+    OPEN_WEBSITE_ALLOW_API = "openWebsiteAllowApi",
-    OPEN_WEBSITE_POLICY = 'openWebsitePolicy',
+    OPEN_WEBSITE_POLICY = "openWebsitePolicy",
-    OPEN_WEBSITE_WIDTH = 'openWebsiteWidth',
+    OPEN_WEBSITE_WIDTH = "openWebsiteWidth",
-    OPEN_WEBSITE_POSITION = 'openWebsitePosition',
+    OPEN_WEBSITE_POSITION = "openWebsitePosition",
-    OPEN_WEBSITE_TRIGGER = 'openWebsiteTrigger',
+    OPEN_WEBSITE_TRIGGER = "openWebsiteTrigger",
-    OPEN_WEBSITE_TRIGGER_MESSAGE = 'openWebsiteTriggerMessage',
+    OPEN_WEBSITE_TRIGGER_MESSAGE = "openWebsiteTriggerMessage",
-    PLAY_AUDIO = 'playAudio',
+    PLAY_AUDIO = "playAudio",
-    PLAY_AUDIO_LOOP = 'playAudioLoop',
+    PLAY_AUDIO_LOOP = "playAudioLoop",
-    READABLE_BY = 'readableBy',
+    READABLE_BY = "readableBy",
-    SCRIPT = 'script',
+    SCRIPT = "script",
-    SILENT = 'silent',
+    SILENT = "silent",
-    START = 'start',
+    START = "start",
-    START_LAYER = 'startLayer',
+    START_LAYER = "startLayer",
-    URL = 'url',
+    URL = "url",
-    WRITABLE_BY = 'writableBy',
+    WRITABLE_BY = "writableBy",
-    ZONE = 'zone',
+    ZONE = "zone",
 }

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -4,10 +4,8 @@ import { scriptUtils } from "../../Api/ScriptUtils";
 import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
 import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
-import { get } from 'svelte/store';
+import { get } from "svelte/store";
-import {
+import { ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
-    ON_ACTION_TRIGGER_BUTTON,
-} from "../../WebRtc/LayoutManager";
 import type { ITiledMapLayer } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
 
@@ -18,8 +16,8 @@ enum OpenCoWebsiteState {
 }
 
 interface OpenCoWebsite {
-    coWebsite: CoWebsite | undefined,
+    coWebsite: CoWebsite | undefined;
-    state: OpenCoWebsiteState
+    state: OpenCoWebsiteState;
 }
 
 export class GameMapPropertiesListener {
@@ -29,7 +27,7 @@ export class GameMapPropertiesListener {
     constructor(private scene: GameScene, private gameMap: GameMap) {}
 
     register() {
-        this.gameMap.onPropertyChange(GameMapProperties.OPEN_TAB, (newValue, oldvalue, allProps) => {
+        this.gameMap.onPropertyChange(GameMapProperties.OPEN_TAB, (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
                 layoutManagerActionStore.removeAction("openTab");
             }
@@ -56,7 +54,7 @@ export class GameMapPropertiesListener {
         // Open a new co-website by the property.
         this.gameMap.onEnterLayer((newLayers) => {
             const handler = () => {
-                newLayers.forEach(layer => {
+                newLayers.forEach((layer) => {
                     if (!layer.properties) {
                         return;
                     }
@@ -69,7 +67,7 @@ export class GameMapPropertiesListener {
                     let websiteTriggerProperty: string | undefined;
                     let websiteTriggerMessageProperty: string | undefined;
 
-                    layer.properties.forEach(property => {
+                    layer.properties.forEach((property) => {
                         switch (property.name) {
                             case GameMapProperties.OPEN_WEBSITE:
                                 openWebsiteProperty = property.value as string | undefined;
@@ -111,14 +109,16 @@ export class GameMapPropertiesListener {
                     });
 
                     const openWebsiteFunction = () => {
-                        coWebsiteManager.loadCoWebsite(
+                        coWebsiteManager
+                            .loadCoWebsite(
                                 openWebsiteProperty as string,
                                 this.scene.MapUrlFile,
                                 allowApiProperty,
                                 websitePolicyProperty,
                                 websiteWidthProperty,
-                            websitePositionProperty,
+                                websitePositionProperty
-                        ).then(coWebsite => {
+                            )
+                            .then((coWebsite) => {
                                 const coWebsiteOpen = this.coWebsitesOpenByLayer.get(layer);
                                 if (coWebsiteOpen && coWebsiteOpen.state === OpenCoWebsiteState.MUST_BE_CLOSE) {
                                     coWebsiteManager.closeCoWebsite(coWebsite);
@@ -127,7 +127,7 @@ export class GameMapPropertiesListener {
                                 } else {
                                     this.coWebsitesOpenByLayer.set(layer, {
                                         coWebsite,
-                                    state: OpenCoWebsiteState.OPENED
+                                        state: OpenCoWebsiteState.OPENED,
                                     });
                                 }
                             });
@@ -161,7 +161,7 @@ export class GameMapPropertiesListener {
         // Close opened co-websites on leave the layer who contain the property.
         this.gameMap.onLeaveLayer((oldLayers) => {
             const handler = () => {
-                oldLayers.forEach(layer => {
+                oldLayers.forEach((layer) => {
                     if (!layer.properties) {
                         return;
                     }
@@ -169,7 +169,7 @@ export class GameMapPropertiesListener {
                     let openWebsiteProperty: string | undefined;
                     let websiteTriggerProperty: string | undefined;
 
-                    layer.properties.forEach(property => {
+                    layer.properties.forEach((property) => {
                         switch (property.name) {
                             case GameMapProperties.OPEN_WEBSITE:
                                 openWebsiteProperty = property.value as string | undefined;
@@ -192,11 +192,6 @@ export class GameMapPropertiesListener {
 
                     if (coWebsiteOpen.state === OpenCoWebsiteState.LOADING) {
                         coWebsiteOpen.state = OpenCoWebsiteState.MUST_BE_CLOSE;
-                        return;
-                    }
-
-                    if (coWebsiteOpen.state !== OpenCoWebsiteState.OPENED) {
-                        return;
                     }
 
                     if (coWebsiteOpen.coWebsite !== undefined) {
@@ -216,9 +211,10 @@ export class GameMapPropertiesListener {
                         return;
                     }
 
-                    const action = actionStore && actionStore.length > 0 ?
+                    const action =
-                        actionStore.find(action => action.uuid === actionTriggerUuid) : undefined;
+                        actionStore && actionStore.length > 0
-
+                            ? actionStore.find((action) => action.uuid === actionTriggerUuid)
+                            : undefined;
 
                     if (action) {
                         layoutManagerActionStore.removeAction(actionTriggerUuid);

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() {

front/src/Stores/LayoutManagerStore.ts

@@ -9,9 +9,7 @@ export interface LayoutManagerAction {
     userInputManager: UserInputManager | undefined;
 }
 
-
 function createLayoutManagerAction() {
-
     const { subscribe, set, update } = writable<LayoutManagerAction[]>([]);
 
     return {

front/src/WebRtc/JitsiFactory.ts

@@ -141,7 +141,8 @@ class JitsiFactory {
         jitsiUrl?: string,
         jitsiWidth?: number
     ): void {
-        coWebsiteManager.addCoWebsite(async (cowebsiteDiv) => {
+        coWebsiteManager.addCoWebsite(
+            async (cowebsiteDiv) => {
                 // Jitsi meet external API maintains some data in local storage
                 // which is sent via the appData URL parameter when joining a
                 // conference. Problem is that this data grows indefinitely. Thus
@@ -176,7 +177,7 @@ class JitsiFactory {
                             throw new Error("Could not find Jitsi Iframe");
                         }
                         resolve(iframe);
-                }
+                    };
                     options.onload = () => doResolve(); //we want for the iframe to be loaded before triggering animations.
                     setTimeout(() => doResolve(), 2000); //failsafe in case the iframe is deleted before loading or too long to load
                     this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
@@ -185,7 +186,10 @@ class JitsiFactory {
                     this.jitsiApi.addListener("audioMuteStatusChanged", this.audioCallback);
                     this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
                 });
-        }, jitsiWidth, 0);
+            },
+            jitsiWidth,
+            0
+        );
     }
 
     public stop() {