From 8f3d9277ac7509b84da0cad0e8179dcc52e7ce96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 29 Jun 2021 18:39:43 +0200
Subject: [PATCH] Merging master into develop

---
 .github/workflows/push-to-npm.yml             |    8 +-
 CHANGELOG.md                                  |   12 +
 docs/maps/api-reference.md                    |    2 +-
 front/package.json                            |    1 +
 .../CustomCharacterScene.svelte               |   12 +-
 .../Entity/PlayerTexturesLoadingManager.ts    |  116 +-
 front/src/Phaser/Game/GameScene.ts            | 1006 ++++++++++-------
 front/src/Phaser/Login/CustomizeScene.ts      |  167 +--
 front/src/Stores/CustomCharacterStore.ts      |    4 +-
 front/webpack.config.ts                       |  201 ++--
 maps/tests/Metadata/cowebsiteAllowApi.html    |    3 +-
 maps/tests/Metadata/cowebsiteAllowApi.js      |    2 +-
 maps/tests/index.html                         |    8 +
 yarn.lock                                     |    6 +-
 14 files changed, 876 insertions(+), 672 deletions(-)

diff --git a/.github/workflows/push-to-npm.yml b/.github/workflows/push-to-npm.yml
index 798e2530..3b90e846 100644
--- a/.github/workflows/push-to-npm.yml
+++ b/.github/workflows/push-to-npm.yml
@@ -13,10 +13,6 @@ jobs:
           node-version: '14.x'
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Edit tsconfig.json to add declarations
-        run: "sed -i 's/\"declaration\": false/\"declaration\": true/g' tsconfig.json"
-        working-directory: "front"
-
       - name: Replace version number
         run: 'sed -i "s#VERSION_PLACEHOLDER#${GITHUB_REF/refs\/tags\//}#g" package.json'
         working-directory: "front/packages/iframe-api-typings"
@@ -47,9 +43,9 @@ jobs:
         working-directory: "front"
 
       - name: "Build"
-        run: yarn run build
+        run: yarn run build-typings
         env:
-          API_URL: "localhost:8080"
+          PUSHER_URL: "//localhost:8080"
         working-directory: "front"
 
       # We build the front to generate the typings of iframe_api, then we copy those typings in a separate package.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41f72510..fe8ef7dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,18 @@
   - Use `WA.room.getCurrentRoom(): Promise<Room>` to get the ID, JSON map file, url of the map of the current room and the layer where the current player started
   - Use `WA.ui.registerMenuCommand(): void` to add a custom menu
 
+## Version 1.4.3 - 1.4.4 - 1.4.5
+
+## Bugfixes
+
+- Fixing the generation of @workadventure/iframe-api-typings
+
+## Version 1.4.2
+
+## Updates
+
+- A script in an iframe opened by another script can use the IFrame API.
+
 ## Version 1.4.1
 
 ### Bugfixes
diff --git a/docs/maps/api-reference.md b/docs/maps/api-reference.md
index 30a11b2a..8c8205d8 100644
--- a/docs/maps/api-reference.md
+++ b/docs/maps/api-reference.md
@@ -9,4 +9,4 @@
 - [Sound functions](api-sound.md)
 - [Controls functions](api-controls.md)
 
-- [List of deprecated functions](api-deprecated.md)
\ No newline at end of file
+- [List of deprecated functions](api-deprecated.md)
diff --git a/front/package.json b/front/package.json
index ee031668..20c6b073 100644
--- a/front/package.json
+++ b/front/package.json
@@ -60,6 +60,7 @@
     "templater": "cross-env ./templater.sh",
     "serve": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
     "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
+    "build-typings": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production NODE_ENV=production BUILD_TYPINGS=1 webpack",
     "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",
     "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts",
diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index 1807f15d..684975bb 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -1,11 +1,11 @@
 <script lang="typescript">
     import type { Game } from "../../Phaser/Game/Game";
     import {CustomizeScene, CustomizeSceneName} from "../../Phaser/Login/CustomizeScene";
+    import {activeRowStore} from "../../Stores/CustomCharacterStore";
 
     export let game: Game;
 
     const customCharacterScene = game.scene.getScene(CustomizeSceneName) as CustomizeScene;
