From 0623ee0bf2ebb8cb1f4b4277aad3d1373d2050f9 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Mon, 21 Jun 2021 11:44:18 +0200
Subject: [PATCH 01/16] HOTFIX: loading errors after the preload stage should
 not crash the game anymore

---
 .../Entity/PlayerTexturesLoadingManager.ts    | 22 ++++++++++++++++---
 front/src/Phaser/Game/GameScene.ts            | 16 +++++++++-----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
index 95f00a9e..eaba79aa 100644
--- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
+++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
@@ -59,9 +59,11 @@ export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, textur
     } else {
         returnPromise = Promise.resolve(texturekeys);
     }
+
+    //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 => {
@@ -80,11 +82,25 @@ export const getRessourceDescriptor = (textureKey: string|BodyResourceDescriptio
 }
 
 export const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface, frameConfig: FrameConfig) => {
-    return new Promise<BodyResourceDescriptionInterface>((res) => {
+    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 72279c61..62d66c30 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -192,6 +192,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     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({
@@ -259,11 +260,15 @@ export class GameScene extends DirtyScene implements CenterListener {
                 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.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => {
             this.onMapLoad(data);
@@ -388,6 +393,7 @@ export class GameScene extends DirtyScene implements CenterListener {
 
     //hook create scene
     create(): void {
+        this.preloading = false;
         this.trackDirtyAnims();
 
         gameManager.gameSceneIsCreated(this);

From 3e29ed4376a9e469c51291a93f8d0c1599e03b84 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 22 Jun 2021 11:48:08 +0200
Subject: [PATCH 02/16] Correction of button customize WOKA scene issue

---
 .../CustomCharacterScene.svelte               | 12 +++----
 front/src/Phaser/Login/CustomizeScene.ts      | 32 +++++++++----------
 front/src/Stores/CustomCharacterStore.ts      |  4 ++-
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index f9e3a66b..3fff6bc0 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -1,11 +1,11 @@
 <script lang="typescript">
     import { Game } from "../../Phaser/Game/Game";
     import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
+    import {activeRowStore} from "../../Stores/CustomCharacterStore";
 
     export let game: Game;
 
     const customCharacterScene = game.scene.getScene(CustomizeSceneName);
-    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/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 9d0e7877..3096c6f6 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -9,10 +9,11 @@ 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 {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
@@ -95,7 +95,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         const customCursorPosition = localUserStore.getCustomCursorPosition();
         if (customCursorPosition) {
-            this.activeRow = customCursorPosition.activeRow;
+            activeRowStore.set(customCursorPosition.activeRow);
             this.selectedLayers = customCursorPosition.selectedLayers;
             this.moveLayers();
             this.updateSelectedLayer();
@@ -113,11 +113,11 @@ 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();
@@ -126,18 +126,18 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     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
+        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);
     }
 
     /**
@@ -207,9 +207,9 @@ export class CustomizeScene extends AbstractCharacterScene {
                         selectedX = 0;
                     }
                     this.containersRow[i][j].x = screenCenterX + (j - selectedX) * 40;
-                    this.containersRow[i][j].y = screenCenterY + (i - this.activeRow) * 40;
+                    this.containersRow[i][j].y = screenCenterY + (i - get(activeRowStore)) * 40;
                     const alpha1 = Math.abs(selectedX - j)*47*2/screenWidth;
-                    const alpha2 = Math.abs(this.activeRow - i)*49*2/screenHeight;
+                    const alpha2 = Math.abs(get(activeRowStore) - i)*49*2/screenHeight;
                     this.containersRow[i][j].setAlpha((1 -alpha1)*(1 - alpha2));
             }
 
diff --git a/front/src/Stores/CustomCharacterStore.ts b/front/src/Stores/CustomCharacterStore.ts
index 4bef7768..f966471e 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);
\ No newline at end of file

From feab5da2ad36d1905ad2cb52b8eea6d29255fbf6 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 28 Jun 2021 15:55:30 +0200
Subject: [PATCH 03/16] Allow a website opened by script to use iframe_api

---
 docs/maps/api-reference.md                 |   4 +-
 front/src/Api/Events/OpenCoWebSiteEvent.ts |   2 +
 front/src/Api/IframeListener.ts            |   2 +-
 front/src/Api/ScriptUtils.ts               |   4 +-
 front/src/iframe_api.ts                    |   8 +-
 maps/tests/Metadata/cowebsiteAllowApi.html |  15 ++++
 maps/tests/Metadata/cowebsiteAllowApi.js   |   1 +
 maps/tests/Metadata/cowebsiteAllowApi.json |  98 +++++++++++++++++++++
 maps/tests/Metadata/tileset_dungeon.png    | Bin 0 -> 9696 bytes
 9 files changed, 126 insertions(+), 8 deletions(-)
 create mode 100644 maps/tests/Metadata/cowebsiteAllowApi.html
 create mode 100644 maps/tests/Metadata/cowebsiteAllowApi.js
 create mode 100644 maps/tests/Metadata/cowebsiteAllowApi.json
 create mode 100644 maps/tests/Metadata/tileset_dungeon.png

diff --git a/docs/maps/api-reference.md b/docs/maps/api-reference.md
index 9891a88a..49bc9dac 100644
--- a/docs/maps/api-reference.md
+++ b/docs/maps/api-reference.md
@@ -190,11 +190,11 @@ WA.goToPage('https://www.wikipedia.org/');
 ### Opening/closing a web page in an iFrame
 
 ```
-openCoWebSite(url: string): void
+openCoWebSite(url : string, allowApi: boolean = false, allowPolicy: string = "") : void
 closeCoWebSite(): void
 ```
 
-Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame.
+Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allow the webpage to use the "IFrame API" and execute script. `allowPolicy` grant additional access rights to the webpage.
 
 Example:
 
diff --git a/front/src/Api/Events/OpenCoWebSiteEvent.ts b/front/src/Api/Events/OpenCoWebSiteEvent.ts
index 0fbc0ce2..d2937405 100644
--- a/front/src/Api/Events/OpenCoWebSiteEvent.ts
+++ b/front/src/Api/Events/OpenCoWebSiteEvent.ts
@@ -5,6 +5,8 @@ import * as tg from "generic-type-guard";
 export const isOpenCoWebsite =
     new tg.IsInterface().withProperties({
         url: tg.isString,
+        allowApi: tg.isBoolean,
+        allowPolicy: tg.isString,
     }).get();
 
 /**
diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index 6c3afa31..47f04aad 100644
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@@ -114,7 +114,7 @@ class IframeListener {
                     this._loadSoundStream.next(payload.data);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
+                    scriptUtils.openCoWebsite(payload.data.url, foundSrc, payload.data.allowApi, payload.data.allowPolicy);
                 }
 
                 else if (payload.type === 'closeCoWebSite') {
diff --git a/front/src/Api/ScriptUtils.ts b/front/src/Api/ScriptUtils.ts
index e1c94507..08775e4a 100644
--- a/front/src/Api/ScriptUtils.ts
+++ b/front/src/Api/ScriptUtils.ts
@@ -11,8 +11,8 @@ class ScriptUtils {
 
     }
 
-    public openCoWebsite(url: string, base: string) {
-           coWebsiteManager.loadCoWebsite(url, base);
+    public openCoWebsite(url: string, base: string, allowApi: boolean, allowPolicy: string) {
+           coWebsiteManager.loadCoWebsite(url, base, allowApi, allowPolicy);
     }
 
     public closeCoWebSite(){
diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index 17b979df..0264d0a6 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -22,7 +22,7 @@ interface WorkAdventureApi {
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
     openTab(url : string): void;
     goToPage(url : string): void;
-    openCoWebSite(url : string): void;
+    openCoWebSite(url : string, allowApi: boolean, allowPolicy: string): void;
     closeCoWebSite(): void;
     disablePlayerControls(): void;
     restorePlayerControls(): void;
@@ -166,11 +166,13 @@ window.WA = {
         }, '*');
     },
 
-    openCoWebSite(url : string) : void{
+    openCoWebSite(url : string, allowApi: boolean = false, allowPolicy: string = "") : void{
         window.parent.postMessage({
             "type" : 'openCoWebSite',
             "data" : {
-                url
+                url,
+                allowApi,
+                allowPolicy,
             } as OpenCoWebSiteEvent
         }, '*');
     },
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.html b/maps/tests/Metadata/cowebsiteAllowApi.html
new file mode 100644
index 00000000..0076b9e4
--- /dev/null
+++ b/maps/tests/Metadata/cowebsiteAllowApi.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script src="http://play.workadventure.localhost/iframe_api.js"></script>
+        <script>
+
+        </script>
+    </head>
+    <body>
+    <p>Website opened by script.</p>
+        <script>
+            WA.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.js b/maps/tests/Metadata/cowebsiteAllowApi.js
new file mode 100644
index 00000000..71ba96fa
--- /dev/null
+++ b/maps/tests/Metadata/cowebsiteAllowApi.js
@@ -0,0 +1 @@
+WA.openCoWebSite("cowebsiteAllowApi.html", true, "");
\ No newline at end of file
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.json b/maps/tests/Metadata/cowebsiteAllowApi.json
new file mode 100644
index 00000000..55ed615f
--- /dev/null
+++ b/maps/tests/Metadata/cowebsiteAllowApi.json
@@ -0,0 +1,98 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
+         "height":10,
+         "id":1,
+         "name":"bottom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":116.5,
+                 "id":1,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"Test : \nThe iframe is opened by script.\n\nResult : \nA message is send to the chat.",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":295.875,
+                 "x":11.8125,
+                 "y":188.5
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 16, 0, 0, 0, 16, 16, 16, 0, 0, 16, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 16, 16, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 16, 16, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":4,
+         "name":"mushroom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":5,
+ "nextobjectid":2,
+ "orientation":"orthogonal",
+ "properties":[
+        {
+         "name":"script",
+         "type":"string",
+         "value":"cowebsiteAllowApi.js"
+        }],
+ "renderorder":"right-down",
+ "tiledversion":"1.4.3",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":8,
+         "firstgid":1,
+         "image":"tileset_dungeon.png",
+         "imageheight":256,
+         "imagewidth":256,
+         "margin":0,
+         "name":"tileset_dungeon",
+         "spacing":0,
+         "tilecount":64,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.4,
+ "width":10
+}
\ No newline at end of file
diff --git a/maps/tests/Metadata/tileset_dungeon.png b/maps/tests/Metadata/tileset_dungeon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcac082c33704b31451bc8a58af5982c06586aa6
GIT binary patch
literal 9696
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

literal 0
HcmV?d00001


From 9ab73c0aa0eb3778b70c3de738894790ca6b84ea Mon Sep 17 00:00:00 2001
From: GRL78 <80678534+GRL78@users.noreply.github.com>
Date: Mon, 28 Jun 2021 16:05:29 +0200
Subject: [PATCH 04/16] Update docs/maps/api-reference.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David Négrier <d.negrier@thecodingmachine.com>
---
 docs/maps/api-reference.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/maps/api-reference.md b/docs/maps/api-reference.md
index 49bc9dac..e5fc2c48 100644
--- a/docs/maps/api-reference.md
+++ b/docs/maps/api-reference.md
@@ -194,7 +194,7 @@ openCoWebSite(url : string, allowApi: boolean = false, allowPolicy: string = "")
 closeCoWebSite(): void
 ```
 
-Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allow the webpage to use the "IFrame API" and execute script. `allowPolicy` grant additional access rights to the webpage.
+Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allows the webpage to use the "IFrame API" and execute script (it is equivalent to putting the `openWebsiteAllowApi` property in the map). `allowPolicy` grants additional access rights to the iFrame. The `allowPolicy` parameter is turned into an [`allow` feature policy in the iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow).
 
 Example:
 

From 06920a227121597e9bef3bc033827e01ce0b0b16 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 28 Jun 2021 16:13:38 +0200
Subject: [PATCH 05/16] Use dynamic Iframe API

---
 maps/tests/Metadata/cowebsiteAllowApi.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/maps/tests/Metadata/cowebsiteAllowApi.html b/maps/tests/Metadata/cowebsiteAllowApi.html
index 0076b9e4..ded7193e 100644
--- a/maps/tests/Metadata/cowebsiteAllowApi.html
+++ b/maps/tests/Metadata/cowebsiteAllowApi.html
@@ -1,9 +1,12 @@
 <!doctype html>
 <html lang="en">
     <head>
-        <script src="http://play.workadventure.localhost/iframe_api.js"></script>
         <script>
-
+            var script = document.createElement('script');
+            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
+            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
+            script.setAttribute('src', document.referrer + 'iframe_api.js');
+            document.head.appendChild(script);
         </script>
     </head>
     <body>

From 389ca25b6a85428720d69bd2400244ee92810493 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 28 Jun 2021 18:00:48 +0200
Subject: [PATCH 06/16] Cowebsite opened by script can use Iframe Api

---
 docs/maps/api-nav.md                       |  4 +-
 front/src/Api/Events/OpenCoWebSiteEvent.ts |  2 +
 front/src/Api/IframeListener.ts            | 14 +++-
 front/src/Api/ScriptUtils.ts               |  4 +-
 front/src/Api/iframe/nav.ts                |  6 +-
 front/src/iframe_api.ts                    |  4 +-
 maps/tests/Metadata/cowebsiteAllowApi.html | 17 ++++
 maps/tests/Metadata/cowebsiteAllowApi.js   |  1 +
 maps/tests/Metadata/cowebsiteAllowApi.json | 98 ++++++++++++++++++++++
 maps/tests/index.html                      |  8 ++
 10 files changed, 149 insertions(+), 9 deletions(-)
 create mode 100644 maps/tests/Metadata/cowebsiteAllowApi.html
 create mode 100644 maps/tests/Metadata/cowebsiteAllowApi.js
 create mode 100644 maps/tests/Metadata/cowebsiteAllowApi.json

diff --git a/docs/maps/api-nav.md b/docs/maps/api-nav.md
index 29323632..2abc5aff 100644
--- a/docs/maps/api-nav.md
+++ b/docs/maps/api-nav.md
@@ -52,11 +52,11 @@ WA.nav.goToRoom("/_/global/<path to global map>.json#start-layer-2")
 ### Opening/closing a web page in an iFrame
 
 ```
-WA.nav.openCoWebSite(url: string): void
+WA.nav.openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void
 WA.nav.closeCoWebSite(): void
 ```
 
-Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame.
+Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` parameter allow the iframe to use the "IFrame API" and communicate with WorkAdventure. `allowPolicy` parameter grant additional rights to the iframe.
 
 Example:
 
diff --git a/front/src/Api/Events/OpenCoWebSiteEvent.ts b/front/src/Api/Events/OpenCoWebSiteEvent.ts
index 0fbc0ce2..d2937405 100644
--- a/front/src/Api/Events/OpenCoWebSiteEvent.ts
+++ b/front/src/Api/Events/OpenCoWebSiteEvent.ts
@@ -5,6 +5,8 @@ import * as tg from "generic-type-guard";
 export const isOpenCoWebsite =
     new tg.IsInterface().withProperties({
         url: tg.isString,
+        allowApi: tg.isBoolean,
+        allowPolicy: tg.isString,
     }).get();
 
 /**
diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index 0adaac85..1c2adfdb 100644
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@@ -135,6 +135,8 @@ class IframeListener {
                 return;
             }
 
+            foundSrc = this.getBaseUrl(foundSrc, message.source);
+
             if (isIframeEventWrapper(payload)) {
                 if (payload.type === 'showLayer' && isLayerEvent(payload.data)) {
                     this._showLayerStream.next(payload.data);
@@ -168,7 +170,8 @@ class IframeListener {
                     this._loadSoundStream.next(payload.data);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
+                    console.log(foundSrc);
+                    scriptUtils.openCoWebsite(payload.data.url, foundSrc, payload.data.allowApi, payload.data.allowPolicy);
                 }
 
                 else if (payload.type === 'closeCoWebSite') {
@@ -281,6 +284,15 @@ class IframeListener {
 
     }
 
+    private getBaseUrl(src: string, source: MessageEventSource | null): string{
+       for (const script of this.scripts) {
+           if (script[1].contentWindow === source) {
+               return script[0];
+           }
+       }
+       return src;
+    }
+
     private static getIFrameId(scriptUrl: string): string {
         return 'script' + btoa(scriptUrl);
     }
diff --git a/front/src/Api/ScriptUtils.ts b/front/src/Api/ScriptUtils.ts
index e1c94507..75a18dc0 100644
--- a/front/src/Api/ScriptUtils.ts
+++ b/front/src/Api/ScriptUtils.ts
@@ -11,8 +11,8 @@ class ScriptUtils {
 
     }
 
-    public openCoWebsite(url: string, base: string) {
-           coWebsiteManager.loadCoWebsite(url, base);
+    public openCoWebsite(url: string, base: string, api: boolean, policy: string) {
+           coWebsiteManager.loadCoWebsite(url, base, api, policy);
     }
 
     public closeCoWebSite(){
diff --git a/front/src/Api/iframe/nav.ts b/front/src/Api/iframe/nav.ts
index 0d31c1ea..7c7d38b4 100644
--- a/front/src/Api/iframe/nav.ts
+++ b/front/src/Api/iframe/nav.ts
@@ -36,11 +36,13 @@ class WorkadventureNavigationCommands extends IframeApiContribution<Workadventur
         });
     }
 
-    openCoWebSite(url: string): void {
+    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
         sendToWorkadventure({
             "type": 'openCoWebSite',
             "data": {
-                url
+                url,
+                allowApi,
+                allowPolicy,
             }
         });
     }
diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index cc17fff2..ddfd05c8 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -103,9 +103,9 @@ const wa = {
     /**
      * @deprecated Use WA.nav.openCoWebSite instead
      */
-    openCoWebSite(url: string): void {
+    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
         console.warn('Method WA.openCoWebSite is deprecated. Please use WA.nav.openCoWebSite instead');
-        nav.openCoWebSite(url);
+        nav.openCoWebSite(url, allowApi, allowPolicy);
     },
 
     /**
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.html b/maps/tests/Metadata/cowebsiteAllowApi.html
new file mode 100644
index 00000000..9df8bb6a
--- /dev/null
+++ b/maps/tests/Metadata/cowebsiteAllowApi.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <script>
+            var script = document.createElement('script');
+            // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
+            // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
+            script.setAttribute('src', document.referrer + 'iframe_api.js');
+            document.head.appendChild(script);
+            window.addEventListener('load', () => {
+                WA.chat.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+            })
+        </script>
+    </head>
+    <body>
+    </body>
+</html>
\ No newline at end of file
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.js b/maps/tests/Metadata/cowebsiteAllowApi.js
new file mode 100644
index 00000000..4dac8ed2
--- /dev/null
+++ b/maps/tests/Metadata/cowebsiteAllowApi.js
@@ -0,0 +1 @@
+WA.nav.openCoWebSite("cowebsiteAllowApi.html", true, "");
\ No newline at end of file
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.json b/maps/tests/Metadata/cowebsiteAllowApi.json
new file mode 100644
index 00000000..55ed615f
--- /dev/null
+++ b/maps/tests/Metadata/cowebsiteAllowApi.json
@@ -0,0 +1,98 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
+         "height":10,
+         "id":1,
+         "name":"bottom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":116.5,
+                 "id":1,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"Test : \nThe iframe is opened by script.\n\nResult : \nA message is send to the chat.",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":295.875,
+                 "x":11.8125,
+                 "y":188.5
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 16, 0, 0, 0, 16, 16, 16, 0, 0, 16, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 16, 16, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 16, 16, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":4,
+         "name":"mushroom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":5,
+ "nextobjectid":2,
+ "orientation":"orthogonal",
+ "properties":[
+        {
+         "name":"script",
+         "type":"string",
+         "value":"cowebsiteAllowApi.js"
+        }],
+ "renderorder":"right-down",
+ "tiledversion":"1.4.3",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":8,
+         "firstgid":1,
+         "image":"tileset_dungeon.png",
+         "imageheight":256,
+         "imagewidth":256,
+         "margin":0,
+         "name":"tileset_dungeon",
+         "spacing":0,
+         "tilecount":64,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.4,
+ "width":10
+}
\ No newline at end of file
diff --git a/maps/tests/index.html b/maps/tests/index.html
index 1f5f2a0e..93e4fd58 100644
--- a/maps/tests/index.html
+++ b/maps/tests/index.html
@@ -162,6 +162,14 @@
                     <a href="#" class="testLink" data-testmap="animated_tiles.json" target="_blank">Test animated tiles</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 cowebsite opened by script is allowed to use IFrame API</a>
+                </td>
+            </tr>
         </table>
 
         <script>

From 65d1e4e76893926b760011fab135e86a07e9347b Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 29 Jun 2021 09:40:15 +0200
Subject: [PATCH 07/16] Add CHANGELOG and a map for test

---
 CHANGELOG.md                               | 8 +++++++-
 maps/tests/Metadata/cowebsiteAllowApi.html | 4 +++-
 maps/tests/index.html                      | 8 ++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1dd2c973..e4b9cf6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,10 @@
-## Version 1.3.9 - in dev
+## Version 1.4.2 
+
+## Updates 
+
+- A script in an iframe opened by another script can use the IFrame API.
+
+## Version 1.4.0
 
 ### BREAKING CHANGES
 
diff --git a/maps/tests/Metadata/cowebsiteAllowApi.html b/maps/tests/Metadata/cowebsiteAllowApi.html
index ded7193e..b9affd75 100644
--- a/maps/tests/Metadata/cowebsiteAllowApi.html
+++ b/maps/tests/Metadata/cowebsiteAllowApi.html
@@ -12,7 +12,9 @@
     <body>
     <p>Website opened by script.</p>
         <script>
-            WA.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+            window.addEventListener('load', () => {
+                WA.sendChatMessage('The iframe opened by a script works !', 'Mr Robot');
+            })
         </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/maps/tests/index.html b/maps/tests/index.html
index 9c95c281..b7e88925 100644
--- a/maps/tests/index.html
+++ b/maps/tests/index.html
@@ -90,6 +90,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>
         </table>
 
         <script>

From b457ce493bdc165fd85f6a638293709d5e9eadb8 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 29 Jun 2021 09:44:57 +0200
Subject: [PATCH 08/16] Suppress console.log

---
 front/src/Api/IframeListener.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index 1c2adfdb..a27da9d6 100644
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@@ -170,7 +170,6 @@ class IframeListener {
                     this._loadSoundStream.next(payload.data);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    console.log(foundSrc);
                     scriptUtils.openCoWebsite(payload.data.url, foundSrc, payload.data.allowApi, payload.data.allowPolicy);
                 }
 

From 1cd18db56054f8d53be24896a6eedb17c4f27f17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 29 Jun 2021 16:59:54 +0200
Subject: [PATCH 09/16] Fixing broken NPM typings package build

---
 .github/workflows/push-to-npm.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/push-to-npm.yml b/.github/workflows/push-to-npm.yml
index 798e2530..43542c28 100644
--- a/.github/workflows/push-to-npm.yml
+++ b/.github/workflows/push-to-npm.yml
@@ -49,7 +49,7 @@ jobs:
       - name: "Build"
         run: yarn run build
         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.

From 285712bfc76a26adfb9348fdffa17d66d03d9ac7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 29 Jun 2021 17:31:01 +0200
Subject: [PATCH 10/16] Fixing building of typings

---
 .github/workflows/push-to-npm.yml |  4 ----
 front/package.json                |  1 +
 front/webpack.config.ts           | 17 ++++++++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/push-to-npm.yml b/.github/workflows/push-to-npm.yml
index 43542c28..011ae440 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"
diff --git a/front/package.json b/front/package.json
index 1c938195..077b992f 100644
--- a/front/package.json
+++ b/front/package.json
@@ -52,6 +52,7 @@
   "scripts": {
     "start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
     "build": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
+    "build-typings": "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/webpack.config.ts b/front/webpack.config.ts
index 3a69b74a..04ad8445 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -10,14 +10,18 @@ import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
 import {DISPLAY_TERMS_OF_USE} from "./src/Enum/EnvironmentVariable";
 
 const mode = process.env.NODE_ENV ?? 'development';
+const buildNpmTypingsForApi = !!process.env.BUILD_TYPINGS;
 const isProduction = mode === 'production';
 const isDevelopment = !isProduction;
 
+let 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',
     devServer: {
@@ -40,7 +44,10 @@ module.exports = {
                 exclude: /node_modules/,
                 loader: 'ts-loader',
                 options: {
-                    transpileOnly: true,
+                    transpileOnly: !buildNpmTypingsForApi,
+                    compilerOptions: {
+                        declaration: buildNpmTypingsForApi
+                    }
                 },
             },
             {

From ef0d422a4960458282b8bf30d509891d1e480f53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 29 Jun 2021 17:55:19 +0200
Subject: [PATCH 11/16] Fixing building of typings

---
 .github/workflows/push-to-npm.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/push-to-npm.yml b/.github/workflows/push-to-npm.yml
index 011ae440..3b90e846 100644
--- a/.github/workflows/push-to-npm.yml
+++ b/.github/workflows/push-to-npm.yml
@@ -43,7 +43,7 @@ jobs:
         working-directory: "front"
 
       - name: "Build"
-        run: yarn run build
+        run: yarn run build-typings
         env:
           PUSHER_URL: "//localhost:8080"
         working-directory: "front"

From c5949a0337d5ac2177db36dfb331c788f32f9ef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 29 Jun 2021 17:57:19 +0200
Subject: [PATCH 12/16] Fixing linting

---
 front/webpack.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/webpack.config.ts b/front/webpack.config.ts
index 04ad8445..44f66564 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -14,7 +14,7 @@ const buildNpmTypingsForApi = !!process.env.BUILD_TYPINGS;
 const isProduction = mode === 'production';
 const isDevelopment = !isProduction;
 
-let entries: { [key: string]: string; } = {};
+const entries: { [key: string]: string; } = {};
 if (!buildNpmTypingsForApi) {
     entries.main = './src/index.ts';
 }

From 3c77ce945d8e23d7e648b03a1a16fde1fd111317 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:26:21 +0200
Subject: [PATCH 13/16] Improving docs

---
 docs/maps/api-nav.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/maps/api-nav.md b/docs/maps/api-nav.md
index 2abc5aff..f5721063 100644
--- a/docs/maps/api-nav.md
+++ b/docs/maps/api-nav.md
@@ -56,7 +56,7 @@ WA.nav.openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string
 WA.nav.closeCoWebSite(): void
 ```
 
-Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` parameter allow the iframe to use the "IFrame API" and communicate with WorkAdventure. `allowPolicy` parameter grant additional rights to the iframe.
+Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allows the webpage to use the "IFrame API" and execute script (it is equivalent to putting the `openWebsiteAllowApi` property in the map). `allowPolicy` grants additional access rights to the iFrame. The `allowPolicy` parameter is turned into an [`allow` feature policy in the iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow).
 
 Example:
 
@@ -65,4 +65,3 @@ WA.nav.openCoWebSite('https://www.wikipedia.org/');
 // ...
 WA.nav.closeCoWebSite();
 ```
-

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 14/16] 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"

From bfcdd31ed2a3e54175640d1be95dfdf57dc2132b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 30 Jun 2021 10:15:55 +0200
Subject: [PATCH 15/16] Fixing NPM package generation

The generation was broken due to the refactoring in several classes (some of them where not properly exported).
Also, trying to generate the NPM package on every build now (to detect issues).
---
 .github/workflows/push-to-npm.yml |   5 ++
 front/package.json                |   2 +-
 front/src/Api/iframe/chat.ts      |  40 ++++++------
 front/src/Api/iframe/controls.ts  |  11 ++--
 front/src/Api/iframe/nav.ts       |  51 +++++++--------
 front/src/Api/iframe/player.ts    |  26 ++++----
 front/src/Api/iframe/room.ts      |   2 +-
 front/src/Api/iframe/sound.ts     |  16 ++---
 front/src/Api/iframe/ui.ts        | 104 +++++++++++++++---------------
 9 files changed, 129 insertions(+), 128 deletions(-)

diff --git a/.github/workflows/push-to-npm.yml b/.github/workflows/push-to-npm.yml
index 3b90e846..fd247b11 100644
--- a/.github/workflows/push-to-npm.yml
+++ b/.github/workflows/push-to-npm.yml
@@ -2,6 +2,7 @@ name: Push @workadventure/iframe-api-typings to NPM
 on:
   release:
     types: [created]
+  push:
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -52,6 +53,9 @@ jobs:
       - name: Copy typings to package dir
         run: cp front/dist/src/iframe_api.d.ts front/packages/iframe-api-typings/iframe_api.d.ts
 
+      - name: Copy typings to package dir (2)
+        run: cp -R front/dist/src/Api front/packages/iframe-api-typings/Api
+
       - name: Install dependencies in package
         run: yarn install
         working-directory: "front/packages/iframe-api-typings"
@@ -61,3 +65,4 @@ jobs:
         working-directory: "front/packages/iframe-api-typings"
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        if: ${{ github.event_name == 'release' }}
diff --git a/front/package.json b/front/package.json
index 20c6b073..0e0439ed 100644
--- a/front/package.json
+++ b/front/package.json
@@ -60,7 +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",
+    "build-typings": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" 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/Api/iframe/chat.ts b/front/src/Api/iframe/chat.ts
index 7d8e6f71..5797df5a 100644
--- a/front/src/Api/iframe/chat.ts
+++ b/front/src/Api/iframe/chat.ts
@@ -1,30 +1,30 @@
-import type { ChatEvent } from '../Events/ChatEvent'
-import { isUserInputChatEvent, UserInputChatEvent } from '../Events/UserInputChatEvent'
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution'
+import type { ChatEvent } from "../Events/ChatEvent";
+import { isUserInputChatEvent, UserInputChatEvent } from "../Events/UserInputChatEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
-import {Subject} from "rxjs";
+import { Subject } from "rxjs";
 
 const chatStream = new Subject<string>();
 
-class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatCommands> {
-
-    callbacks = [apiCallback({
-        callback: (event: UserInputChatEvent) => {
-            chatStream.next(event.message);
-        },
-        type: "userInputChat",
-        typeChecker: isUserInputChatEvent
-    })]
-
+export class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatCommands> {
+    callbacks = [
+        apiCallback({
+            callback: (event: UserInputChatEvent) => {
+                chatStream.next(event.message);
+            },
+            type: "userInputChat",
+            typeChecker: isUserInputChatEvent,
+        }),
+    ];
 
     sendChatMessage(message: string, author: string) {
         sendToWorkadventure({
-            type: 'chat',
+            type: "chat",
             data: {
-                'message': message,
-                'author': author
-            }
-        })
+                message: message,
+                author: author,
+            },
+        });
     }
 
     /**
@@ -35,4 +35,4 @@ class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatC
     }
 }
 
-export default new WorkadventureChatCommands()
+export default new WorkadventureChatCommands();
diff --git a/front/src/Api/iframe/controls.ts b/front/src/Api/iframe/controls.ts
index 04e48990..a5f4c458 100644
--- a/front/src/Api/iframe/controls.ts
+++ b/front/src/Api/iframe/controls.ts
@@ -1,16 +1,15 @@
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 
-class WorkadventureControlsCommands extends IframeApiContribution<WorkadventureControlsCommands> {
-    callbacks = []
+export class WorkadventureControlsCommands extends IframeApiContribution<WorkadventureControlsCommands> {
+    callbacks = [];
 
     disablePlayerControls(): void {
-        sendToWorkadventure({ 'type': 'disablePlayerControls', data: null });
+        sendToWorkadventure({ type: "disablePlayerControls", data: null });
     }
 
     restorePlayerControls(): void {
-        sendToWorkadventure({ 'type': 'restorePlayerControls', data: null });
+        sendToWorkadventure({ type: "restorePlayerControls", data: null });
     }
 }
 
-
 export default new WorkadventureControlsCommands();
diff --git a/front/src/Api/iframe/nav.ts b/front/src/Api/iframe/nav.ts
index 7c7d38b4..f051a7c0 100644
--- a/front/src/Api/iframe/nav.ts
+++ b/front/src/Api/iframe/nav.ts
@@ -1,59 +1,56 @@
-import type { GoToPageEvent } from '../Events/GoToPageEvent';
-import type { OpenTabEvent } from '../Events/OpenTabEvent';
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
-import type {OpenCoWebSiteEvent} from "../Events/OpenCoWebSiteEvent";
-import type {LoadPageEvent} from "../Events/LoadPageEvent";
-
-
-class WorkadventureNavigationCommands extends IframeApiContribution<WorkadventureNavigationCommands> {
-    callbacks = []
+import type { GoToPageEvent } from "../Events/GoToPageEvent";
+import type { OpenTabEvent } from "../Events/OpenTabEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
+import type { OpenCoWebSiteEvent } from "../Events/OpenCoWebSiteEvent";
+import type { LoadPageEvent } from "../Events/LoadPageEvent";
 
+export class WorkadventureNavigationCommands extends IframeApiContribution<WorkadventureNavigationCommands> {
+    callbacks = [];
 
     openTab(url: string): void {
         sendToWorkadventure({
-            "type": 'openTab',
-            "data": {
-                url
-            }
+            type: "openTab",
+            data: {
+                url,
+            },
         });
     }
 
     goToPage(url: string): void {
         sendToWorkadventure({
-            "type": 'goToPage',
-            "data": {
-                url
-            }
+            type: "goToPage",
+            data: {
+                url,
+            },
         });
     }
 
     goToRoom(url: string): void {
         sendToWorkadventure({
-            "type": 'loadPage',
-            "data": {
-                url
-            }
+            type: "loadPage",
+            data: {
+                url,
+            },
         });
     }
 
     openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
         sendToWorkadventure({
-            "type": 'openCoWebSite',
-            "data": {
+            type: "openCoWebSite",
+            data: {
                 url,
                 allowApi,
                 allowPolicy,
-            }
+            },
         });
     }
 
     closeCoWebSite(): void {
         sendToWorkadventure({
-            "type": 'closeCoWebSite',
-            data: null
+            type: "closeCoWebSite",
+            data: null,
         });
     }
 }
 
-
 export default new WorkadventureNavigationCommands();
diff --git a/front/src/Api/iframe/player.ts b/front/src/Api/iframe/player.ts
index 67c012f7..e130d3f2 100644
--- a/front/src/Api/iframe/player.ts
+++ b/front/src/Api/iframe/player.ts
@@ -1,29 +1,29 @@
-import {IframeApiContribution, sendToWorkadventure} from "./IframeApiContribution";
-import type {HasPlayerMovedEvent, HasPlayerMovedEventCallback} from "../Events/HasPlayerMovedEvent";
-import {Subject} from "rxjs";
-import {apiCallback} from "./registeredCallbacks";
-import {isHasPlayerMovedEvent} from "../Events/HasPlayerMovedEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
+import type { HasPlayerMovedEvent, HasPlayerMovedEventCallback } from "../Events/HasPlayerMovedEvent";
+import { Subject } from "rxjs";
+import { apiCallback } from "./registeredCallbacks";
+import { isHasPlayerMovedEvent } from "../Events/HasPlayerMovedEvent";
 
 const moveStream = new Subject<HasPlayerMovedEvent>();
 
-class WorkadventurePlayerCommands extends IframeApiContribution<WorkadventurePlayerCommands> {
+export class WorkadventurePlayerCommands extends IframeApiContribution<WorkadventurePlayerCommands> {
     callbacks = [
         apiCallback({
-            type: 'hasPlayerMoved',
+            type: "hasPlayerMoved",
             typeChecker: isHasPlayerMovedEvent,
             callback: (payloadData) => {
                 moveStream.next(payloadData);
-            }
+            },
         }),
-    ]
+    ];
 
     onPlayerMove(callback: HasPlayerMovedEventCallback): void {
         moveStream.subscribe(callback);
         sendToWorkadventure({
-            type: 'onPlayerMove',
-            data: null
-        })
+            type: "onPlayerMove",
+            data: null,
+        });
     }
 }
 
-export default new WorkadventurePlayerCommands();
\ No newline at end of file
+export default new WorkadventurePlayerCommands();
diff --git a/front/src/Api/iframe/room.ts b/front/src/Api/iframe/room.ts
index 817141f4..e6b64db1 100644
--- a/front/src/Api/iframe/room.ts
+++ b/front/src/Api/iframe/room.ts
@@ -48,7 +48,7 @@ function getDataLayer(): Promise<DataLayerEvent> {
     });
 }
 
-class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomCommands> {
+export class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomCommands> {
     callbacks = [
         apiCallback({
             callback: (payloadData: EnterLeaveEvent) => {
diff --git a/front/src/Api/iframe/sound.ts b/front/src/Api/iframe/sound.ts
index 70430b46..1e5d6157 100644
--- a/front/src/Api/iframe/sound.ts
+++ b/front/src/Api/iframe/sound.ts
@@ -1,17 +1,15 @@
-import type { LoadSoundEvent } from '../Events/LoadSoundEvent';
-import type { PlaySoundEvent } from '../Events/PlaySoundEvent';
-import type { StopSoundEvent } from '../Events/StopSoundEvent';
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
-import {Sound} from "./Sound/Sound";
+import type { LoadSoundEvent } from "../Events/LoadSoundEvent";
+import type { PlaySoundEvent } from "../Events/PlaySoundEvent";
+import type { StopSoundEvent } from "../Events/StopSoundEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
+import { Sound } from "./Sound/Sound";
 
-class WorkadventureSoundCommands extends IframeApiContribution<WorkadventureSoundCommands> {
-    callbacks = []
+export class WorkadventureSoundCommands extends IframeApiContribution<WorkadventureSoundCommands> {
+    callbacks = [];
 
     loadSound(url: string): Sound {
         return new Sound(url);
     }
-
 }
 
-
 export default new WorkadventureSoundCommands();
diff --git a/front/src/Api/iframe/ui.ts b/front/src/Api/iframe/ui.ts
index c7655b84..61c7076e 100644
--- a/front/src/Api/iframe/ui.ts
+++ b/front/src/Api/iframe/ui.ts
@@ -1,53 +1,55 @@
-import { isButtonClickedEvent } from '../Events/ButtonClickedEvent';
-import { isMenuItemClickedEvent } from '../Events/ui/MenuItemClickedEvent';
-import type { MenuItemRegisterEvent } from '../Events/ui/MenuItemRegisterEvent';
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import { isButtonClickedEvent } from "../Events/ButtonClickedEvent";
+import { isMenuItemClickedEvent } from "../Events/ui/MenuItemClickedEvent";
+import type { MenuItemRegisterEvent } from "../Events/ui/MenuItemRegisterEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
 import type { ButtonClickedCallback, ButtonDescriptor } from "./Ui/ButtonDescriptor";
 import { Popup } from "./Ui/Popup";
 
 let popupId = 0;
 const popups: Map<number, Popup> = new Map<number, Popup>();
-const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<number, Map<number, ButtonClickedCallback>>();
+const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<
+    number,
+    Map<number, ButtonClickedCallback>
+>();
 
-const menuCallbacks: Map<string, (command: string) => void> = new Map()
+const menuCallbacks: Map<string, (command: string) => void> = new Map();
 
 interface ZonedPopupOptions {
-    zone: string
-    objectLayerName?: string,
-    popupText: string,
-    delay?: number
-    popupOptions: Array<ButtonDescriptor>
+    zone: string;
+    objectLayerName?: string;
+    popupText: string;
+    delay?: number;
+    popupOptions: Array<ButtonDescriptor>;
 }
 
-
-class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiCommands> {
-
-    callbacks = [apiCallback({
-        type: "buttonClickedEvent",
-        typeChecker: isButtonClickedEvent,
-        callback: (payloadData) => {
-            const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
-            const popup = popups.get(payloadData.popupId);
-            if (popup === undefined) {
-                throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
-            }
-            if (callback) {
-                callback(popup);
-            }
-        }
-    }),
-    apiCallback({
-        type: "menuItemClicked",
-        typeChecker: isMenuItemClickedEvent,
-        callback: event => {
-            const callback = menuCallbacks.get(event.menuItem);
-            if (callback) {
-                callback(event.menuItem)
-            }
-        }
-    })];
-
+export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiCommands> {
+    callbacks = [
+        apiCallback({
+            type: "buttonClickedEvent",
+            typeChecker: isButtonClickedEvent,
+            callback: (payloadData) => {
+                const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
+                const popup = popups.get(payloadData.popupId);
+                if (popup === undefined) {
+                    throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
+                }
+                if (callback) {
+                    callback(popup);
+                }
+            },
+        }),
+        apiCallback({
+            type: "menuItemClicked",
+            typeChecker: isMenuItemClickedEvent,
+            callback: (event) => {
+                const callback = menuCallbacks.get(event.menuItem);
+                if (callback) {
+                    callback(event.menuItem);
+                }
+            },
+        }),
+    ];
 
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
         popupId++;
@@ -66,40 +68,40 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
         }
 
         sendToWorkadventure({
-            'type': 'openPopup',
-            'data': {
+            type: "openPopup",
+            data: {
                 popupId,
                 targetObject,
                 message,
                 buttons: buttons.map((button) => {
                     return {
                         label: button.label,
-                        className: button.className
+                        className: button.className,
                     };
-                })
-            }
+                }),
+            },
         });
 
-        popups.set(popupId, popup)
+        popups.set(popupId, popup);
         return popup;
     }
 
     registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
         menuCallbacks.set(commandDescriptor, callback);
         sendToWorkadventure({
-            'type': 'registerMenuCommand',
-            'data': {
-                menutItem: commandDescriptor
-            }
+            type: "registerMenuCommand",
+            data: {
+                menutItem: commandDescriptor,
+            },
         });
     }
 
     displayBubble(): void {
-        sendToWorkadventure({ 'type': 'displayBubble', data: null });
+        sendToWorkadventure({ type: "displayBubble", data: null });
     }
 
     removeBubble(): void {
-        sendToWorkadventure({ 'type': 'removeBubble', data: null });
+        sendToWorkadventure({ type: "removeBubble", data: null });
     }
 }
 

From 50fcc1caaab973e7306c3fd4623b9f11be5d0a82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 30 Jun 2021 10:40:53 +0200
Subject: [PATCH 16/16] Fixing signature of openCoWebSite

---
 front/src/iframe_api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index 0264d0a6..9fa204b9 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -22,7 +22,7 @@ interface WorkAdventureApi {
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
     openTab(url : string): void;
     goToPage(url : string): void;
-    openCoWebSite(url : string, allowApi: boolean, allowPolicy: string): void;
+    openCoWebSite(url : string, allowApi?: boolean, allowPolicy?: string): void;
     closeCoWebSite(): void;
     disablePlayerControls(): void;
     restorePlayerControls(): void;