-    let activeRow = customCharacterScene.activeRow;
 
     function selectLeft() {
         customCharacterScene.moveCursorHorizontally(-1);
@@ -17,12 +17,10 @@
 
     function selectUp() {
         customCharacterScene.moveCursorVertically(-1);
-        activeRow = customCharacterScene.activeRow;
     }
 
     function selectDown() {
         customCharacterScene.moveCursorVertically(1);
-        activeRow = customCharacterScene.activeRow;
     }
 
     function previousScene() {
@@ -44,16 +42,16 @@
         <button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
     </section>
     <section class="action">
-        {#if activeRow === 0}
+        {#if $activeRowStore === 0}
             <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
         {/if}
-        {#if activeRow !== 0}
+        {#if $activeRowStore !== 0}
             <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up_black.png" alt=""/></button>
         {/if}
-        {#if activeRow === 5}
+        {#if $activeRowStore === 5}
             <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
         {/if}
-        {#if activeRow !== 5}
+        {#if $activeRowStore !== 5}
             <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
         {/if}
     </section>
diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
index 95f00a9e..d2a659ec 100644
--- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
+++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
@@ -1,90 +1,124 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
-import type {CharacterTexture} from "../../Connexion/LocalUser";
-import {BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES} from "./PlayerTextures";
+import type { CharacterTexture } from "../../Connexion/LocalUser";
+import { BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES } from "./PlayerTextures";
 
 export interface FrameConfig {
-    frameWidth: number,
-    frameHeight: number,
+    frameWidth: number;
+    frameHeight: number;
 }
 
 export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => {
-    const returnArray:BodyResourceDescriptionInterface[][] = [];
-    LAYERS.forEach(layer => {
-        const layerArray:BodyResourceDescriptionInterface[] = [];
+    const returnArray: BodyResourceDescriptionInterface[][] = [];
+    LAYERS.forEach((layer) => {
+        const layerArray: BodyResourceDescriptionInterface[] = [];
         Object.values(layer).forEach((textureDescriptor) => {
             layerArray.push(textureDescriptor);
-            load.spritesheet(textureDescriptor.name,textureDescriptor.img,{frameWidth: 32, frameHeight: 32});
-        })
-        returnArray.push(layerArray)
+            load.spritesheet(textureDescriptor.name, textureDescriptor.img, { frameWidth: 32, frameHeight: 32 });
+        });
+        returnArray.push(layerArray);
     });
     return returnArray;
-}
+};
 export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptionInterface[] => {
     const returnArray = Object.values(PLAYER_RESOURCES);
     returnArray.forEach((playerResource: BodyResourceDescriptionInterface) => {
-        load.spritesheet(playerResource.name, playerResource.img, {frameWidth: 32, frameHeight: 32});
+        load.spritesheet(playerResource.name, playerResource.img, { frameWidth: 32, frameHeight: 32 });
     });
     return returnArray;
-}
+};
 
-export const loadCustomTexture = (loaderPlugin: LoaderPlugin, texture: CharacterTexture) : Promise<BodyResourceDescriptionInterface> => {
-    const name = 'customCharacterTexture'+texture.id;
-    const playerResourceDescriptor: BodyResourceDescriptionInterface = {name, img: texture.url, level: texture.level}
+export const loadCustomTexture = (
+    loaderPlugin: LoaderPlugin,
+    texture: CharacterTexture
+): Promise<BodyResourceDescriptionInterface> => {
+    const name = "customCharacterTexture" + texture.id;
+    const playerResourceDescriptor: BodyResourceDescriptionInterface = { name, img: texture.url, level: texture.level };
     return createLoadingPromise(loaderPlugin, playerResourceDescriptor, {
         frameWidth: 32,
-        frameHeight: 32
+        frameHeight: 32,
     });
-}
+};
 
-export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturekeys:Array<string|BodyResourceDescriptionInterface>): Promise<string[]> => {
-    const promisesList:Promise<unknown>[] = [];
-    texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => {
+export const lazyLoadPlayerCharacterTextures = (
+    loadPlugin: LoaderPlugin,
+    texturekeys: Array<string | BodyResourceDescriptionInterface>
+): Promise<string[]> => {
+    const promisesList: Promise<unknown>[] = [];
+    texturekeys.forEach((textureKey: string | BodyResourceDescriptionInterface) => {
         try {
             //TODO refactor
             const playerResourceDescriptor = getRessourceDescriptor(textureKey);
             if (playerResourceDescriptor && !loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
-                promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor, {
-                    frameWidth: 32,
-                    frameHeight: 32
-                }));
+                promisesList.push(
+                    createLoadingPromise(loadPlugin, playerResourceDescriptor, {
+                        frameWidth: 32,
+                        frameHeight: 32,
+                    })
+                );
             }
-        }catch (err){
+        } catch (err) {
             console.error(err);
         }
     });
-    let returnPromise:Promise<Array<string|BodyResourceDescriptionInterface>>;
+    let returnPromise: Promise<Array<string | BodyResourceDescriptionInterface>>;
     if (promisesList.length > 0) {
         loadPlugin.start();
         returnPromise = Promise.all(promisesList).then(() => texturekeys);
     } else {
         returnPromise = Promise.resolve(texturekeys);
     }
-    return returnPromise.then((keys) => keys.map((key) => {
-        return typeof key !== 'string' ? key.name : key;
-    }))
-}
 
-export const getRessourceDescriptor = (textureKey: string|BodyResourceDescriptionInterface): BodyResourceDescriptionInterface => {
-    if (typeof textureKey !== 'string' && textureKey.img) {
+    //If the loading fail, we render the default model instead.
+    return returnPromise
+        .then((keys) =>
+            keys.map((key) => {
+                return typeof key !== "string" ? key.name : key;
+            })
+        )
+        .catch(() => lazyLoadPlayerCharacterTextures(loadPlugin, ["color_22", "eyes_23"]));
+};
+
+export const getRessourceDescriptor = (
+    textureKey: string | BodyResourceDescriptionInterface
+): BodyResourceDescriptionInterface => {
+    if (typeof textureKey !== "string" && textureKey.img) {
         return textureKey;
     }
-    const textureName:string = typeof textureKey === 'string' ? textureKey : textureKey.name;
+    const textureName: string = typeof textureKey === "string" ? textureKey : textureKey.name;
     const playerResource = PLAYER_RESOURCES[textureName];
     if (playerResource !== undefined) return playerResource;
 
-    for (let i=0; i<LAYERS.length;i++) {
+    for (let i = 0; i < LAYERS.length; i++) {
         const playerResource = LAYERS[i][textureName];
         if (playerResource !== undefined) return playerResource;
     }
-    throw 'Could not find a data for texture '+textureName;
-}
+    throw "Could not find a data for texture " + textureName;
+};
 
-export const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface, frameConfig: FrameConfig) => {
-    return new Promise<BodyResourceDescriptionInterface>((res) => {
+export const createLoadingPromise = (
+    loadPlugin: LoaderPlugin,
+    playerResourceDescriptor: BodyResourceDescriptionInterface,
+    frameConfig: FrameConfig
+) => {
+    return new Promise<BodyResourceDescriptionInterface>((res, rej) => {
+        console.log("count", loadPlugin.listenerCount("loaderror"));
         if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
             return res(playerResourceDescriptor);
         }
         loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, frameConfig);
-        loadPlugin.once('filecomplete-spritesheet-' + playerResourceDescriptor.name, () => res(playerResourceDescriptor));
+        const errorCallback = (file: { src: string }) => {
+            if (file.src !== playerResourceDescriptor.img) return;
+            console.error("failed loading player ressource: ", playerResourceDescriptor);
+            rej(playerResourceDescriptor);
+            loadPlugin.off("filecomplete-spritesheet-" + playerResourceDescriptor.name, successCallback);
+            loadPlugin.off("loaderror", errorCallback);
+        };
+        const successCallback = () => {
+            loadPlugin.off("loaderror", errorCallback);
+            res(playerResourceDescriptor);
+        };
+
+        loadPlugin.once("filecomplete-spritesheet-" + playerResourceDescriptor.name, successCallback);
+        loadPlugin.on("loaderror", errorCallback);
     });
-}
+};
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index e6e93b57..28f794ad 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1,4 +1,4 @@
-import { Queue } from 'queue-typescript';
+import { Queue } from "queue-typescript";
 import type { Subscription } from "rxjs";
 import { GlobalMessageManager } from "../../Administration/GlobalMessageManager";
 import { userMessageManager } from "../../Administration/UserMessageManager";
@@ -12,18 +12,13 @@ import type {
     OnConnectInterface,
     PointInterface,
     PositionInterface,
-    RoomJoinedMessageInterface
+    RoomJoinedMessageInterface,
 } from "../../Connexion/ConnexionModels";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { Room } from "../../Connexion/Room";
 import type { RoomConnection } from "../../Connexion/RoomConnection";
 import { worldFullMessageStream } from "../../Connexion/WorldFullMessageStream";
-import {
-    DEBUG_MODE,
-    JITSI_PRIVATE_MODE,
-    MAX_PER_GROUP,
-    POSITION_DELAY
-} from "../../Enum/EnvironmentVariable";
+import { DEBUG_MODE, JITSI_PRIVATE_MODE, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
 import { TextureError } from "../../Exception/TextureError";
 import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
 import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
@@ -34,14 +29,15 @@ import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 import { jitsiFactory } from "../../WebRtc/JitsiFactory";
 import {
-    AUDIO_LOOP_PROPERTY, AUDIO_VOLUME_PROPERTY,
+    AUDIO_LOOP_PROPERTY,
+    AUDIO_VOLUME_PROPERTY,
     Box,
     JITSI_MESSAGE_PROPERTIES,
     layoutManager,
     ON_ACTION_TRIGGER_BUTTON,
     TRIGGER_JITSI_PROPERTIES,
     TRIGGER_WEBSITE_PROPERTIES,
-    WEBSITE_MESSAGE_PROPERTIES
+    WEBSITE_MESSAGE_PROPERTIES,
 } from "../../WebRtc/LayoutManager";
 import { mediaManager } from "../../WebRtc/MediaManager";
 import { SimplePeer, UserSimplePeerInterface } from "../../WebRtc/SimplePeer";
@@ -63,8 +59,9 @@ import type {
     ITiledMapLayerProperty,
     ITiledMapObject,
     ITiledMapTileLayer,
-    ITiledTileSet } from "../Map/ITiledMap";
-import { MenuScene, MenuSceneName } from '../Menu/MenuScene';
+    ITiledTileSet,
+} from "../Map/ITiledMap";
+import { MenuScene, MenuSceneName } from "../Menu/MenuScene";
 import { PlayerAnimationDirections } from "../Player/Animation";
 import { hasMovedEventName, Player, requestEmoteEventName } from "../Player/Player";
 import { ErrorSceneName } from "../Reconnecting/ErrorScene";
@@ -86,53 +83,53 @@ import CanvasTexture = Phaser.Textures.CanvasTexture;
 import GameObject = Phaser.GameObjects.GameObject;
 import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import DOMElement = Phaser.GameObjects.DOMElement;
-import EVENT_TYPE = Phaser.Scenes.Events
+import EVENT_TYPE = Phaser.Scenes.Events;
 import RenderTexture = Phaser.GameObjects.RenderTexture;
 import Tilemap = Phaser.Tilemaps.Tilemap;
-import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
+import type { HasPlayerMovedEvent } from "../../Api/Events/HasPlayerMovedEvent";
 
 import AnimatedTiles from "phaser-animated-tiles";
-import {soundManager} from "./SoundManager";
-import {peerStore, screenSharingPeerStore} from "../../Stores/PeerStore";
-import {videoFocusStore} from "../../Stores/VideoFocusStore";
-import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
+import { soundManager } from "./SoundManager";
+import { peerStore, screenSharingPeerStore } from "../../Stores/PeerStore";
+import { videoFocusStore } from "../../Stores/VideoFocusStore";
+import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
 
 export interface GameSceneInitInterface {
-    initPosition: PointInterface | null,
-    reconnecting: boolean
+    initPosition: PointInterface | null;
+    reconnecting: boolean;
 }
 
 interface InitUserPositionEventInterface {
-    type: 'InitUserPositionEvent'
-    event: MessageUserPositionInterface[]
+    type: "InitUserPositionEvent";
+    event: MessageUserPositionInterface[];
 }
 
 interface AddPlayerEventInterface {
-    type: 'AddPlayerEvent'
-    event: AddPlayerInterface
+    type: "AddPlayerEvent";
+    event: AddPlayerInterface;
 }
 
 interface RemovePlayerEventInterface {
-    type: 'RemovePlayerEvent'
-    userId: number
+    type: "RemovePlayerEvent";
+    userId: number;
 }
 
 interface UserMovedEventInterface {
-    type: 'UserMovedEvent'
-    event: MessageUserMovedInterface
+    type: "UserMovedEvent";
+    event: MessageUserMovedInterface;
 }
 
 interface GroupCreatedUpdatedEventInterface {
-    type: 'GroupCreatedUpdatedEvent'
-    event: GroupCreatedUpdatedMessageInterface
+    type: "GroupCreatedUpdatedEvent";
+    event: GroupCreatedUpdatedMessageInterface;
 }
 
 interface DeleteGroupEventInterface {
-    type: 'DeleteGroupEvent'
-    groupId: number
+    type: "DeleteGroupEvent";
+    groupId: number;
 }
 
-const defaultStartLayerName = 'start';
+const defaultStartLayerName = "start";
 
 export class GameScene extends DirtyScene {
     Terrains: Array<Phaser.Tilemaps.Tileset>;
@@ -148,14 +145,30 @@ export class GameScene extends DirtyScene {
     startY!: number;
     circleTexture!: CanvasTexture;
     circleRedTexture!: CanvasTexture;
-    pendingEvents: Queue<InitUserPositionEventInterface | AddPlayerEventInterface | RemovePlayerEventInterface | UserMovedEventInterface | GroupCreatedUpdatedEventInterface | DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface | AddPlayerEventInterface | RemovePlayerEventInterface | UserMovedEventInterface | GroupCreatedUpdatedEventInterface | DeleteGroupEventInterface>();
+    pendingEvents: Queue<
+        | InitUserPositionEventInterface
+        | AddPlayerEventInterface
+        | RemovePlayerEventInterface
+        | UserMovedEventInterface
+        | GroupCreatedUpdatedEventInterface
+        | DeleteGroupEventInterface
+    > = new Queue<
+        | InitUserPositionEventInterface
+        | AddPlayerEventInterface
+        | RemovePlayerEventInterface
+        | UserMovedEventInterface
+        | GroupCreatedUpdatedEventInterface
+        | DeleteGroupEventInterface
+    >();
     private initPosition: PositionInterface | null = null;
     private playersPositionInterpolator = new PlayersPositionInterpolator();
     public connection: RoomConnection | undefined;
     private simplePeer!: SimplePeer;
     private GlobalMessageManager!: GlobalMessageManager;
     private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
-    private connectionAnswerPromiseResolve!: (value: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
+    private connectionAnswerPromiseResolve!: (
+        value: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>
+    ) => void;
     // A promise that will resolve when the "create" method is called (signaling loading is ended)
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
@@ -169,11 +182,11 @@ export class GameScene extends DirtyScene {
     currentTick!: number;
     lastSentTick!: number; // The last tick at which a position was sent.
     lastMoveEventSent: HasPlayerMovedEvent = {
-        direction: '',
+        direction: "",
         moving: false,
         x: -1000,
-        y: -1000
-    }
+        y: -1000,
+    };
 
     private gameMap!: GameMap;
     private actionableItems: Map<number, ActionableItem> = new Map<number, ActionableItem>();
@@ -192,16 +205,16 @@ export class GameScene extends DirtyScene {
     private pinchManager: PinchManager | undefined;
     private mapTransitioning: boolean = false; //used to prevent transitions happenning at the same time.
     private emoteManager!: EmoteManager;
+    private preloading: boolean = true;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
         super({
-            key: customKey ?? room.id
+            key: customKey ?? room.id,
         });
         this.Terrains = [];
         this.groups = new Map<number, Sprite>();
         this.instance = room.getInstance();
 
-
         this.MapUrlFile = MapUrlFile;
         this.RoomId = room.id;
 
@@ -223,50 +236,70 @@ export class GameScene extends DirtyScene {
             }
         }
 
-        this.load.image(openChatIconName, 'resources/objects/talk.png');
+        this.load.image(openChatIconName, "resources/objects/talk.png");
         if (touchScreenManager.supportTouchScreen) {
             this.load.image(joystickBaseKey, joystickBaseImg);
             this.load.image(joystickThumbKey, joystickThumbImg);
         }
-        this.load.audio('audio-webrtc-in', '/resources/objects/webrtc-in.mp3');
-        this.load.audio('audio-webrtc-out', '/resources/objects/webrtc-out.mp3');
+        this.load.audio("audio-webrtc-in", "/resources/objects/webrtc-in.mp3");
+        this.load.audio("audio-webrtc-out", "/resources/objects/webrtc-out.mp3");
         //this.load.audio('audio-report-message', '/resources/objects/report-message.mp3');
         this.sound.pauseOnBlur = false;
 
         this.load.on(FILE_LOAD_ERROR, (file: { src: string }) => {
             // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
-            if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
+            if (
+                window.location.protocol === "http:" &&
+                file.src === this.MapUrlFile &&
+                file.src.startsWith("http:") &&
+                this.originalMapUrl === undefined
+            ) {
                 this.originalMapUrl = this.MapUrlFile;
-                this.MapUrlFile = this.MapUrlFile.replace('http://', 'https://');
+                this.MapUrlFile = this.MapUrlFile.replace("http://", "https://");
                 this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
-                this.load.on('filecomplete-tilemapJSON-' + this.MapUrlFile, (key: string, type: string, data: unknown) => {
-                    this.onMapLoad(data);
-                });
+                this.load.on(
+                    "filecomplete-tilemapJSON-" + this.MapUrlFile,
+                    (key: string, type: string, data: unknown) => {
+                        this.onMapLoad(data);
+                    }
+                );
                 return;
             }
             // 127.0.0.1, localhost and *.localhost are considered secure, even on HTTP.
             // So if we are in https, we can still try to load a HTTP local resource (can be useful for testing purposes)
             // See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#when_is_a_context_considered_secure
             const url = new URL(file.src);
-            const host = url.host.split(':')[0];
-            if (window.location.protocol === 'https:' && file.src === this.MapUrlFile && (host === '127.0.0.1' || host === 'localhost' || host.endsWith('.localhost')) && this.originalMapUrl === undefined) {
+            const host = url.host.split(":")[0];
+            if (
+                window.location.protocol === "https:" &&
+                file.src === this.MapUrlFile &&
+                (host === "127.0.0.1" || host === "localhost" || host.endsWith(".localhost")) &&
+                this.originalMapUrl === undefined
+            ) {
                 this.originalMapUrl = this.MapUrlFile;
-                this.MapUrlFile = this.MapUrlFile.replace('https://', 'http://');
+                this.MapUrlFile = this.MapUrlFile.replace("https://", "http://");
                 this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
-                this.load.on('filecomplete-tilemapJSON-' + this.MapUrlFile, (key: string, type: string, data: unknown) => {
-                    this.onMapLoad(data);
-                });
+                this.load.on(
+                    "filecomplete-tilemapJSON-" + this.MapUrlFile,
+                    (key: string, type: string, data: unknown) => {
+                        this.onMapLoad(data);
+                    }
+                );
                 return;
             }
 
-            this.scene.start(ErrorSceneName, {
-                title: 'Network error',
-                subTitle: 'An error occurred while loading resource:',
-                message: this.originalMapUrl ?? file.src
-            });
+            //once preloading is over, we don't want loading errors to crash the game, so we need to disable this behavior after preloading.
+            console.error("Error when loading: ", file);
+            if (this.preloading) {
+                this.scene.start(ErrorSceneName, {
+                    title: "Network error",
+                    subTitle: "An error occurred while loading resource:",
+                    message: this.originalMapUrl ?? file.src,
+                });
+            }
         });
-        this.load.scenePlugin('AnimatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles');
-        this.load.on('filecomplete-tilemapJSON-' + this.MapUrlFile, (key: string, type: string, data: unknown) => {
+        this.load.scenePlugin("AnimatedTiles", AnimatedTiles, "animatedTiles", "animatedTiles");
+        this.load.on("filecomplete-tilemapJSON-" + this.MapUrlFile, (key: string, type: string, data: unknown) => {
             this.onMapLoad(data);
         });
         //TODO strategy to add access token
@@ -278,13 +311,13 @@ export class GameScene extends DirtyScene {
             this.onMapLoad(data);
         }
 
-        this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
+        this.load.bitmapFont("main_font", "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
         //eslint-disable-next-line @typescript-eslint/no-explicit-any
         (this.load as any).rexWebFont({
             custom: {
-                families: ['Press Start 2P'],
-                urls: ['/resources/fonts/fonts.css'],
-                testString: 'abcdefg'
+                families: ["Press Start 2P"],
+                urls: ["/resources/fonts/fonts.css"],
+                testString: "abcdefg",
             },
         });
 
@@ -298,21 +331,21 @@ export class GameScene extends DirtyScene {
         // Triggered when the map is loaded
         // Load tiles attached to the map recursively
         this.mapFile = data.data;
-        const url = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/'));
+        const url = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf("/"));
         this.mapFile.tilesets.forEach((tileset) => {
-            if (typeof tileset.name === 'undefined' || typeof tileset.image === 'undefined') {
-                console.warn("Don't know how to handle tileset ", tileset)
+            if (typeof tileset.name === "undefined" || typeof tileset.image === "undefined") {
+                console.warn("Don't know how to handle tileset ", tileset);
                 return;
             }
             //TODO strategy to add access token
             this.load.image(`${url}/${tileset.image}`, `${url}/${tileset.image}`);
-        })
+        });
 
         // Scan the object layers for objects to load and load them.
         const objects = new Map<string, ITiledMapObject[]>();
 
         for (const layer of this.mapFile.layers) {
-            if (layer.type === 'objectgroup') {
+            if (layer.type === "objectgroup") {
                 for (const object of layer.objects) {
                     let objectsOfType: ITiledMapObject[] | undefined;
                     if (!objects.has(object.type)) {
@@ -320,7 +353,7 @@ export class GameScene extends DirtyScene {
                     } else {
                         objectsOfType = objects.get(object.type);
                         if (objectsOfType === undefined) {
-                            throw new Error('Unexpected object type not found');
+                            throw new Error("Unexpected object type not found");
                         }
                     }
                     objectsOfType.push(object);
@@ -335,8 +368,8 @@ export class GameScene extends DirtyScene {
             let itemFactory: ItemFactoryInterface;
 
             switch (itemType) {
-                case 'computer': {
-                    const module = await import('../Items/Computer/computer');
+                case "computer": {
+                    const module = await import("../Items/Computer/computer");
                     itemFactory = module.default;
                     break;
                 }
@@ -348,7 +381,7 @@ export class GameScene extends DirtyScene {
             itemFactory.preload(this.load);
             this.load.start(); // Let's manually start the loader because the import might be over AFTER the loading ends.
 
-            this.load.on('complete', () => {
+            this.load.on("complete", () => {
                 // FIXME: the factory might fail because the resources might not be loaded yet...
                 // We would need to add a loader ended event in addition to the createPromise
                 this.createPromise.then(async () => {
@@ -388,6 +421,7 @@ export class GameScene extends DirtyScene {
 
     //hook create scene
     create(): void {
+        this.preloading = false;
         this.trackDirtyAnims();
 
         gameManager.gameSceneIsCreated(this);
@@ -398,11 +432,13 @@ export class GameScene extends DirtyScene {
             this.pinchManager = new PinchManager(this);
         }
 
-        this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError(message))
+        this.messageSubscription = worldFullMessageStream.stream.subscribe((message) =>
+            this.showWorldFullError(message)
+        );
 
         const playerName = gameManager.getPlayerName();
         if (!playerName) {
-            throw 'playerName is not set';
+            throw "playerName is not set";
         }
         this.playerName = playerName;
         this.characterLayers = gameManager.getCharacterLayers();
@@ -410,9 +446,18 @@ export class GameScene extends DirtyScene {
 
         //initalise map
         this.Map = this.add.tilemap(this.MapUrlFile);
-        const mapDirUrl = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/'));
+        const mapDirUrl = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf("/"));
         this.mapFile.tilesets.forEach((tileset: ITiledTileSet) => {
-            this.Terrains.push(this.Map.addTilesetImage(tileset.name, `${mapDirUrl}/${tileset.image}`, tileset.tilewidth, tileset.tileheight, tileset.margin, tileset.spacing/*, tileset.firstgid*/));
+            this.Terrains.push(
+                this.Map.addTilesetImage(
+                    tileset.name,
+                    `${mapDirUrl}/${tileset.image}`,
+                    tileset.tilewidth,
+                    tileset.tileheight,
+                    tileset.margin,
+                    tileset.spacing /*, tileset.firstgid*/
+                )
+            );
         });
 
         //permit to set bound collision
@@ -421,8 +466,7 @@ export class GameScene extends DirtyScene {
         //add layer on map
         this.gameMap = new GameMap(this.mapFile, this.Map, this.Terrains);
         for (const layer of this.gameMap.flatLayers) {
-            if (layer.type === 'tilelayer') {
-
+            if (layer.type === "tilelayer") {
                 const exitSceneUrl = this.getExitSceneUrl(layer);
                 if (exitSceneUrl !== undefined) {
                     this.loadNextGame(exitSceneUrl);
@@ -432,7 +476,7 @@ export class GameScene extends DirtyScene {
                     this.loadNextGame(exitUrl);
                 }
             }
-            if (layer.type === 'objectgroup') {
+            if (layer.type === "objectgroup") {
                 for (const object of layer.objects) {
                     if (object.text) {
                         TextUtils.createTextFromITiledMapObject(this, object);
@@ -441,9 +485,9 @@ export class GameScene extends DirtyScene {
             }
         }
 
-        this.gameMap.exitUrls.forEach(exitUrl => {
-            this.loadNextGame(exitUrl)
-        })
+        this.gameMap.exitUrls.forEach((exitUrl) => {
+            this.loadNextGame(exitUrl);
+        });
 
         this.initStartXAndStartY();
 
@@ -453,13 +497,12 @@ export class GameScene extends DirtyScene {
         //initialise list of other player
         this.MapPlayers = this.physics.add.group({ immovable: true });
 
-
         //create input to move
         this.userInputManager = new UserInputManager(this);
         mediaManager.setUserInputManager(this.userInputManager);
 
         if (localUserStore.getFullscreen()) {
-            document.querySelector('body')?.requestFullscreen();
+            document.querySelector("body")?.requestFullscreen();
         }
 
         //notify game manager can to create currentUser in map
@@ -469,7 +512,7 @@ export class GameScene extends DirtyScene {
         this.initCamera();
 
         this.animatedTiles.init(this.Map);
-        this.events.on('tileanimationupdate', () => this.dirty = true);
+        this.events.on("tileanimationupdate", () => (this.dirty = true));
 
         this.initCirclesCanvas();
 
@@ -497,17 +540,18 @@ export class GameScene extends DirtyScene {
             this.outlinedItem?.activate();
         });
 
-        this.openChatIcon = new OpenChatIcon(this, 2, this.game.renderer.height - 2)
+        this.openChatIcon = new OpenChatIcon(this, 2, this.game.renderer.height - 2);
 
         this.reposition();
 
         // From now, this game scene will be notified of reposition events
-        this.biggestAvailableAreaStoreUnsubscribe = biggestAvailableAreaStore.subscribe((box) => this.updateCameraOffset(box));
+        this.biggestAvailableAreaStoreUnsubscribe = biggestAvailableAreaStore.subscribe((box) =>
+            this.updateCameraOffset(box)
+        );
 
         this.triggerOnMapLayerPropertyChange();
         this.listenToIframeEvents();
 
-
         if (!this.room.isDisconnected()) {
             this.connect();
         }
@@ -518,12 +562,12 @@ export class GameScene extends DirtyScene {
         this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
             const newPeerNumber = peers.size;
             if (newPeerNumber > oldPeerNumber) {
-                this.sound.play('audio-webrtc-in', {
-                    volume: 0.2
+                this.sound.play("audio-webrtc-in", {
+                    volume: 0.2,
                 });
             } else if (newPeerNumber < oldPeerNumber) {
-                this.sound.play('audio-webrtc-out', {
-                    volume: 0.2
+                this.sound.play("audio-webrtc-out", {
+                    volume: 0.2,
                 });
             }
             oldPeerNumber = newPeerNumber;
@@ -536,221 +580,236 @@ export class GameScene extends DirtyScene {
     private connect(): void {
         const camera = this.cameras.main;
 
-        connectionManager.connectToRoomSocket(
-            this.RoomId,
-            this.playerName,
-            this.characterLayers,
-            {
-                x: this.startX,
-                y: this.startY
-            },
-            {
-                left: camera.scrollX,
-                top: camera.scrollY,
-                right: camera.scrollX + camera.width,
-                bottom: camera.scrollY + camera.height,
-            },
-            this.companion
-        ).then((onConnect: OnConnectInterface) => {
-            this.connection = onConnect.connection;
+        connectionManager
+            .connectToRoomSocket(
+                this.RoomId,
+                this.playerName,
+                this.characterLayers,
+                {
+                    x: this.startX,
+                    y: this.startY,
+                },
+                {
+                    left: camera.scrollX,
+                    top: camera.scrollY,
+                    right: camera.scrollX + camera.width,
+                    bottom: camera.scrollY + camera.height,
+                },
+                this.companion
+            )
+            .then((onConnect: OnConnectInterface) => {
+                this.connection = onConnect.connection;
 
-            this.connection.onUserJoins((message: MessageUserJoined) => {
-                const userMessage: AddPlayerInterface = {
-                    userId: message.userId,
-                    characterLayers: message.characterLayers,
-                    name: message.name,
-                    position: message.position,
-                    visitCardUrl: message.visitCardUrl,
-                    companion: message.companion
-                }
-                this.addPlayer(userMessage);
-            });
+                this.connection.onUserJoins((message: MessageUserJoined) => {
+                    const userMessage: AddPlayerInterface = {
+                        userId: message.userId,
+                        characterLayers: message.characterLayers,
+                        name: message.name,
+                        position: message.position,
+                        visitCardUrl: message.visitCardUrl,
+                        companion: message.companion,
+                    };
+                    this.addPlayer(userMessage);
+                });
 
-            this.connection.onUserMoved((message: UserMovedMessage) => {
-                const position = message.getPosition();
-                if (position === undefined) {
-                    throw new Error('Position missing from UserMovedMessage');
-                }
+                this.connection.onUserMoved((message: UserMovedMessage) => {
+                    const position = message.getPosition();
+                    if (position === undefined) {
+                        throw new Error("Position missing from UserMovedMessage");
+                    }
 
-                const messageUserMoved: MessageUserMovedInterface = {
-                    userId: message.getUserid(),
-                    position: ProtobufClientUtils.toPointInterface(position)
-                }
+                    const messageUserMoved: MessageUserMovedInterface = {
+                        userId: message.getUserid(),
+                        position: ProtobufClientUtils.toPointInterface(position),
+                    };
 
-                this.updatePlayerPosition(messageUserMoved);
-            });
+                    this.updatePlayerPosition(messageUserMoved);
+                });
 
-            this.connection.onUserLeft((userId: number) => {
-                this.removePlayer(userId);
-            });
+                this.connection.onUserLeft((userId: number) => {
+                    this.removePlayer(userId);
+                });
 
-            this.connection.onGroupUpdatedOrCreated((groupPositionMessage: GroupCreatedUpdatedMessageInterface) => {
-                this.shareGroupPosition(groupPositionMessage);
-            })
+                this.connection.onGroupUpdatedOrCreated((groupPositionMessage: GroupCreatedUpdatedMessageInterface) => {
+                    this.shareGroupPosition(groupPositionMessage);
+                });
 
-            this.connection.onGroupDeleted((groupId: number) => {
-                try {
-                    this.deleteGroup(groupId);
-                } catch (e) {
-                    console.error(e);
-                }
-            })
+                this.connection.onGroupDeleted((groupId: number) => {
+                    try {
+                        this.deleteGroup(groupId);
+                    } catch (e) {
+                        console.error(e);
+                    }
+                });
 
-            this.connection.onServerDisconnected(() => {
-                console.log('Player disconnected from server. Reloading scene.');
-                this.cleanupClosingScene();
+                this.connection.onServerDisconnected(() => {
+                    console.log("Player disconnected from server. Reloading scene.");
+                    this.cleanupClosingScene();
 
-                const gameSceneKey = 'somekey' + Math.round(Math.random() * 10000);
-                const game: Phaser.Scene = new GameScene(this.room, this.MapUrlFile, gameSceneKey);
-                this.scene.add(gameSceneKey, game, true,
-                    {
+                    const gameSceneKey = "somekey" + Math.round(Math.random() * 10000);
+                    const game: Phaser.Scene = new GameScene(this.room, this.MapUrlFile, gameSceneKey);
+                    this.scene.add(gameSceneKey, game, true, {
                         initPosition: {
                             x: this.CurrentPlayer.x,
-                            y: this.CurrentPlayer.y
+                            y: this.CurrentPlayer.y,
                         },
-                        reconnecting: true
+                        reconnecting: true,
                     });
 
-                this.scene.stop(this.scene.key);
-                this.scene.remove(this.scene.key);
-            })
+                    this.scene.stop(this.scene.key);
+                    this.scene.remove(this.scene.key);
+                });
 
-            this.connection.onActionableEvent((message => {
-                const item = this.actionableItems.get(message.itemId);
-                if (item === undefined) {
-                    console.warn('Received an event about object "' + message.itemId + '" but cannot find this item on the map.');
-                    return;
-                }
-                item.fire(message.event, message.state, message.parameters);
-            }));
-
-            /**
-             * Triggered when we receive the JWT token to connect to Jitsi
-             */
-            this.connection.onStartJitsiRoom((jwt, room) => {
-                this.startJitsi(room, jwt);
-            });
-
-            // When connection is performed, let's connect SimplePeer
-            this.simplePeer = new SimplePeer(this.connection, !this.room.isPublic, this.playerName);
-            peerStore.connectToSimplePeer(this.simplePeer);
-            screenSharingPeerStore.connectToSimplePeer(this.simplePeer);
-            videoFocusStore.connectToSimplePeer(this.simplePeer);
-            this.GlobalMessageManager = new GlobalMessageManager(this.connection);
-            userMessageManager.setReceiveBanListener(this.bannedUser.bind(this));
-
-            const self = this;
-            this.simplePeer.registerPeerConnectionListener({
-                onConnect(peer) {
-                    self.openChatIcon.setVisible(true);
-                    audioManager.decreaseVolume();
-                },
-                onDisconnect(userId: number) {
-                    if (self.simplePeer.getNbConnections() === 0) {
-                        self.openChatIcon.setVisible(false);
-                        audioManager.restoreVolume();
+                this.connection.onActionableEvent((message) => {
+                    const item = this.actionableItems.get(message.itemId);
+                    if (item === undefined) {
+                        console.warn(
+                            'Received an event about object "' +
+                                message.itemId +
+                                '" but cannot find this item on the map.'
+                        );
+                        return;
                     }
-                }
-            })
+                    item.fire(message.event, message.state, message.parameters);
+                });
 
-            //listen event to share position of user
-            this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this))
-            this.CurrentPlayer.on(hasMovedEventName, this.outlineItem.bind(this))
-            this.CurrentPlayer.on(hasMovedEventName, (event: HasPlayerMovedEvent) => {
-                this.gameMap.setPosition(event.x, event.y);
-            })
+                /**
+                 * Triggered when we receive the JWT token to connect to Jitsi
+                 */
+                this.connection.onStartJitsiRoom((jwt, room) => {
+                    this.startJitsi(room, jwt);
+                });
 
-            //this.initUsersPosition(roomJoinedMessage.users);
-            this.connectionAnswerPromiseResolve(onConnect.room);
-            // Analyze tags to find if we are admin. If yes, show console.
+                // When connection is performed, let's connect SimplePeer
+                this.simplePeer = new SimplePeer(this.connection, !this.room.isPublic, this.playerName);
+                peerStore.connectToSimplePeer(this.simplePeer);
+                screenSharingPeerStore.connectToSimplePeer(this.simplePeer);
+                videoFocusStore.connectToSimplePeer(this.simplePeer);
+                this.GlobalMessageManager = new GlobalMessageManager(this.connection);
+                userMessageManager.setReceiveBanListener(this.bannedUser.bind(this));
 
+                const self = this;
+                this.simplePeer.registerPeerConnectionListener({
+                    onConnect(peer) {
+                        self.openChatIcon.setVisible(true);
+                        audioManager.decreaseVolume();
+                    },
+                    onDisconnect(userId: number) {
+                        if (self.simplePeer.getNbConnections() === 0) {
+                            self.openChatIcon.setVisible(false);
+                            audioManager.restoreVolume();
+                        }
+                    },
+                });
 
-            this.scene.wake();
-            this.scene.stop(ReconnectingSceneName);
+                //listen event to share position of user
+                this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this));
+                this.CurrentPlayer.on(hasMovedEventName, this.outlineItem.bind(this));
+                this.CurrentPlayer.on(hasMovedEventName, (event: HasPlayerMovedEvent) => {
+                    this.gameMap.setPosition(event.x, event.y);
+                });
 
-            //init user position and play trigger to check layers properties
-            this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
-        });
+                //this.initUsersPosition(roomJoinedMessage.users);
+                this.connectionAnswerPromiseResolve(onConnect.room);
+                // Analyze tags to find if we are admin. If yes, show console.
+
+                this.scene.wake();
+                this.scene.stop(ReconnectingSceneName);
+
+                //init user position and play trigger to check layers properties
+                this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
+            });
     }
 
     //todo: into dedicated classes
     private initCirclesCanvas(): void {
         // Let's generate the circle for the group delimiter
-        let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
+        let circleElement = Object.values(this.textures.list).find(
+            (object: Texture) => object.key === "circleSprite-white"
+        );
         if (circleElement) {
-            this.textures.remove('circleSprite-white');
+            this.textures.remove("circleSprite-white");
         }
 
-        circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
+        circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === "circleSprite-red");
         if (circleElement) {
-            this.textures.remove('circleSprite-red');
+            this.textures.remove("circleSprite-red");
         }
 
         //create white circle canvas use to create sprite
-        this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96);
+        this.circleTexture = this.textures.createCanvas("circleSprite-white", 96, 96);
         const context = this.circleTexture.context;
         context.beginPath();
         context.arc(48, 48, 48, 0, 2 * Math.PI, false);
         // context.lineWidth = 5;
-        context.strokeStyle = '#ffffff';
+        context.strokeStyle = "#ffffff";
         context.stroke();
         this.circleTexture.refresh();
 
         //create red circle canvas use to create sprite
-        this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96);
+        this.circleRedTexture = this.textures.createCanvas("circleSprite-red", 96, 96);
         const contextRed = this.circleRedTexture.context;
         contextRed.beginPath();
         contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
         //context.lineWidth = 5;
-        contextRed.strokeStyle = '#ff0000';
+        contextRed.strokeStyle = "#ff0000";
         contextRed.stroke();
         this.circleRedTexture.refresh();
     }
 
-
     private safeParseJSONstring(jsonString: string | undefined, propertyName: string) {
         try {
             return jsonString ? JSON.parse(jsonString) : {};
         } catch (e) {
             console.warn('Invalid JSON found in property "' + propertyName + '" of the map:' + jsonString, e);
-            return {}
+            return {};
         }
     }
 
     private triggerOnMapLayerPropertyChange() {
-        this.gameMap.onPropertyChange('exitSceneUrl', (newValue, oldValue) => {
+        this.gameMap.onPropertyChange("exitSceneUrl", (newValue, oldValue) => {
             if (newValue) this.onMapExit(newValue as string);
         });
-        this.gameMap.onPropertyChange('exitUrl', (newValue, oldValue) => {
+        this.gameMap.onPropertyChange("exitUrl", (newValue, oldValue) => {
             if (newValue) this.onMapExit(newValue as string);
         });
-        this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue, allProps) => {
+        this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
-                layoutManager.removeActionButton('openWebsite', this.userInputManager);
+                layoutManager.removeActionButton("openWebsite", this.userInputManager);
                 coWebsiteManager.closeCoWebsite();
             } else {
                 const openWebsiteFunction = () => {
-                    coWebsiteManager.loadCoWebsite(newValue as string, this.MapUrlFile, allProps.get('openWebsiteAllowApi') as boolean | undefined, allProps.get('openWebsitePolicy') as string | undefined);
-                    layoutManager.removeActionButton('openWebsite', this.userInputManager);
+                    coWebsiteManager.loadCoWebsite(
+                        newValue as string,
+                        this.MapUrlFile,
+                        allProps.get("openWebsiteAllowApi") as boolean | undefined,
+                        allProps.get("openWebsitePolicy") as string | undefined
+                    );
+                    layoutManager.removeActionButton("openWebsite", this.userInputManager);
                 };
 
                 const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
                 if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
                     let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
                     if (message === undefined) {
-                        message = 'Press SPACE or touch here to open web site';
+                        message = "Press SPACE or touch here to open web site";
                     }
-                    layoutManager.addActionButton('openWebsite', message.toString(), () => {
-                        openWebsiteFunction();
-                    }, this.userInputManager);
+                    layoutManager.addActionButton(
+                        "openWebsite",
+                        message.toString(),
+                        () => {
+                            openWebsiteFunction();
+                        },
+                        this.userInputManager
+                    );
                 } else {
                     openWebsiteFunction();
                 }
             }
         });
-        this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => {
+        this.gameMap.onPropertyChange("jitsiRoom", (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
-                layoutManager.removeActionButton('jitsiRoom', this.userInputManager);
+                layoutManager.removeActionButton("jitsiRoom", this.userInputManager);
                 this.stopJitsi();
             } else {
                 const openJitsiRoomFunction = () => {
@@ -763,44 +822,52 @@ export class GameScene extends DirtyScene {
                     } else {
                         this.startJitsi(roomName, undefined);
                     }
-                    layoutManager.removeActionButton('jitsiRoom', this.userInputManager);
-                }
+                    layoutManager.removeActionButton("jitsiRoom", this.userInputManager);
+                };
 
                 const jitsiTriggerValue = allProps.get(TRIGGER_JITSI_PROPERTIES);
                 if (jitsiTriggerValue && jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
                     let message = allProps.get(JITSI_MESSAGE_PROPERTIES);
                     if (message === undefined) {
-                        message = 'Press SPACE or touch here to enter Jitsi Meet room';
+                        message = "Press SPACE or touch here to enter Jitsi Meet room";
                     }
-                    layoutManager.addActionButton('jitsiRoom', message.toString(), () => {
-                        openJitsiRoomFunction();
-                    }, this.userInputManager);
+                    layoutManager.addActionButton(
+                        "jitsiRoom",
+                        message.toString(),
+                        () => {
+                            openJitsiRoomFunction();
+                        },
+                        this.userInputManager
+                    );
                 } else {
                     openJitsiRoomFunction();
                 }
             }
         });
-        this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
-            if (newValue === undefined || newValue === false || newValue === '') {
+        this.gameMap.onPropertyChange("silent", (newValue, oldValue) => {
+            if (newValue === undefined || newValue === false || newValue === "") {
                 this.connection?.setSilent(false);
             } else {
                 this.connection?.setSilent(true);
             }
         });
-        this.gameMap.onPropertyChange('playAudio', (newValue, oldValue, allProps) => {
+        this.gameMap.onPropertyChange("playAudio", (newValue, oldValue, allProps) => {
             const volume = allProps.get(AUDIO_VOLUME_PROPERTY) as number | undefined;
             const loop = allProps.get(AUDIO_LOOP_PROPERTY) as boolean | undefined;
-            newValue === undefined ? audioManager.unloadAudio() : audioManager.playAudio(newValue, this.getMapDirUrl(), volume, loop);
+            newValue === undefined
+                ? audioManager.unloadAudio()
+                : audioManager.playAudio(newValue, this.getMapDirUrl(), volume, loop);
         });
         // TODO: This legacy property should be removed at some point
-        this.gameMap.onPropertyChange('playAudioLoop', (newValue, oldValue) => {
-            newValue === undefined ? audioManager.unloadAudio() : audioManager.playAudio(newValue, this.getMapDirUrl(), undefined, true);
+        this.gameMap.onPropertyChange("playAudioLoop", (newValue, oldValue) => {
+            newValue === undefined
+                ? audioManager.unloadAudio()
+                : audioManager.playAudio(newValue, this.getMapDirUrl(), undefined, true);
         });
 
-        this.gameMap.onPropertyChange('zone', (newValue, oldValue) => {
-            if (newValue === undefined || newValue === false || newValue === '') {
+        this.gameMap.onPropertyChange("zone", (newValue, oldValue) => {
+            if (newValue === undefined || newValue === false || newValue === "") {
                 iframeListener.sendLeaveEvent(oldValue as string);
-
             } else {
                 iframeListener.sendEnterEvent(newValue as string);
             }
@@ -809,160 +876,210 @@ export class GameScene extends DirtyScene {
 
     private listenToIframeEvents(): void {
         this.iframeSubscriptionList = [];
-        this.iframeSubscriptionList.push(iframeListener.openPopupStream.subscribe((openPopupEvent) => {
-
-            let objectLayerSquare: ITiledMapObject;
-            const targetObjectData = this.getObjectLayerData(openPopupEvent.targetObject);
-            if (targetObjectData !== undefined) {
-                objectLayerSquare = targetObjectData;
-            } else {
-                console.error("Error while opening a popup. Cannot find an object on the map with name '" + openPopupEvent.targetObject + "'. The first parameter of WA.openPopup() must be the name of a rectangle object in your map.");
-                return;
-            }
-            const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
-            let html = `<div id="container" hidden><div class="nes-container with-title is-centered">
+        this.iframeSubscriptionList.push(
+            iframeListener.openPopupStream.subscribe((openPopupEvent) => {
+                let objectLayerSquare: ITiledMapObject;
+                const targetObjectData = this.getObjectLayerData(openPopupEvent.targetObject);
+                if (targetObjectData !== undefined) {
+                    objectLayerSquare = targetObjectData;
+                } else {
+                    console.error(
+                        "Error while opening a popup. Cannot find an object on the map with name '" +
+                            openPopupEvent.targetObject +
+                            "'. The first parameter of WA.openPopup() must be the name of a rectangle object in your map."
+                    );
+                    return;
+                }
+                const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
+                let html = `<div id="container" hidden><div class="nes-container with-title is-centered">
 ${escapedMessage}
  </div> `;
-            const buttonContainer = `<div class="buttonContainer"</div>`;
-            html += buttonContainer;
-            let id = 0;
-            for (const button of openPopupEvent.buttons) {
-                html += `<button type="button" class="nes-btn is-${HtmlUtils.escapeHtml(button.className ?? '')}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(button.label)}</button>`;
-                id++;
-            }
-            html += '</div>';
-            const domElement = this.add.dom(objectLayerSquare.x,
-                objectLayerSquare.y).createFromHTML(html);
-
-            const container: HTMLDivElement = domElement.getChildByID("container") as HTMLDivElement;
-            container.style.width = objectLayerSquare.width + "px";
-            domElement.scale = 0;
-            domElement.setClassName('popUpElement');
-
-            setTimeout(() => {
-                (container).hidden = false;
-            }, 100);
-
-            id = 0;
-            for (const button of openPopupEvent.buttons) {
-                const button = HtmlUtils.getElementByIdOrFail<HTMLButtonElement>(`popup-${openPopupEvent.popupId}-${id}`);
-                const btnId = id;
-                button.onclick = () => {
-                    iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId);
-                    button.disabled = true;
+                const buttonContainer = `<div class="buttonContainer"</div>`;
+                html += buttonContainer;
+                let id = 0;
+                for (const button of openPopupEvent.buttons) {
+                    html += `<button type="button" class="nes-btn is-${HtmlUtils.escapeHtml(
+                        button.className ?? ""
+                    )}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(button.label)}</button>`;
+                    id++;
                 }
-                id++;
-            }
-            this.tweens.add({
-                targets: domElement,
-                scale: 1,
-                ease: "EaseOut",
-                duration: 400,
-            });
+                html += "</div>";
+                const domElement = this.add.dom(objectLayerSquare.x, objectLayerSquare.y).createFromHTML(html);
 
-            this.popUpElements.set(openPopupEvent.popupId, domElement);
-        }));
+                const container: HTMLDivElement = domElement.getChildByID("container") as HTMLDivElement;
+                container.style.width = objectLayerSquare.width + "px";
+                domElement.scale = 0;
+                domElement.setClassName("popUpElement");
 
-        this.iframeSubscriptionList.push(iframeListener.closePopupStream.subscribe((closePopupEvent) => {
-            const popUpElement = this.popUpElements.get(closePopupEvent.popupId);
-            if (popUpElement === undefined) {
-                console.error('Could not close popup with ID ', closePopupEvent.popupId, '. Maybe it has already been closed?');
-            }
+                setTimeout(() => {
+                    container.hidden = false;
+                }, 100);
 
-            this.tweens.add({
-                targets: popUpElement,
-                scale: 0,
-                ease: "EaseOut",
-                duration: 400,
-                onComplete: () => {
-                    popUpElement?.destroy();
-                    this.popUpElements.delete(closePopupEvent.popupId);
-                },
-            });
-        }));
+                id = 0;
+                for (const button of openPopupEvent.buttons) {
+                    const button = HtmlUtils.getElementByIdOrFail<HTMLButtonElement>(
+                        `popup-${openPopupEvent.popupId}-${id}`
+                    );
+                    const btnId = id;
+                    button.onclick = () => {
+                        iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId);
+                        button.disabled = true;
+                    };
+                    id++;
+                }
+                this.tweens.add({
+                    targets: domElement,
+                    scale: 1,
+                    ease: "EaseOut",
+                    duration: 400,
+                });
 
-        this.iframeSubscriptionList.push(iframeListener.disablePlayerControlStream.subscribe(() => {
-            this.userInputManager.disableControls();
-        }));
-
-        this.iframeSubscriptionList.push(iframeListener.playSoundStream.subscribe((playSoundEvent) => {
-            const url = new URL(playSoundEvent.url, this.MapUrlFile);
-            soundManager.playSound(this.load, this.sound, url.toString(), playSoundEvent.config);
-        }))
-
-        this.iframeSubscriptionList.push(iframeListener.stopSoundStream.subscribe((stopSoundEvent) => {
-            const url = new URL(stopSoundEvent.url, this.MapUrlFile);
-            soundManager.stopSound(this.sound, url.toString());
-        }))
-
-        this.iframeSubscriptionList.push(iframeListener.loadSoundStream.subscribe((loadSoundEvent) => {
-            const url = new URL(loadSoundEvent.url, this.MapUrlFile);
-            soundManager.loadSound(this.load, this.sound, url.toString());
-        }))
-
-        this.iframeSubscriptionList.push(iframeListener.enablePlayerControlStream.subscribe(() => {
-            this.userInputManager.restoreControls();
-        }));
-        this.iframeSubscriptionList.push(iframeListener.loadPageStream.subscribe((url: string) => {
-            this.loadNextGame(url).then(() => {
-                this.events.once(EVENT_TYPE.POST_UPDATE, () => {
-                    this.onMapExit(url);
-                })
+                this.popUpElements.set(openPopupEvent.popupId, domElement);
             })
-        }));
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.closePopupStream.subscribe((closePopupEvent) => {
+                const popUpElement = this.popUpElements.get(closePopupEvent.popupId);
+                if (popUpElement === undefined) {
+                    console.error(
+                        "Could not close popup with ID ",
+                        closePopupEvent.popupId,
+                        ". Maybe it has already been closed?"
+                    );
+                }
+
+                this.tweens.add({
+                    targets: popUpElement,
+                    scale: 0,
+                    ease: "EaseOut",
+                    duration: 400,
+                    onComplete: () => {
+                        popUpElement?.destroy();
+                        this.popUpElements.delete(closePopupEvent.popupId);
+                    },
+                });
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.disablePlayerControlStream.subscribe(() => {
+                this.userInputManager.disableControls();
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.playSoundStream.subscribe((playSoundEvent) => {
+                const url = new URL(playSoundEvent.url, this.MapUrlFile);
+                soundManager.playSound(this.load, this.sound, url.toString(), playSoundEvent.config);
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.stopSoundStream.subscribe((stopSoundEvent) => {
+                const url = new URL(stopSoundEvent.url, this.MapUrlFile);
+                soundManager.stopSound(this.sound, url.toString());
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.loadSoundStream.subscribe((loadSoundEvent) => {
+                const url = new URL(loadSoundEvent.url, this.MapUrlFile);
+                soundManager.loadSound(this.load, this.sound, url.toString());
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.enablePlayerControlStream.subscribe(() => {
+                this.userInputManager.restoreControls();
+            })
+        );
+        this.iframeSubscriptionList.push(
+            iframeListener.loadPageStream.subscribe((url: string) => {
+                this.loadNextGame(url).then(() => {
+                    this.events.once(EVENT_TYPE.POST_UPDATE, () => {
+                        this.onMapExit(url);
+                    });
+                });
+            })
+        );
         let scriptedBubbleSprite: Sprite;
-        this.iframeSubscriptionList.push(iframeListener.displayBubbleStream.subscribe(() => {
-            scriptedBubbleSprite = new Sprite(this, this.CurrentPlayer.x + 25, this.CurrentPlayer.y, 'circleSprite-white');
-            scriptedBubbleSprite.setDisplayOrigin(48, 48);
-            this.add.existing(scriptedBubbleSprite);
-        }));
-
-        this.iframeSubscriptionList.push(iframeListener.removeBubbleStream.subscribe(() => {
-            scriptedBubbleSprite.destroy();
-        }));
-
-        this.iframeSubscriptionList.push(iframeListener.showLayerStream.subscribe((layerEvent)=>{
-            this.setLayerVisibility(layerEvent.name, true);
-        }));
-
-        this.iframeSubscriptionList.push(iframeListener.hideLayerStream.subscribe((layerEvent)=>{
-            this.setLayerVisibility(layerEvent.name, false);
-        }));
-
-        this.iframeSubscriptionList.push(iframeListener.setPropertyStream.subscribe((setProperty) => {
-            this.setPropertyLayer(setProperty.layerName, setProperty.propertyName, setProperty.propertyValue);
-        }));
-
-        this.iframeSubscriptionList.push(iframeListener.dataLayerChangeStream.subscribe(() => {
-            iframeListener.sendDataLayerEvent({data: this.gameMap.getMap()});
-        }))
-
-        this.iframeSubscriptionList.push(iframeListener.gameStateStream.subscribe(() => {
-            iframeListener.sendGameStateEvent({
-                mapUrl: this.MapUrlFile,
-                startLayerName: this.startLayerName,
-                uuid: localUserStore.getLocalUser()?.uuid,
-                nickname: localUserStore.getName(),
-                roomId: this.RoomId,
-                tags: this.connection ? this.connection.getAllTags() : []
+        this.iframeSubscriptionList.push(
+            iframeListener.displayBubbleStream.subscribe(() => {
+                scriptedBubbleSprite = new Sprite(
+                    this,
+                    this.CurrentPlayer.x + 25,
+                    this.CurrentPlayer.y,
+                    "circleSprite-white"
+                );
+                scriptedBubbleSprite.setDisplayOrigin(48, 48);
+                this.add.existing(scriptedBubbleSprite);
             })
-        }));
+        );
 
+        this.iframeSubscriptionList.push(
+            iframeListener.removeBubbleStream.subscribe(() => {
+                scriptedBubbleSprite.destroy();
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.showLayerStream.subscribe((layerEvent) => {
+                this.setLayerVisibility(layerEvent.name, true);
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.hideLayerStream.subscribe((layerEvent) => {
+                this.setLayerVisibility(layerEvent.name, false);
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.setPropertyStream.subscribe((setProperty) => {
+                this.setPropertyLayer(setProperty.layerName, setProperty.propertyName, setProperty.propertyValue);
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.dataLayerChangeStream.subscribe(() => {
+                iframeListener.sendDataLayerEvent({ data: this.gameMap.getMap() });
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.gameStateStream.subscribe(() => {
+                iframeListener.sendGameStateEvent({
+                    mapUrl: this.MapUrlFile,
+                    startLayerName: this.startLayerName,
+                    uuid: localUserStore.getLocalUser()?.uuid,
+                    nickname: localUserStore.getName(),
+                    roomId: this.RoomId,
+                    tags: this.connection ? this.connection.getAllTags() : [],
+                });
+            })
+        );
     }
 
-    private setPropertyLayer(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {
+    private setPropertyLayer(
+        layerName: string,
+        propertyName: string,
+        propertyValue: string | number | boolean | undefined
+    ): void {
         const layer = this.gameMap.findLayer(layerName);
-       if (layer === undefined) {
+        if (layer === undefined) {
             console.warn('Could not find layer "' + layerName + '" when calling setProperty');
             return;
         }
-       const property = (layer.properties as ITiledMapLayerProperty[])?.find((property) => property.name === propertyName);
-       if (property === undefined) {
-           layer.properties = [];
-           layer.properties.push({name : propertyName, type : typeof propertyValue, value : propertyValue});
-           return;
-       }
-       property.value = propertyValue;
+        const property = (layer.properties as ITiledMapLayerProperty[])?.find(
+            (property) => property.name === propertyName
+        );
+        if (property === undefined) {
+            layer.properties = [];
+            layer.properties.push({ name: propertyName, type: typeof propertyValue, value: propertyValue });
+            return;
+        }
+        property.value = propertyValue;
     }
 
     private setLayerVisibility(layerName: string, visible: boolean): void {
@@ -975,19 +1092,18 @@ ${escapedMessage}
         this.dirty = true;
     }
 
-
     private getMapDirUrl(): string {
-        return this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/'));
+        return this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf("/"));
     }
 
     private onMapExit(exitKey: string) {
         if (this.mapTransitioning) return;
         this.mapTransitioning = true;
         const { roomId, hash } = Room.getIdFromIdentifier(exitKey, this.MapUrlFile, this.instance);
-        if (!roomId) throw new Error('Could not find the room from its exit key: ' + exitKey);
+        if (!roomId) throw new Error("Could not find the room from its exit key: " + exitKey);
         urlManager.pushStartLayerNameToUrl(hash);
-        const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene
-        menuScene.reset()
+        const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene;
+        menuScene.reset();
         if (roomId !== this.scene.key) {
             if (this.scene.get(roomId) === null) {
                 console.error("next room not loaded", exitKey);
@@ -1002,7 +1118,7 @@ ${escapedMessage}
             this.initPositionFromLayerName(hash || defaultStartLayerName);
             this.CurrentPlayer.x = this.startX;
             this.CurrentPlayer.y = this.startY;
-            setTimeout(() => this.mapTransitioning = false, 500);
+            setTimeout(() => (this.mapTransitioning = false), 500);
         }
     }
 
@@ -1065,7 +1181,9 @@ ${escapedMessage}
         }
         // Still no start position? Something is wrong with the map, we need a "start" layer.
         if (this.startX === undefined) {
-            console.warn('This map is missing a layer named "start" that contains the available default start positions.');
+            console.warn(
+                'This map is missing a layer named "start" that contains the available default start positions.'
+            );
             // Let's start in the middle of the map
             this.startX = this.mapFile.width * 16;
             this.startY = this.mapFile.height * 16;
@@ -1074,13 +1192,16 @@ ${escapedMessage}
 
     private initPositionFromLayerName(layerName: string) {
         for (const layer of this.gameMap.flatLayers) {
-            if ((layerName === layer.name || layer.name.endsWith('/' + layerName)) && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) {
+            if (
+                (layerName === layer.name || layer.name.endsWith("/" + layerName)) &&
+                layer.type === "tilelayer" &&
+                (layerName === defaultStartLayerName || this.isStartLayer(layer))
+            ) {
                 const startPosition = this.startUser(layer);
                 this.startX = startPosition.x + this.mapFile.tilewidth / 2;
                 this.startY = startPosition.y + this.mapFile.tileheight / 2;
             }
         }
-
     }
 
     private getExitUrl(layer: ITiledMapLayer): string | undefined {
@@ -1099,7 +1220,9 @@ ${escapedMessage}
     }
 
     private getScriptUrls(map: ITiledMap): string[] {
-        return (this.getProperties(map, "script") as string[]).map((script) => (new URL(script, this.MapUrlFile)).toString());
+        return (this.getProperties(map, "script") as string[]).map((script) =>
+            new URL(script, this.MapUrlFile).toString()
+        );
     }
 
     private getProperty(layer: ITiledMapLayer | ITiledMap, name: string): string | boolean | number | undefined {
@@ -1107,7 +1230,9 @@ ${escapedMessage}
         if (!properties) {
             return undefined;
         }
-        const obj = properties.find((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase());
+        const obj = properties.find(
+            (property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()
+        );
         if (obj === undefined) {
             return undefined;
         }
@@ -1119,20 +1244,22 @@ ${escapedMessage}
         if (!properties) {
             return [];
         }
-        return properties.filter((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()).map((property) => property.value);
+        return properties
+            .filter((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase())
+            .map((property) => property.value);
     }
 
     //todo: push that into the gameManager
-    private loadNextGame(exitSceneIdentifier: string) : Promise<void>{
+    private loadNextGame(exitSceneIdentifier: string): Promise<void> {
         const { roomId, hash } = Room.getIdFromIdentifier(exitSceneIdentifier, this.MapUrlFile, this.instance);
         const room = new Room(roomId);
-        return gameManager.loadMap(room, this.scene).catch(() => { });
+        return gameManager.loadMap(room, this.scene).catch(() => {});
     }
 
     private startUser(layer: ITiledMapTileLayer): PositionInterface {
         const tiles = layer.data;
-        if (typeof (tiles) === 'string') {
-            throw new Error('The content of a JSON map must be filled as a JSON array, not as a string');
+        if (typeof tiles === "string") {
+            throw new Error("The content of a JSON map must be filled as a JSON array, not as a string");
         }
         const possibleStartPositions: PositionInterface[] = [];
         tiles.forEach((objectKey: number, key: number) => {
@@ -1149,7 +1276,7 @@ ${escapedMessage}
             console.warn('The start layer "' + layer.name + '" for this map is empty.');
             return {
                 x: 0,
-                y: 0
+                y: 0,
             };
         }
         // Choose one of the available start positions at random amongst the list of available start positions.
@@ -1169,13 +1296,13 @@ ${escapedMessage}
             this.physics.add.collider(this.CurrentPlayer, phaserLayer, (object1: GameObject, object2: GameObject) => {
                 //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
             });
-            phaserLayer.setCollisionByProperty({collides: true});
+            phaserLayer.setCollisionByProperty({ collides: true });
             if (DEBUG_MODE) {
                 //debug code to see the collision hitbox of the object in the top layer
                 phaserLayer.renderDebug(this.add.graphics(), {
                     tileColor: null, //non-colliding tiles
                     collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles,
-                    faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges
+                    faceColor: new Phaser.Display.Color(40, 39, 37, 255), // Colliding face edges
                 });
             }
             //});
@@ -1198,15 +1325,17 @@ ${escapedMessage}
                 this.companion,
                 this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
             );
-            this.CurrentPlayer.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
+            this.CurrentPlayer.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
                 if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
                     return; //we don't want the menu to open when pinching on a touch screen.
                 }
-                this.emoteManager.getMenuImages().then((emoteMenuElements) => this.CurrentPlayer.openOrCloseEmoteMenu(emoteMenuElements))
-            })
+                this.emoteManager
+                    .getMenuImages()
+                    .then((emoteMenuElements) => this.CurrentPlayer.openOrCloseEmoteMenu(emoteMenuElements));
+            });
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);
-            })
+            });
         } catch (err) {
             if (err instanceof TextureError) {
                 gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());
@@ -1352,7 +1481,7 @@ ${escapedMessage}
     private initUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
         this.pendingEvents.enqueue({
             type: "InitUserPositionEvent",
-            event: usersPosition
+            event: usersPosition,
         });
     }
 
@@ -1377,7 +1506,7 @@ ${escapedMessage}
     public addPlayer(addPlayerData: AddPlayerInterface): void {
         this.pendingEvents.enqueue({
             type: "AddPlayerEvent",
-            event: addPlayerData
+            event: addPlayerData,
         });
     }
 
@@ -1386,7 +1515,7 @@ ${escapedMessage}
         if (this.MapPlayersByKey.has(addPlayerData.userId)) {
             this.updatePlayerPosition({
                 userId: addPlayerData.userId,
-                position: addPlayerData.position
+                position: addPlayerData.position,
             });
             return;
         }
@@ -1416,14 +1545,14 @@ ${escapedMessage}
     public removePlayer(userId: number) {
         this.pendingEvents.enqueue({
             type: "RemovePlayerEvent",
-            userId
+            userId,
         });
     }
 
     private doRemovePlayer(userId: number) {
         const player = this.MapPlayersByKey.get(userId);
         if (player === undefined) {
-            console.error('Cannot find user with id ', userId);
+            console.error("Cannot find user with id ", userId);
         } else {
             player.destroy();
 
@@ -1440,7 +1569,7 @@ ${escapedMessage}
     public updatePlayerPosition(message: MessageUserMovedInterface): void {
         this.pendingEvents.enqueue({
             type: "UserMovedEvent",
-            event: message
+            event: message,
         });
     }
 
@@ -1454,14 +1583,19 @@ ${escapedMessage}
 
         // We do not update the player position directly (because it is sent only every 200ms).
         // Instead we use the PlayersPositionInterpolator that will do a smooth animation over the next 200ms.
-        const playerMovement = new PlayerMovement({ x: player.x, y: player.y }, this.currentTick, message.position, this.currentTick + POSITION_DELAY);
+        const playerMovement = new PlayerMovement(
+            { x: player.x, y: player.y },
+            this.currentTick,
+            message.position,
+            this.currentTick + POSITION_DELAY
+        );
         this.playersPositionInterpolator.updatePlayerPosition(player.userId, playerMovement);
     }
 
     public shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
         this.pendingEvents.enqueue({
             type: "GroupCreatedUpdatedEvent",
-            event: groupPositionMessage
+            event: groupPositionMessage,
         });
     }
 
@@ -1475,7 +1609,7 @@ ${escapedMessage}
             this,
             Math.round(groupPositionMessage.position.x),
             Math.round(groupPositionMessage.position.y),
-            groupPositionMessage.groupSize === MAX_PER_GROUP ? 'circleSprite-red' : 'circleSprite-white'
+            groupPositionMessage.groupSize === MAX_PER_GROUP ? "circleSprite-red" : "circleSprite-white"
         );
         sprite.setDisplayOrigin(48, 48);
         this.add.existing(sprite);
@@ -1486,7 +1620,7 @@ ${escapedMessage}
     deleteGroup(groupId: number): void {
         this.pendingEvents.enqueue({
             type: "DeleteGroupEvent",
-            groupId
+            groupId,
         });
     }
 
@@ -1499,8 +1633,6 @@ ${escapedMessage}
         this.groups.delete(groupId);
     }
 
-
-
     /**
      * Sends to the server an event emitted by one of the ActionableItems.
      */
@@ -1523,7 +1655,7 @@ ${escapedMessage}
     }
     private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
         for (const layer of this.mapFile.layers) {
-            if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
+            if (layer.type === "objectgroup" && layer.name === "floorLayer") {
                 for (const object of layer.objects) {
                     if (object.name === objectName) {
                         return object;
@@ -1532,7 +1664,6 @@ ${escapedMessage}
             }
         }
         return undefined;
-
     }
     private reposition(): void {
         this.openChatIcon.setY(this.game.renderer.height - 2);
@@ -1549,16 +1680,22 @@ ${escapedMessage}
         const xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
         const yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
 
-        const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>('#game canvas');
+        const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>("#game canvas");
         // Let's put this in Game coordinates by applying the zoom level:
 
-        this.cameras.main.setFollowOffset((xCenter - game.offsetWidth / 2) * window.devicePixelRatio / this.scale.zoom, (yCenter - game.offsetHeight / 2) * window.devicePixelRatio / this.scale.zoom);
+        this.cameras.main.setFollowOffset(
+            ((xCenter - game.offsetWidth / 2) * window.devicePixelRatio) / this.scale.zoom,
+            ((yCenter - game.offsetHeight / 2) * window.devicePixelRatio) / this.scale.zoom
+        );
     }
 
     public startJitsi(roomName: string, jwt?: string): void {
         const allProps = this.gameMap.getCurrentProperties();
-        const jitsiConfig = this.safeParseJSONstring(allProps.get("jitsiConfig") as string | undefined, 'jitsiConfig');
-        const jitsiInterfaceConfig = this.safeParseJSONstring(allProps.get("jitsiInterfaceConfig") as string | undefined, 'jitsiInterfaceConfig');
+        const jitsiConfig = this.safeParseJSONstring(allProps.get("jitsiConfig") as string | undefined, "jitsiConfig");
+        const jitsiInterfaceConfig = this.safeParseJSONstring(
+            allProps.get("jitsiInterfaceConfig") as string | undefined,
+            "jitsiInterfaceConfig"
+        );
         const jitsiUrl = allProps.get("jitsiUrl") as string | undefined;
 
         jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl);
@@ -1566,7 +1703,7 @@ ${escapedMessage}
         mediaManager.hideGameOverlay();
 
         //permit to stop jitsi when user close iframe
-        mediaManager.addTriggerCloseJitsiFrameButton('close-jisi', () => {
+        mediaManager.addTriggerCloseJitsiFrameButton("close-jisi", () => {
             this.stopJitsi();
         });
     }
@@ -1576,7 +1713,7 @@ ${escapedMessage}
         jitsiFactory.stop();
         mediaManager.showGameOverlay();
 
-        mediaManager.removeTriggerCloseJitsiFrameButton('close-jisi');
+        mediaManager.removeTriggerCloseJitsiFrameButton("close-jisi");
     }
 
     //todo: put this into an 'orchestrator' scene (EntryScene?)
@@ -1584,9 +1721,9 @@ ${escapedMessage}
         this.cleanupClosingScene();
         this.userInputManager.disableControls();
         this.scene.start(ErrorSceneName, {
-            title: 'Banned',
-            subTitle: 'You were banned from WorkAdventure',
-            message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com'
+            title: "Banned",
+            subTitle: "You were banned from WorkAdventure",
+            message: "If you want more information, you may contact us at: workadventure@thecodingmachine.com",
         });
     }
 
@@ -1599,15 +1736,16 @@ ${escapedMessage}
         //FIX ME to use status code
         if (message == undefined) {
             this.scene.start(ErrorSceneName, {
-                title: 'Connection rejected',
-                subTitle: 'The world you are trying to join is full. Try again later.',
-                message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com'
+                title: "Connection rejected",
+                subTitle: "The world you are trying to join is full. Try again later.",
+                message: "If you want more information, you may contact us at: workadventure@thecodingmachine.com",
             });
         } else {
             this.scene.start(ErrorSceneName, {
-                title: 'Connection rejected',
-                subTitle: 'You cannot join the World. Try again later. \n\r \n\r Error: ' + message + '.',
-                message: 'If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com'
+                title: "Connection rejected",
+                subTitle: "You cannot join the World. Try again later. \n\r \n\r Error: " + message + ".",
+                message:
+                    "If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com",
             });
         }
     }
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 715cb67d..c65dabbb 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -1,18 +1,19 @@
-import {EnableCameraSceneName} from "./EnableCameraScene";
+import { EnableCameraSceneName } from "./EnableCameraScene";
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
+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 type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
-import {AbstractCharacterScene} from "./AbstractCharacterScene";
-import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import { gameManager } from "../Game/GameManager";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import { addLoader } from "../Components/Loader";
+import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
+import { AbstractCharacterScene } from "./AbstractCharacterScene";
+import { areCharacterLayersValid } from "../../Connexion/LocalUser";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
-import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
-import {waScaleManager} from "../Services/WaScaleManager";
-import {isMobile} from "../../Enum/EnvironmentVariable";
-import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
+import { activeRowStore, customCharacterSceneVisibleStore } from "../../Stores/CustomCharacterStore";
+import { waScaleManager } from "../Services/WaScaleManager";
+import { isMobile } from "../../Enum/EnvironmentVariable";
+import { CustomizedCharacter } from "../Entity/CustomizedCharacter";
+import { get } from "svelte/store";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -21,7 +22,6 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private selectedLayers: number[] = [0];
     private containersRow: CustomizedCharacter[][] = [];
-    public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
@@ -31,16 +31,19 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     constructor() {
         super({
-            key: CustomizeSceneName
+            key: CustomizeSceneName,
         });
     }
 
     preload() {
-
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
-                if(bodyResourceDescription.level == undefined || bodyResourceDescription.level < 0 || bodyResourceDescription.level > 5 ){
-                    throw 'Texture level is null';
+                if (
+                    bodyResourceDescription.level == undefined ||
+                    bodyResourceDescription.level < 0 ||
+                    bodyResourceDescription.level > 5
+                ) {
+                    throw "Texture level is null";
                 }
                 this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
             });
@@ -50,14 +53,13 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.layers = loadAllLayers(this.load);
         this.lazyloadingAttempt = false;
 
-
         //this function must stay at the end of preload function
         addLoader(this);
     }
 
     create() {
         customCharacterSceneVisibleStore.set(true);
-        this.events.addListener('wake', () => {
+        this.events.addListener("wake", () => {
             waScaleManager.saveZoom();
             waScaleManager.zoomModifier = isMobile() ? 3 : 1;
             customCharacterSceneVisibleStore.set(true);
@@ -66,8 +68,13 @@ export class CustomizeScene extends AbstractCharacterScene {
         waScaleManager.saveZoom();
         waScaleManager.zoomModifier = isMobile() ? 3 : 1;
 
-        this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
-        this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
+        this.Rectangle = this.add.rectangle(
+            this.cameras.main.worldView.x + this.cameras.main.width / 2,
+            this.cameras.main.worldView.y + this.cameras.main.height / 3,
+            32,
+            33
+        );
+        this.Rectangle.setStrokeStyle(2, 0xffffff);
         this.add.existing(this.Rectangle);
 
         this.createCustomizeLayer(0, 0, 0);
@@ -78,24 +85,24 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.createCustomizeLayer(0, 0, 5);
 
         this.moveLayers();
-        this.input.keyboard.on('keyup-ENTER', () => {
+        this.input.keyboard.on("keyup-ENTER", () => {
             this.nextSceneToCamera();
         });
-        this.input.keyboard.on('keyup-BACKSPACE', () => {
+        this.input.keyboard.on("keyup-BACKSPACE", () => {
             this.backToPreviousScene();
         });
 
         // Note: the key bindings are not directly put on the moveCursorVertically or moveCursorHorizontally methods
         // because if 2 such events are fired close to one another, it makes the whole application crawl to a halt (for a reason I cannot
         // explain, the list of sprites managed by the update list become immense
-        this.input.keyboard.on('keyup-RIGHT', () => this.moveHorizontally = 1);
-        this.input.keyboard.on('keyup-LEFT', () => this.moveHorizontally = -1);
-        this.input.keyboard.on('keyup-DOWN', () => this.moveVertically = 1);
-        this.input.keyboard.on('keyup-UP', () => this.moveVertically = -1);
+        this.input.keyboard.on("keyup-RIGHT", () => (this.moveHorizontally = 1));
+        this.input.keyboard.on("keyup-LEFT", () => (this.moveHorizontally = -1));
+        this.input.keyboard.on("keyup-DOWN", () => (this.moveVertically = 1));
+        this.input.keyboard.on("keyup-UP", () => (this.moveVertically = -1));
 
         const customCursorPosition = localUserStore.getCustomCursorPosition();
         if (customCursorPosition) {
-            this.activeRow = customCursorPosition.activeRow;
+            activeRowStore.set(customCursorPosition.activeRow);
             this.selectedLayers = customCursorPosition.selectedLayers;
             this.moveLayers();
             this.updateSelectedLayer();
@@ -113,31 +120,30 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     private doMoveCursorHorizontally(index: number): void {
-        this.selectedLayers[this.activeRow] += index;
-        if (this.selectedLayers[this.activeRow] < 0) {
-            this.selectedLayers[this.activeRow] = 0
-        } else if(this.selectedLayers[this.activeRow] > this.layers[this.activeRow].length - 1) {
-            this.selectedLayers[this.activeRow] = this.layers[this.activeRow].length - 1
+        this.selectedLayers[get(activeRowStore)] += index;
+        if (this.selectedLayers[get(activeRowStore)] < 0) {
+            this.selectedLayers[get(activeRowStore)] = 0;
+        } else if (this.selectedLayers[get(activeRowStore)] > this.layers[get(activeRowStore)].length - 1) {
+            this.selectedLayers[get(activeRowStore)] = this.layers[get(activeRowStore)].length - 1;
         }
         this.moveLayers();
         this.updateSelectedLayer();
         this.saveInLocalStorage();
     }
 
-    private doMoveCursorVertically(index:number): void {
-
-        this.activeRow += index;
-        if (this.activeRow < 0) {
-            this.activeRow = 0
-        } else if (this.activeRow > this.layers.length - 1) {
-            this.activeRow = this.layers.length - 1
+    private doMoveCursorVertically(index: number): void {
+        activeRowStore.set(get(activeRowStore) + index);
+        if (get(activeRowStore) < 0) {
+            activeRowStore.set(0);
+        } else if (get(activeRowStore) > this.layers.length - 1) {
+            activeRowStore.set(this.layers.length - 1);
         }
         this.moveLayers();
         this.saveInLocalStorage();
     }
 
     private saveInLocalStorage() {
-        localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
+        localUserStore.setCustomCursorPosition(get(activeRowStore), this.selectedLayers);
     }
 
     /**
@@ -173,7 +179,7 @@ export class CustomizeScene extends AbstractCharacterScene {
      * @param selectedItem, The number of the item select (0 for black body...)
      */
     private generateCharacter(x: number, y: number, layerNumber: number, selectedItem: number) {
-        return new CustomizedCharacter(this, x, y, this.getContainerChildren(layerNumber,selectedItem));
+        return new CustomizedCharacter(this, x, y, this.getContainerChildren(layerNumber, selectedItem));
     }
 
     private getContainerChildren(layerNumber: number, selectedItem: number): Array<string> {
@@ -188,7 +194,7 @@ export class CustomizeScene extends AbstractCharacterScene {
                 }
                 children.push(this.layers[j][layer].name);
             }
-         }
+        }
         return children;
     }
 
@@ -202,17 +208,16 @@ export class CustomizeScene extends AbstractCharacterScene {
         const screenHeight = this.game.renderer.height;
         for (let i = 0; i < this.containersRow.length; i++) {
             for (let j = 0; j < this.containersRow[i].length; j++) {
-                    let selectedX = this.selectedLayers[i];
-                    if (selectedX === undefined) {
-                        selectedX = 0;
-                    }
-                    this.containersRow[i][j].x = screenCenterX + (j - selectedX) * 40;
-                    this.containersRow[i][j].y = screenCenterY + (i - this.activeRow) * 40;
-                    const alpha1 = Math.abs(selectedX - j)*47*2/screenWidth;
-                    const alpha2 = Math.abs(this.activeRow - i)*49*2/screenHeight;
-                    this.containersRow[i][j].setAlpha((1 -alpha1)*(1 - alpha2));
+                let selectedX = this.selectedLayers[i];
+                if (selectedX === undefined) {
+                    selectedX = 0;
+                }
+                this.containersRow[i][j].x = screenCenterX + (j - selectedX) * 40;
+                this.containersRow[i][j].y = screenCenterY + (i - get(activeRowStore)) * 40;
+                const alpha1 = (Math.abs(selectedX - j) * 47 * 2) / screenWidth;
+                const alpha2 = (Math.abs(get(activeRowStore) - i) * 49 * 2) / screenHeight;
+                this.containersRow[i][j].setAlpha((1 - alpha1) * (1 - alpha2));
             }
-
         }
     }
 
@@ -228,8 +233,8 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     private updateSelectedLayer() {
-        for(let i = 0; i < this.containersRow.length; i++){
-            for(let j = 0; j < this.containersRow[i].length; j++){
+        for (let i = 0; i < this.containersRow.length; i++) {
+            for (let j = 0; j < this.containersRow[i].length; j++) {
                 const children = this.getContainerChildren(i, j);
                 this.containersRow[i][j].updateSprites(children);
             }
@@ -237,8 +242,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     update(time: number, delta: number): void {
-
-        if(this.lazyloadingAttempt){
+        if (this.lazyloadingAttempt) {
             this.moveLayers();
             this.lazyloadingAttempt = false;
         }
@@ -253,38 +257,35 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
     }
 
-
-
-
-     public onResize(): void {
+    public onResize(): void {
         this.moveLayers();
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
-     }
-
-    public nextSceneToCamera(){
-        const layers: string[] = [];
-            let i = 0;
-            for (const layerItem of this.selectedLayers) {
-                if (layerItem !== undefined) {
-                    layers.push(this.layers[i][layerItem].name);
-                }
-                i++;
-            }
-            if (!areCharacterLayersValid(layers)) {
-                return;
-            }
-
-            gameManager.setCharacterLayers(layers);
-            this.scene.sleep(CustomizeSceneName);
-            waScaleManager.restoreZoom();
-            this.events.removeListener('wake');
-            gameManager.tryResumingGame(this, EnableCameraSceneName);
-            customCharacterSceneVisibleStore.set(false);
     }
 
-    public backToPreviousScene(){
+    public nextSceneToCamera() {
+        const layers: string[] = [];
+        let i = 0;
+        for (const layerItem of this.selectedLayers) {
+            if (layerItem !== undefined) {
+                layers.push(this.layers[i][layerItem].name);
+            }
+            i++;
+        }
+        if (!areCharacterLayersValid(layers)) {
+            return;
+        }
+
+        gameManager.setCharacterLayers(layers);
+        this.scene.sleep(CustomizeSceneName);
+        waScaleManager.restoreZoom();
+        this.events.removeListener("wake");
+        gameManager.tryResumingGame(this, EnableCameraSceneName);
+        customCharacterSceneVisibleStore.set(false);
+    }
+
+    public backToPreviousScene() {
         this.scene.sleep(CustomizeSceneName);
         waScaleManager.restoreZoom();
         this.scene.run(SelectCharacterSceneName);
diff --git a/front/src/Stores/CustomCharacterStore.ts b/front/src/Stores/CustomCharacterStore.ts
index 4bef7768..2c7d75e8 100644
--- a/front/src/Stores/CustomCharacterStore.ts
+++ b/front/src/Stores/CustomCharacterStore.ts
@@ -1,3 +1,5 @@
 import { derived, writable, Writable } from "svelte/store";
 
-export const customCharacterSceneVisibleStore = writable(false);
\ No newline at end of file
+export const customCharacterSceneVisibleStore = writable(false);
+
+export const activeRowStore = writable(0);
diff --git a/front/webpack.config.ts b/front/webpack.config.ts
index 3bfc0a48..b6efb389 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -1,35 +1,37 @@
-import type {Configuration} from "webpack";
+import type { Configuration } from "webpack";
 import type WebpackDevServer from "webpack-dev-server";
-import path from 'path';
-import webpack from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import sveltePreprocess from 'svelte-preprocess';
+import path from "path";
+import webpack from "webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import sveltePreprocess from "svelte-preprocess";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
-import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
-import {DISPLAY_TERMS_OF_USE} from "./src/Enum/EnvironmentVariable";
+import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
+import { DISPLAY_TERMS_OF_USE } from "./src/Enum/EnvironmentVariable";
 
-const mode = process.env.NODE_ENV ?? 'development';
-const isProduction = mode === 'production';
+const mode = process.env.NODE_ENV ?? "development";
+const buildNpmTypingsForApi = !!process.env.BUILD_TYPINGS;
+const isProduction = mode === "production";
 const isDevelopment = !isProduction;
 
+const entries: { [key: string]: string } = {};
+if (!buildNpmTypingsForApi) {
+    entries.main = "./src/index.ts";
+}
+entries.iframe_api = "./src/iframe_api.ts";
+
 module.exports = {
-    entry: {
-        'main': './src/index.ts',
-        'iframe_api': './src/iframe_api.ts'
-    },
+    entry: entries,
     mode: mode,
-    devtool: isDevelopment ? 'inline-source-map' : 'source-map',
+    devtool: isDevelopment ? "inline-source-map" : "source-map",
     devServer: {
-        contentBase: './dist',
-        host: '0.0.0.0',
+        contentBase: "./dist",
+        host: "0.0.0.0",
         sockPort: 80,
         disableHostCheck: true,
         historyApiFallback: {
-            rewrites: [
-                { from: /^_\/.*$/, to: '/index.html' }
-            ],
-            disableDotRule: true
+            rewrites: [{ from: /^_\/.*$/, to: "/index.html" }],
+            disableDotRule: true,
         },
     },
     module: {
@@ -38,22 +40,28 @@ module.exports = {
                 test: /\.tsx?$/,
                 //use: 'ts-loader',
                 exclude: /node_modules/,
-                loader: 'ts-loader',
+                loader: "ts-loader",
                 options: {
-                    transpileOnly: true,
+                    transpileOnly: !buildNpmTypingsForApi,
+                    compilerOptions: {
+                        declaration: buildNpmTypingsForApi,
+                    },
                 },
             },
             {
                 test: /\.scss$/,
                 exclude: /node_modules/,
                 use: [
-                    MiniCssExtractPlugin.loader, {
-                        loader: 'css-loader',
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: "css-loader",
                         options: {
                             //url: false,
-                            sourceMap: true
-                        }
-                    }, 'sass-loader'],
+                            sourceMap: true,
+                        },
+                    },
+                    "sass-loader",
+                ],
             },
             {
                 test: /\.css$/,
@@ -61,23 +69,23 @@ module.exports = {
                 use: [
                     MiniCssExtractPlugin.loader,
                     {
-                        loader: 'css-loader',
+                        loader: "css-loader",
                         options: {
                             //url: false,
-                            sourceMap: true
-                        }
-                    }
-                ]
+                            sourceMap: true,
+                        },
+                    },
+                ],
             },
             {
                 test: /\.(html|svelte)$/,
                 exclude: /node_modules/,
                 use: {
-                    loader: 'svelte-loader',
+                    loader: "svelte-loader",
                     options: {
                         compilerOptions: {
                             // Dev mode must be enabled for HMR to work!
-                            dev: isDevelopment
+                            dev: isDevelopment,
                         },
                         emitCss: isProduction,
                         hotReload: isDevelopment,
@@ -90,18 +98,27 @@ module.exports = {
                             scss: true,
                             sass: true,
                         }),
-                        onwarn: function (warning: { code: string }, handleWarning: (warning: { code: string }) => void) {
+                        onwarn: function (
+                            warning: { code: string },
+                            handleWarning: (warning: { code: string }) => void
+                        ) {
                             // See https://github.com/sveltejs/svelte/issues/4946#issuecomment-662168782
 
-                            if (warning.code === 'a11y-no-onchange') { return }
-                            if (warning.code === 'a11y-autofocus') { return }
-                            if (warning.code === 'a11y-media-has-caption') { return }
+                            if (warning.code === "a11y-no-onchange") {
+                                return;
+                            }
+                            if (warning.code === "a11y-autofocus") {
+                                return;
+                            }
+                            if (warning.code === "a11y-media-has-caption") {
+                                return;
+                            }
 
                             // process as usual
                             handleWarning(warning);
-                        }
-                    }
-                }
+                        },
+                    },
+                },
             },
 
             // Required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
@@ -109,86 +126,82 @@ module.exports = {
             {
                 test: /node_modules\/svelte\/.*\.mjs$/,
                 resolve: {
-                    fullySpecified: false
-                }
+                    fullySpecified: false,
+                },
             },
             {
                 test: /\.(eot|svg|png|gif|jpg)$/,
                 exclude: /node_modules/,
-                type: 'asset'
+                type: "asset",
             },
             {
                 test: /\.(woff(2)?|ttf)$/,
-                type: 'asset',
+                type: "asset",
                 generator: {
-                    filename: 'fonts/[name][ext]'
-                }
-
-            }
+                    filename: "fonts/[name][ext]",
+                },
+            },
         ],
     },
     resolve: {
         alias: {
-            svelte: path.resolve('node_modules', 'svelte')
+            svelte: path.resolve("node_modules", "svelte"),
         },
-        extensions: [ '.tsx', '.ts', '.js', '.svelte' ],
-        mainFields: ['svelte', 'browser', 'module', 'main']
+        extensions: [".tsx", ".ts", ".js", ".svelte"],
+        mainFields: ["svelte", "browser", "module", "main"],
     },
     output: {
         filename: (pathData) => {
             // Add a content hash only for the main bundle.
             // We want the iframe_api.js file to keep its name as it will be referenced from outside iframes.
-            return pathData.chunk?.name === 'main' ? 'js/[name].[contenthash].js': '[name].js';
+            return pathData.chunk?.name === "main" ? "js/[name].[contenthash].js" : "[name].js";
         },
-        path: path.resolve(__dirname, 'dist'),
-        publicPath: '/'
+        path: path.resolve(__dirname, "dist"),
+        publicPath: "/",
     },
     plugins: [
         new webpack.HotModuleReplacementPlugin(),
         new ForkTsCheckerWebpackPlugin({
             eslint: {
-                files: './src/**/*.ts'
-            }
+                files: "./src/**/*.ts",
+            },
+        }),
+        new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }),
+        new HtmlWebpackPlugin({
+            template: "./dist/index.tmpl.html.tmp",
+            minify: {
+                collapseWhitespace: true,
+                keepClosingSlash: true,
+                removeComments: false,
+                removeRedundantAttributes: true,
+                removeScriptTypeAttributes: true,
+                removeStyleLinkTypeAttributes: true,
+                useShortDoctype: true,
+            },
+            chunks: ["main"],
         }),
-        new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
-        new HtmlWebpackPlugin(
-            {
-                template: './dist/index.tmpl.html.tmp',
-                minify: {
-                    collapseWhitespace: true,
-                    keepClosingSlash: true,
-                    removeComments: false,
-                    removeRedundantAttributes: true,
-                    removeScriptTypeAttributes: true,
-                    removeStyleLinkTypeAttributes: true,
-                    useShortDoctype: true
-                },
-                chunks: ['main']
-            }
-        ),
         new webpack.ProvidePlugin({
-            Phaser: 'phaser'
+            Phaser: "phaser",
         }),
         new NodePolyfillPlugin(),
         new webpack.EnvironmentPlugin({
-            'API_URL': null,
-            'SKIP_RENDER_OPTIMIZATIONS': false,
-            'DISABLE_NOTIFICATIONS': false,
-            'PUSHER_URL': undefined,
-            'UPLOADER_URL': null,
-            'ADMIN_URL': null,
-            'DEBUG_MODE': null,
-            'STUN_SERVER': null,
-            'TURN_SERVER': null,
-            'TURN_USER': null,
-            'TURN_PASSWORD': null,
-            'JITSI_URL': null,
-            'JITSI_PRIVATE_MODE': null,
-            'START_ROOM_URL': null,
-            'MAX_USERNAME_LENGTH': 8,
-            'MAX_PER_GROUP': 4,
-            'DISPLAY_TERMS_OF_USE': false,
-        })
+            API_URL: null,
+            SKIP_RENDER_OPTIMIZATIONS: false,
+            DISABLE_NOTIFICATIONS: false,
+            PUSHER_URL: undefined,
+            UPLOADER_URL: null,
+            ADMIN_URL: null,
+            DEBUG_MODE: null,
+            STUN_SERVER: null,
+            TURN_SERVER: null,
+            TURN_USER: null,
+            TURN_PASSWORD: null,
+            JITSI_URL: null,
+            JITSI_PRIVATE_MODE: null,
+            START_ROOM_URL: null,
+            MAX_USERNAME_LENGTH: 8,
+            MAX_PER_GROUP: 4,
+            DISPLAY_TERMS_OF_USE: false,
+        }),
     ],
-
 } as Configuration & WebpackDevServer.Configuration;
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.html b/maps/tests/Metadata/cowebsiteAllowApi.html
index 9df8bb6a..a689fe31 100644
--- a/maps/tests/Metadata/cowebsiteAllowApi.html
+++ b/maps/tests/Metadata/cowebsiteAllowApi.html
@@ -13,5 +13,6 @@
         </script>
     </head>
     <body>
+        <p>Website opened by script.</p>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.js b/maps/tests/Metadata/cowebsiteAllowApi.js
index 4dac8ed2..56c7b767 100644
--- a/maps/tests/Metadata/cowebsiteAllowApi.js
+++ b/maps/tests/Metadata/cowebsiteAllowApi.js
@@ -1 +1 @@
-WA.nav.openCoWebSite("cowebsiteAllowApi.html", true, "");
\ No newline at end of file
+WA.nav.openCoWebSite("cowebsiteAllowApi.html", true, "");
diff --git a/maps/tests/index.html b/maps/tests/index.html
index 93e4fd58..bf1a056f 100644
--- a/maps/tests/index.html
+++ b/maps/tests/index.html
@@ -106,6 +106,14 @@
                     <a href="#" class="testLink" data-testmap="help_camera_setting.json" target="_blank">Test the HelpCameraSettingScene</a>
                 </td>
             </tr>
+            <tr>
+                <td>
+                    <input type="radio" name="test-cowebsite-allowAPI"> Success <input type="radio" name="test-cowebsite-allowAPI"> Failure <input type="radio" name="test-cowebsite-allowAPI" checked> Pending
+                </td>
+                <td>
+                    <a href="#" class="testLink" data-testmap="Metadata/cowebsiteAllowApi.json" target="_blank">Test a iframe opened by a script can use Iframe API</a>
+                </td>
+            </tr>
             <tr>
                 <td>
                     <input type="radio" name="test-custom-menu"> Success <input type="radio" name="test-custom-menu"> Failure <input type="radio" name="test-custom-menu" checked> Pending
diff --git a/yarn.lock b/yarn.lock
index 166b84c7..b9698f61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,6 @@
 # yarn lockfile v1
 
 
-husky@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
+"husky@^6.0.0":
+  "resolved" "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz"
+  "version" "6.0.0"