Merge branch 'develop' of github.com:thecodingmachine/workadventure into audioPlayerImprovements

front/dist/index.tmpl.html

@@ -37,8 +37,7 @@
         <div class="main-container" id="main-container">
             <!-- Create the editor container -->
             <div id="game" class="game">
-                <div id="svelte-overlay">
-                </div>
+                <div id="svelte-overlay"></div>
                 <div id="game-overlay" class="game-overlay">
                     <div id="main-section" class="main-section">
                     </div>

front/dist/resources/html/gameMenu.html

@@ -57,6 +57,9 @@
         <section>
             <button id="toggleFullscreen">Toggle fullscreen</button>
         </section>
+        <section>
+            <button id="enableNotification">Enable notifications</button>
+        </section>
         <section>
             <button id="sparkButton">Create map</button>
         </section>

front/dist/resources/service-worker.js

@@ -0,0 +1,53 @@
+let CACHE_NAME = 'workavdenture-cache-v1';
+let urlsToCache = [
+    '/'
+];
+
+self.addEventListener('install', function(event) {
+    // Perform install steps
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(function(cache) {
+                console.log('Opened cache');
+                return cache.addAll(urlsToCache);
+            })
+    );
+});
+
+self.addEventListener('fetch', function(event) {
+    event.respondWith(
+        caches.match(event.request)
+            .then(function(response) {
+                // Cache hit - return response
+                if (response) {
+                    return response;
+                }
+
+                return fetch(event.request).then(
+                    function(response) {
+                        // Check if we received a valid response
+                        if(!response || response.status !== 200 || response.type !== 'basic') {
+                            return response;
+                        }
+
+                        // IMPORTANT: Clone the response. A response is a stream
+                        // and because we want the browser to consume the response
+                        // as well as the cache consuming the response, we need
+                        // to clone it so we have two streams.
+                        var responseToCache = response.clone();
+
+                        caches.open(CACHE_NAME)
+                            .then(function(cache) {
+                                cache.put(event.request, responseToCache);
+                            });
+
+                        return response;
+                    }
+                );
+            })
+    );
+});
+
+self.addEventListener('activate', function(event) {
+    //TODO activate service worker
+});

front/dist/static/images/favicons/manifest.json

@@ -119,7 +119,13 @@
             "src": "/static/images/favicons/android-icon-192x192.png",
             "sizes": "192x192",
             "type": "image\/png",
-            "density": "4.0"
+            "density": "4.0",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/static/images/favicons/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image\/png"
         }
     ],
     "start_url": "/",
@@ -127,6 +133,7 @@
     "display_override": ["window-control-overlay", "minimal-ui"],
     "display": "standalone",
     "scope": "/",
+    "lang": "en",
     "theme_color": "#000000",
     "shortcuts": [
       {
@@ -134,7 +141,7 @@
         "short_name": "WA",
         "description": "WorkAdventure application",
         "url": "/",
-        "icons": [{ "src": "/static/images/favicons/android-icon-192x192.png", "sizes": "192x192" }]
+        "icons": [{ "src": "/static/images/favicons/android-icon-192x192.png", "sizes": "192x192", "type": "image/png" }]
       }
     ],
     "description": "WorkAdventure application",

front/package.json

@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@fontsource/press-start-2p": "^4.3.0",
-    "@types/simple-peer": "^9.6.0",
+    "@types/simple-peer": "^9.11.1",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.1",
     "cross-env": "^7.0.3",
@@ -51,7 +51,7 @@
     "queue-typescript": "^1.0.1",
     "quill": "1.3.6",
     "rxjs": "^6.6.3",
-    "simple-peer": "^9.6.2",
+    "simple-peer": "^9.11.0",
     "socket.io-client": "^2.3.0",
     "standardized-audio-context": "^25.2.4"
   },
@@ -60,7 +60,8 @@
     "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",
-    "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
+    "build-typings": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production BUILD_TYPINGS=1 webpack",
+    "test": "cross-env 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",
     "precommit": "lint-staged",

front/src/Api/Events/DataLayerEvent.ts

@@ -1,13 +1,12 @@
 import * as tg from "generic-type-guard";
 
-
-
-export const isDataLayerEvent =
-    new tg.IsInterface().withProperties({
-        data: tg.isObject
-    }).get();
+export const isDataLayerEvent = new tg.IsInterface()
+    .withProperties({
+        data: tg.isObject,
+    })
+    .get();
 
 /**
  * A message sent from the game to the iFrame when the data of the layers change after the iFrame send a message to the game that it want to listen to the data of the layers
  */
-export type DataLayerEvent = tg.GuardedType<typeof isDataLayerEvent>;
+export type DataLayerEvent = tg.GuardedType<typeof isDataLayerEvent>;

front/src/Api/Events/GameStateEvent.ts

@@ -1,14 +1,15 @@
 import * as tg from "generic-type-guard";
 
-export const isGameStateEvent =
-    new tg.IsInterface().withProperties({
-            roomId: tg.isString,
-            mapUrl: tg.isString,
-            nickname: tg.isUnion(tg.isString, tg.isNull),
-            uuid: tg.isUnion(tg.isString, tg.isUndefined),
-            startLayerName: tg.isUnion(tg.isString, tg.isNull),
-            tags : tg.isArray(tg.isString),
-    }).get();
+export const isGameStateEvent = new tg.IsInterface()
+    .withProperties({
+        roomId: tg.isString,
+        mapUrl: tg.isString,
+        nickname: tg.isUnion(tg.isString, tg.isNull),
+        uuid: tg.isUnion(tg.isString, tg.isUndefined),
+        startLayerName: tg.isUnion(tg.isString, tg.isNull),
+        tags: tg.isArray(tg.isString),
+    })
+    .get();
 /**
  * A message sent from the game to the iFrame when the gameState is received by the script
  */

front/src/Api/Events/HasPlayerMovedEvent.ts

@@ -1,19 +1,17 @@
 import * as tg from "generic-type-guard";
 
-
-
-export const isHasPlayerMovedEvent =
-    new tg.IsInterface().withProperties({
-        direction: tg.isElementOf('right', 'left', 'up', 'down'),
+export const isHasPlayerMovedEvent = new tg.IsInterface()
+    .withProperties({
+        direction: tg.isElementOf("right", "left", "up", "down"),
         moving: tg.isBoolean,
         x: tg.isNumber,
-        y: tg.isNumber
-    }).get();
+        y: tg.isNumber,
+    })
+    .get();
 
 /**
  * A message sent from the game to the iFrame to notify a movement from the current player.
  */
 export type HasPlayerMovedEvent = tg.GuardedType<typeof isHasPlayerMovedEvent>;
 
-
-export type HasPlayerMovedEventCallback = (event: HasPlayerMovedEvent) => void
+export type HasPlayerMovedEventCallback = (event: HasPlayerMovedEvent) => void;

front/src/Api/Events/IframeEvent.ts

@@ -1,73 +1,73 @@
-
-import type { GameStateEvent } from './GameStateEvent';
-import type { ButtonClickedEvent } from './ButtonClickedEvent';
-import type { ChatEvent } from './ChatEvent';
-import type { ClosePopupEvent } from './ClosePopupEvent';
-import type { EnterLeaveEvent } from './EnterLeaveEvent';
-import type { GoToPageEvent } from './GoToPageEvent';
-import type { LoadPageEvent } from './LoadPageEvent';
-import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
-import type { OpenPopupEvent } from './OpenPopupEvent';
-import type { OpenTabEvent } from './OpenTabEvent';
-import type { UserInputChatEvent } from './UserInputChatEvent';
+import type { GameStateEvent } from "./GameStateEvent";
+import type { ButtonClickedEvent } from "./ButtonClickedEvent";
+import type { ChatEvent } from "./ChatEvent";
+import type { ClosePopupEvent } from "./ClosePopupEvent";
+import type { EnterLeaveEvent } from "./EnterLeaveEvent";
+import type { GoToPageEvent } from "./GoToPageEvent";
+import type { LoadPageEvent } from "./LoadPageEvent";
+import type { OpenCoWebSiteEvent } from "./OpenCoWebSiteEvent";
+import type { OpenPopupEvent } from "./OpenPopupEvent";
+import type { OpenTabEvent } from "./OpenTabEvent";
+import type { UserInputChatEvent } from "./UserInputChatEvent";
 import type { DataLayerEvent } from "./DataLayerEvent";
-import type { LayerEvent } from './LayerEvent';
+import type { LayerEvent } from "./LayerEvent";
 import type { SetPropertyEvent } from "./setPropertyEvent";
 import type { LoadSoundEvent } from "./LoadSoundEvent";
 import type { PlaySoundEvent } from "./PlaySoundEvent";
 import type { MenuItemClickedEvent } from "./ui/MenuItemClickedEvent";
-import type { MenuItemRegisterEvent } from './ui/MenuItemRegisterEvent';
+import type { MenuItemRegisterEvent } from "./ui/MenuItemRegisterEvent";
 import type { HasPlayerMovedEvent } from "./HasPlayerMovedEvent";
-
+import type { SetTilesEvent } from "./SetTilesEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
-    data: T
+    data: T;
 }
 
+/**
+ * List event types sent from an iFrame to WorkAdventure
+ */
 export type IframeEventMap = {
-    //getState: GameStateEvent,
-    // updateTile: UpdateTileEvent
-    loadPage: LoadPageEvent
-    chat: ChatEvent,
-    openPopup: OpenPopupEvent
-    closePopup: ClosePopupEvent
-    openTab: OpenTabEvent
-    goToPage: GoToPageEvent
-    openCoWebSite: OpenCoWebSiteEvent
-    closeCoWebSite: null
-    disablePlayerControls: null
-    restorePlayerControls: null
-    displayBubble: null
-    removeBubble: null
-    onPlayerMove: undefined
-    showLayer: LayerEvent
-    hideLayer: LayerEvent
-    setProperty: SetPropertyEvent
-    getDataLayer: undefined
-    loadSound: LoadSoundEvent
-    playSound: PlaySoundEvent
-    stopSound: null,
-    getState: undefined,
-    registerMenuCommand: MenuItemRegisterEvent
-}
+    loadPage: LoadPageEvent;
+    chat: ChatEvent;
+    openPopup: OpenPopupEvent;
+    closePopup: ClosePopupEvent;
+    openTab: OpenTabEvent;
+    goToPage: GoToPageEvent;
+    openCoWebSite: OpenCoWebSiteEvent;
+    closeCoWebSite: null;
+    disablePlayerControls: null;
+    restorePlayerControls: null;
+    displayBubble: null;
+    removeBubble: null;
+    onPlayerMove: undefined;
+    showLayer: LayerEvent;
+    hideLayer: LayerEvent;
+    setProperty: SetPropertyEvent;
+    getDataLayer: undefined;
+    loadSound: LoadSoundEvent;
+    playSound: PlaySoundEvent;
+    stopSound: null;
+    getState: undefined;
+    registerMenuCommand: MenuItemRegisterEvent;
+    setTiles: SetTilesEvent;
+};
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;
     data: IframeEventMap[T];
 }
 
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isIframeEventWrapper = (event: any): event is IframeEvent<keyof IframeEventMap> => typeof event.type === 'string';
+export const isIframeEventWrapper = (event: any): event is IframeEvent<keyof IframeEventMap> =>
+    typeof event.type === "string";
 
 export interface IframeResponseEventMap {
-    userInputChat: UserInputChatEvent
-    enterEvent: EnterLeaveEvent
-    leaveEvent: EnterLeaveEvent
-    buttonClickedEvent: ButtonClickedEvent
-    gameState: GameStateEvent
-    hasPlayerMoved: HasPlayerMovedEvent
-    dataLayer: DataLayerEvent
-    menuItemClicked: MenuItemClickedEvent
+    userInputChat: UserInputChatEvent;
+    enterEvent: EnterLeaveEvent;
+    leaveEvent: EnterLeaveEvent;
+    buttonClickedEvent: ButtonClickedEvent;
+    hasPlayerMoved: HasPlayerMovedEvent;
+    dataLayer: DataLayerEvent;
+    menuItemClicked: MenuItemClickedEvent;
 }
 export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
     type: T;
@@ -75,4 +75,49 @@ export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isIframeResponseEventWrapper = (event: { type?: string }): event is IframeResponseEvent<keyof IframeResponseEventMap> => typeof event.type === 'string';
+export const isIframeResponseEventWrapper = (event: {
+    type?: string;
+}): event is IframeResponseEvent<keyof IframeResponseEventMap> => typeof event.type === "string";
+
+
+/**
+ * List event types sent from an iFrame to WorkAdventure that expect a unique answer from WorkAdventure along the type for the answer from WorkAdventure to the iFrame
+ */
+export type IframeQueryMap = {
+    getState: {
+        query: undefined,
+        answer: GameStateEvent
+    },
+}
+
+export interface IframeQuery<T extends keyof IframeQueryMap> {
+    type: T;
+    data: IframeQueryMap[T]['query'];
+}
+
+export interface IframeQueryWrapper<T extends keyof IframeQueryMap> {
+    id: number;
+    query: IframeQuery<T>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isIframeQuery = (event: any): event is IframeQuery<keyof IframeQueryMap> => typeof event.type === 'string';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isIframeQueryWrapper = (event: any): event is IframeQueryWrapper<keyof IframeQueryMap> => typeof event.id === 'number' && isIframeQuery(event.query);
+
+export interface IframeAnswerEvent<T extends keyof IframeQueryMap> {
+    id: number;
+    type: T;
+    data: IframeQueryMap[T]['answer'];
+}
+
+export const isIframeAnswerEvent = (event: { type?: string, id?: number }): event is IframeAnswerEvent<keyof IframeQueryMap> => typeof event.type === 'string' && typeof event.id === 'number';
+
+export interface IframeErrorAnswerEvent {
+    id: number;
+    type: keyof IframeQueryMap;
+    error: string;
+}
+
+export const isIframeErrorAnswerEvent = (event: { type?: string, id?: number, error?: string }): event is IframeErrorAnswerEvent => typeof event.type === 'string' && typeof event.id === 'number' && typeof event.error === 'string';

front/src/Api/Events/LayerEvent.ts

@@ -1,9 +1,10 @@
 import * as tg from "generic-type-guard";
 
-export const isLayerEvent =
-    new tg.IsInterface().withProperties({
+export const isLayerEvent = new tg.IsInterface()
+    .withProperties({
         name: tg.isString,
-    }).get();
+    })
+    .get();
 /**
  * A message sent from the iFrame to the game to show/hide a layer.
  */

front/src/Api/Events/LoadPageEvent.ts

@@ -1,13 +1,12 @@
 import * as tg from "generic-type-guard";
 
-
-
-export const isLoadPageEvent =
-    new tg.IsInterface().withProperties({
+export const isLoadPageEvent = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-    }).get();
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
  */
-export type LoadPageEvent = tg.GuardedType<typeof isLoadPageEvent>;
+export type LoadPageEvent = tg.GuardedType<typeof isLoadPageEvent>;

front/src/Api/Events/OpenCoWebSiteEvent.ts

@@ -1,11 +1,12 @@
 import * as tg from "generic-type-guard";
 
-
-
-export const isOpenCoWebsite =
-    new tg.IsInterface().withProperties({
+export const isOpenCoWebsite = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-    }).get();
+        allowApi: tg.isBoolean,
+        allowPolicy: tg.isString,
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.

front/src/Api/Events/SetTilesEvent.ts

@@ -0,0 +1,16 @@
+import * as tg from "generic-type-guard";
+
+export const isSetTilesEvent = tg.isArray(
+    new tg.IsInterface()
+        .withProperties({
+            x: tg.isNumber,
+            y: tg.isNumber,
+            tile: tg.isUnion(tg.isUnion(tg.isNumber, tg.isString), tg.isNull),
+            layer: tg.isString,
+        })
+        .get()
+);
+/**
+ * A message sent from the iFrame to the game to set one or many tiles.
+ */
+export type SetTilesEvent = tg.GuardedType<typeof isSetTilesEvent>;

front/src/Api/Events/setPropertyEvent.ts

@@ -1,12 +1,13 @@
 import * as tg from "generic-type-guard";
 
-export const isSetPropertyEvent =
-    new tg.IsInterface().withProperties({
+export const isSetPropertyEvent = new tg.IsInterface()
+    .withProperties({
         layerName: tg.isString,
         propertyName: tg.isString,
-        propertyValue: tg.isUnion(tg.isString, tg.isUnion(tg.isNumber, tg.isUnion(tg.isBoolean, tg.isUndefined)))
-    }).get();
+        propertyValue: tg.isUnion(tg.isString, tg.isUnion(tg.isNumber, tg.isUnion(tg.isBoolean, tg.isUndefined))),
+    })
+    .get();
 /**
  * A message sent from the iFrame to the game to change the value of the property of the layer
  */
-export type SetPropertyEvent = tg.GuardedType<typeof isSetPropertyEvent>;
+export type SetPropertyEvent = tg.GuardedType<typeof isSetPropertyEvent>;

front/src/Api/Events/ui/MenuItemClickedEvent.ts

@@ -1,12 +1,11 @@
 import * as tg from "generic-type-guard";
 
-export const isMenuItemClickedEvent =
-    new tg.IsInterface().withProperties({
-        menuItem: tg.isString
-    }).get();
+export const isMenuItemClickedEvent = new tg.IsInterface()
+    .withProperties({
+        menuItem: tg.isString,
+    })
+    .get();
 /**
  * A message sent from the game to the iFrame when a menu item is clicked.
  */
 export type MenuItemClickedEvent = tg.GuardedType<typeof isMenuItemClickedEvent>;
-
-

front/src/Api/Events/ui/MenuItemRegisterEvent.ts

@@ -1,25 +1,26 @@
 import * as tg from "generic-type-guard";
-import { Subject } from 'rxjs';
+import { Subject } from "rxjs";
 
-export const isMenuItemRegisterEvent =
-    new tg.IsInterface().withProperties({
-        menutItem: tg.isString
-    }).get();
+export const isMenuItemRegisterEvent = new tg.IsInterface()
+    .withProperties({
+        menutItem: tg.isString,
+    })
+    .get();
 /**
  * A message sent from the iFrame to the game to add a new menu item.
  */
 export type MenuItemRegisterEvent = tg.GuardedType<typeof isMenuItemRegisterEvent>;
 
-export const isMenuItemRegisterIframeEvent =
-    new tg.IsInterface().withProperties({
+export const isMenuItemRegisterIframeEvent = new tg.IsInterface()
+    .withProperties({
         type: tg.isSingletonString("registerMenuCommand"),
-        data: isMenuItemRegisterEvent
-    }).get();
-
+        data: isMenuItemRegisterEvent,
+    })
+    .get();
 
 const _registerMenuCommandStream: Subject<string> = new Subject();
 export const registerMenuCommandStream = _registerMenuCommandStream.asObservable();
 
 export function handleMenuItemRegistrationEvent(event: MenuItemRegisterEvent) {
-    _registerMenuCommandStream.next(event.menutItem)
-}
+    _registerMenuCommandStream.next(event.menutItem);
+}

front/src/Api/IframeListener.ts

@@ -1,42 +1,45 @@
-import {Subject} from "rxjs";
-import {ChatEvent, isChatEvent} from "./Events/ChatEvent";
-import {HtmlUtils} from "../WebRtc/HtmlUtils";
-import type {EnterLeaveEvent} from "./Events/EnterLeaveEvent";
-import {isOpenPopupEvent, OpenPopupEvent} from "./Events/OpenPopupEvent";
-import {isOpenTabEvent, OpenTabEvent} from "./Events/OpenTabEvent";
-import type {ButtonClickedEvent} from "./Events/ButtonClickedEvent";
-import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent";
-import {scriptUtils} from "./ScriptUtils";
-import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
-import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent";
+import { Subject } from "rxjs";
+import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
+import { HtmlUtils } from "../WebRtc/HtmlUtils";
+import type { EnterLeaveEvent } from "./Events/EnterLeaveEvent";
+import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent";
+import { isOpenTabEvent, OpenTabEvent } from "./Events/OpenTabEvent";
+import type { ButtonClickedEvent } from "./Events/ButtonClickedEvent";
+import { ClosePopupEvent, isClosePopupEvent } from "./Events/ClosePopupEvent";
+import { scriptUtils } from "./ScriptUtils";
+import { GoToPageEvent, isGoToPageEvent } from "./Events/GoToPageEvent";
+import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
 import {
+    IframeErrorAnswerEvent,
     IframeEvent,
-    IframeEventMap,
+    IframeEventMap, IframeQueryMap,
     IframeResponseEvent,
     IframeResponseEventMap,
     isIframeEventWrapper,
-    TypedMessageEvent
+    isIframeQueryWrapper,
+    TypedMessageEvent,
 } from "./Events/IframeEvent";
-import type {UserInputChatEvent} from "./Events/UserInputChatEvent";
-//import { isLoadPageEvent } from './Events/LoadPageEvent';
-import {isPlaySoundEvent, PlaySoundEvent} from "./Events/PlaySoundEvent";
-import {isStopSoundEvent, StopSoundEvent} from "./Events/StopSoundEvent";
-import {isLoadSoundEvent, LoadSoundEvent} from "./Events/LoadSoundEvent";
-import {isSetPropertyEvent, SetPropertyEvent} from "./Events/setPropertyEvent";
-import {isLayerEvent, LayerEvent} from "./Events/LayerEvent";
-import {isMenuItemRegisterEvent,} from "./Events/ui/MenuItemRegisterEvent";
-import type {DataLayerEvent} from "./Events/DataLayerEvent";
-import type {GameStateEvent} from "./Events/GameStateEvent";
-import type {HasPlayerMovedEvent} from "./Events/HasPlayerMovedEvent";
-import {isLoadPageEvent} from "./Events/LoadPageEvent";
-import {handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent} from "./Events/ui/MenuItemRegisterEvent";
+import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
+import { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
+import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
+import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
+import { isSetPropertyEvent, SetPropertyEvent } from "./Events/setPropertyEvent";
+import { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
+import { isMenuItemRegisterEvent } from "./Events/ui/MenuItemRegisterEvent";
+import type { DataLayerEvent } from "./Events/DataLayerEvent";
+import type { GameStateEvent } from "./Events/GameStateEvent";
+import type { HasPlayerMovedEvent } from "./Events/HasPlayerMovedEvent";
+import { isLoadPageEvent } from "./Events/LoadPageEvent";
+import { handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent } from "./Events/ui/MenuItemRegisterEvent";
+import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent";
+
+type AnswererCallback<T extends keyof IframeQueryMap> = (query: IframeQueryMap[T]['query']) => IframeQueryMap[T]['answer']|Promise<IframeQueryMap[T]['answer']>;
 
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
  */
 class IframeListener {
-
     private readonly _chatStream: Subject<ChatEvent> = new Subject();
     public readonly chatStream = this._chatStream.asObservable();
 
@@ -82,9 +85,6 @@ class IframeListener {
     private readonly _setPropertyStream: Subject<SetPropertyEvent> = new Subject();
     public readonly setPropertyStream = this._setPropertyStream.asObservable();
 
-    private readonly _gameStateStream: Subject<void> = new Subject();
-    public readonly gameStateStream = this._gameStateStream.asObservable();
-
     private readonly _dataLayerChangeStream: Subject<void> = new Subject();
     public readonly dataLayerChangeStream = this._dataLayerChangeStream.asObservable();
 
@@ -103,111 +103,155 @@ class IframeListener {
     private readonly _loadSoundStream: Subject<LoadSoundEvent> = new Subject();
     public readonly loadSoundStream = this._loadSoundStream.asObservable();
 
+    private readonly _setTilesStream: Subject<SetTilesEvent> = new Subject();
+    public readonly setTilesStream = this._setTilesStream.asObservable();
+
     private readonly iframes = new Set<HTMLIFrameElement>();
     private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
     private sendPlayerMove: boolean = false;
 
+    private answerers: {
+        [key in keyof IframeQueryMap]?: AnswererCallback<key>
+    } = {};
+
     init() {
-        window.addEventListener("message", (message: TypedMessageEvent<IframeEvent<keyof IframeEventMap>>) => {
-            // Do we trust the sender of this message?
-            // Let's only accept messages from the iframe that are allowed.
-            // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
-            let foundSrc: string | undefined;
+        window.addEventListener(
+            "message",
+            (message: TypedMessageEvent<IframeEvent<keyof IframeEventMap>>) => {
+                // Do we trust the sender of this message?
+                // Let's only accept messages from the iframe that are allowed.
+                // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
+                let foundSrc: string | undefined;
 
-            let iframe: HTMLIFrameElement;
-            for (iframe of this.iframes) {
-                if (iframe.contentWindow === message.source) {
-                    foundSrc = iframe.src;
-                    break;
-                }
-            }
-
-            if (foundSrc === undefined) {
-                return;
-            }
-
-            const payload = message.data;
-            if (isIframeEventWrapper(payload)) {
-                if (payload.type === 'showLayer' && isLayerEvent(payload.data)) {
-                    this._showLayerStream.next(payload.data);
-                } else if (payload.type === 'hideLayer' && isLayerEvent(payload.data)) {
-                    this._hideLayerStream.next(payload.data);
-                } else if (payload.type === 'setProperty' && isSetPropertyEvent(payload.data)) {
-                    this._setPropertyStream.next(payload.data);
-                } else if (payload.type === 'chat' && isChatEvent(payload.data)) {
-                    this._chatStream.next(payload.data);
-                } else if (payload.type === 'openPopup' && isOpenPopupEvent(payload.data)) {
-                    this._openPopupStream.next(payload.data);
-                } else if (payload.type === 'closePopup' && isClosePopupEvent(payload.data)) {
-                    this._closePopupStream.next(payload.data);
-                }
-                else if (payload.type === 'openTab' && isOpenTabEvent(payload.data)) {
-                    scriptUtils.openTab(payload.data.url);
-                }
-                else if (payload.type === 'goToPage' && isGoToPageEvent(payload.data)) {
-                    scriptUtils.goToPage(payload.data.url);
-                }
-                else if (payload.type === 'loadPage' && isLoadPageEvent(payload.data)) {
-                    this._loadPageStream.next(payload.data.url);
-                }
-                else if (payload.type === 'playSound' && isPlaySoundEvent(payload.data)) {
-                    this._playSoundStream.next(payload.data);
-                }
-                else if (payload.type === 'stopSound' && isStopSoundEvent(payload.data)) {
-                    this._stopSoundStream.next(payload.data);
-                }
-                else if (payload.type === 'loadSound' && isLoadSoundEvent(payload.data)) {
-                    this._loadSoundStream.next(payload.data);
-                }
-                else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
+                let iframe: HTMLIFrameElement | undefined;
+                for (iframe of this.iframes) {
+                    if (iframe.contentWindow === message.source) {
+                        foundSrc = iframe.src;
+                        break;
+                    }
                 }
 
-                else if (payload.type === 'closeCoWebSite') {
-                    scriptUtils.closeCoWebSite();
+                const payload = message.data;
+
+                if (foundSrc === undefined || iframe === undefined) {
+                    if (isIframeEventWrapper(payload)) {
+                        console.warn(
+                            "It seems an iFrame is trying to communicate with WorkAdventure but was not explicitly granted the permission to do so. " +
+                                "If you are looking to use the WorkAdventure Scripting API inside an iFrame, you should allow the " +
+                                'iFrame to communicate with WorkAdventure by using the "openWebsiteAllowApi" property in your map (or passing "true" as a second' +
+                                "parameter to WA.nav.openCoWebSite())"
+                        );
+                    }
+                    return;
                 }
 
-                else if (payload.type === 'disablePlayerControls') {
-                    this._disablePlayerControlStream.next();
-                }
-                else if (payload.type === 'restorePlayerControls') {
-                    this._enablePlayerControlStream.next();
-                } else if (payload.type === 'displayBubble') {
-                    this._displayBubbleStream.next();
-                } else if (payload.type === 'removeBubble') {
-                    this._removeBubbleStream.next();
-                } else if (payload.type == "getState") {
-                    this._gameStateStream.next();
-                } else if (payload.type == "onPlayerMove") {
-                    this.sendPlayerMove = true
-                } else if (payload.type == "getDataLayer") {
-                    this._dataLayerChangeStream.next();
-                } else if (isMenuItemRegisterIframeEvent(payload)) {
-                    const data = payload.data.menutItem;
-                    // @ts-ignore
-                    this.iframeCloseCallbacks.get(iframe).push(() => {
-                        this._unregisterMenuCommandStream.next(data);
-                    })
-                    handleMenuItemRegistrationEvent(payload.data)
-                }
-            }
-        }, false);
+                foundSrc = this.getBaseUrl(foundSrc, message.source);
 
+                if (isIframeQueryWrapper(payload)) {
+                    const queryId = payload.id;
+                    const query = payload.query;
+
+                    const answerer = this.answerers[query.type];
+                    if (answerer === undefined) {
+                        const errorMsg = 'The iFrame sent a message of type "'+query.type+'" but there is no service configured to answer these messages.';
+                        console.error(errorMsg);
+                        iframe.contentWindow?.postMessage({
+                            id: queryId,
+                            type: query.type,
+                            error: errorMsg
+                        } as IframeErrorAnswerEvent, '*');
+                        return;
+                    }
+
+                    Promise.resolve(answerer(query.data)).then((value) => {
+                        iframe?.contentWindow?.postMessage({
+                            id: queryId,
+                            type: query.type,
+                            data: value
+                        }, '*');
+                    }).catch(reason => {
+                        console.error('An error occurred while responding to an iFrame query.', reason);
+                        let reasonMsg: string;
+                        if (reason instanceof Error) {
+                            reasonMsg = reason.message;
+                        } else {
+                            reasonMsg = reason.toString();
+                        }
+
+                        iframe?.contentWindow?.postMessage({
+                            id: queryId,
+                            type: query.type,
+                            error: reasonMsg
+                        } as IframeErrorAnswerEvent, '*');
+                    });
+
+                } else if (isIframeEventWrapper(payload)) {
+                    if (payload.type === "showLayer" && isLayerEvent(payload.data)) {
+                            this._showLayerStream.next(payload.data);
+                        } else if (payload.type === "hideLayer" && isLayerEvent(payload.data)) {
+                            this._hideLayerStream.next(payload.data);
+                        } else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
+                            this._setPropertyStream.next(payload.data);
+                        } else if (payload.type === "chat" && isChatEvent(payload.data)) {
+                            this._chatStream.next(payload.data);
+                        } else if (payload.type === "openPopup" && isOpenPopupEvent(payload.data)) {
+                            this._openPopupStream.next(payload.data);
+                        } else if (payload.type === "closePopup" && isClosePopupEvent(payload.data)) {
+                            this._closePopupStream.next(payload.data);
+                        } else if (payload.type === "openTab" && isOpenTabEvent(payload.data)) {
+                            scriptUtils.openTab(payload.data.url);
+                        } else if (payload.type === "goToPage" && isGoToPageEvent(payload.data)) {
+                            scriptUtils.goToPage(payload.data.url);
+                        } else if (payload.type === "loadPage" && isLoadPageEvent(payload.data)) {
+                            this._loadPageStream.next(payload.data.url);
+                        } else if (payload.type === "playSound" && isPlaySoundEvent(payload.data)) {
+                            this._playSoundStream.next(payload.data);
+                        } else if (payload.type === "stopSound" && isStopSoundEvent(payload.data)) {
+                            this._stopSoundStream.next(payload.data);
+                        } else if (payload.type === "loadSound" && isLoadSoundEvent(payload.data)) {
+                            this._loadSoundStream.next(payload.data);
+                        } else if (payload.type === "openCoWebSite" && isOpenCoWebsite(payload.data)) {
+                            scriptUtils.openCoWebsite(
+                                payload.data.url,
+                                foundSrc,
+                                payload.data.allowApi,
+                                payload.data.allowPolicy
+                            );
+                        } else if (payload.type === "closeCoWebSite") {
+                            scriptUtils.closeCoWebSite();
+                        } else if (payload.type === "disablePlayerControls") {
+                            this._disablePlayerControlStream.next();
+                        } else if (payload.type === "restorePlayerControls") {
+                            this._enablePlayerControlStream.next();
+                        } else if (payload.type === "displayBubble") {
+                            this._displayBubbleStream.next();
+                        } else if (payload.type === "removeBubble") {
+                        this._removeBubbleStream.next();
+                        } else if (payload.type == "onPlayerMove") {
+                            this.sendPlayerMove = true;
+                        } else if (payload.type == "getDataLayer") {
+                            this._dataLayerChangeStream.next();
+                        } else if (isMenuItemRegisterIframeEvent(payload)) {
+                            const data = payload.data.menutItem;
+                            // @ts-ignore
+                            this.iframeCloseCallbacks.get(iframe).push(() => {
+                                this._unregisterMenuCommandStream.next(data);
+                            });
+                            handleMenuItemRegistrationEvent(payload.data);
+                        } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
+                            this._setTilesStream.next(payload.data);
+                        }
+                    }
+            },
+            false
+        );
     }
 
     sendDataLayerEvent(dataLayerEvent: DataLayerEvent) {
         this.postMessage({
-            'type' : 'dataLayer',
-            'data' : dataLayerEvent
-        })
-    }
-
-
-    sendGameStateEvent(gameStateEvent: GameStateEvent) {
-        this.postMessage({
-            'type': 'gameState',
-            'data': gameStateEvent
+            type: "dataLayer",
+            data: dataLayerEvent,
         });
     }
 
@@ -220,25 +264,25 @@ class IframeListener {
     }
 
     unregisterIframe(iframe: HTMLIFrameElement): void {
-        this.iframeCloseCallbacks.get(iframe)?.forEach(callback => {
+        this.iframeCloseCallbacks.get(iframe)?.forEach((callback) => {
             callback();
         });
         this.iframes.delete(iframe);
     }
 
     registerScript(scriptUrl: string): void {
-        console.log('Loading map related script at ', scriptUrl)
+        console.log("Loading map related script at ", scriptUrl);
 
-        if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+        if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
             // Using external iframe mode (
-            const iframe = document.createElement('iframe');
+            const iframe = document.createElement("iframe");
             iframe.id = IframeListener.getIFrameId(scriptUrl);
-            iframe.style.display = 'none';
-            iframe.src = '/iframe.html?script=' + encodeURIComponent(scriptUrl);
+            iframe.style.display = "none";
+            iframe.src = "/iframe.html?script=" + encodeURIComponent(scriptUrl);
 
             // We are putting a sandbox on this script because it will run in the same domain as the main website.
-            iframe.sandbox.add('allow-scripts');
-            iframe.sandbox.add('allow-top-navigation-by-user-activation');
+            iframe.sandbox.add("allow-scripts");
+            iframe.sandbox.add("allow-top-navigation-by-user-activation");
 
             document.body.prepend(iframe);
 
@@ -246,36 +290,50 @@ class IframeListener {
             this.registerIframe(iframe);
         } else {
             // production code
-            const iframe = document.createElement('iframe');
+            const iframe = document.createElement("iframe");
             iframe.id = IframeListener.getIFrameId(scriptUrl);
-            iframe.style.display = 'none';
+            iframe.style.display = "none";
 
             // We are putting a sandbox on this script because it will run in the same domain as the main website.
-            iframe.sandbox.add('allow-scripts');
-            iframe.sandbox.add('allow-top-navigation-by-user-activation');
+            iframe.sandbox.add("allow-scripts");
+            iframe.sandbox.add("allow-top-navigation-by-user-activation");
 
             //iframe.src = "data:text/html;charset=utf-8," + escape(html);
-            iframe.srcdoc = '<!doctype html>\n' +
-                '\n' +
+            iframe.srcdoc =
+                "<!doctype html>\n" +
+                "\n" +
                 '<html lang="en">\n' +
-                '<head>\n' +
-                '<script src="' + window.location.protocol + '//' + window.location.host + '/iframe_api.js" ></script>\n' +
-                '<script src="' + scriptUrl + '" ></script>\n' +
-                '<title></title>\n' +
-                '</head>\n' +
-                '</html>\n';
+                "<head>\n" +
+                '<script src="' +
+                window.location.protocol +
+                "//" +
+                window.location.host +
+                '/iframe_api.js" ></script>\n' +
+                '<script src="' +
+                scriptUrl +
+                '" ></script>\n' +
+                "<title></title>\n" +
+                "</head>\n" +
+                "</html>\n";
 
             document.body.prepend(iframe);
 
             this.scripts.set(scriptUrl, iframe);
             this.registerIframe(iframe);
         }
+    }
 
-
+    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);
+        return "script" + btoa(scriptUrl);
     }
 
     unregisterScript(scriptUrl: string): void {
@@ -292,47 +350,47 @@ class IframeListener {
 
     sendUserInputChat(message: string) {
         this.postMessage({
-            'type': 'userInputChat',
-            'data': {
-                'message': message,
-            } as UserInputChatEvent
+            type: "userInputChat",
+            data: {
+                message: message,
+            } as UserInputChatEvent,
         });
     }
 
     sendEnterEvent(name: string) {
         this.postMessage({
-            'type': 'enterEvent',
-            'data': {
-                "name": name
-            } as EnterLeaveEvent
+            type: "enterEvent",
+            data: {
+                name: name,
+            } as EnterLeaveEvent,
         });
     }
 
     sendLeaveEvent(name: string) {
         this.postMessage({
-            'type': 'leaveEvent',
-            'data': {
-                "name": name
-            } as EnterLeaveEvent
+            type: "leaveEvent",
+            data: {
+                name: name,
+            } as EnterLeaveEvent,
         });
     }
 
     hasPlayerMoved(event: HasPlayerMovedEvent) {
         if (this.sendPlayerMove) {
             this.postMessage({
-                'type': 'hasPlayerMoved',
-                'data': event
+                type: "hasPlayerMoved",
+                data: event,
             });
         }
     }
 
     sendButtonClickedEvent(popupId: number, buttonId: number): void {
         this.postMessage({
-            'type': 'buttonClickedEvent',
-            'data': {
+            type: "buttonClickedEvent",
+            data: {
                 popupId,
-                buttonId
-            } as ButtonClickedEvent
+                buttonId,
+            } as ButtonClickedEvent,
         });
     }
 
@@ -341,10 +399,25 @@ class IframeListener {
      */
     public postMessage(message: IframeResponseEvent<keyof IframeResponseEventMap>) {
         for (const iframe of this.iframes) {
-            iframe.contentWindow?.postMessage(message, '*');
+            iframe.contentWindow?.postMessage(message, "*");
         }
     }
 
+    /**
+     * Registers a callback that can be used to respond to some query (as defined in the IframeQueryMap type).
+     *
+     * Important! There can be only one "answerer" so registering a new one will unregister the old one.
+     *
+     * @param key The "type" of the query we are answering
+     * @param callback
+     */
+    public registerAnswerer<T extends keyof IframeQueryMap>(key: T, callback: (query: IframeQueryMap[T]['query']) => IframeQueryMap[T]['answer']|Promise<IframeQueryMap[T]['answer']> ): void {
+        this.answerers[key] = callback;
+    }
+
+    public unregisterAnswerer(key: keyof IframeQueryMap): void {
+        delete this.answerers[key];
+    }
 }
 
 export const iframeListener = new IframeListener();

front/src/Api/ScriptUtils.ts

@@ -1,21 +1,19 @@
-import {coWebsiteManager} from "../WebRtc/CoWebsiteManager";
+import { coWebsiteManager } from "../WebRtc/CoWebsiteManager";
 
 class ScriptUtils {
-
-    public openTab(url : string){
+    public openTab(url: string) {
         window.open(url);
     }
 
-    public goToPage(url : string){
-         window.location.href = url;
-
+    public goToPage(url: string) {
+        window.location.href = url;
     }
 
-    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(){
+    public closeCoWebSite() {
         coWebsiteManager.closeCoWebsite();
     }
 }

front/src/Api/iframe/IframeApiContribution.ts

@@ -1,9 +1,40 @@
 import type * as tg from "generic-type-guard";
-import type { IframeEvent, IframeEventMap, IframeResponseEventMap } from '../Events/IframeEvent';
+import type {
+    IframeEvent,
+    IframeEventMap, IframeQuery,
+    IframeQueryMap,
+    IframeResponseEventMap
+} from '../Events/IframeEvent';
+import type {IframeQueryWrapper} from "../Events/IframeEvent";
 
 export function sendToWorkadventure(content: IframeEvent<keyof IframeEventMap>) {
     window.parent.postMessage(content, "*")
 }
+
+let queryNumber = 0;
+
+export const answerPromises = new Map<number, {
+    resolve: (value: (IframeQueryMap[keyof IframeQueryMap]['answer'] | PromiseLike<IframeQueryMap[keyof IframeQueryMap]['answer']>)) => void,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    reject: (reason?: any) => void
+}>();
+
+export function queryWorkadventure<T extends keyof IframeQueryMap>(content: IframeQuery<T>): Promise<IframeQueryMap[T]['answer']> {
+    return new Promise<IframeQueryMap[T]['answer']>((resolve, reject) => {
+        window.parent.postMessage({
+            id: queryNumber,
+            query: content
+        } as IframeQueryWrapper<T>, "*");
+
+        answerPromises.set(queryNumber, {
+            resolve,
+            reject
+        });
+
+        queryNumber++;
+    });
+}
+
 type GuardedType<Guard extends tg.TypeGuard<unknown>> = Guard extends tg.TypeGuard<infer T> ? T : never
 
 export interface IframeCallback<Key extends keyof IframeResponseEventMap, T = IframeResponseEventMap[Key], Guard = tg.TypeGuard<T>> {

front/src/Api/iframe/Ui/MenuItem.ts

@@ -1,11 +1,11 @@
-import type { MenuItemClickedEvent } from '../../Events/ui/MenuItemClickedEvent';
-import { iframeListener } from '../../IframeListener';
+import type { MenuItemClickedEvent } from "../../Events/ui/MenuItemClickedEvent";
+import { iframeListener } from "../../IframeListener";
 
 export function sendMenuClickedEvent(menuItem: string) {
     iframeListener.postMessage({
-        'type': 'menuItemClicked',
-        'data': {
+        type: "menuItemClicked",
+        data: {
             menuItem: menuItem,
-        } as MenuItemClickedEvent
+        } as MenuItemClickedEvent,
     });
-}
+}

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

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

front/src/Api/iframe/nav.ts

@@ -1,57 +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): void {
+    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
         sendToWorkadventure({
-            "type": 'openCoWebSite',
-            "data": {
-                url
-            }
+            type: "openCoWebSite",
+            data: {
+                url,
+                allowApi,
+                allowPolicy,
+            },
         });
     }
 
     closeCoWebSite(): void {
         sendToWorkadventure({
-            "type": 'closeCoWebSite',
-            data: null
+            type: "closeCoWebSite",
+            data: null,
         });
     }
 }
 
-
 export default new WorkadventureNavigationCommands();

front/src/Api/iframe/player.ts

@@ -1,29 +1,41 @@
-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 { getGameState } from "./room";
+import { isHasPlayerMovedEvent } from "../Events/HasPlayerMovedEvent";
+
+interface User {
+    id: string | undefined;
+    nickName: string | null;
+    tags: string[];
+}
 
 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,
+        });
+    }
+    getCurrentUser(): Promise<User> {
+        return getGameState().then((gameState) => {
+            return { id: gameState.uuid, nickName: gameState.nickname, tags: gameState.tags };
+        });
     }
 }
 
-export default new WorkadventurePlayerCommands();
+export default new WorkadventurePlayerCommands();

front/src/Api/iframe/room.ts

@@ -1,87 +1,74 @@
 import { Subject } from "rxjs";
-import { EnterLeaveEvent, isEnterLeaveEvent } from '../Events/EnterLeaveEvent';
-import {IframeApiContribution, sendToWorkadventure} from './IframeApiContribution';
+
+import { isDataLayerEvent } from "../Events/DataLayerEvent";
+import { EnterLeaveEvent, isEnterLeaveEvent } from "../Events/EnterLeaveEvent";
+import { isGameStateEvent } from "../Events/GameStateEvent";
+
+import { IframeApiContribution, queryWorkadventure, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
-import type {LayerEvent} from "../Events/LayerEvent";
-import type {SetPropertyEvent} from "../Events/setPropertyEvent";
-import type {GameStateEvent} from "../Events/GameStateEvent";
-import type {ITiledMap} from "../../Phaser/Map/ITiledMap";
-import type {DataLayerEvent} from "../Events/DataLayerEvent";
-import {isGameStateEvent} from "../Events/GameStateEvent";
-import {isDataLayerEvent} from "../Events/DataLayerEvent";
+
+import type { ITiledMap } from "../../Phaser/Map/ITiledMap";
+import type { DataLayerEvent } from "../Events/DataLayerEvent";
+import type { GameStateEvent } from "../Events/GameStateEvent";
 
 const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
 const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
 const dataLayerResolver = new Subject<DataLayerEvent>();
-const stateResolvers = new Subject<GameStateEvent>();
 
-let immutableData: GameStateEvent;
+let immutableDataPromise: Promise<GameStateEvent> | undefined = undefined;
 
 interface Room {
-    id: string,
-    mapUrl: string,
-    map: ITiledMap,
-    startLayer: string | null
+    id: string;
+    mapUrl: string;
+    map: ITiledMap;
+    startLayer: string | null;
 }
 
-interface User {
-    id: string | undefined,
-    nickName: string | null,
-    tags: string[]
+interface TileDescriptor {
+    x: number;
+    y: number;
+    tile: number | string | null;
+    layer: string;
 }
 
-
-function getGameState(): Promise<GameStateEvent> {
-    if (immutableData) {
-        return Promise.resolve(immutableData);
-    }
-    else {
-        return new Promise<GameStateEvent>((resolver, thrower) => {
-            stateResolvers.subscribe(resolver);
-            sendToWorkadventure({type: "getState", data: null});
-        })
+export function getGameState(): Promise<GameStateEvent> {
+    if (immutableDataPromise === undefined) {
+        immutableDataPromise = queryWorkadventure({ type: "getState", data: undefined });
     }
+    return immutableDataPromise;
 }
 
 function getDataLayer(): Promise<DataLayerEvent> {
     return new Promise<DataLayerEvent>((resolver, thrower) => {
         dataLayerResolver.subscribe(resolver);
-        sendToWorkadventure({type: "getDataLayer", data: null})
-    })
+        sendToWorkadventure({ type: "getDataLayer", data: null });
+    });
 }
 
-class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomCommands> {
+export class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomCommands> {
     callbacks = [
         apiCallback({
             callback: (payloadData: EnterLeaveEvent) => {
                 enterStreams.get(payloadData.name)?.next();
             },
             type: "enterEvent",
-            typeChecker: isEnterLeaveEvent
+            typeChecker: isEnterLeaveEvent,
         }),
         apiCallback({
             type: "leaveEvent",
             typeChecker: isEnterLeaveEvent,
             callback: (payloadData) => {
                 leaveStreams.get(payloadData.name)?.next();
-            }
-        }),
-        apiCallback({
-            type: "gameState",
-            typeChecker: isGameStateEvent,
-            callback: (payloadData) => {
-                stateResolvers.next(payloadData);
-            }
+            },
         }),
         apiCallback({
             type: "dataLayer",
             typeChecker: isDataLayerEvent,
             callback: (payloadData) => {
                 dataLayerResolver.next(payloadData);
-            }
+            },
         }),
-    ]
-
+    ];
 
     onEnterZone(name: string, callback: () => void): void {
         let subject = enterStreams.get(name);
@@ -90,7 +77,6 @@ class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomC
             enterStreams.set(name, subject);
         }
         subject.subscribe(callback);
-
     }
     onLeaveZone(name: string, callback: () => void): void {
         let subject = leaveStreams.get(name);
@@ -101,35 +87,39 @@ class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomC
         subject.subscribe(callback);
     }
     showLayer(layerName: string): void {
-        sendToWorkadventure({type: 'showLayer', data: {'name': layerName}});
+        sendToWorkadventure({ type: "showLayer", data: { name: layerName } });
     }
     hideLayer(layerName: string): void {
-        sendToWorkadventure({type: 'hideLayer', data: {'name': layerName}});
+        sendToWorkadventure({ type: "hideLayer", data: { name: layerName } });
     }
     setProperty(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {
         sendToWorkadventure({
-            type: 'setProperty',
+            type: "setProperty",
             data: {
-                'layerName': layerName,
-                'propertyName': propertyName,
-                'propertyValue': propertyValue,
-            }
-        })
+                layerName: layerName,
+                propertyName: propertyName,
+                propertyValue: propertyValue,
+            },
+        });
     }
     getCurrentRoom(): Promise<Room> {
         return getGameState().then((gameState) => {
-          return getDataLayer().then((mapJson) => {
-              return {id: gameState.roomId, map: mapJson.data as ITiledMap, mapUrl: gameState.mapUrl, startLayer: gameState.startLayerName};
-          })
-        })
+            return getDataLayer().then((mapJson) => {
+                return {
+                    id: gameState.roomId,
+                    map: mapJson.data as ITiledMap,
+                    mapUrl: gameState.mapUrl,
+                    startLayer: gameState.startLayerName,
+                };
+            });
+        });
     }
-    getCurrentUser(): Promise<User> {
-        return getGameState().then((gameState) => {
-            return {id: gameState.uuid, nickName: gameState.nickname, tags: gameState.tags};
-        })
+    setTiles(tiles: TileDescriptor[]) {
+        sendToWorkadventure({
+            type: "setTiles",
+            data: tiles,
+        });
     }
-
 }
 
-
 export default new WorkadventureRoomCommands();

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

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 });
     }
 }
 

front/src/Components/App.svelte

@@ -10,12 +10,14 @@
     import {errorStore} from "../Stores/ErrorStore";
     import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
     import LoginScene from "./Login/LoginScene.svelte";
+    import Chat from "./Chat/Chat.svelte";
     import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
     import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
     import VisitCard from "./VisitCard/VisitCard.svelte";
     import {requestVisitCardsStore} from "../Stores/GameStore";
 
     import type {Game} from "../Phaser/Game/Game";
+    import {chatVisibilityStore} from "../Stores/ChatStore";
     import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import AudioPlaying from "./UI/AudioPlaying.svelte";
@@ -61,14 +63,6 @@
         <AudioPlaying url={$soundPlayingStore} />
     </div>
     {/if}
-
-    <!--
-    {#if $menuIconVisible}
-        <div>
-            <MenuIcon  />
-        </div>
-    {/if}
-    -->
     {#if $gameOverlayVisibilityStore}
         <div>
             <VideoOverlay></VideoOverlay>
@@ -94,4 +88,7 @@
         <ErrorDialog></ErrorDialog>
     </div>
     {/if}
+    {#if $chatVisibilityStore}
+        <Chat></Chat>
+    {/if}
 </div>

front/src/Components/Chat/Chat.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { fly } from 'svelte/transition';
+    import { chatMessagesStore, chatVisibilityStore } from "../../Stores/ChatStore";
+    import ChatMessageForm from './ChatMessageForm.svelte';
+    import ChatElement from './ChatElement.svelte';
+    import { afterUpdate, beforeUpdate } from "svelte";
+    
+    let listDom: HTMLElement;
+    let autoscroll: boolean;
+
+    beforeUpdate(() => {
+        autoscroll = listDom && (listDom.offsetHeight + listDom.scrollTop) > (listDom.scrollHeight - 20);
+    });
+
+    afterUpdate(() => {
+        if (autoscroll) listDom.scrollTo(0, listDom.scrollHeight);
+    });
+
+    function closeChat() {
+        chatVisibilityStore.set(false);
+    }
+    function onKeyDown(e:KeyboardEvent) {
+        if (e.key === 'Escape') {
+            closeChat();
+        }
+    }
+</script>
+
+<svelte:window on:keydown={onKeyDown}/>
+
+
+<aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
+    <p class="close-icon" on:click={closeChat}>&times</p>
+    <section class="messagesList" bind:this={listDom}>
+        <ul>
+            <li><p class="system-text">Here is your chat history: </p></li>
+        {#each $chatMessagesStore as message, i}
+            <li><ChatElement message={message} line={i}></ChatElement></li>
+        {/each} 
+        </ul>
+    </section>
+    <section class="messageForm">
+        <ChatMessageForm></ChatMessageForm>
+    </section>
+</aside>
+
+<style lang="scss">
+    p.close-icon {
+      position: absolute;
+      padding: 4px;
+      right: 12px;
+      font-size: 30px;
+      line-height: 25px;
+      cursor: pointer;
+    }
+    
+    p.system-text {
+      border-radius: 8px;
+      margin-bottom: 10px;
+      padding:6px;
+      overflow-wrap: break-word;
+      max-width: 100%;
+      background: gray;
+      display: inline-block;
+    }
+
+    aside.chatWindow {
+      z-index:100;
+      pointer-events: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100vh;
+      width:30vw;
+      min-width: 350px;
+      background: rgb(5, 31, 51, 0.9);
+      color: whitesmoke;
+      display: flex;
+      flex-direction: column;
+
+      padding: 10px;
+      
+      border-bottom-right-radius: 16px;
+      border-top-right-radius: 16px;
+      
+      .messagesList {
+        margin-top: 35px;
+        overflow-y: auto;
+        flex: auto;
+
+        ul {
+          list-style-type: none;
+          padding-left: 0;
+        }
+      }
+      .messageForm {
+        flex: 0 70px;
+        padding-top: 15px;
+      }
+    }
+</style>

front/src/Components/Chat/ChatElement.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import {ChatMessageTypes} from "../../Stores/ChatStore";
+    import type {ChatMessage} from "../../Stores/ChatStore";
+    import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+    import ChatPlayerName from './ChatPlayerName.svelte';
+    import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
+
+    export let message: ChatMessage;
+    export let line: number;
+    
+    $: author = message.author as PlayerInterface;
+    $: targets = message.targets || [];
+    $: texts = message.text || [];
+    
+    function urlifyText(text: string): string {
+        return HtmlUtils.urlify(text)
+    }
+    function renderDate(date: Date) {
+        return date.toLocaleTimeString(navigator.language, {
+            hour: '2-digit',
+            minute:'2-digit'
+        });
+    }
+    function isLastIteration(index: number) {
+        return targets.length -1 === index;
+    }
+</script>
+
+<div class="chatElement">
+    <div class="messagePart">
+        {#if message.type === ChatMessageTypes.userIncoming}
+            &gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} entered <span class="date">({renderDate(message.date)})</span>
+        {:else if message.type === ChatMessageTypes.userOutcoming}
+            &lt;&lt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} left <span class="date">({renderDate(message.date)})</span>
+        {:else if message.type === ChatMessageTypes.me}
+            <h4>Me: <span class="date">({renderDate(message.date)})</span></h4>
+            {#each texts as text}
+                <div><p class="my-text">{@html urlifyText(text)}</p></div>
+            {/each}
+        {:else}
+            <h4><ChatPlayerName player={author} line={line}></ChatPlayerName>: <span class="date">({renderDate(message.date)})</span></h4>
+            {#each texts as text}
+                <div><p class="other-text">{@html urlifyText(text)}</p></div>
+            {/each}
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+    h4, p {
+        font-family: Lato;
+    }
+    div.chatElement {
+      display: flex;
+      margin-bottom: 20px;
+      
+      .messagePart {
+        flex-grow:1;
+        max-width: 100%;
+
+        span.date {
+          font-size: 80%;
+          color: gray;
+        }
+
+        div > p {
+          border-radius: 8px;
+          margin-bottom: 10px;
+          padding:6px;
+          overflow-wrap: break-word;
+          max-width: 100%;
+          display: inline-block;
+          &.other-text {
+            background: gray; 
+          }
+          
+          &.my-text {
+            background: #6489ff;
+          }
+        }
+      }
+    }
+</style>

front/src/Components/Chat/ChatMessageForm.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import {chatMessagesStore, chatInputFocusStore} from "../../Stores/ChatStore";
+
+    let newMessageText = '';
+    
+    function onFocus() {
+        chatInputFocusStore.set(true);
+    }
+    function onBlur() {
+        chatInputFocusStore.set(false);
+    }
+
+    function saveMessage() {
+        if (!newMessageText) return;
+        chatMessagesStore.addPersonnalMessage(newMessageText);
+        newMessageText = '';
+    }
+</script>
+
+<form on:submit|preventDefault={saveMessage}>
+    <input type="text" bind:value={newMessageText} placeholder="Enter your message..." on:focus={onFocus} on:blur={onBlur} >
+    <button type="submit">
+        <img src="/static/images/send.png" alt="Send" width="20">
+    </button>
+</form>
+
+<style lang="scss">
+    form {
+        display: flex;
+        padding-left: 4px;
+        padding-right: 4px;
+      
+        input {
+          flex: auto;
+          background-color: #254560;
+          color: white;
+          border-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
+          border: none;
+          font-size: 22px;
+          font-family: Lato;
+          padding-left: 6px;
+          min-width: 0; //Needed so that the input doesn't overflow the container in firefox
+          outline: none;
+        }
+        
+        button {
+          background-color: #254560;
+          border-bottom-right-radius: 4px;
+          border-top-right-radius: 4px;
+          border: none;
+          border-left: solid white 1px;
+          font-size: 16px;
+        }
+    }
+</style>

front/src/Components/Chat/ChatPlayerName.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
+    import {chatSubMenuVisbilityStore} from "../../Stores/ChatStore";
+    import {onDestroy, onMount} from "svelte";
+    import type {Unsubscriber} from "svelte/store";
+    import ChatSubMenu from "./ChatSubMenu.svelte";
+
+    export let player: PlayerInterface;
+    export let line: number;
+
+    let isSubMenuOpen: boolean;
+    let chatSubMenuVisivilytUnsubcribe: Unsubscriber;
+
+    function openSubMenu() {
+        chatSubMenuVisbilityStore.openSubMenu(player.name, line);
+    }
+
+    onMount(() => {
+        chatSubMenuVisivilytUnsubcribe = chatSubMenuVisbilityStore.subscribe((newValue) => {
+            isSubMenuOpen = (newValue === player.name + line);
+        })
+    })
+
+    onDestroy(() => {
+        chatSubMenuVisivilytUnsubcribe();
+    })
+
+</script>
+
+<span class="subMenu">
+    <span class="chatPlayerName" style="color: {player.color || 'white'}" on:click={openSubMenu}>
+    {player.name}
+    </span>
+    {#if isSubMenuOpen}
+        <ChatSubMenu player={player}/>
+    {/if}
+</span>
+
+
+<style lang="scss">
+  span.subMenu {
+    display: inline-block;
+  }
+  span.chatPlayerName {
+    margin-left: 3px;
+  }
+  .chatPlayerName:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+</style>

front/src/Components/Chat/ChatSubMenu.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type {PlayerInterface} from "../../Phaser/Game/PlayerInterface";
+    import {requestVisitCardsStore} from "../../Stores/GameStore";
+
+    export let player: PlayerInterface;
+
+
+    function openVisitCard() {
+        if (player.visitCardUrl) {
+            requestVisitCardsStore.set(player.visitCardUrl);
+        }
+    }
+</script>
+
+<ul class="selectMenu" style="border-top: {player.color || 'whitesmoke'} 5px solid">
+    <li><button class="text-btn" disabled={!player.visitCardUrl} on:click={openVisitCard}>Visit card</button></li>
+    <li><button class="text-btn" disabled>Add friend</button></li>
+</ul>
+
+
+<style lang="scss">
+  ul.selectMenu {
+    background-color: whitesmoke;
+    position: absolute;
+    padding: 5px;
+    border-radius: 4px;
+    list-style-type: none;
+
+    li {
+      text-align: center;
+    }
+  }
+</style>

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>

front/src/Components/Video/VideoMediaBox.svelte

@@ -37,9 +37,7 @@
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
-    {#if $streamStore }
     <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
-    {/if}
     <img src={blockSignImg} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>

front/src/Components/Video/utils.ts

@@ -1,4 +1,7 @@
-export function getColorByString(str: string) : string|null {
+import type { UserSimplePeerInterface } from "../../WebRtc/SimplePeer";
+import { STUN_SERVER, TURN_PASSWORD, TURN_SERVER, TURN_USER } from "../../Enum/EnvironmentVariable";
+
+export function getColorByString(str: string): string | null {
     let hash = 0;
     if (str.length === 0) {
         return null;
@@ -7,21 +10,37 @@ export function getColorByString(str: string) : string|null {
         hash = str.charCodeAt(i) + ((hash << 5) - hash);
         hash = hash & hash;
     }
-    let color = '#';
+    let color = "#";
     for (let i = 0; i < 3; i++) {
         const value = (hash >> (i * 8)) & 255;
-        color += ('00' + value.toString(16)).substr(-2);
+        color += ("00" + value.toString(16)).substr(-2);
     }
     return color;
 }
 
-export function srcObject(node: HTMLVideoElement, stream: MediaStream) {
+export function srcObject(node: HTMLVideoElement, stream: MediaStream | null) {
     node.srcObject = stream;
     return {
         update(newStream: MediaStream) {
             if (node.srcObject != newStream) {
-                node.srcObject = newStream
+                node.srcObject = newStream;
             }
-        }
-    }
+        },
+    };
+}
+
+export function getIceServersConfig(user: UserSimplePeerInterface): RTCIceServer[] {
+    const config: RTCIceServer[] = [
+        {
+            urls: STUN_SERVER.split(","),
+        },
+    ];
+    if (TURN_SERVER !== "") {
+        config.push({
+            urls: TURN_SERVER.split(","),
+            username: user.webRtcUser || TURN_USER,
+            credential: user.webRtcPassword || TURN_PASSWORD,
+        });
+    }
+    return config;
 }

front/src/Components/VisitCard/VisitCard.svelte

@@ -45,8 +45,9 @@
 
   .visitCard {
     pointer-events: all;
-    margin-left: auto;
-    margin-right: auto;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
     margin-top: 200px;
     max-width: 80vw;
 

front/src/Connexion/ConnectionManager.ts

@@ -38,11 +38,9 @@ class ConnectionManager {
             this.localUser = new LocalUser(data.userUuid, data.authToken, data.textures);
             localUserStore.saveUser(this.localUser);
 
-            const organizationSlug = data.organizationSlug;
-            const worldSlug = data.worldSlug;
-            const roomSlug = data.roomSlug;
+            const roomUrl = data.roomUrl;
 
-            const room = new Room('/@/'+organizationSlug+'/'+worldSlug+'/'+roomSlug + window.location.search + window.location.hash);
+            const room = await Room.createRoom(new URL(window.location.protocol + '//' + window.location.host + roomUrl + window.location.search + window.location.hash));
             urlManager.pushRoomIdToUrl(room);
             return Promise.resolve(room);
         } else if (connexionType === GameConnexionTypes.organization || connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
@@ -66,22 +64,21 @@ class ConnectionManager {
                 throw "Error to store local user data";
             }
 
-            let roomId: string;
+            let roomPath: string;
             if (connexionType === GameConnexionTypes.empty) {
-                roomId = START_ROOM_URL;
+                roomPath = window.location.protocol + '//' + window.location.host + START_ROOM_URL;
             } else {
-                roomId = window.location.pathname + window.location.search + window.location.hash;
+                roomPath = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search + window.location.hash;
             }
 
             //get detail map for anonymous login and set texture in local storage
-            const room = new Room(roomId);
-            const mapDetail = await room.getMapDetail();
-            if(mapDetail.textures != undefined && mapDetail.textures.length > 0) {
+            const room = await Room.createRoom(new URL(roomPath));
+            if(room.textures != undefined && room.textures.length > 0) {
                 //check if texture was changed
                 if(localUser.textures.length === 0){
-                    localUser.textures = mapDetail.textures;
+                    localUser.textures = room.textures;
                 }else{
-                    mapDetail.textures.forEach((newTexture) => {
+                    room.textures.forEach((newTexture) => {
                         const alreadyExistTexture = localUser?.textures.find((c) => newTexture.id === c.id);
                         if(localUser?.textures.findIndex((c) => newTexture.id === c.id) !== -1){
                             return;
@@ -114,9 +111,9 @@ class ConnectionManager {
         this.localUser = new LocalUser('', 'test', []);
     }
 
-    public connectToRoomSocket(roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface, companion: string|null): Promise<OnConnectInterface> {
+    public connectToRoomSocket(roomUrl: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface, companion: string|null): Promise<OnConnectInterface> {
         return new Promise<OnConnectInterface>((resolve, reject) => {
-            const connection = new RoomConnection(this.localUser.jwtToken, roomId, name, characterLayers, position, viewport, companion);
+            const connection = new RoomConnection(this.localUser.jwtToken, roomUrl, name, characterLayers, position, viewport, companion);
             connection.onConnectError((error: object) => {
                 console.log('An error occurred while connecting to socket server. Retrying');
                 reject(error);
@@ -137,7 +134,7 @@ class ConnectionManager {
                 this.reconnectingTimeout = setTimeout(() => {
                     //todo: allow a way to break recursion?
                     //todo: find a way to avoid recursive function. Otherwise, the call stack will grow indefinitely.
-                    this.connectToRoomSocket(roomId, name, characterLayers, position, viewport, companion).then((connection) => resolve(connection));
+                    this.connectToRoomSocket(roomUrl, name, characterLayers, position, viewport, companion).then((connection) => resolve(connection));
                 }, 4000 + Math.floor(Math.random() * 2000) );
             });
         });

front/src/Connexion/ConnexionModels.ts

@@ -1,8 +1,8 @@
-import type {SignalData} from "simple-peer";
-import type {RoomConnection} from "./RoomConnection";
-import type {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures";
+import type { SignalData } from "simple-peer";
+import type { RoomConnection } from "./RoomConnection";
+import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
 
-export enum EventMessage{
+export enum EventMessage {
     CONNECT = "connect",
     WEBRTC_SIGNAL = "webrtc-signal",
     WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
@@ -17,7 +17,7 @@ export enum EventMessage{
     GROUP_CREATE_UPDATE = "group-create-update",
     GROUP_DELETE = "group-delete",
     SET_PLAYER_DETAILS = "set-player-details", // Send the name and character to the server (on connect), receive back the id.
-    ITEM_EVENT = 'item-event',
+    ITEM_EVENT = "item-event",
 
     CONNECT_ERROR = "connect_error",
     CONNECTING_ERROR = "connecting_error",
@@ -36,7 +36,7 @@ export enum EventMessage{
 export interface PointInterface {
     x: number;
     y: number;
-    direction : string;
+    direction: string;
     moving: boolean;
 }
 
@@ -45,8 +45,9 @@ export interface MessageUserPositionInterface {
     name: string;
     characterLayers: BodyResourceDescriptionInterface[];
     position: PointInterface;
-    visitCardUrl: string|null;
-    companion: string|null;
+    visitCardUrl: string | null;
+    companion: string | null;
+    userUuid: string;
 }
 
 export interface MessageUserMovedInterface {
@@ -60,58 +61,59 @@ export interface MessageUserJoined {
     characterLayers: BodyResourceDescriptionInterface[];
     position: PointInterface;
     visitCardUrl: string | null;
-    companion: string|null;
+    companion: string | null;
+    userUuid: string;
 }
 
 export interface PositionInterface {
-    x: number,
-    y: number
+    x: number;
+    y: number;
 }
 
 export interface GroupCreatedUpdatedMessageInterface {
-    position: PositionInterface,
-    groupId: number,
-    groupSize: number
+    position: PositionInterface;
+    groupId: number;
+    groupSize: number;
 }
 
 export interface WebRtcDisconnectMessageInterface {
-    userId: number
+    userId: number;
 }
 
 export interface WebRtcSignalReceivedMessageInterface {
-    userId: number,
-    signal: SignalData,
-    webRtcUser: string | undefined,
-    webRtcPassword: string | undefined
+    userId: number;
+    signal: SignalData;
+    webRtcUser: string | undefined;
+    webRtcPassword: string | undefined;
 }
 
 export interface ViewportInterface {
-    left: number,
-    top: number,
-    right: number,
-    bottom: number,
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
 }
 
 export interface ItemEventMessageInterface {
-    itemId: number,
-    event: string,
-    state: unknown,
-    parameters: unknown
+    itemId: number;
+    event: string;
+    state: unknown;
+    parameters: unknown;
 }
 
 export interface RoomJoinedMessageInterface {
     //users: MessageUserPositionInterface[],
     //groups: GroupCreatedUpdatedMessageInterface[],
-    items: { [itemId: number] : unknown }
+    items: { [itemId: number]: unknown };
 }
 
 export interface PlayGlobalMessageInterface {
-    id: string
-    type: string
-    message: string
+    id: string;
+    type: string;
+    message: string;
 }
 
 export interface OnConnectInterface {
-    connection: RoomConnection,
-    room: RoomJoinedMessageInterface
+    connection: RoomConnection;
+    room: RoomJoinedMessageInterface;
 }

front/src/Connexion/Room.ts

@@ -1,90 +1,105 @@
 import Axios from "axios";
-import {PUSHER_URL} from "../Enum/EnvironmentVariable";
-import type {CharacterTexture} from "./LocalUser";
+import { PUSHER_URL } from "../Enum/EnvironmentVariable";
+import type { CharacterTexture } from "./LocalUser";
 
-export class MapDetail{
-    constructor(public readonly mapUrl: string, public readonly textures : CharacterTexture[]|undefined) {
-    }
+export class MapDetail {
+    constructor(public readonly mapUrl: string, public readonly textures: CharacterTexture[] | undefined) {}
+}
+
+export interface RoomRedirect {
+    redirectUrl: string;
 }
 
 export class Room {
     public readonly id: string;
     public readonly isPublic: boolean;
-    private mapUrl: string|undefined;
-    private textures: CharacterTexture[]|undefined;
-    private instance: string|undefined;
-    private _search: URLSearchParams;
+    private _mapUrl: string | undefined;
+    private _textures: CharacterTexture[] | undefined;
+    private instance: string | undefined;
+    private readonly _search: URLSearchParams;
 
-    constructor(id: string) {
-        const url = new URL(id, 'https://example.com');
+    private constructor(private roomUrl: URL) {
+        this.id = roomUrl.pathname;
 
-        this.id = url.pathname;
-
-        if (this.id.startsWith('/')) {
+        if (this.id.startsWith("/")) {
             this.id = this.id.substr(1);
         }
-        if (this.id.startsWith('_/')) {
+        if (this.id.startsWith("_/")) {
             this.isPublic = true;
-        } else if (this.id.startsWith('@/')) {
+        } else if (this.id.startsWith("@/")) {
             this.isPublic = false;
         } else {
-            throw new Error('Invalid room ID');
+            throw new Error("Invalid room ID");
         }
 
-        this._search = new URLSearchParams(url.search);
+        this._search = new URLSearchParams(roomUrl.search);
     }
 
-    public static getIdFromIdentifier(identifier: string, baseUrl: string, currentInstance: string): {roomId: string, hash: string} {
-        let roomId = '';
-        let hash = '';
-        if (!identifier.startsWith('/_/') && !identifier.startsWith('/@/')) { //relative file link
-            //Relative identifier can be deep enough to rewrite the base domain, so we cannot use the variable 'baseUrl' as the actual base url for the URL objects.
-            //We instead use 'workadventure' as a dummy base value.
-            const baseUrlObject = new URL(baseUrl);
-            const absoluteExitSceneUrl = new URL(identifier, 'http://workadventure/_/'+currentInstance+'/'+baseUrlObject.hostname+baseUrlObject.pathname);
-            roomId = absoluteExitSceneUrl.pathname; //in case of a relative url, we need to create a public roomId
-            roomId = roomId.substring(1); //remove the leading slash
-            hash = absoluteExitSceneUrl.hash;
-            hash = hash.substring(1); //remove the leading diese
-        } else { //absolute room Id
-            const parts = identifier.split('#');
-            roomId = parts[0];
-            roomId = roomId.substring(1); //remove the leading slash
-            if (parts.length > 1) {
-                hash = parts[1]
+    /**
+     * Creates a "Room" object representing the room.
+     * This method will follow room redirects if necessary, so the instance returned is a "real" room.
+     */
+    public static async createRoom(roomUrl: URL): Promise<Room> {
+        let redirectCount = 0;
+        while (redirectCount < 32) {
+            const room = new Room(roomUrl);
+            const result = await room.getMapDetail();
+            if (result instanceof MapDetail) {
+                return room;
             }
+            redirectCount++;
+            roomUrl = new URL(result.redirectUrl);
         }
-        return {roomId, hash}
+        throw new Error("Room resolving seems stuck in a redirect loop after 32 redirect attempts");
     }
 
-    public async getMapDetail(): Promise<MapDetail> {
-        return new Promise<MapDetail>((resolve, reject) => {
-            if (this.mapUrl !== undefined && this.textures != undefined) {
-                resolve(new MapDetail(this.mapUrl, this.textures));
-                return;
-            }
+    public static getRoomPathFromExitUrl(exitUrl: string, currentRoomUrl: string): URL {
+        const url = new URL(exitUrl, currentRoomUrl);
+        return url;
+    }
 
-            if (this.isPublic) {
-                const match = /_\/[^/]+\/(.+)/.exec(this.id);
-                if (!match) throw new Error('Could not extract url from "'+this.id+'"');
-                this.mapUrl = window.location.protocol+'//'+match[1];
-                resolve(new MapDetail(this.mapUrl, this.textures));
-                return;
-            } else {
-                // We have a private ID, we need to query the map URL from the server.
-                const urlParts = this.parsePrivateUrl(this.id);
+    /**
+     * @deprecated USage of exitSceneUrl is deprecated and therefore, this method is deprecated too.
+     */
+    public static getRoomPathFromExitSceneUrl(
+        exitSceneUrl: string,
+        currentRoomUrl: string,
+        currentMapUrl: string
+    ): URL {
+        const absoluteExitSceneUrl = new URL(exitSceneUrl, currentMapUrl);
+        const baseUrl = new URL(currentRoomUrl);
 
-                Axios.get(`${PUSHER_URL}/map`, {
-                    params: urlParts
-                }).then(({data}) => {
-                    console.log('Map ', this.id, ' resolves to URL ', data.mapUrl);
-                    resolve(data);
-                    return;
-                }).catch((reason) => {
-                    reject(reason);
-                });
-            }
+        const currentRoom = new Room(baseUrl);
+        let instance: string = "global";
+        if (currentRoom.isPublic) {
+            instance = currentRoom.instance as string;
+        }
+
+        baseUrl.pathname = "/_/" + instance + "/" + absoluteExitSceneUrl.host + absoluteExitSceneUrl.pathname;
+        if (absoluteExitSceneUrl.hash) {
+            baseUrl.hash = absoluteExitSceneUrl.hash;
+        }
+
+        return baseUrl;
+    }
+
+    private async getMapDetail(): Promise<MapDetail | RoomRedirect> {
+        const result = await Axios.get(`${PUSHER_URL}/map`, {
+            params: {
+                playUri: this.roomUrl.toString(),
+            },
         });
+
+        const data = result.data;
+        if (data.redirectUrl) {
+            return {
+                redirectUrl: data.redirectUrl as string,
+            };
+        }
+        console.log("Map ", this.id, " resolves to URL ", data.mapUrl);
+        this._mapUrl = data.mapUrl;
+        this._textures = data.textures;
+        return new MapDetail(data.mapUrl, data.textures);
     }
 
     /**
@@ -99,37 +114,39 @@ export class Room {
 
         if (this.isPublic) {
             const match = /_\/([^/]+)\/.+/.exec(this.id);
-            if (!match) throw new Error('Could not extract instance from "'+this.id+'"');
+            if (!match) throw new Error('Could not extract instance from "' + this.id + '"');
             this.instance = match[1];
             return this.instance;
         } else {
             const match = /@\/([^/]+)\/([^/]+)\/.+/.exec(this.id);
-            if (!match) throw new Error('Could not extract instance from "'+this.id+'"');
-            this.instance = match[1]+'/'+match[2];
+            if (!match) throw new Error('Could not extract instance from "' + this.id + '"');
+            this.instance = match[1] + "/" + match[2];
             return this.instance;
         }
     }
 
-    private parsePrivateUrl(url: string): { organizationSlug: string, worldSlug: string, roomSlug?: string } {
+    /**
+     * @deprecated
+     */
+    private parsePrivateUrl(url: string): { organizationSlug: string; worldSlug: string; roomSlug?: string } {
         const regex = /@\/([^/]+)\/([^/]+)(?:\/([^/]*))?/gm;
         const match = regex.exec(url);
         if (!match) {
-            throw new Error('Invalid URL '+url);
+            throw new Error("Invalid URL " + url);
         }
-        const results: { organizationSlug: string, worldSlug: string, roomSlug?: string } = {
+        const results: { organizationSlug: string; worldSlug: string; roomSlug?: string } = {
             organizationSlug: match[1],
             worldSlug: match[2],
-        }
+        };
         if (match[3] !== undefined) {
             results.roomSlug = match[3];
         }
         return results;
     }
 
-    public isDisconnected(): boolean
-    {
-        const alone = this._search.get('alone');
-        if (alone && alone !== '0' && alone.toLowerCase() !== 'false') {
+    public isDisconnected(): boolean {
+        const alone = this._search.get("alone");
+        if (alone && alone !== "0" && alone.toLowerCase() !== "false") {
             return true;
         }
         return false;
@@ -138,4 +155,33 @@ export class Room {
     public get search(): URLSearchParams {
         return this._search;
     }
+
+    /**
+     * 2 rooms are equal if they share the same path (but not necessarily the same hash)
+     * @param room
+     */
+    public isEqual(room: Room): boolean {
+        return room.key === this.key;
+    }
+
+    /**
+     * A key representing this room
+     */
+    public get key(): string {
+        const newUrl = new URL(this.roomUrl.toString());
+        newUrl.search = "";
+        newUrl.hash = "";
+        return newUrl.toString();
+    }
+
+    get textures(): CharacterTexture[] | undefined {
+        return this._textures;
+    }
+
+    get mapUrl(): string {
+        if (!this._mapUrl) {
+            throw new Error("Map URL not fetched yet");
+        }
+        return this._mapUrl;
+    }
 }

front/src/Connexion/RoomConnection.ts

@@ -11,7 +11,8 @@ import {
     RoomJoinedMessage,
     ServerToClientMessage,
     SetPlayerDetailsMessage,
-    SilentMessage, StopGlobalMessage,
+    SilentMessage,
+    StopGlobalMessage,
     UserJoinedMessage,
     UserLeftMessage,
     UserMovedMessage,
@@ -31,17 +32,22 @@ import {
     EmotePromptMessage,
     SendUserMessage,
     BanUserMessage,
-} from "../Messages/generated/messages_pb"
+} from "../Messages/generated/messages_pb";
 
 import type { UserSimplePeerInterface } from "../WebRtc/SimplePeer";
 import Direction = PositionMessage.Direction;
 import { ProtobufClientUtils } from "../Network/ProtobufClientUtils";
 import {
     EventMessage,
-    GroupCreatedUpdatedMessageInterface, ItemEventMessageInterface,
-    MessageUserJoined, OnConnectInterface, PlayGlobalMessageInterface, PositionInterface,
+    GroupCreatedUpdatedMessageInterface,
+    ItemEventMessageInterface,
+    MessageUserJoined,
+    OnConnectInterface,
+    PlayGlobalMessageInterface,
+    PositionInterface,
     RoomJoinedMessageInterface,
-    ViewportInterface, WebRtcDisconnectMessageInterface,
+    ViewportInterface,
+    WebRtcDisconnectMessageInterface,
     WebRtcSignalReceivedMessageInterface,
 } from "./ConnexionModels";
 import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
@@ -61,36 +67,45 @@ export class RoomConnection implements RoomConnection {
     private closed: boolean = false;
     private tags: string[] = [];
 
-    public static setWebsocketFactory(websocketFactory: (url: string) => any): void { // eslint-disable-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public static setWebsocketFactory(websocketFactory: (url: string) => any): void {
         RoomConnection.websocketFactory = websocketFactory;
     }
 
     /**
      *
      * @param token A JWT token containing the UUID of the user
-     * @param roomId The ID of the room in the form "_/[instance]/[map_url]" or "@/[org]/[event]/[map]"
+     * @param roomUrl The URL of the room in the form "https://example.com/_/[instance]/[map_url]" or "https://example.com/@/[org]/[event]/[map]"
      */
-    public constructor(token: string | null, roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface, companion: string | null) {
+    public constructor(
+        token: string | null,
+        roomUrl: string,
+        name: string,
+        characterLayers: string[],
+        position: PositionInterface,
+        viewport: ViewportInterface,
+        companion: string | null
+    ) {
         let url = new URL(PUSHER_URL, window.location.toString()).toString();
-        url = url.replace('http://', 'ws://').replace('https://', 'wss://');
-        if (!url.endsWith('/')) {
-            url += '/';
+        url = url.replace("http://", "ws://").replace("https://", "wss://");
+        if (!url.endsWith("/")) {
+            url += "/";
         }
-        url += 'room';
-        url += '?roomId=' + (roomId ? encodeURIComponent(roomId) : '');
-        url += '&token=' + (token ? encodeURIComponent(token) : '');
-        url += '&name=' + encodeURIComponent(name);
+        url += "room";
+        url += "?roomId=" + encodeURIComponent(roomUrl);
+        url += "&token=" + (token ? encodeURIComponent(token) : "");
+        url += "&name=" + encodeURIComponent(name);
         for (const layer of characterLayers) {
-            url += '&characterLayers=' + encodeURIComponent(layer);
+            url += "&characterLayers=" + encodeURIComponent(layer);
         }
-        url += '&x=' + Math.floor(position.x);
-        url += '&y=' + Math.floor(position.y);
-        url += '&top=' + Math.floor(viewport.top);
-        url += '&bottom=' + Math.floor(viewport.bottom);
-        url += '&left=' + Math.floor(viewport.left);
-        url += '&right=' + Math.floor(viewport.right);
-        if (typeof companion === 'string') {
-            url += '&companion=' + encodeURIComponent(companion);
+        url += "&x=" + Math.floor(position.x);
+        url += "&y=" + Math.floor(position.y);
+        url += "&top=" + Math.floor(viewport.top);
+        url += "&bottom=" + Math.floor(viewport.bottom);
+        url += "&left=" + Math.floor(viewport.left);
+        url += "&right=" + Math.floor(viewport.right);
+        if (typeof companion === "string") {
+            url += "&companion=" + encodeURIComponent(companion);
         }
 
         if (RoomConnection.websocketFactory) {
@@ -99,7 +114,7 @@ export class RoomConnection implements RoomConnection {
             this.socket = new WebSocket(url);
         }
 
-        this.socket.binaryType = 'arraybuffer';
+        this.socket.binaryType = "arraybuffer";
 
         let interval: ReturnType<typeof setInterval> | undefined = undefined;
 
@@ -109,7 +124,7 @@ export class RoomConnection implements RoomConnection {
             interval = setInterval(() => this.socket.send(pingMessage.serializeBinary().buffer), manualPingDelay);
         };
 
-        this.socket.addEventListener('close', (event) => {
+        this.socket.addEventListener("close", (event) => {
             if (interval) {
                 clearInterval(interval);
             }
@@ -126,7 +141,7 @@ export class RoomConnection implements RoomConnection {
 
             if (message.hasBatchmessage()) {
                 for (const subMessage of (message.getBatchmessage() as BatchMessage).getPayloadList()) {
-                    let event: string|null = null;
+                    let event: string | null = null;
                     let payload;
                     if (subMessage.hasUsermovedmessage()) {
                         event = EventMessage.USER_MOVED;
@@ -150,7 +165,7 @@ export class RoomConnection implements RoomConnection {
                         const emoteMessage = subMessage.getEmoteeventmessage() as EmoteEventMessage;
                         emoteEventStream.fire(emoteMessage.getActoruserid(), emoteMessage.getEmote());
                     } else {
-                        throw new Error('Unexpected batch message type');
+                        throw new Error("Unexpected batch message type");
                     }
 
                     if (event) {
@@ -171,8 +186,8 @@ export class RoomConnection implements RoomConnection {
                 this.dispatch(EventMessage.CONNECT, {
                     connection: this,
                     room: {
-                        items
-                    } as RoomJoinedMessageInterface
+                        items,
+                    } as RoomJoinedMessageInterface,
                 });
             } else if (message.hasWorldfullmessage()) {
                 worldFullMessageStream.onMessage();
@@ -183,7 +198,10 @@ export class RoomConnection implements RoomConnection {
             } else if (message.hasWebrtcsignaltoclientmessage()) {
                 this.dispatch(EventMessage.WEBRTC_SIGNAL, message.getWebrtcsignaltoclientmessage());
             } else if (message.hasWebrtcscreensharingsignaltoclientmessage()) {
-                this.dispatch(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, message.getWebrtcscreensharingsignaltoclientmessage());
+                this.dispatch(
+                    EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL,
+                    message.getWebrtcscreensharingsignaltoclientmessage()
+                );
             } else if (message.hasWebrtcstartmessage()) {
                 this.dispatch(EventMessage.WEBRTC_START, message.getWebrtcstartmessage());
             } else if (message.hasWebrtcdisconnectmessage()) {
@@ -205,10 +223,9 @@ export class RoomConnection implements RoomConnection {
             } else if (message.hasRefreshroommessage()) {
                 //todo: implement a way to notify the user the room was refreshed.
             } else {
-                throw new Error('Unknown message received');
+                throw new Error("Unknown message received");
             }
-
-        }
+        };
     }
 
     private dispatch(event: string, payload: unknown): void {
@@ -243,16 +260,16 @@ export class RoomConnection implements RoomConnection {
         positionMessage.setY(Math.floor(y));
         let directionEnum: Direction;
         switch (direction) {
-            case 'up':
+            case "up":
                 directionEnum = Direction.UP;
                 break;
-            case 'down':
+            case "down":
                 directionEnum = Direction.DOWN;
                 break;
-            case 'left':
+            case "left":
                 directionEnum = Direction.LEFT;
                 break;
-            case 'right':
+            case "right":
                 directionEnum = Direction.RIGHT;
                 break;
             default:
@@ -327,15 +344,17 @@ export class RoomConnection implements RoomConnection {
     private toMessageUserJoined(message: UserJoinedMessage): MessageUserJoined {
         const position = message.getPosition();
         if (position === undefined) {
-            throw new Error('Invalid JOIN_ROOM message');
+            throw new Error("Invalid JOIN_ROOM message");
         }
 
-        const characterLayers = message.getCharacterlayersList().map((characterLayer: CharacterLayerMessage): BodyResourceDescriptionInterface => {
-            return {
-                name: characterLayer.getName(),
-                img: characterLayer.getUrl()
-            }
-        })
+        const characterLayers = message
+            .getCharacterlayersList()
+            .map((characterLayer: CharacterLayerMessage): BodyResourceDescriptionInterface => {
+                return {
+                    name: characterLayer.getName(),
+                    img: characterLayer.getUrl(),
+                };
+            });
 
         const companion = message.getCompanion();
 
@@ -345,8 +364,9 @@ export class RoomConnection implements RoomConnection {
             characterLayers,
             visitCardUrl: message.getVisitcardurl(),
             position: ProtobufClientUtils.toPointInterface(position),
-            companion: companion ? companion.getName() : null
-        }
+            companion: companion ? companion.getName() : null,
+            userUuid: message.getUseruuid(),
+        };
     }
 
     public onUserMoved(callback: (message: UserMovedMessage) => void): void {
@@ -372,7 +392,9 @@ export class RoomConnection implements RoomConnection {
         });
     }
 
-    public onGroupUpdatedOrCreated(callback: (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => void): void {
+    public onGroupUpdatedOrCreated(
+        callback: (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => void
+    ): void {
         this.onMessage(EventMessage.GROUP_CREATE_UPDATE, (message: GroupUpdateMessage) => {
             callback(this.toGroupCreatedUpdatedMessage(message));
         });
@@ -381,14 +403,14 @@ export class RoomConnection implements RoomConnection {
     private toGroupCreatedUpdatedMessage(message: GroupUpdateMessage): GroupCreatedUpdatedMessageInterface {
         const position = message.getPosition();
         if (position === undefined) {
-            throw new Error('Missing position in GROUP_CREATE_UPDATE');
+            throw new Error("Missing position in GROUP_CREATE_UPDATE");
         }
 
         return {
             groupId: message.getGroupid(),
             position: position.toObject(),
-            groupSize: message.getGroupsize()
-        }
+            groupSize: message.getGroupsize(),
+        };
     }
 
     public onGroupDeleted(callback: (groupId: number) => void): void {
@@ -404,7 +426,7 @@ export class RoomConnection implements RoomConnection {
     }
 
     public onConnectError(callback: (error: Event) => void): void {
-        this.socket.addEventListener('error', callback)
+        this.socket.addEventListener("error", callback);
     }
 
     public onConnect(callback: (roomConnection: OnConnectInterface) => void): void {
@@ -445,7 +467,6 @@ export class RoomConnection implements RoomConnection {
         this.onMessage(EventMessage.WEBRTC_START, (message: WebRtcStartMessage) => {
             callback({
                 userId: message.getUserid(),
-                name: message.getName(),
                 initiator: message.getInitiator(),
                 webRtcUser: message.getWebrtcusername() ?? undefined,
                 webRtcPassword: message.getWebrtcpassword() ?? undefined,
@@ -476,11 +497,11 @@ export class RoomConnection implements RoomConnection {
     }
 
     public onServerDisconnected(callback: () => void): void {
-        this.socket.addEventListener('close', (event) => {
+        this.socket.addEventListener("close", (event) => {
             if (this.closed === true || connectionManager.unloading) {
                 return;
             }
-            console.log('Socket closed with code ' + event.code + ". Reason: " + event.reason);
+            console.log("Socket closed with code " + event.code + ". Reason: " + event.reason);
             if (event.code === 1000) {
                 // Normal closure case
                 return;
@@ -490,14 +511,14 @@ export class RoomConnection implements RoomConnection {
     }
 
     public getUserId(): number {
-        if (this.userId === null) throw 'UserId cannot be null!'
+        if (this.userId === null) throw "UserId cannot be null!";
         return this.userId;
     }
 
     disconnectMessage(callback: (message: WebRtcDisconnectMessageInterface) => void): void {
         this.onMessage(EventMessage.WEBRTC_DISCONNECT, (message: WebRtcDisconnectMessage) => {
             callback({
-                userId: message.getUserid()
+                userId: message.getUserid(),
             });
         });
     }
@@ -521,21 +542,22 @@ export class RoomConnection implements RoomConnection {
                 itemId: message.getItemid(),
                 event: message.getEvent(),
                 parameters: JSON.parse(message.getParametersjson()),
-                state: JSON.parse(message.getStatejson())
+                state: JSON.parse(message.getStatejson()),
             });
         });
     }
 
     public uploadAudio(file: FormData) {
-        return Axios.post(`${UPLOADER_URL}/upload-audio-message`, file).then((res: { data: {} }) => {
-            return res.data;
-        }).catch((err) => {
-            console.error(err);
-            throw err;
-        });
+        return Axios.post(`${UPLOADER_URL}/upload-audio-message`, file)
+            .then((res: { data: {} }) => {
+                return res.data;
+            })
+            .catch((err) => {
+                console.error(err);
+                throw err;
+            });
     }
 
-
     public receivePlayGlobalMessage(callback: (message: PlayGlobalMessageInterface) => void) {
         return this.onMessage(EventMessage.PLAY_GLOBAL_MESSAGE, (message: PlayGlobalMessage) => {
             callback({
@@ -570,9 +592,9 @@ export class RoomConnection implements RoomConnection {
         this.socket.send(clientToServerMessage.serializeBinary().buffer);
     }
 
-    public emitReportPlayerMessage(reportedUserId: number, reportComment: string): void {
+    public emitReportPlayerMessage(reportedUserUuid: string, reportComment: string): void {
         const reportPlayerMessage = new ReportPlayerMessage();
-        reportPlayerMessage.setReporteduserid(reportedUserId);
+        reportPlayerMessage.setReporteduseruuid(reportedUserUuid);
         reportPlayerMessage.setReportcomment(reportComment);
 
         const clientToServerMessage = new ClientToServerMessage();
@@ -605,12 +627,12 @@ export class RoomConnection implements RoomConnection {
     }
 
     public isAdmin(): boolean {
-        return this.hasTag('admin');
+        return this.hasTag("admin");
     }
 
     public emitEmoteEvent(emoteName: string): void {
         const emoteMessage = new EmotePromptMessage();
-        emoteMessage.setEmote(emoteName)
+        emoteMessage.setEmote(emoteName);
 
         const clientToServerMessage = new ClientToServerMessage();
         clientToServerMessage.setEmotepromptmessage(emoteMessage);
@@ -618,7 +640,7 @@ export class RoomConnection implements RoomConnection {
         this.socket.send(clientToServerMessage.serializeBinary().buffer);
     }
 
-    public getAllTags() : string[] {
+    public getAllTags(): string[] {
         return this.tags;
     }
 }

front/src/Phaser/Components/OpenChatIcon.ts

@@ -1,7 +1,7 @@
-import {discussionManager} from "../../WebRtc/DiscussionManager";
-import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
+import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
+import { chatVisibilityStore } from "../../Stores/ChatStore";
 
-export const openChatIconName = 'openChatIcon';
+export const openChatIconName = "openChatIcon";
 export class OpenChatIcon extends Phaser.GameObjects.Image {
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y, openChatIconName, 3);
@@ -9,9 +9,9 @@ export class OpenChatIcon extends Phaser.GameObjects.Image {
         this.setScrollFactor(0, 0);
         this.setOrigin(0, 1);
         this.setInteractive();
-        this.setVisible(false);
+        //this.setVisible(false);
         this.setDepth(DEPTH_INGAME_TEXT_INDEX);
 
-        this.on("pointerup", () => discussionManager.showDiscussionPart());
+        this.on("pointerup", () => chatVisibilityStore.set(true));
     }
-}
+}

front/src/Phaser/Components/TextUtils.ts

@@ -44,7 +44,6 @@ export class TextUtils {
             options.align = object.text.halign;
         }
 
-        console.warn(options);
         const textElem = scene.add.text(object.x, object.y, object.text.text, options);
         textElem.setAngle(object.rotation);
     }

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -1,90 +1,123 @@
 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) => {
         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);
     });
-}
+};

front/src/Phaser/Game/AddPlayerInterface.ts

@@ -1,11 +1,6 @@
 import type {PointInterface} from "../../Connexion/ConnexionModels";
-import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
+import type {PlayerInterface} from "./PlayerInterface";
 
-export interface AddPlayerInterface {
-    userId: number;
-    name: string;
-    characterLayers: BodyResourceDescriptionInterface[];
+export interface AddPlayerInterface extends PlayerInterface {
     position: PointInterface;
-    visitCardUrl: string|null;
-    companion: string|null;
 }

front/src/Phaser/Game/DirtyScene.ts

@@ -1,17 +1,17 @@
-import {ResizableScene} from "../Login/ResizableScene";
+import { ResizableScene } from "../Login/ResizableScene";
 import GameObject = Phaser.GameObjects.GameObject;
 import Events = Phaser.Scenes.Events;
 import AnimationEvents = Phaser.Animations.Events;
 import StructEvents = Phaser.Structs.Events;
-import {SKIP_RENDER_OPTIMIZATIONS} from "../../Enum/EnvironmentVariable";
+import { SKIP_RENDER_OPTIMIZATIONS } from "../../Enum/EnvironmentVariable";
 
 /**
  * A scene that can track its dirty/pristine state.
  */
 export abstract class DirtyScene extends ResizableScene {
     private isAlreadyTracking: boolean = false;
-    protected dirty:boolean = true;
-    private objectListChanged:boolean = true;
+    protected dirty: boolean = true;
+    private objectListChanged: boolean = true;
     private physicsEnabled: boolean = false;
 
     /**
@@ -59,7 +59,6 @@ export abstract class DirtyScene extends ResizableScene {
                 this.physicsEnabled = false;
             }
         });
-
     }
 
     private trackAnimation(): void {
@@ -71,7 +70,7 @@ export abstract class DirtyScene extends ResizableScene {
     }
 
     public markDirty(): void {
-        this.events.once(Phaser.Scenes.Events.POST_UPDATE, () => this.dirty = true);
+        this.events.once(Phaser.Scenes.Events.POST_UPDATE, () => (this.dirty = true));
     }
 
     public onResize(): void {

front/src/Phaser/Game/GameManager.ts

@@ -1,26 +1,24 @@
-import {GameScene} from "./GameScene";
-import {connectionManager} from "../../Connexion/ConnectionManager";
-import type {Room} from "../../Connexion/Room";
-import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
-import {LoginSceneName} from "../Login/LoginScene";
-import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
-import {EnableCameraSceneName} from "../Login/EnableCameraScene";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {get} from "svelte/store";
-import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore";
-import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
-
-
+import { GameScene } from "./GameScene";
+import { connectionManager } from "../../Connexion/ConnectionManager";
+import type { Room } from "../../Connexion/Room";
+import { MenuScene, MenuSceneName } from "../Menu/MenuScene";
+import { LoginSceneName } from "../Login/LoginScene";
+import { SelectCharacterSceneName } from "../Login/SelectCharacterScene";
+import { EnableCameraSceneName } from "../Login/EnableCameraScene";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import { get } from "svelte/store";
+import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
+import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
 
 /**
  * This class should be responsible for any scene starting/stopping
  */
 export class GameManager {
-    private playerName: string|null;
-    private characterLayers: string[]|null;
-    private companion: string|null;
-    private startRoom!:Room;
-    currentGameSceneName: string|null = null;
+    private playerName: string | null;
+    private characterLayers: string[] | null;
+    private companion: string | null;
+    private startRoom!: Room;
+    currentGameSceneName: string | null = null;
 
     constructor() {
         this.playerName = localUserStore.getName();
@@ -30,7 +28,7 @@ export class GameManager {
 
     public async init(scenePlugin: Phaser.Scenes.ScenePlugin): Promise<string> {
         this.startRoom = await connectionManager.initGameConnexion();
-        await this.loadMap(this.startRoom, scenePlugin);
+        this.loadMap(this.startRoom, scenePlugin);
 
         if (!this.playerName) {
             return LoginSceneName;
@@ -51,43 +49,44 @@ export class GameManager {
         localUserStore.setCharacterLayers(layers);
     }
 
-    getPlayerName(): string|null {
+    getPlayerName(): string | null {
         return this.playerName;
     }
 
     getCharacterLayers(): string[] {
         if (!this.characterLayers) {
-            throw 'characterLayers are not set';
+            throw "characterLayers are not set";
         }
         return this.characterLayers;
     }
 
-
-    setCompanion(companion: string|null): void {
+    setCompanion(companion: string | null): void {
         this.companion = companion;
     }
 
-    getCompanion(): string|null {
+    getCompanion(): string | null {
         return this.companion;
     }
 
-    public async loadMap(room: Room, scenePlugin: Phaser.Scenes.ScenePlugin): Promise<void> {
-        const roomID = room.id;
-        const mapDetail = await room.getMapDetail();
+    public loadMap(room: Room, scenePlugin: Phaser.Scenes.ScenePlugin) {
+        const roomID = room.key;
 
         const gameIndex = scenePlugin.getIndex(roomID);
-        if(gameIndex === -1){
-            const game : Phaser.Scene = new GameScene(room, mapDetail.mapUrl);
+        if (gameIndex === -1) {
+            const game: Phaser.Scene = new GameScene(room, room.mapUrl);
             scenePlugin.add(roomID, game, false);
         }
     }
 
     public goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin): void {
-        console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
-        scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
+        console.log("starting " + (this.currentGameSceneName || this.startRoom.key));
+        scenePlugin.start(this.currentGameSceneName || this.startRoom.key);
         scenePlugin.launch(MenuSceneName);
 
-        if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
+        if (
+            !localUserStore.getHelpCameraSettingsShown() &&
+            (!get(requestedMicrophoneState) || !get(requestedCameraState))
+        ) {
             helpCameraSettingsVisibleStore.set(true);
             localUserStore.setHelpCameraSettingsShown();
         }
@@ -104,7 +103,7 @@ export class GameManager {
      * This will close the socket connections and stop the gameScene, but won't remove it.
      */
     leaveGame(scene: Phaser.Scene, targetSceneName: string, sceneClass: Phaser.Scene): void {
-        if (this.currentGameSceneName === null) throw 'No current scene id set!';
+        if (this.currentGameSceneName === null) throw "No current scene id set!";
         const gameScene: GameScene = scene.scene.get(this.currentGameSceneName) as GameScene;
         gameScene.cleanupClosingScene();
         scene.scene.stop(this.currentGameSceneName);
@@ -123,13 +122,13 @@ export class GameManager {
             scene.scene.start(this.currentGameSceneName);
             scene.scene.wake(MenuSceneName);
         } else {
-            scene.scene.run(fallbackSceneName)
+            scene.scene.run(fallbackSceneName);
         }
     }
 
     public getCurrentGameScene(scene: Phaser.Scene): GameScene {
-        if (this.currentGameSceneName === null) throw 'No current scene id set!';
-        return scene.scene.get(this.currentGameSceneName) as GameScene
+        if (this.currentGameSceneName === null) throw "No current scene id set!";
+        return scene.scene.get(this.currentGameSceneName) as GameScene;
     }
 }
 

front/src/Phaser/Game/GameMap.ts

@@ -1,9 +1,13 @@
-import type {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty} from "../Map/ITiledMap";
+import type { ITiledMap, ITiledMapLayer, ITiledMapLayerProperty } from "../Map/ITiledMap";
 import { flattenGroupLayersMap } from "../Map/LayersFlattener";
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer;
 import { DEPTH_OVERLAY_INDEX } from "./DepthIndexes";
 
-export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void;
+export type PropertyChangeCallback = (
+    newValue: string | number | boolean | undefined,
+    oldValue: string | number | boolean | undefined,
+    allProps: Map<string, string | boolean | number>
+) => void;
 
 /**
  * A wrapper around a ITiledMap interface to provide additional capabilities.
@@ -13,39 +17,56 @@ export class GameMap {
     private key: number | undefined;
     private lastProperties = new Map<string, string | boolean | number>();
     private callbacks = new Map<string, Array<PropertyChangeCallback>>();
+    private tileNameMap = new Map<string, number>();
 
-    private tileSetPropertyMap: { [tile_index: number]: Array<ITiledMapLayerProperty> } = {}
+    private tileSetPropertyMap: { [tile_index: number]: Array<ITiledMapLayerProperty> } = {};
     public readonly flatLayers: ITiledMapLayer[];
     public readonly phaserLayers: TilemapLayer[] = [];
 
-    public exitUrls: Array<string> = []
+    public exitUrls: Array<string> = [];
 
-    public constructor(private map: ITiledMap, phaserMap: Phaser.Tilemaps.Tilemap, terrains: Array<Phaser.Tilemaps.Tileset>) {
+    public hasStartTile = false;
+
+    public constructor(
+        private map: ITiledMap,
+        phaserMap: Phaser.Tilemaps.Tilemap,
+        terrains: Array<Phaser.Tilemaps.Tileset>
+    ) {
         this.flatLayers = flattenGroupLayersMap(map);
         let depth = -2;
         for (const layer of this.flatLayers) {
-            if(layer.type === 'tilelayer'){
+            if (layer.type === "tilelayer") {
                 this.phaserLayers.push(phaserMap.createLayer(layer.name, terrains, 0, 0).setDepth(depth));
             }
-            if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
+            if (layer.type === "objectgroup" && layer.name === "floorLayer") {
                 depth = DEPTH_OVERLAY_INDEX;
             }
         }
         for (const tileset of map.tilesets) {
-            tileset?.tiles?.forEach(tile => {
+            tileset?.tiles?.forEach((tile) => {
                 if (tile.properties) {
-                    this.tileSetPropertyMap[tileset.firstgid + tile.id] = tile.properties
-                    tile.properties.forEach(prop => {
+                    this.tileSetPropertyMap[tileset.firstgid + tile.id] = tile.properties;
+                    tile.properties.forEach((prop) => {
+                        if (prop.name == "name" && typeof prop.value == "string") {
+                            this.tileNameMap.set(prop.value, tileset.firstgid + tile.id);
+                        }
                         if (prop.name == "exitUrl" && typeof prop.value == "string") {
                             this.exitUrls.push(prop.value);
+                        } else if (prop.name == "start") {
+                            this.hasStartTile = true;
                         }
-                    })
+                    });
                 }
-            })
+            });
         }
     }
 
-
+    public getPropertiesForIndex(index: number): Array<ITiledMapLayerProperty> {
+        if (this.tileSetPropertyMap[index]) {
+            return this.tileSetPropertyMap[index];
+        }
+        return [];
+    }
 
     /**
      * Sets the position of the current player (in pixels)
@@ -89,7 +110,7 @@ export class GameMap {
         const properties = new Map<string, string | boolean | number>();
 
         for (const layer of this.flatLayers) {
-            if (layer.type !== 'tilelayer') {
+            if (layer.type !== "tilelayer") {
                 continue;
             }
 
@@ -99,7 +120,7 @@ export class GameMap {
                 if (tiles[key] == 0) {
                     continue;
                 }
-                tileIndex = tiles[key]
+                tileIndex = tiles[key];
             }
 
             // There is a tile in this layer, let's embed the properties
@@ -113,24 +134,36 @@ export class GameMap {
             }
 
             if (tileIndex) {
-                this.tileSetPropertyMap[tileIndex]?.forEach(property => {
+                this.tileSetPropertyMap[tileIndex]?.forEach((property) => {
                     if (property.value) {
-                        properties.set(property.name, property.value)
+                        properties.set(property.name, property.value);
                     } else if (properties.has(property.name)) {
-                        properties.delete(property.name)
+                        properties.delete(property.name);
                     }
-                })
+                });
             }
         }
 
         return properties;
     }
 
-    public getMap(): ITiledMap{
+    public getMap(): ITiledMap {
         return this.map;
     }
 
-    private trigger(propName: string, oldValue: string | number | boolean | undefined, newValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) {
+    private getTileProperty(index: number): Array<ITiledMapLayerProperty> {
+        if (this.tileSetPropertyMap[index]) {
+            return this.tileSetPropertyMap[index];
+        }
+        return [];
+    }
+
+    private trigger(
+        propName: string,
+        oldValue: string | number | boolean | undefined,
+        newValue: string | number | boolean | undefined,
+        allProps: Map<string, string | boolean | number>
+    ) {
         const callbacksArray = this.callbacks.get(propName);
         if (callbacksArray !== undefined) {
             for (const callback of callbacksArray) {
@@ -159,10 +192,65 @@ export class GameMap {
         return this.phaserLayers.find((layer) => layer.layer.name === layerName);
     }
 
-    public addTerrain(terrain : Phaser.Tilemaps.Tileset): void {
+    public findPhaserLayers(groupName: string): TilemapLayer[] {
+        return this.phaserLayers.filter((l) => l.layer.name.includes(groupName));
+    }
+
+    public addTerrain(terrain: Phaser.Tilemaps.Tileset): void {
         for (const phaserLayer of this.phaserLayers) {
             phaserLayer.tileset.push(terrain);
         }
     }
 
+    private putTileInFlatLayer(index: number, x: number, y: number, layer: string): void {
+        const fLayer = this.findLayer(layer);
+        if (fLayer == undefined) {
+            console.error("The layer '" + layer + "' that you want to change doesn't exist.");
+            return;
+        }
+        if (fLayer.type !== "tilelayer") {
+            console.error(
+                "The layer '" +
+                    layer +
+                    "' that you want to change is not a tilelayer. Tile can only be put in tilelayer."
+            );
+            return;
+        }
+        if (typeof fLayer.data === "string") {
+            console.error("Data of the layer '" + layer + "' that you want to change is only readable.");
+            return;
+        }
+        fLayer.data[x + y * fLayer.width] = index;
+    }
+
+    public putTile(tile: string | number | null, x: number, y: number, layer: string): void {
+        const phaserLayer = this.findPhaserLayer(layer);
+        if (phaserLayer) {
+            if (tile === null) {
+                phaserLayer.putTileAt(-1, x, y);
+                return;
+            }
+            const tileIndex = this.getIndexForTileType(tile);
+            if (tileIndex !== undefined) {
+                this.putTileInFlatLayer(tileIndex, x, y, layer);
+                const phaserTile = phaserLayer.putTileAt(tileIndex, x, y);
+                for (const property of this.getTileProperty(tileIndex)) {
+                    if (property.name === "collides" && property.value) {
+                        phaserTile.setCollision(true);
+                    }
+                }
+            } else {
+                console.error("The tile '" + tile + "' that you want to place doesn't exist.");
+            }
+        } else {
+            console.error("The layer '" + layer + "' does not exist (or is not a tilelaye).");
+        }
+    }
+
+    private getIndexForTileType(tile: string | number): number | undefined {
+        if (typeof tile == "number") {
+            return tile;
+        }
+        return this.tileNameMap.get(tile);
+    }
 }

front/src/Phaser/Game/PlayerInterface.ts

@@ -0,0 +1,11 @@
+import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
+
+export interface PlayerInterface {
+    userId: number;
+    name: string;
+    characterLayers: BodyResourceDescriptionInterface[];
+    visitCardUrl: string | null;
+    companion: string | null;
+    userUuid: string;
+    color?: string;
+}

front/src/Phaser/Game/PlayerMovement.ts

@@ -1,10 +1,14 @@
 import { MAX_EXTRAPOLATION_TIME } from "../../Enum/EnvironmentVariable";
 import type { PositionInterface } from "../../Connexion/ConnexionModels";
-import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
+import type { HasPlayerMovedEvent } from "../../Api/Events/HasPlayerMovedEvent";
 
 export class PlayerMovement {
-    public constructor(private startPosition: PositionInterface, private startTick: number, private endPosition: HasPlayerMovedEvent, private endTick: number) {
-    }
+    public constructor(
+        private startPosition: PositionInterface,
+        private startTick: number,
+        private endPosition: HasPlayerMovedEvent,
+        private endTick: number
+    ) {}
 
     public isOutdated(tick: number): boolean {
         //console.log(tick, this.endTick, MAX_EXTRAPOLATION_TIME)
@@ -24,14 +28,18 @@ export class PlayerMovement {
             return this.endPosition;
         }
 
-        const x = (this.endPosition.x - this.startPosition.x) * ((tick - this.startTick) / (this.endTick - this.startTick)) + this.startPosition.x;
-        const y = (this.endPosition.y - this.startPosition.y) * ((tick - this.startTick) / (this.endTick - this.startTick)) + this.startPosition.y;
+        const x =
+            (this.endPosition.x - this.startPosition.x) * ((tick - this.startTick) / (this.endTick - this.startTick)) +
+            this.startPosition.x;
+        const y =
+            (this.endPosition.y - this.startPosition.y) * ((tick - this.startTick) / (this.endTick - this.startTick)) +
+            this.startPosition.y;
         //console.log('Computed position ', x, y)
         return {
             x,
             y,
             direction: this.endPosition.direction,
-            moving: true
-        }
+            moving: true,
+        };
     }
 }

front/src/Phaser/Game/PlayersPositionInterpolator.ts

@@ -2,7 +2,7 @@
  * This class is in charge of computing the position of all players.
  * Player movement is delayed by 200ms so position depends on ticks.
  */
-import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
+import type { HasPlayerMovedEvent } from "../../Api/Events/HasPlayerMovedEvent";
 import type { PlayerMovement } from "./PlayerMovement";
 
 export class PlayersPositionInterpolator {
@@ -24,7 +24,7 @@ export class PlayersPositionInterpolator {
                 this.playerMovements.delete(userId);
             }
             //console.log("moving")
-            positions.set(userId, playerMovement.getPosition(tick))
+            positions.set(userId, playerMovement.getPosition(tick));
         });
         return positions;
     }

front/src/Phaser/Game/StartPositionCalculator.ts

@@ -0,0 +1,127 @@
+import type { PositionInterface } from "../../Connexion/ConnexionModels";
+import type { ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledMapTileLayer } from "../Map/ITiledMap";
+import type { GameMap } from "./GameMap";
+
+const defaultStartLayerName = "start";
+
+export class StartPositionCalculator {
+    public startPosition!: PositionInterface;
+
+    constructor(
+        private readonly gameMap: GameMap,
+        private readonly mapFile: ITiledMap,
+        private readonly initPosition: PositionInterface | null,
+        public readonly startLayerName: string | null
+    ) {
+        this.initStartXAndStartY();
+    }
+    private initStartXAndStartY() {
+        // If there is an init position passed
+        if (this.initPosition !== null) {
+            this.startPosition = this.initPosition;
+        } else {
+            // Now, let's find the start layer
+            if (this.startLayerName) {
+                this.initPositionFromLayerName(this.startLayerName, this.startLayerName);
+            }
+            if (this.startPosition === undefined) {
+                // If we have no start layer specified or if the hash passed does not exist, let's go with the default start position.
+                this.initPositionFromLayerName(defaultStartLayerName, this.startLayerName);
+            }
+        }
+        // Still no start position? Something is wrong with the map, we need a "start" layer.
+        if (this.startPosition === undefined) {
+            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.startPosition = {
+                x: this.mapFile.width * 16,
+                y: this.mapFile.height * 16,
+            };
+        }
+    }
+
+    /**
+     *
+     * @param selectedLayer this is always the layer that is selected with the hash in the url
+     * @param selectedOrDefaultLayer  this can also be the {defaultStartLayerName} if the {selectedLayer} didnt yield any start points
+     */
+    public initPositionFromLayerName(selectedOrDefaultLayer: string | null, selectedLayer: string | null) {
+        if (!selectedOrDefaultLayer) {
+            selectedOrDefaultLayer = defaultStartLayerName;
+        }
+        for (const layer of this.gameMap.flatLayers) {
+            if (
+                (selectedOrDefaultLayer === layer.name || layer.name.endsWith("/" + selectedOrDefaultLayer)) &&
+                layer.type === "tilelayer" &&
+                (selectedOrDefaultLayer === defaultStartLayerName || this.isStartLayer(layer))
+            ) {
+                const startPosition = this.startUser(layer, selectedLayer);
+                this.startPosition = {
+                    x: startPosition.x + this.mapFile.tilewidth / 2,
+                    y: startPosition.y + this.mapFile.tileheight / 2,
+                };
+            }
+        }
+    }
+
+    private isStartLayer(layer: ITiledMapLayer): boolean {
+        return this.getProperty(layer, "startLayer") == true;
+    }
+
+    /**
+     *
+     * @param selectedLayer this is always the layer that is selected with the hash in the url
+     * @param selectedOrDefaultLayer  this can also be the default layer if the {selectedLayer} didnt yield any start points
+     */
+    private startUser(selectedOrDefaultLayer: ITiledMapTileLayer, selectedLayer: string | null): PositionInterface {
+        const tiles = selectedOrDefaultLayer.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");
+        }
+        const possibleStartPositions: PositionInterface[] = [];
+        tiles.forEach((objectKey: number, key: number) => {
+            if (objectKey === 0) {
+                return;
+            }
+            const y = Math.floor(key / selectedOrDefaultLayer.width);
+            const x = key % selectedOrDefaultLayer.width;
+
+            if (selectedLayer && this.gameMap.hasStartTile) {
+                const properties = this.gameMap.getPropertiesForIndex(objectKey);
+                if (
+                    !properties.length ||
+                    !properties.some((property) => property.name == "start" && property.value == selectedLayer)
+                ) {
+                    return;
+                }
+            }
+            possibleStartPositions.push({ x: x * this.mapFile.tilewidth, y: y * this.mapFile.tilewidth });
+        });
+        // Get a value at random amongst allowed values
+        if (possibleStartPositions.length === 0) {
+            console.warn('The start layer "' + selectedOrDefaultLayer.name + '" for this map is empty.');
+            return {
+                x: 0,
+                y: 0,
+            };
+        }
+        // Choose one of the available start positions at random amongst the list of available start positions.
+        return possibleStartPositions[Math.floor(Math.random() * possibleStartPositions.length)];
+    }
+
+    private getProperty(layer: ITiledMapLayer | ITiledMap, name: string): string | boolean | number | undefined {
+        const properties: ITiledMapLayerProperty[] | undefined = layer.properties;
+        if (!properties) {
+            return undefined;
+        }
+        const obj = properties.find(
+            (property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()
+        );
+        if (obj === undefined) {
+            return undefined;
+        }
+        return obj.value;
+    }
+}

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);

front/src/Phaser/Login/EntryScene.ts

@@ -1,8 +1,8 @@
-import {gameManager} from "../Game/GameManager";
-import {Scene} from "phaser";
-import {ErrorScene} from "../Reconnecting/ErrorScene";
-import {WAError} from "../Reconnecting/WAError";
-import {waScaleManager} from "../Services/WaScaleManager";
+import { gameManager } from "../Game/GameManager";
+import { Scene } from "phaser";
+import { ErrorScene } from "../Reconnecting/ErrorScene";
+import { WAError } from "../Reconnecting/WAError";
+import { waScaleManager } from "../Services/WaScaleManager";
 
 export const EntrySceneName = "EntryScene";
 
@@ -13,26 +13,32 @@ export const EntrySceneName = "EntryScene";
 export class EntryScene extends Scene {
     constructor() {
         super({
-            key: EntrySceneName
+            key: EntrySceneName,
         });
     }
 
     create() {
-
-        gameManager.init(this.scene).then((nextSceneName) => {
-            // Let's rescale before starting the game
-            // We can do it at this stage.
-            waScaleManager.applyNewSize();
-            this.scene.start(nextSceneName);
-        }).catch((err) => {
-            if (err.response && err.response.status == 404) {
-                ErrorScene.showError(new WAError(
-                    'Access link incorrect', 
-                    'Could not find map. Please check your access link.', 
-                    'If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com'), this.scene);
-            } else {
-                ErrorScene.showError(err, this.scene);
-            }
-        });
+        gameManager
+            .init(this.scene)
+            .then((nextSceneName) => {
+                // Let's rescale before starting the game
+                // We can do it at this stage.
+                waScaleManager.applyNewSize();
+                this.scene.start(nextSceneName);
+            })
+            .catch((err) => {
+                if (err.response && err.response.status == 404) {
+                    ErrorScene.showError(
+                        new WAError(
+                            "Access link incorrect",
+                            "Could not find map. Please check your access link.",
+                            "If you want more information, you may contact administrator or contact us at: hello@workadventu.re"
+                        ),
+                        this.scene
+                    );
+                } else {
+                    ErrorScene.showError(err, this.scene);
+                }
+            });
     }
 }

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -1,25 +1,25 @@
-import {gameManager} from "../Game/GameManager";
+import { gameManager } from "../Game/GameManager";
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {EnableCameraSceneName} from "./EnableCameraScene";
-import {CustomizeSceneName} from "./CustomizeScene";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
-import {addLoader} from "../Components/Loader";
-import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
-import {AbstractCharacterScene} from "./AbstractCharacterScene";
-import {areCharacterLayersValid} from "../../Connexion/LocalUser";
-import {touchScreenManager} from "../../Touch/TouchScreenManager";
-import {PinchManager} from "../UserInput/PinchManager";
-import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
-import {waScaleManager} from "../Services/WaScaleManager";
-import {isMobile} from "../../Enum/EnvironmentVariable";
+import { EnableCameraSceneName } from "./EnableCameraScene";
+import { CustomizeSceneName } from "./CustomizeScene";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
+import { addLoader } from "../Components/Loader";
+import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
+import { AbstractCharacterScene } from "./AbstractCharacterScene";
+import { areCharacterLayersValid } from "../../Connexion/LocalUser";
+import { touchScreenManager } from "../../Touch/TouchScreenManager";
+import { PinchManager } from "../UserInput/PinchManager";
+import { selectCharacterSceneVisibleStore } from "../../Stores/SelectCharacterStore";
+import { waScaleManager } from "../Services/WaScaleManager";
+import { isMobile } from "../../Enum/EnvironmentVariable";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
 
 export class SelectCharacterScene extends AbstractCharacterScene {
     protected readonly nbCharactersPerRow = 6;
-    protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
+    protected selectedPlayer!: Phaser.Physics.Arcade.Sprite | null; // null if we are selecting the "customize" option
     protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     protected playerModels!: BodyResourceDescriptionInterface[];
 
@@ -38,7 +38,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     preload() {
-
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 this.playerModels.push(bodyResourceDescription);
@@ -54,7 +53,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     create() {
         selectCharacterSceneVisibleStore.set(true);
-        this.events.addListener('wake', () => {
+        this.events.addListener("wake", () => {
             waScaleManager.saveZoom();
             waScaleManager.zoomModifier = isMobile() ? 2 : 1;
             selectCharacterSceneVisibleStore.set(true);
@@ -68,26 +67,26 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         waScaleManager.zoomModifier = isMobile() ? 2 : 1;
 
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
-        this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
+        this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xffffff);
         this.selectedRectangle.setDepth(2);
 
         /*create user*/
         this.createCurrentPlayer();
 
-        this.input.keyboard.on('keyup-ENTER', () => {
+        this.input.keyboard.on("keyup-ENTER", () => {
             return this.nextSceneToCameraScene();
         });
 
-        this.input.keyboard.on('keydown-RIGHT', () => {
+        this.input.keyboard.on("keydown-RIGHT", () => {
             this.moveToRight();
         });
-        this.input.keyboard.on('keydown-LEFT', () => {
+        this.input.keyboard.on("keydown-LEFT", () => {
             this.moveToLeft();
         });
-        this.input.keyboard.on('keydown-UP', () => {
+        this.input.keyboard.on("keydown-UP", () => {
             this.moveToUp();
         });
-        this.input.keyboard.on('keydown-DOWN', () => {
+        this.input.keyboard.on("keydown-DOWN", () => {
             this.moveToDown();
         });
     }
@@ -96,7 +95,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
-        if(!this.selectedPlayer){
+        if (!this.selectedPlayer) {
             return;
         }
         this.scene.stop(SelectCharacterSceneName);
@@ -105,7 +104,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.players = [];
         selectCharacterSceneVisibleStore.set(false);
-        this.events.removeListener('wake');
+        this.events.removeListener("wake");
     }
 
     public nextSceneToCustomizeScene(): void {
@@ -119,11 +118,11 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     createCurrentPlayer(): void {
-        for (let i = 0; i <this.playerModels.length; i++) {
+        for (let i = 0; i < this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
             //check already exist texture
-            if(this.players.find((c) => c.texture.key === playerResource.name)){
+            if (this.players.find((c) => c.texture.key === playerResource.name)) {
                 continue;
             }
 
@@ -132,9 +131,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             this.setUpPlayer(player, i);
             this.anims.create({
                 key: playerResource.name,
-                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}),
+                frames: this.anims.generateFrameNumbers(playerResource.name, { start: 0, end: 11 }),
                 frameRate: 8,
-                repeat: -1
+                repeat: -1,
             });
             player.setInteractive().on("pointerdown", () => {
                 if (this.pointerClicked) {
@@ -153,77 +152,79 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             });
             this.players.push(player);
         }
+        if (this.currentSelectUser >= this.players.length) {
+            this.currentSelectUser = 0;
+        }
         this.selectedPlayer = this.players[this.currentSelectUser];
         this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
     }
 
-    protected moveUser(){
-        for(let i = 0; i < this.players.length; i++){
+    protected moveUser() {
+        for (let i = 0; i < this.players.length; i++) {
             const player = this.players[i];
             this.setUpPlayer(player, i);
         }
         this.updateSelectedPlayer();
     }
 
-    public moveToLeft(){
-        if(this.currentSelectUser === 0){
+    public moveToLeft() {
+        if (this.currentSelectUser === 0) {
             return;
         }
         this.currentSelectUser -= 1;
         this.moveUser();
     }
 
-    public moveToRight(){
-        if(this.currentSelectUser === (this.players.length - 1)){
+    public moveToRight() {
+        if (this.currentSelectUser === this.players.length - 1) {
             return;
         }
         this.currentSelectUser += 1;
         this.moveUser();
     }
 
-    protected moveToUp(){
-        if(this.currentSelectUser < this.nbCharactersPerRow){
+    protected moveToUp() {
+        if (this.currentSelectUser < this.nbCharactersPerRow) {
             return;
         }
         this.currentSelectUser -= this.nbCharactersPerRow;
         this.moveUser();
     }
 
-    protected moveToDown(){
-        if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){
+    protected moveToDown() {
+        if (this.currentSelectUser + this.nbCharactersPerRow > this.players.length - 1) {
             return;
         }
         this.currentSelectUser += this.nbCharactersPerRow;
         this.moveUser();
     }
 
-    protected defineSetupPlayer(num: number){
+    protected defineSetupPlayer(num: number) {
         const deltaX = 32;
         const deltaY = 32;
         let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
 
-        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users
-        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users
+        playerX = playerX - deltaX * 2.5 + deltaX * (num % this.nbCharactersPerRow); // calcul position on line users
+        playerY = playerY - deltaY * 2 + deltaY * Math.floor(num / this.nbCharactersPerRow); // calcul position on column users
 
         const playerVisible = true;
         const playerScale = 1;
         const playerOpacity = 1;
 
         // if selected
-        if( num === this.currentSelectUser ){
+        if (num === this.currentSelectUser) {
             this.selectedRectangle.setX(playerX);
             this.selectedRectangle.setY(playerY);
         }
 
-        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
+        return { playerX, playerY, playerScale, playerOpacity, playerVisible };
     }
 
-    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){
-
-        const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number) {
+        const { playerX, playerY, playerScale, playerOpacity, playerVisible } = this.defineSetupPlayer(num);
         player.setBounce(0.2);
         player.setCollideWorldBounds(false);
-        player.setVisible( playerVisible );
+        player.setVisible(playerVisible);
         player.setScale(playerScale, playerScale);
         player.setAlpha(playerOpacity);
         player.setX(playerX);
@@ -234,10 +235,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
      * Returns pixel position by on column and row number
      */
     protected getCharacterPosition(): [number, number] {
-        return [
-            this.game.renderer.width / 2,
-            this.game.renderer.height / 2.5
-        ];
+        return [this.game.renderer.width / 2, this.game.renderer.height / 2.5];
     }
 
     protected updateSelectedPlayer(): void {
@@ -256,7 +254,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             this.pointerClicked = false;
         }
 
-        if(this.lazyloadingAttempt){
+        if (this.lazyloadingAttempt) {
             //re-render players list
             this.createCurrentPlayer();
             this.moveUser();

front/src/Phaser/Map/ITiledMap.ts

@@ -36,7 +36,7 @@ export interface ITiledMap {
 export interface ITiledMapLayerProperty {
     name: string;
     type: string;
-    value: string|boolean|number|undefined;
+    value: string | boolean | number | undefined;
 }
 
 /*export interface ITiledMapLayerBooleanProperty {
@@ -48,7 +48,7 @@ export interface ITiledMapLayerProperty {
 export type ITiledMapLayer = ITiledMapGroupLayer | ITiledMapObjectLayer | ITiledMapTileLayer;
 
 export interface ITiledMapGroupLayer {
-    id?: number,
+    id?: number;
     name: string;
     opacity: number;
     properties?: ITiledMapLayerProperty[];
@@ -64,8 +64,8 @@ export interface ITiledMapGroupLayer {
 }
 
 export interface ITiledMapTileLayer {
-    id?: number,
-    data: number[]|string;
+    id?: number;
+    data: number[] | string;
     height: number;
     name: string;
     opacity: number;
@@ -87,7 +87,7 @@ export interface ITiledMapTileLayer {
 }
 
 export interface ITiledMapObjectLayer {
-    id?: number,
+    id?: number;
     height: number;
     name: string;
     opacity: number;
@@ -117,7 +117,7 @@ export interface ITiledMapObject {
     gid: number;
     height: number;
     name: string;
-    properties: {[key: string]: string};
+    properties: { [key: string]: string };
     rotation: number;
     type: string;
     visible: boolean;
@@ -133,26 +133,26 @@ export interface ITiledMapObject {
     /**
      * Polygon points
      */
-    polygon: {x: number, y: number}[];
+    polygon: { x: number; y: number }[];
 
     /**
      * Polyline points
      */
-    polyline: {x: number, y: number}[];
+    polyline: { x: number; y: number }[];
 
-    text?: ITiledText
+    text?: ITiledText;
 }
 
 export interface ITiledText {
-    text: string,
-    wrap?: boolean,
-    fontfamily?: string,
-    pixelsize?: number,
-    color?: string,
-    underline?: boolean,
-    italic?: boolean,
-    strikeout?: boolean,
-    halign?: "center"|"right"|"justify"|"left"
+    text: string;
+    wrap?: boolean;
+    fontfamily?: string;
+    pixelsize?: number;
+    color?: string;
+    underline?: boolean;
+    italic?: boolean;
+    strikeout?: boolean;
+    halign?: "center" | "right" | "justify" | "left";
 }
 
 export interface ITiledTileSet {
@@ -163,7 +163,7 @@ export interface ITiledTileSet {
     imagewidth: number;
     margin: number;
     name: string;
-    properties: {[key: string]: string};
+    properties: { [key: string]: string };
     spacing: number;
     tilecount: number;
     tileheight: number;
@@ -179,10 +179,10 @@ export interface ITiledTileSet {
 }
 
 export interface ITile {
-    id: number,
-    type?: string
+    id: number;
+    type?: string;
 
-    properties?: Array<ITiledMapLayerProperty>
+    properties?: Array<ITiledMapLayerProperty>;
 }
 
 export interface ITiledMapTerrain {

front/src/Phaser/Map/LayersFlattener.ts

@@ -1,21 +1,21 @@
-import type {ITiledMap, ITiledMapLayer} from "./ITiledMap";
+import type { ITiledMap, ITiledMapLayer } from "./ITiledMap";
 
 /**
  * Flatten the grouped layers
  */
 export function flattenGroupLayersMap(map: ITiledMap) {
     const flatLayers: ITiledMapLayer[] = [];
-    flattenGroupLayers(map.layers, '', flatLayers);
+    flattenGroupLayers(map.layers, "", flatLayers);
     return flatLayers;
 }
 
-function flattenGroupLayers(layers : ITiledMapLayer[], prefix : string, flatLayers: ITiledMapLayer[]) {
+function flattenGroupLayers(layers: ITiledMapLayer[], prefix: string, flatLayers: ITiledMapLayer[]) {
     for (const layer of layers) {
-        if (layer.type === 'group') {
-            flattenGroupLayers(layer.layers, prefix + layer.name + '/', flatLayers);
+        if (layer.type === "group") {
+            flattenGroupLayers(layer.layers, prefix + layer.name + "/", flatLayers);
         } else {
-            layer.name = prefix+layer.name
+            layer.name = prefix + layer.name;
             flatLayers.push(layer);
         }
     }
-}
+}

front/src/Phaser/Menu/MenuScene.ts

@@ -1,29 +1,32 @@
-import {LoginScene, LoginSceneName} from "../Login/LoginScene";
-import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
-import {SelectCompanionScene, SelectCompanionSceneName} from "../Login/SelectCompanionScene";
-import {gameManager} from "../Game/GameManager";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {gameReportKey, gameReportRessource, ReportMenu} from "./ReportMenu";
-import {connectionManager} from "../../Connexion/ConnectionManager";
-import {GameConnexionTypes} from "../../Url/UrlManager";
-import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Components/WarningContainer";
-import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
-import {menuIconVisible} from "../../Stores/MenuStore";
-import {videoConstraintStore} from "../../Stores/MediaStore";
-import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
-import { HtmlUtils } from '../../WebRtc/HtmlUtils';
-import { iframeListener } from '../../Api/IframeListener';
-import { Subscription } from 'rxjs';
-import {registerMenuCommandStream} from "../../Api/Events/ui/MenuItemRegisterEvent";
-import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
-import {consoleGlobalMessageManagerVisibleStore} from "../../Stores/ConsoleGlobalMessageManagerStore";
-import {get} from "svelte/store";
+import { LoginScene, LoginSceneName } from "../Login/LoginScene";
+import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene";
+import { SelectCompanionScene, SelectCompanionSceneName } from "../Login/SelectCompanionScene";
+import { gameManager } from "../Game/GameManager";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import { gameReportKey, gameReportRessource, ReportMenu } from "./ReportMenu";
+import { connectionManager } from "../../Connexion/ConnectionManager";
+import { GameConnexionTypes } from "../../Url/UrlManager";
+import { WarningContainer, warningContainerHtml, warningContainerKey } from "../Components/WarningContainer";
+import { worldFullWarningStream } from "../../Connexion/WorldFullWarningStream";
+import { menuIconVisible } from "../../Stores/MenuStore";
+import { videoConstraintStore } from "../../Stores/MediaStore";
+import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
+import { HtmlUtils } from "../../WebRtc/HtmlUtils";
+import { iframeListener } from "../../Api/IframeListener";
+import { Subscription } from "rxjs";
+import { registerMenuCommandStream } from "../../Api/Events/ui/MenuItemRegisterEvent";
+import { sendMenuClickedEvent } from "../../Api/iframe/Ui/MenuItem";
+import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
+import { get } from "svelte/store";
+import { playersStore } from "../../Stores/PlayersStore";
+import { mediaManager } from "../../WebRtc/MediaManager";
+import { chatVisibilityStore } from "../../Stores/ChatStore";
 
-export const MenuSceneName = 'MenuScene';
-const gameMenuKey = 'gameMenu';
-const gameMenuIconKey = 'gameMenuIcon';
-const gameSettingsMenuKey = 'gameSettingsMenu';
-const gameShare = 'gameShare';
+export const MenuSceneName = "MenuScene";
+const gameMenuKey = "gameMenu";
+const gameMenuIconKey = "gameMenuIcon";
+const gameSettingsMenuKey = "gameSettingsMenu";
+const gameShare = "gameShare";
 
 const closedSideMenuX = -1000;
 const openedSideMenuX = 0;
@@ -44,45 +47,49 @@ export class MenuScene extends Phaser.Scene {
     private menuButton!: Phaser.GameObjects.DOMElement;
     private warningContainer: WarningContainer | null = null;
     private warningContainerTimeout: NodeJS.Timeout | null = null;
-    private subscriptions = new Subscription()
+    private subscriptions = new Subscription();
     constructor() {
         super({ key: MenuSceneName });
 
         this.gameQualityValue = localUserStore.getGameQualityValue();
         this.videoQualityValue = localUserStore.getVideoQualityValue();
 
-        this.subscriptions.add(registerMenuCommandStream.subscribe(menuCommand => {
-            this.addMenuOption(menuCommand);
-        }))
+        this.subscriptions.add(
+            registerMenuCommandStream.subscribe((menuCommand) => {
+                this.addMenuOption(menuCommand);
+            })
+        );
 
-        this.subscriptions.add(iframeListener.unregisterMenuCommandStream.subscribe(menuCommand => {
-            this.destroyMenu(menuCommand);
-        }))
+        this.subscriptions.add(
+            iframeListener.unregisterMenuCommandStream.subscribe((menuCommand) => {
+                this.destroyMenu(menuCommand);
+            })
+        );
     }
 
     reset() {
         const addedMenuItems = [...this.menuElement.node.querySelectorAll(".fromApi")];
         for (let index = addedMenuItems.length - 1; index >= 0; index--) {
-            addedMenuItems[index].remove()
+            addedMenuItems[index].remove();
         }
     }
 
     public addMenuOption(menuText: string) {
-        const wrappingSection = document.createElement("section")
+        const wrappingSection = document.createElement("section");
         const escapedHtml = HtmlUtils.escapeHtml(menuText);
-        wrappingSection.innerHTML = `<button class="fromApi" id="${escapedHtml}">${escapedHtml}</button>`
+        wrappingSection.innerHTML = `<button class="fromApi" id="${escapedHtml}">${escapedHtml}</button>`;
         const menuItemContainer = this.menuElement.node.querySelector("#gameMenu main");
         if (menuItemContainer) {
-            menuItemContainer.querySelector(`#${escapedHtml}.fromApi`)?.remove()
-            menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks"))
+            menuItemContainer.querySelector(`#${escapedHtml}.fromApi`)?.remove();
+            menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks"));
         }
     }
 
     preload() {
-        this.load.html(gameMenuKey, 'resources/html/gameMenu.html');
-        this.load.html(gameMenuIconKey, 'resources/html/gameMenuIcon.html');
-        this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
-        this.load.html(gameShare, 'resources/html/gameShare.html');
+        this.load.html(gameMenuKey, "resources/html/gameMenu.html");
+        this.load.html(gameMenuIconKey, "resources/html/gameMenuIcon.html");
+        this.load.html(gameSettingsMenuKey, "resources/html/gameQualityMenu.html");
+        this.load.html(gameShare, "resources/html/gameShare.html");
         this.load.html(gameReportKey, gameReportRessource);
         this.load.html(warningContainerKey, warningContainerHtml);
     }
@@ -91,46 +98,59 @@ export class MenuScene extends Phaser.Scene {
         menuIconVisible.set(true);
         this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
         this.menuElement.setOrigin(0);
-        MenuScene.revealMenusAfterInit(this.menuElement, 'gameMenu');
+        MenuScene.revealMenusAfterInit(this.menuElement, "gameMenu");
 
-        const middleX = (window.innerWidth / 3) - 298;
+        if (mediaManager.hasNotification()) {
+            HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true;
+        }
+
+        const middleX = window.innerWidth / 3 - 298;
         this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
-        MenuScene.revealMenusAfterInit(this.gameQualityMenuElement, 'gameQuality');
-
+        MenuScene.revealMenusAfterInit(this.gameQualityMenuElement, "gameQuality");
 
         this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
         MenuScene.revealMenusAfterInit(this.gameShareElement, gameShare);
-        this.gameShareElement.addListener('click');
-        this.gameShareElement.on('click', (event: MouseEvent) => {
+        this.gameShareElement.addListener("click");
+        this.gameShareElement.on("click", (event: MouseEvent) => {
             event.preventDefault();
-            if ((event?.target as HTMLInputElement).id === 'gameShareFormSubmit') {
+            if ((event?.target as HTMLInputElement).id === "gameShareFormSubmit") {
                 this.copyLink();
-            } else if ((event?.target as HTMLInputElement).id === 'gameShareFormCancel') {
+            } else if ((event?.target as HTMLInputElement).id === "gameShareFormCancel") {
                 this.closeGameShare();
             }
         });
 
-        this.gameReportElement = new ReportMenu(this, connectionManager.getConnexionType === GameConnexionTypes.anonymous);
+        this.gameReportElement = new ReportMenu(
+            this,
+            connectionManager.getConnexionType === GameConnexionTypes.anonymous
+        );
         showReportScreenStore.subscribe((user) => {
             if (user !== null) {
                 this.closeAll();
-                this.gameReportElement.open(user.userId, user.userName);
+                const uuid = playersStore.getPlayerById(user.userId)?.userUuid;
+                if (uuid === undefined) {
+                    throw new Error("Could not find UUID for user with ID " + user.userId);
+                }
+                this.gameReportElement.open(uuid, user.userName);
             }
         });
 
-        this.input.keyboard.on('keyup-TAB', () => {
+        this.input.keyboard.on("keyup-TAB", () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
         this.menuButton = this.add.dom(0, 0).createFromCache(gameMenuIconKey);
-        this.menuButton.addListener('click');
-        this.menuButton.on('click', () => {
+        this.menuButton.addListener("click");
+        this.menuButton.on("click", () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
 
-        this.menuElement.addListener('click');
-        this.menuElement.on('click', this.onMenuClick.bind(this));
+        this.menuElement.addListener("click");
+        this.menuElement.on("click", this.onMenuClick.bind(this));
 
         worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
+        chatVisibilityStore.subscribe((v) => {
+            this.menuButton.setVisible(!v);
+        });
     }
 
     //todo put this method in a parent menuElement class
@@ -145,7 +165,7 @@ export class MenuScene extends Phaser.Scene {
     public revealMenuIcon(): void {
         //TODO fix me: add try catch because at the same time, 'this.menuButton' variable doesn't exist and there is error on 'getChildByID' function
         try {
-            (this.menuButton.getChildByID('menuIcon') as HTMLElement).hidden = false;
+            (this.menuButton.getChildByID("menuIcon") as HTMLElement).hidden = false;
         } catch (err) {
             console.error(err);
         }
@@ -155,22 +175,22 @@ export class MenuScene extends Phaser.Scene {
         if (this.sideMenuOpened) return;
         this.closeAll();
         this.sideMenuOpened = true;
-        this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
+        this.menuButton.getChildByID("openMenuButton").innerHTML = "X";
         const connection = gameManager.getCurrentGameScene(this).connection;
         if (connection && connection.isAdmin()) {
-            const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement;
+            const adminSection = this.menuElement.getChildByID("adminConsoleSection") as HTMLElement;
             adminSection.hidden = false;
         }
         //TODO bind with future metadata of card
         //if (connectionManager.getConnexionType === GameConnexionTypes.anonymous){
-        const adminSection = this.menuElement.getChildByID('socialLinks') as HTMLElement;
+        const adminSection = this.menuElement.getChildByID("socialLinks") as HTMLElement;
         adminSection.hidden = false;
         //}
         this.tweens.add({
             targets: this.menuElement,
             x: openedSideMenuX,
             duration: 500,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
@@ -183,23 +203,22 @@ export class MenuScene extends Phaser.Scene {
         }
         this.warningContainerTimeout = setTimeout(() => {
             this.warningContainer?.destroy();
-            this.warningContainer = null
-            this.warningContainerTimeout = null
+            this.warningContainer = null;
+            this.warningContainerTimeout = null;
         }, 120000);
-
     }
 
     private closeSideMenu(): void {
         if (!this.sideMenuOpened) return;
         this.sideMenuOpened = false;
         this.closeAll();
-        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
+        this.menuButton.getChildByID("openMenuButton").innerHTML = `<img src="/static/images/menu.svg">`;
         consoleGlobalMessageManagerVisibleStore.set(false);
         this.tweens.add({
             targets: this.menuElement,
             x: closedSideMenuX,
             duration: 500,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
@@ -213,19 +232,23 @@ export class MenuScene extends Phaser.Scene {
 
         this.settingsMenuOpened = true;
 
-        const gameQualitySelect = this.gameQualityMenuElement.getChildByID('select-game-quality') as HTMLInputElement;
-        gameQualitySelect.value = '' + this.gameQualityValue;
-        const videoQualitySelect = this.gameQualityMenuElement.getChildByID('select-video-quality') as HTMLInputElement;
-        videoQualitySelect.value = '' + this.videoQualityValue;
+        const gameQualitySelect = this.gameQualityMenuElement.getChildByID("select-game-quality") as HTMLInputElement;
+        gameQualitySelect.value = "" + this.gameQualityValue;
+        const videoQualitySelect = this.gameQualityMenuElement.getChildByID("select-video-quality") as HTMLInputElement;
+        videoQualitySelect.value = "" + this.videoQualityValue;
 
-        this.gameQualityMenuElement.addListener('click');
-        this.gameQualityMenuElement.on('click', (event: MouseEvent) => {
+        this.gameQualityMenuElement.addListener("click");
+        this.gameQualityMenuElement.on("click", (event: MouseEvent) => {
             event.preventDefault();
-            if ((event?.target as HTMLInputElement).id === 'gameQualityFormSubmit') {
-                const gameQualitySelect = this.gameQualityMenuElement.getChildByID('select-game-quality') as HTMLInputElement;
-                const videoQualitySelect = this.gameQualityMenuElement.getChildByID('select-video-quality') as HTMLInputElement;
+            if ((event?.target as HTMLInputElement).id === "gameQualityFormSubmit") {
+                const gameQualitySelect = this.gameQualityMenuElement.getChildByID(
+                    "select-game-quality"
+                ) as HTMLInputElement;
+                const videoQualitySelect = this.gameQualityMenuElement.getChildByID(
+                    "select-video-quality"
+                ) as HTMLInputElement;
                 this.saveSetting(parseInt(gameQualitySelect.value), parseInt(videoQualitySelect.value));
-            } else if ((event?.target as HTMLInputElement).id === 'gameQualityFormCancel') {
+            } else if ((event?.target as HTMLInputElement).id === "gameQualityFormCancel") {
                 this.closeGameQualityMenu();
             }
         });
@@ -243,7 +266,7 @@ export class MenuScene extends Phaser.Scene {
             y: middleY,
             x: middleX,
             duration: 1000,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
@@ -251,16 +274,15 @@ export class MenuScene extends Phaser.Scene {
         if (!this.settingsMenuOpened) return;
         this.settingsMenuOpened = false;
 
-        this.gameQualityMenuElement.removeListener('click');
+        this.gameQualityMenuElement.removeListener("click");
         this.tweens.add({
             targets: this.gameQualityMenuElement,
             y: -400,
             duration: 1000,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
-
     private openGameShare(): void {
         if (this.gameShareOpened) {
             this.closeGameShare();
@@ -269,7 +291,7 @@ export class MenuScene extends Phaser.Scene {
         //close all
         this.closeAll();
 
-        const gameShareLink = this.gameShareElement.getChildByID('gameShareLink') as HTMLInputElement;
+        const gameShareLink = this.gameShareElement.getChildByID("gameShareLink") as HTMLInputElement;
         gameShareLink.value = location.toString();
 
         this.gameShareOpened = true;
@@ -287,64 +309,67 @@ export class MenuScene extends Phaser.Scene {
             y: middleY,
             x: middleX,
             duration: 1000,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
     private closeGameShare(): void {
-        const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
-        gameShareInfo.innerText = '';
-        gameShareInfo.style.display = 'none';
+        const gameShareInfo = this.gameShareElement.getChildByID("gameShareInfo") as HTMLParagraphElement;
+        gameShareInfo.innerText = "";
+        gameShareInfo.style.display = "none";
         this.gameShareOpened = false;
         this.tweens.add({
             targets: this.gameShareElement,
             y: -400,
             duration: 1000,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
     private onMenuClick(event: MouseEvent) {
-        const htmlMenuItem = (event?.target as HTMLInputElement);
-        if (htmlMenuItem.classList.contains('not-button')) {
+        const htmlMenuItem = event?.target as HTMLInputElement;
+        if (htmlMenuItem.classList.contains("not-button")) {
             return;
         }
         event.preventDefault();
 
         if (htmlMenuItem.classList.contains("fromApi")) {
-            sendMenuClickedEvent(htmlMenuItem.id)
-            return
+            sendMenuClickedEvent(htmlMenuItem.id);
+            return;
         }
 
         switch ((event?.target as HTMLInputElement).id) {
-            case 'changeNameButton':
+            case "changeNameButton":
                 this.closeSideMenu();
                 gameManager.leaveGame(this, LoginSceneName, new LoginScene());
                 break;
-            case 'sparkButton':
+            case "sparkButton":
                 this.gotToCreateMapPage();
                 break;
-            case 'changeSkinButton':
+            case "changeSkinButton":
                 this.closeSideMenu();
                 gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());
                 break;
-            case 'changeCompanionButton':
+            case "changeCompanionButton":
                 this.closeSideMenu();
                 gameManager.leaveGame(this, SelectCompanionSceneName, new SelectCompanionScene());
                 break;
-            case 'closeButton':
+            case "closeButton":
                 this.closeSideMenu();
                 break;
-            case 'shareButton':
+            case "shareButton":
                 this.openGameShare();
                 break;
-            case 'editGameSettingsButton':
+            case "editGameSettingsButton":
                 this.openGameSettingsMenu();
                 break;
-            case 'toggleFullscreen':
+            case "toggleFullscreen":
                 this.toggleFullscreen();
                 break;
-            case 'adminConsoleButton':
+            case "enableNotification":
+                this.enableNotification();
+                break;
+            case "adminConsoleButton":
                 if (get(consoleGlobalMessageManagerVisibleStore)) {
                     consoleGlobalMessageManagerVisibleStore.set(false);
                 } else {
@@ -356,9 +381,9 @@ export class MenuScene extends Phaser.Scene {
 
     private async copyLink() {
         await navigator.clipboard.writeText(location.toString());
-        const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
-        gameShareInfo.innerText = 'Link copied, you can share it now!';
-        gameShareInfo.style.display = 'block';
+        const gameShareInfo = this.gameShareElement.getChildByID("gameShareInfo") as HTMLParagraphElement;
+        gameShareInfo.innerText = "Link copied, you can share it now!";
+        gameShareInfo.style.display = "block";
     }
 
     private saveSetting(valueGame: number, valueVideo: number) {
@@ -378,8 +403,8 @@ export class MenuScene extends Phaser.Scene {
     private gotToCreateMapPage() {
         //const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
         //TODO fix me: this button can to send us on WorkAdventure BO.
-        const sparkHost = 'https://workadventu.re/getting-started';
-        window.open(sparkHost, '_blank');
+        const sparkHost = "https://workadventu.re/getting-started";
+        window.open(sparkHost, "_blank");
     }
 
     private closeAll() {
@@ -389,10 +414,10 @@ export class MenuScene extends Phaser.Scene {
     }
 
     private toggleFullscreen() {
-        const body = document.querySelector('body')
+        const body = document.querySelector("body");
         if (body) {
             if (document.fullscreenElement ?? document.fullscreen) {
-                document.exitFullscreen()
+                document.exitFullscreen();
             } else {
                 body.requestFullscreen();
             }
@@ -406,4 +431,12 @@ export class MenuScene extends Phaser.Scene {
     public isDirty(): boolean {
         return false;
     }
+
+    private enableNotification() {
+        mediaManager.requestNotification().then(() => {
+            if (mediaManager.hasNotification()) {
+                HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true;
+            }
+        });
+    }
 }

front/src/Phaser/Menu/ReportMenu.ts

@@ -1,15 +1,16 @@
-import {MenuScene} from "./MenuScene";
-import {gameManager} from "../Game/GameManager";
-import {blackListManager} from "../../WebRtc/BlackListManager";
+import { MenuScene } from "./MenuScene";
+import { gameManager } from "../Game/GameManager";
+import { blackListManager } from "../../WebRtc/BlackListManager";
+import { playersStore } from "../../Stores/PlayersStore";
 
-export const gameReportKey = 'gameReport';
-export const gameReportRessource = 'resources/html/gameReport.html';
+export const gameReportKey = "gameReport";
+export const gameReportRessource = "resources/html/gameReport.html";
 
 export class ReportMenu extends Phaser.GameObjects.DOMElement {
     private opened: boolean = false;
 
-    private userId!: number;
-    private userName!: string|undefined;
+    private userUuid!: string;
+    private userName!: string | undefined;
     private anonymous: boolean;
 
     constructor(scene: Phaser.Scene, anonymous: boolean) {
@@ -18,46 +19,46 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
         this.createFromCache(gameReportKey);
 
         if (this.anonymous) {
-            const divToHide = this.getChildByID('reportSection') as HTMLElement;
+            const divToHide = this.getChildByID("reportSection") as HTMLElement;
             divToHide.hidden = true;
-            const textToHide = this.getChildByID('askActionP') as HTMLElement;
+            const textToHide = this.getChildByID("askActionP") as HTMLElement;
             textToHide.hidden = true;
         }
 
         scene.add.existing(this);
         MenuScene.revealMenusAfterInit(this, gameReportKey);
 
-        this.addListener('click');
-        this.on('click',  (event:MouseEvent) => {
+        this.addListener("click");
+        this.on("click", (event: MouseEvent) => {
             event.preventDefault();
-            if ((event?.target as HTMLInputElement).id === 'gameReportFormSubmit') {
+            if ((event?.target as HTMLInputElement).id === "gameReportFormSubmit") {
                 this.submitReport();
-            } else if((event?.target as HTMLInputElement).id === 'gameReportFormCancel') {
+            } else if ((event?.target as HTMLInputElement).id === "gameReportFormCancel") {
                 this.close();
-            } else if((event?.target as HTMLInputElement).id === 'toggleBlockButton') {
+            } else if ((event?.target as HTMLInputElement).id === "toggleBlockButton") {
                 this.toggleBlock();
             }
         });
     }
 
-    public open(userId: number, userName: string|undefined): void {
+    public open(userUuid: string, userName: string | undefined): void {
         if (this.opened) {
             this.close();
             return;
         }
 
-        this.userId = userId;
+        this.userUuid = userUuid;
         this.userName = userName;
 
-        const mainEl = this.getChildByID('gameReport') as HTMLElement;
+        const mainEl = this.getChildByID("gameReport") as HTMLElement;
         this.x = this.getCenteredX(mainEl);
         this.y = this.getHiddenY(mainEl);
 
-        const gameTitleReport = this.getChildByID('nameReported') as HTMLElement;
-        gameTitleReport.innerText = userName || '';
+        const gameTitleReport = this.getChildByID("nameReported") as HTMLElement;
+        gameTitleReport.innerText = userName || "";
 
-        const blockButton = this.getChildByID('toggleBlockButton') as HTMLElement;
-        blockButton.innerText = blackListManager.isBlackListed(this.userId) ? 'Unblock this user' : 'Block this user';
+        const blockButton = this.getChildByID("toggleBlockButton") as HTMLElement;
+        blockButton.innerText = blackListManager.isBlackListed(this.userUuid) ? "Unblock this user" : "Block this user";
 
         this.opened = true;
 
@@ -67,19 +68,19 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
             targets: this,
             y: this.getCenteredY(mainEl),
             duration: 1000,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
     public close(): void {
         gameManager.getCurrentGameScene(this.scene).userInputManager.restoreControls();
         this.opened = false;
-        const mainEl = this.getChildByID('gameReport') as HTMLElement;
+        const mainEl = this.getChildByID("gameReport") as HTMLElement;
         this.scene.tweens.add({
             targets: this,
             y: this.getHiddenY(mainEl),
             duration: 1000,
-            ease: 'Power3'
+            ease: "Power3",
         });
     }
 
@@ -88,31 +89,32 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
         return window.innerWidth / 4 - mainEl.clientWidth / 2;
     }
     private getHiddenY(mainEl: HTMLElement): number {
-        return - mainEl.clientHeight - 50;
+        return -mainEl.clientHeight - 50;
     }
     private getCenteredY(mainEl: HTMLElement): number {
         return window.innerHeight / 4 - mainEl.clientHeight / 2;
     }
 
     private toggleBlock(): void {
-        !blackListManager.isBlackListed(this.userId) ? blackListManager.blackList(this.userId) : blackListManager.cancelBlackList(this.userId);
+        !blackListManager.isBlackListed(this.userUuid)
+            ? blackListManager.blackList(this.userUuid)
+            : blackListManager.cancelBlackList(this.userUuid);
         this.close();
     }
 
-    private submitReport(): void{
-        const gamePError = this.getChildByID('gameReportErr') as HTMLParagraphElement;
-        gamePError.innerText = '';
-        gamePError.style.display = 'none';
-        const gameTextArea = this.getChildByID('gameReportInput') as HTMLInputElement;
-        if(!gameTextArea || !gameTextArea.value){
-            gamePError.innerText = 'Report message cannot to be empty.';
-            gamePError.style.display = 'block';
+    private submitReport(): void {
+        const gamePError = this.getChildByID("gameReportErr") as HTMLParagraphElement;
+        gamePError.innerText = "";
+        gamePError.style.display = "none";
+        const gameTextArea = this.getChildByID("gameReportInput") as HTMLInputElement;
+        if (!gameTextArea || !gameTextArea.value) {
+            gamePError.innerText = "Report message cannot to be empty.";
+            gamePError.style.display = "block";
             return;
         }
-        gameManager.getCurrentGameScene(this.scene).connection?.emitReportPlayerMessage(
-            this.userId,
-            gameTextArea.value
-        );
+        gameManager
+            .getCurrentGameScene(this.scene)
+            .connection?.emitReportPlayerMessage(this.userUuid, gameTextArea.value);
         this.close();
     }
 }

front/src/Phaser/Reconnecting/ErrorScene.ts

@@ -34,7 +34,7 @@ export class ErrorScene extends Phaser.Scene {
     }
 
     preload() {
-        this.load.image(Textures.icon, "resources/logos/tcm_full.png");
+        this.load.image(Textures.icon, "static/images/favicons/favicon-32x32.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(Textures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
         this.load.spritesheet(

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -19,7 +19,7 @@ export class ReconnectingScene extends Phaser.Scene {
     }
 
     preload() {
-        this.load.image(ReconnectingTextures.icon, "resources/logos/tcm_full.png");
+        this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(ReconnectingTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
         this.load.spritesheet(

front/src/Stores/BiggestAvailableAreaStore.ts

@@ -1,16 +1,16 @@
-import {get, writable} from "svelte/store";
-import type {Box} from "../WebRtc/LayoutManager";
-import {HtmlUtils} from "../WebRtc/HtmlUtils";
-import {LayoutMode} from "../WebRtc/LayoutManager";
-import {layoutModeStore} from "./StreamableCollectionStore";
+import { get, writable } from "svelte/store";
+import type { Box } from "../WebRtc/LayoutManager";
+import { HtmlUtils } from "../WebRtc/HtmlUtils";
+import { LayoutMode } from "../WebRtc/LayoutManager";
+import { layoutModeStore } from "./StreamableCollectionStore";
 
 /**
  * Tries to find the biggest available box of remaining space (this is a space where we can center the character)
  */
 function findBiggestAvailableArea(): Box {
-    const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>('#game canvas');
+    const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>("#game canvas");
     if (get(layoutModeStore) === LayoutMode.VideoChat) {
-        const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
+        const children = document.querySelectorAll<HTMLDivElement>("div.chat-mode > div");
         const htmlChildren = Array.from(children.values());
 
         // No chat? Let's go full center
@@ -19,18 +19,17 @@ function findBiggestAvailableArea(): Box {
                 xStart: 0,
                 yStart: 0,
                 xEnd: game.offsetWidth,
-                yEnd: game.offsetHeight
-            }
+                yEnd: game.offsetHeight,
+            };
         }
 
         const lastDiv = htmlChildren[htmlChildren.length - 1];
         // Compute area between top right of the last div and bottom right of window
-        const area1 = (game.offsetWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth))
-            * (game.offsetHeight - lastDiv.offsetTop);
+        const area1 =
+            (game.offsetWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth)) * (game.offsetHeight - lastDiv.offsetTop);
 
         // Compute area between bottom of last div and bottom of the screen on whole width
-        const area2 = game.offsetWidth
-            * (game.offsetHeight - (lastDiv.offsetTop + lastDiv.offsetHeight));
+        const area2 = game.offsetWidth * (game.offsetHeight - (lastDiv.offsetTop + lastDiv.offsetHeight));
 
         if (area1 < 0 && area2 < 0) {
             // If screen is full, let's not attempt something foolish and simply center character in the middle.
@@ -38,28 +37,30 @@ function findBiggestAvailableArea(): Box {
                 xStart: 0,
                 yStart: 0,
                 xEnd: game.offsetWidth,
-                yEnd: game.offsetHeight
-            }
+                yEnd: game.offsetHeight,
+            };
         }
         if (area1 <= area2) {
             return {
                 xStart: 0,
                 yStart: lastDiv.offsetTop + lastDiv.offsetHeight,
                 xEnd: game.offsetWidth,
-                yEnd: game.offsetHeight
-            }
+                yEnd: game.offsetHeight,
+            };
         } else {
             return {
                 xStart: lastDiv.offsetLeft + lastDiv.offsetWidth,
                 yStart: lastDiv.offsetTop,
                 xEnd: game.offsetWidth,
-                yEnd: game.offsetHeight
-            }
+                yEnd: game.offsetHeight,
+            };
         }
     } else {
         // Possible destinations: at the center bottom or at the right bottom.
-        const mainSectionChildren = Array.from(document.querySelectorAll<HTMLDivElement>('div.main-section > div').values());
-        const sidebarChildren = Array.from(document.querySelectorAll<HTMLDivElement>('aside.sidebar > div').values());
+        const mainSectionChildren = Array.from(
+            document.querySelectorAll<HTMLDivElement>("div.main-section > div").values()
+        );
+        const sidebarChildren = Array.from(document.querySelectorAll<HTMLDivElement>("aside.sidebar > div").values());
 
         // No presentation? Let's center on the screen
         if (mainSectionChildren.length === 0) {
@@ -67,60 +68,58 @@ function findBiggestAvailableArea(): Box {
                 xStart: 0,
                 yStart: 0,
                 xEnd: game.offsetWidth,
-                yEnd: game.offsetHeight
-            }
+                yEnd: game.offsetHeight,
+            };
         }
 
         // At this point, we know we have at least one element in the main section.
-        const lastPresentationDiv = mainSectionChildren[mainSectionChildren.length-1];
+        const lastPresentationDiv = mainSectionChildren[mainSectionChildren.length - 1];
 
-        const presentationArea = (game.offsetHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight))
-            * (lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth);
+        const presentationArea =
+            (game.offsetHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight)) *
+            (lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth);
 
         let leftSideBar: number;
         let bottomSideBar: number;
         if (sidebarChildren.length === 0) {
-            leftSideBar = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('sidebar').offsetLeft;
+            leftSideBar = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("sidebar").offsetLeft;
             bottomSideBar = 0;
         } else {
             const lastSideBarChildren = sidebarChildren[sidebarChildren.length - 1];
             leftSideBar = lastSideBarChildren.offsetLeft;
             bottomSideBar = lastSideBarChildren.offsetTop + lastSideBarChildren.offsetHeight;
         }
-        const sideBarArea = (game.offsetWidth - leftSideBar)
-            * (game.offsetHeight - bottomSideBar);
+        const sideBarArea = (game.offsetWidth - leftSideBar) * (game.offsetHeight - bottomSideBar);
 
         if (presentationArea <= sideBarArea) {
             return {
                 xStart: leftSideBar,
                 yStart: bottomSideBar,
                 xEnd: game.offsetWidth,
-                yEnd: game.offsetHeight
-            }
+                yEnd: game.offsetHeight,
+            };
         } else {
             return {
                 xStart: 0,
                 yStart: lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight,
-                xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ game.offsetWidth , // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area
-                yEnd: game.offsetHeight
-            }
+                xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ game.offsetWidth, // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area
+                yEnd: game.offsetHeight,
+            };
         }
     }
 }
 
-
 /**
  * A store that contains the list of (video) peers we are connected to.
  */
 function createBiggestAvailableAreaStore() {
-
-    const { subscribe, set } = writable<Box>({xStart:0, yStart: 0, xEnd: 1, yEnd: 1});
+    const { subscribe, set } = writable<Box>({ xStart: 0, yStart: 0, xEnd: 1, yEnd: 1 });
 
     return {
         subscribe,
         recompute: () => {
             set(findBiggestAvailableArea());
-        }
+        },
     };
 }
 

front/src/Stores/ChatStore.ts

@@ -0,0 +1,119 @@
+import { writable } from "svelte/store";
+import { playersStore } from "./PlayersStore";
+import type { PlayerInterface } from "../Phaser/Game/PlayerInterface";
+
+export const chatVisibilityStore = writable(false);
+export const chatInputFocusStore = writable(false);
+
+export const newChatMessageStore = writable<string | null>(null);
+
+export enum ChatMessageTypes {
+    text = 1,
+    me,
+    userIncoming,
+    userOutcoming,
+}
+
+export interface ChatMessage {
+    type: ChatMessageTypes;
+    date: Date;
+    author?: PlayerInterface;
+    targets?: PlayerInterface[];
+    text?: string[];
+}
+
+function getAuthor(authorId: number): PlayerInterface {
+    const author = playersStore.getPlayerById(authorId);
+    if (!author) {
+        throw "Could not find data for author " + authorId;
+    }
+    return author;
+}
+
+function createChatMessagesStore() {
+    const { subscribe, update } = writable<ChatMessage[]>([]);
+
+    return {
+        subscribe,
+        addIncomingUser(authorId: number) {
+            update((list) => {
+                const lastMessage = list[list.length - 1];
+                if (lastMessage && lastMessage.type === ChatMessageTypes.userIncoming && lastMessage.targets) {
+                    lastMessage.targets.push(getAuthor(authorId));
+                } else {
+                    list.push({
+                        type: ChatMessageTypes.userIncoming,
+                        targets: [getAuthor(authorId)],
+                        date: new Date(),
+                    });
+                }
+                return list;
+            });
+        },
+        addOutcomingUser(authorId: number) {
+            update((list) => {
+                const lastMessage = list[list.length - 1];
+                if (lastMessage && lastMessage.type === ChatMessageTypes.userOutcoming && lastMessage.targets) {
+                    lastMessage.targets.push(getAuthor(authorId));
+                } else {
+                    list.push({
+                        type: ChatMessageTypes.userOutcoming,
+                        targets: [getAuthor(authorId)],
+                        date: new Date(),
+                    });
+                }
+                return list;
+            });
+        },
+        addPersonnalMessage(text: string) {
+            newChatMessageStore.set(text);
+            update((list) => {
+                const lastMessage = list[list.length - 1];
+                if (lastMessage && lastMessage.type === ChatMessageTypes.me && lastMessage.text) {
+                    lastMessage.text.push(text);
+                } else {
+                    list.push({
+                        type: ChatMessageTypes.me,
+                        text: [text],
+                        date: new Date(),
+                    });
+                }
+                return list;
+            });
+        },
+        addExternalMessage(authorId: number, text: string) {
+            update((list) => {
+                const lastMessage = list[list.length - 1];
+                if (lastMessage && lastMessage.type === ChatMessageTypes.text && lastMessage.text) {
+                    lastMessage.text.push(text);
+                } else {
+                    list.push({
+                        type: ChatMessageTypes.text,
+                        text: [text],
+                        author: getAuthor(authorId),
+                        date: new Date(),
+                    });
+                }
+                return list;
+            });
+            chatVisibilityStore.set(true);
+        },
+    };
+}
+export const chatMessagesStore = createChatMessagesStore();
+
+function createChatSubMenuVisibilityStore() {
+    const { subscribe, update } = writable<string>("");
+
+    return {
+        subscribe,
+        openSubMenu(playerName: string, index: number) {
+            const id = playerName + index;
+            update((oldValue) => {
+                return oldValue === id ? "" : id;
+            });
+        },
+    };
+}
+
+export const chatSubMenuVisbilityStore = createChatSubMenuVisibilityStore();

front/src/Stores/CustomCharacterStore.ts

@@ -1,3 +1,5 @@
 import { derived, writable, Writable } from "svelte/store";
 
-export const customCharacterSceneVisibleStore = writable(false);
+export const customCharacterSceneVisibleStore = writable(false);
+
+export const activeRowStore = writable(0);

front/src/Stores/GameOverlayStoreVisibility.ts

@@ -1,4 +1,4 @@
-import {writable} from "svelte/store";
+import { writable } from "svelte/store";
 
 /**
  * A store that contains whether the game overlay is shown or not.

front/src/Stores/MediaStore.ts

@@ -1,14 +1,14 @@
-import {derived, get, Readable, readable, writable, Writable} from "svelte/store";
-import {localUserStore} from "../Connexion/LocalUserStore";
-import {userMovingStore} from "./GameStore";
-import {HtmlUtils} from "../WebRtc/HtmlUtils";
-import {BrowserTooOldError} from "./Errors/BrowserTooOldError";
-import {errorStore} from "./ErrorStore";
-import {isIOS} from "../WebRtc/DeviceUtils";
-import {WebviewOnOldIOS} from "./Errors/WebviewOnOldIOS";
-import {gameOverlayVisibilityStore} from "./GameOverlayStoreVisibility";
-import {peerStore} from "./PeerStore";
-import {privacyShutdownStore} from "./PrivacyShutdownStore";
+import { derived, get, Readable, readable, writable, Writable } from "svelte/store";
+import { localUserStore } from "../Connexion/LocalUserStore";
+import { userMovingStore } from "./GameStore";
+import { HtmlUtils } from "../WebRtc/HtmlUtils";
+import { BrowserTooOldError } from "./Errors/BrowserTooOldError";
+import { errorStore } from "./ErrorStore";
+import { isIOS } from "../WebRtc/DeviceUtils";
+import { WebviewOnOldIOS } from "./Errors/WebviewOnOldIOS";
+import { gameOverlayVisibilityStore } from "./GameOverlayStoreVisibility";
+import { peerStore } from "./PeerStore";
+import { privacyShutdownStore } from "./PrivacyShutdownStore";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -57,7 +57,7 @@ export const enableCameraSceneVisibilityStore = createEnableCameraSceneVisibilit
  * A store containing whether the webcam was enabled in the last 10 seconds
  */
 const enabledWebCam10secondsAgoStore = readable(false, function start(set) {
-    let timeout: NodeJS.Timeout|null = null;
+    let timeout: NodeJS.Timeout | null = null;
 
     const unsubscribe = requestedCameraState.subscribe((enabled) => {
         if (enabled === true) {
@@ -71,7 +71,7 @@ const enabledWebCam10secondsAgoStore = readable(false, function start(set) {
         } else {
             set(false);
         }
-    })
+    });
 
     return function stop() {
         unsubscribe();
@@ -82,7 +82,7 @@ const enabledWebCam10secondsAgoStore = readable(false, function start(set) {
  * A store containing whether the webcam was enabled in the last 5 seconds
  */
 const userMoved5SecondsAgoStore = readable(false, function start(set) {
-    let timeout: NodeJS.Timeout|null = null;
+    let timeout: NodeJS.Timeout | null = null;
 
     const unsubscribe = userMovingStore.subscribe((moving) => {
         if (moving === true) {
@@ -94,45 +94,51 @@ const userMoved5SecondsAgoStore = readable(false, function start(set) {
             timeout = setTimeout(() => {
                 set(false);
             }, 5000);
-
         }
-    })
+    });
 
     return function stop() {
         unsubscribe();
     };
 });
 
-
 /**
  * A store containing whether the mouse is getting close the bottom right corner.
  */
 const mouseInBottomRight = readable(false, function start(set) {
     let lastInBottomRight = false;
-    const gameDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('game');
+    const gameDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("game");
 
     const detectInBottomRight = (event: MouseEvent) => {
         const rect = gameDiv.getBoundingClientRect();
-        const inBottomRight = event.x - rect.left > rect.width * 3 / 4 && event.y - rect.top > rect.height * 3 / 4;
+        const inBottomRight = event.x - rect.left > (rect.width * 3) / 4 && event.y - rect.top > (rect.height * 3) / 4;
         if (inBottomRight !== lastInBottomRight) {
             lastInBottomRight = inBottomRight;
             set(inBottomRight);
         }
     };
 
-    document.addEventListener('mousemove', detectInBottomRight);
+    document.addEventListener("mousemove", detectInBottomRight);
 
     return function stop() {
-        document.removeEventListener('mousemove', detectInBottomRight);
-    }
+        document.removeEventListener("mousemove", detectInBottomRight);
+    };
 });
 
 /**
  * A store that contains "true" if the webcam should be stopped for energy efficiency reason - i.e. we are not moving and not in a conversation.
  */
-export const cameraEnergySavingStore = derived([userMoved5SecondsAgoStore, peerStore, enabledWebCam10secondsAgoStore, mouseInBottomRight], ([$userMoved5SecondsAgoStore,$peerStore, $enabledWebCam10secondsAgoStore, $mouseInBottomRight]) => {
-    return !$mouseInBottomRight && !$userMoved5SecondsAgoStore && $peerStore.size === 0 && !$enabledWebCam10secondsAgoStore;
-});
+export const cameraEnergySavingStore = derived(
+    [userMoved5SecondsAgoStore, peerStore, enabledWebCam10secondsAgoStore, mouseInBottomRight],
+    ([$userMoved5SecondsAgoStore, $peerStore, $enabledWebCam10secondsAgoStore, $mouseInBottomRight]) => {
+        return (
+            !$mouseInBottomRight &&
+            !$userMoved5SecondsAgoStore &&
+            $peerStore.size === 0 &&
+            !$enabledWebCam10secondsAgoStore
+        );
+    }
+);
 
 /**
  * A store that contains video constraints.
@@ -143,28 +149,30 @@ function createVideoConstraintStore() {
         height: { min: 400, ideal: 720 },
         frameRate: { ideal: localUserStore.getVideoQualityValue() },
         facingMode: "user",
-        resizeMode: 'crop-and-scale',
-        aspectRatio: 1.777777778
+        resizeMode: "crop-and-scale",
+        aspectRatio: 1.777777778,
     } as MediaTrackConstraints);
 
     return {
         subscribe,
-        setDeviceId: (deviceId: string|undefined) => update((constraints) => {
-            if (deviceId !== undefined) {
-                constraints.deviceId = {
-                    exact: deviceId
-                };
-            } else {
-                delete constraints.deviceId;
-            }
+        setDeviceId: (deviceId: string | undefined) =>
+            update((constraints) => {
+                if (deviceId !== undefined) {
+                    constraints.deviceId = {
+                        exact: deviceId,
+                    };
+                } else {
+                    delete constraints.deviceId;
+                }
 
-            return constraints;
-        }),
-        setFrameRate: (frameRate: number) => update((constraints) => {
-            constraints.frameRate = { ideal: frameRate };
+                return constraints;
+            }),
+        setFrameRate: (frameRate: number) =>
+            update((constraints) => {
+                constraints.frameRate = { ideal: frameRate };
 
-            return constraints;
-        })
+                return constraints;
+            }),
     };
 }
 
@@ -178,39 +186,39 @@ function createAudioConstraintStore() {
         //TODO: make these values configurable in the game settings menu and store them in localstorage
         autoGainControl: false,
         echoCancellation: true,
-        noiseSuppression: true
-    } as boolean|MediaTrackConstraints);
+        noiseSuppression: true,
+    } as boolean | MediaTrackConstraints);
 
     let selectedDeviceId = null;
 
     return {
         subscribe,
-        setDeviceId: (deviceId: string|undefined) => update((constraints) => {
-            selectedDeviceId = deviceId;
+        setDeviceId: (deviceId: string | undefined) =>
+            update((constraints) => {
+                selectedDeviceId = deviceId;
 
-            if (typeof(constraints) === 'boolean') {
-                constraints = {}
-            }
-            if (deviceId !== undefined) {
-                constraints.deviceId = {
-                    exact: selectedDeviceId
-                };
-            } else {
-                delete constraints.deviceId;
-            }
+                if (typeof constraints === "boolean") {
+                    constraints = {};
+                }
+                if (deviceId !== undefined) {
+                    constraints.deviceId = {
+                        exact: selectedDeviceId,
+                    };
+                } else {
+                    delete constraints.deviceId;
+                }
 
-            return constraints;
-        })
+                return constraints;
+            }),
     };
 }
 
 export const audioConstraintStore = createAudioConstraintStore();
 
-
 let timeout: NodeJS.Timeout;
 
-let previousComputedVideoConstraint: boolean|MediaTrackConstraints = false;
-let previousComputedAudioConstraint: boolean|MediaTrackConstraints = false;
+let previousComputedVideoConstraint: boolean | MediaTrackConstraints = false;
+let previousComputedAudioConstraint: boolean | MediaTrackConstraints = false;
 
 /**
  * A store containing the media constraints we want to apply.
@@ -225,7 +233,8 @@ export const mediaStreamConstraintsStore = derived(
         audioConstraintStore,
         privacyShutdownStore,
         cameraEnergySavingStore,
-    ], (
+    ],
+    (
         [
             $requestedCameraState,
             $requestedMicrophoneState,
@@ -235,92 +244,97 @@ export const mediaStreamConstraintsStore = derived(
             $audioConstraintStore,
             $privacyShutdownStore,
             $cameraEnergySavingStore,
-        ], set
+        ],
+        set
     ) => {
+        let currentVideoConstraint: boolean | MediaTrackConstraints = $videoConstraintStore;
+        let currentAudioConstraint: boolean | MediaTrackConstraints = $audioConstraintStore;
 
-    let currentVideoConstraint: boolean|MediaTrackConstraints = $videoConstraintStore;
-    let currentAudioConstraint: boolean|MediaTrackConstraints = $audioConstraintStore;
-
-    if ($enableCameraSceneVisibilityStore) {
-        set({
-            video: currentVideoConstraint,
-            audio: currentAudioConstraint,
-        });
-        return;
-    }
-
-    // Disable webcam if the user requested so
-    if ($requestedCameraState === false) {
-        currentVideoConstraint = false;
-    }
-
-    // Disable microphone if the user requested so
-    if ($requestedMicrophoneState === false) {
-        currentAudioConstraint = false;
-    }
-
-    // Disable webcam and microphone when in a Jitsi
-    if ($gameOverlayVisibilityStore === false) {
-        currentVideoConstraint = false;
-        currentAudioConstraint = false;
-    }
-
-    // Disable webcam for privacy reasons (the game is not visible and we were talking to noone)
-    if ($privacyShutdownStore === true) {
-        currentVideoConstraint = false;
-    }
-
-    // Disable webcam for energy reasons (the user is not moving and we are talking to noone)
-    if ($cameraEnergySavingStore === true) {
-        currentVideoConstraint = false;
-        currentAudioConstraint = false;
-    }
-
-    // Let's make the changes only if the new value is different from the old one.
-    if (previousComputedVideoConstraint != currentVideoConstraint || previousComputedAudioConstraint != currentAudioConstraint) {
-        previousComputedVideoConstraint = currentVideoConstraint;
-        previousComputedAudioConstraint = currentAudioConstraint;
-        // Let's copy the objects.
-        if (typeof previousComputedVideoConstraint !== 'boolean') {
-            previousComputedVideoConstraint = {...previousComputedVideoConstraint};
-        }
-        if (typeof previousComputedAudioConstraint !== 'boolean') {
-            previousComputedAudioConstraint = {...previousComputedAudioConstraint};
-        }
-
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-
-        // Let's wait a little bit to avoid sending too many constraint changes.
-        timeout = setTimeout(() => {
+        if ($enableCameraSceneVisibilityStore) {
             set({
                 video: currentVideoConstraint,
                 audio: currentAudioConstraint,
             });
-        }, 100);
-    }
-}, {
-    video: false,
-    audio: false
-} as MediaStreamConstraints);
+            return;
+        }
+
+        // Disable webcam if the user requested so
+        if ($requestedCameraState === false) {
+            currentVideoConstraint = false;
+        }
+
+        // Disable microphone if the user requested so
+        if ($requestedMicrophoneState === false) {
+            currentAudioConstraint = false;
+        }
+
+        // Disable webcam and microphone when in a Jitsi
+        if ($gameOverlayVisibilityStore === false) {
+            currentVideoConstraint = false;
+            currentAudioConstraint = false;
+        }
+
+        // Disable webcam for privacy reasons (the game is not visible and we were talking to noone)
+        if ($privacyShutdownStore === true) {
+            currentVideoConstraint = false;
+        }
+
+        // Disable webcam for energy reasons (the user is not moving and we are talking to noone)
+        if ($cameraEnergySavingStore === true) {
+            currentVideoConstraint = false;
+            currentAudioConstraint = false;
+        }
+
+        // Let's make the changes only if the new value is different from the old one.
+        if (
+            previousComputedVideoConstraint != currentVideoConstraint ||
+            previousComputedAudioConstraint != currentAudioConstraint
+        ) {
+            previousComputedVideoConstraint = currentVideoConstraint;
+            previousComputedAudioConstraint = currentAudioConstraint;
+            // Let's copy the objects.
+            if (typeof previousComputedVideoConstraint !== "boolean") {
+                previousComputedVideoConstraint = { ...previousComputedVideoConstraint };
+            }
+            if (typeof previousComputedAudioConstraint !== "boolean") {
+                previousComputedAudioConstraint = { ...previousComputedAudioConstraint };
+            }
+
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+
+            // Let's wait a little bit to avoid sending too many constraint changes.
+            timeout = setTimeout(() => {
+                set({
+                    video: currentVideoConstraint,
+                    audio: currentAudioConstraint,
+                });
+            }, 100);
+        }
+    },
+    {
+        video: false,
+        audio: false,
+    } as MediaStreamConstraints
+);
 
 export type LocalStreamStoreValue = StreamSuccessValue | StreamErrorValue;
 
 interface StreamSuccessValue {
-    type: "success",
-    stream: MediaStream|null,
+    type: "success";
+    stream: MediaStream | null;
     // The constraints that we got (and not the one that have been requested)
-    constraints: MediaStreamConstraints
+    constraints: MediaStreamConstraints;
 }
 
 interface StreamErrorValue {
-    type: "error",
-    error: Error,
-    constraints: MediaStreamConstraints
+    type: "error";
+    error: Error;
+    constraints: MediaStreamConstraints;
 }
 
-let currentStream : MediaStream|null = null;
+let currentStream: MediaStream | null = null;
 
 /**
  * Stops the camera from filming
@@ -347,84 +361,94 @@ function stopMicrophone(): void {
 /**
  * A store containing the MediaStream object (or null if nothing requested, or Error if an error occurred)
  */
-export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalStreamStoreValue>(mediaStreamConstraintsStore, ($mediaStreamConstraintsStore, set) => {
-    const constraints = { ...$mediaStreamConstraintsStore };
+export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalStreamStoreValue>(
+    mediaStreamConstraintsStore,
+    ($mediaStreamConstraintsStore, set) => {
+        const constraints = { ...$mediaStreamConstraintsStore };
 
-    if (navigator.mediaDevices === undefined) {
-        if (window.location.protocol === 'http:') {
-            //throw new Error('Unable to access your camera or microphone. You need to use a HTTPS connection.');
+        if (navigator.mediaDevices === undefined) {
+            if (window.location.protocol === "http:") {
+                //throw new Error('Unable to access your camera or microphone. You need to use a HTTPS connection.');
+                set({
+                    type: "error",
+                    error: new Error("Unable to access your camera or microphone. You need to use a HTTPS connection."),
+                    constraints,
+                });
+                return;
+            } else if (isIOS()) {
+                set({
+                    type: "error",
+                    error: new WebviewOnOldIOS(),
+                    constraints,
+                });
+                return;
+            } else {
+                set({
+                    type: "error",
+                    error: new BrowserTooOldError(),
+                    constraints,
+                });
+                return;
+            }
+        }
+
+        if (constraints.audio === false) {
+            stopMicrophone();
+        }
+        if (constraints.video === false) {
+            stopCamera();
+        }
+
+        if (constraints.audio === false && constraints.video === false) {
+            currentStream = null;
             set({
-                type: 'error',
-                error: new Error('Unable to access your camera or microphone. You need to use a HTTPS connection.'),
-                constraints
-            });
-            return;
-        } else if (isIOS()) {
-            set({
-                type: 'error',
-                error: new WebviewOnOldIOS(),
-                constraints
-            });
-            return;
-        } else {
-            set({
-                type: 'error',
-                error: new BrowserTooOldError(),
-                constraints
+                type: "success",
+                stream: null,
+                constraints,
             });
             return;
         }
-    }
 
-    if (constraints.audio === false) {
-        stopMicrophone();
-    }
-    if (constraints.video === false) {
-        stopCamera();
-    }
-
-    if (constraints.audio === false && constraints.video === false) {
-        currentStream = null;
-        set({
-            type: 'success',
-            stream: null,
-            constraints
-        });
-        return;
-    }
-
-    (async () => {
-        try {
-            stopMicrophone();
-            stopCamera();
-            currentStream = await navigator.mediaDevices.getUserMedia(constraints);
-            set({
-                type: 'success',
-                stream: currentStream,
-                constraints
-            });
-            return;
-        } catch (e) {
-            if (constraints.video !== false) {
-                console.info("Error. Unable to get microphone and/or camera access. Trying audio only.", $mediaStreamConstraintsStore, e);
-                // TODO: does it make sense to pop this error when retrying?
+        (async () => {
+            try {
+                stopMicrophone();
+                stopCamera();
+                currentStream = await navigator.mediaDevices.getUserMedia(constraints);
                 set({
-                    type: 'error',
-                    error: e,
-                    constraints
+                    type: "success",
+                    stream: currentStream,
+                    constraints,
                 });
-                // Let's try without video constraints
-                requestedCameraState.disableWebcam();
-            } else {
-                console.info("Error. Unable to get microphone and/or camera access.", $mediaStreamConstraintsStore, e);
-                set({
-                    type: 'error',
-                    error: e,
-                    constraints
-                });
-            }
+                return;
+            } catch (e) {
+                if (constraints.video !== false) {
+                    console.info(
+                        "Error. Unable to get microphone and/or camera access. Trying audio only.",
+                        $mediaStreamConstraintsStore,
+                        e
+                    );
+                    // TODO: does it make sense to pop this error when retrying?
+                    set({
+                        type: "error",
+                        error: e,
+                        constraints,
+                    });
+                    // Let's try without video constraints
+                    requestedCameraState.disableWebcam();
+                } else {
+                    console.info(
+                        "Error. Unable to get microphone and/or camera access.",
+                        $mediaStreamConstraintsStore,
+                        e
+                    );
+                    set({
+                        type: "error",
+                        error: e,
+                        constraints,
+                    });
+                }
 
-            /*constraints.video = false;
+                /*constraints.video = false;
             if (constraints.audio === false) {
                 console.info("Error. Unable to get microphone and/or camera access.", $mediaStreamConstraintsStore, e);
                 set({
@@ -453,9 +477,10 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
                     });
                 }
             }*/
-        }
-    })();
-});
+            }
+        })();
+    }
+);
 
 /**
  * A store containing the real active media constrained (not the one requested by the user, but the one we got from the system)
@@ -472,12 +497,15 @@ export const deviceListStore = readable<MediaDeviceInfo[]>([], function start(se
 
     const queryDeviceList = () => {
         // Note: so far, we are ignoring any failures.
-        navigator.mediaDevices.enumerateDevices().then((mediaDeviceInfos) => {
-            set(mediaDeviceInfos);
-        }).catch((e) => {
-            console.error(e);
-            throw e;
-        });
+        navigator.mediaDevices
+            .enumerateDevices()
+            .then((mediaDeviceInfos) => {
+                set(mediaDeviceInfos);
+            })
+            .catch((e) => {
+                console.error(e);
+                throw e;
+            });
     };
 
     const unsubscribe = localStreamStore.subscribe((streamResult) => {
@@ -490,23 +518,23 @@ export const deviceListStore = readable<MediaDeviceInfo[]>([], function start(se
     });
 
     if (navigator.mediaDevices) {
-        navigator.mediaDevices.addEventListener('devicechange', queryDeviceList);
+        navigator.mediaDevices.addEventListener("devicechange", queryDeviceList);
     }
 
     return function stop() {
         unsubscribe();
         if (navigator.mediaDevices) {
-            navigator.mediaDevices.removeEventListener('devicechange', queryDeviceList);
+            navigator.mediaDevices.removeEventListener("devicechange", queryDeviceList);
         }
     };
 });
 
 export const cameraListStore = derived(deviceListStore, ($deviceListStore) => {
-    return $deviceListStore.filter(device => device.kind === 'videoinput');
+    return $deviceListStore.filter((device) => device.kind === "videoinput");
 });
 
 export const microphoneListStore = derived(deviceListStore, ($deviceListStore) => {
-    return $deviceListStore.filter(device => device.kind === 'audioinput');
+    return $deviceListStore.filter((device) => device.kind === "audioinput");
 });
 
 // TODO: detect the new webcam and automatically switch on it.
@@ -519,7 +547,7 @@ cameraListStore.subscribe((devices) => {
 
     // If we cannot find the device ID, let's remove it.
     // @ts-ignore
-    if (!devices.find(device => device.deviceId === constraints.deviceId.exact)) {
+    if (!devices.find((device) => device.deviceId === constraints.deviceId.exact)) {
         videoConstraintStore.setDeviceId(undefined);
     }
 });
@@ -527,7 +555,7 @@ cameraListStore.subscribe((devices) => {
 microphoneListStore.subscribe((devices) => {
     // If the selected camera is unplugged, let's remove the constraint on deviceId
     const constraints = get(audioConstraintStore);
-    if (typeof constraints === 'boolean') {
+    if (typeof constraints === "boolean") {
         return;
     }
     if (!constraints.deviceId) {
@@ -536,13 +564,13 @@ microphoneListStore.subscribe((devices) => {
 
     // If we cannot find the device ID, let's remove it.
     // @ts-ignore
-    if (!devices.find(device => device.deviceId === constraints.deviceId.exact)) {
+    if (!devices.find((device) => device.deviceId === constraints.deviceId.exact)) {
         audioConstraintStore.setDeviceId(undefined);
     }
 });
 
-localStreamStore.subscribe(streamResult => {
-    if (streamResult.type === 'error') {
+localStreamStore.subscribe((streamResult) => {
+    if (streamResult.type === "error") {
         if (streamResult.error.name === BrowserTooOldError.NAME || streamResult.error.name === WebviewOnOldIOS.NAME) {
             errorStore.addErrorMessage(streamResult.error);
         }

front/src/Stores/PeerStore.ts

@@ -1,7 +1,7 @@
-import {readable, writable} from "svelte/store";
-import type {RemotePeer, SimplePeer} from "../WebRtc/SimplePeer";
-import {VideoPeer} from "../WebRtc/VideoPeer";
-import {ScreenSharingPeer} from "../WebRtc/ScreenSharingPeer";
+import { readable, writable } from "svelte/store";
+import type { RemotePeer, SimplePeer } from "../WebRtc/SimplePeer";
+import { VideoPeer } from "../WebRtc/VideoPeer";
+import { ScreenSharingPeer } from "../WebRtc/ScreenSharingPeer";
 
 /**
  * A store that contains the list of (video) peers we are connected to.
@@ -19,20 +19,20 @@ function createPeerStore() {
             simplePeer.registerPeerConnectionListener({
                 onConnect(peer: RemotePeer) {
                     if (peer instanceof VideoPeer) {
-                        update(users => {
+                        update((users) => {
                             users.set(peer.userId, peer);
                             return users;
                         });
                     }
                 },
                 onDisconnect(userId: number) {
-                    update(users => {
+                    update((users) => {
                         users.delete(userId);
                         return users;
                     });
-                }
-            })
-        }
+                },
+            });
+        },
     };
 }
 
@@ -52,20 +52,20 @@ function createScreenSharingPeerStore() {
             simplePeer.registerPeerConnectionListener({
                 onConnect(peer: RemotePeer) {
                     if (peer instanceof ScreenSharingPeer) {
-                        update(users => {
+                        update((users) => {
                             users.set(peer.userId, peer);
                             return users;
                         });
                     }
                 },
                 onDisconnect(userId: number) {
-                    update(users => {
+                    update((users) => {
                         users.delete(userId);
                         return users;
                     });
-                }
-            })
-        }
+                },
+            });
+        },
     };
 }
 
@@ -79,8 +79,7 @@ function createScreenSharingStreamStore() {
     let peers = new Map<number, ScreenSharingPeer>();
 
     return readable<Map<number, ScreenSharingPeer>>(peers, function start(set) {
-
-        let unsubscribes: (()=>void)[] = [];
+        let unsubscribes: (() => void)[] = [];
 
         const unsubscribe = screenSharingPeerStore.subscribe((screenSharingPeers) => {
             for (const unsubscribe of unsubscribes) {
@@ -91,24 +90,23 @@ function createScreenSharingStreamStore() {
             peers = new Map<number, ScreenSharingPeer>();
 
             screenSharingPeers.forEach((screenSharingPeer: ScreenSharingPeer, key: number) => {
-
                 if (screenSharingPeer.isReceivingScreenSharingStream()) {
                     peers.set(key, screenSharingPeer);
                 }
 
-                unsubscribes.push(screenSharingPeer.streamStore.subscribe((stream) => {
-                    if (stream) {
-                        peers.set(key, screenSharingPeer);
-                    } else {
-                        peers.delete(key);
-                    }
-                    set(peers);
-                }));
-
+                unsubscribes.push(
+                    screenSharingPeer.streamStore.subscribe((stream) => {
+                        if (stream) {
+                            peers.set(key, screenSharingPeer);
+                        } else {
+                            peers.delete(key);
+                        }
+                        set(peers);
+                    })
+                );
             });
 
             set(peers);
-
         });
 
         return function stop() {
@@ -117,9 +115,7 @@ function createScreenSharingStreamStore() {
                 unsubscribe();
             }
         };
-    })
+    });
 }
 
 export const screenSharingStreamStore = createScreenSharingStreamStore();
-
-

front/src/Stores/PlayersStore.ts

@@ -0,0 +1,69 @@
+import { writable } from "svelte/store";
+import type { PlayerInterface } from "../Phaser/Game/PlayerInterface";
+import type { RoomConnection } from "../Connexion/RoomConnection";
+import { getRandomColor } from "../WebRtc/ColorGenerator";
+
+let idCount = 0;
+
+/**
+ * A store that contains the list of players currently known.
+ */
+function createPlayersStore() {
+    let players = new Map<number, PlayerInterface>();
+
+    const { subscribe, set, update } = writable(players);
+
+    return {
+        subscribe,
+        connectToRoomConnection: (roomConnection: RoomConnection) => {
+            players = new Map<number, PlayerInterface>();
+            set(players);
+            roomConnection.onUserJoins((message) => {
+                update((users) => {
+                    users.set(message.userId, {
+                        userId: message.userId,
+                        name: message.name,
+                        characterLayers: message.characterLayers,
+                        visitCardUrl: message.visitCardUrl,
+                        companion: message.companion,
+                        userUuid: message.userUuid,
+                        color: getRandomColor(),
+                    });
+                    return users;
+                });
+            });
+            roomConnection.onUserLeft((userId) => {
+                update((users) => {
+                    users.delete(userId);
+                    return users;
+                });
+            });
+        },
+        getPlayerById(userId: number): PlayerInterface | undefined {
+            return players.get(userId);
+        },
+        addFacticePlayer(name: string): number {
+            let userId: number | null = null;
+            players.forEach((p) => {
+                if (p.name === name) userId = p.userId;
+            });
+            if (userId) return userId;
+            const newUserId = idCount--;
+            update((users) => {
+                users.set(newUserId, {
+                    userId: newUserId,
+                    name,
+                    characterLayers: [],
+                    visitCardUrl: null,
+                    companion: null,
+                    userUuid: "dummy",
+                    color: getRandomColor(),
+                });
+                return users;
+            });
+            return newUserId;
+        },
+    };
+}
+
+export const playersStore = createPlayersStore();

front/src/Stores/PrivacyShutdownStore.ts

@@ -1,6 +1,6 @@
-import {get, writable} from "svelte/store";
-import {peerStore} from "./PeerStore";
-import {visibilityStore} from "./VisibilityStore";
+import { get, writable } from "svelte/store";
+import { peerStore } from "./PeerStore";
+import { visibilityStore } from "./VisibilityStore";
 
 /**
  * A store that contains "true" if the webcam should be stopped for privacy reasons - i.e. if the the user left the the page while not in a discussion.
@@ -28,7 +28,6 @@ function createPrivacyShutdownStore() {
         }
     });
 
-
     return {
         subscribe,
     };

front/src/Stores/ScreenSharingStore.ts

@@ -1,12 +1,10 @@
-import {derived, get, Readable, readable, writable, Writable} from "svelte/store";
-import {peerStore} from "./PeerStore";
-import type {
-    LocalStreamStoreValue,
-} from "./MediaStore";
-import {DivImportance} from "../WebRtc/LayoutManager";
-import {gameOverlayVisibilityStore} from "./GameOverlayStoreVisibility";
+import { derived, get, Readable, readable, writable, Writable } from "svelte/store";
+import { peerStore } from "./PeerStore";
+import type { LocalStreamStoreValue } from "./MediaStore";
+import { DivImportance } from "../WebRtc/LayoutManager";
+import { gameOverlayVisibilityStore } from "./GameOverlayStoreVisibility";
 
-declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
+declare const navigator: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -23,7 +21,7 @@ function createRequestedScreenSharingState() {
 
 export const requestedScreenSharingState = createRequestedScreenSharingState();
 
-let currentStream : MediaStream|null = null;
+let currentStream: MediaStream | null = null;
 
 /**
  * Stops the camera from filming
@@ -37,27 +35,17 @@ function stopScreenSharing(): void {
     currentStream = null;
 }
 
-let previousComputedVideoConstraint: boolean|MediaTrackConstraints = false;
-let previousComputedAudioConstraint: boolean|MediaTrackConstraints = false;
+let previousComputedVideoConstraint: boolean | MediaTrackConstraints = false;
+let previousComputedAudioConstraint: boolean | MediaTrackConstraints = false;
 
 /**
  * A store containing the media constraints we want to apply.
  */
 export const screenSharingConstraintsStore = derived(
-    [
-        requestedScreenSharingState,
-        gameOverlayVisibilityStore,
-        peerStore,
-    ], (
-        [
-            $requestedScreenSharingState,
-            $gameOverlayVisibilityStore,
-            $peerStore,
-        ], set
-    ) => {
-
-        let currentVideoConstraint: boolean|MediaTrackConstraints = true;
-        let currentAudioConstraint: boolean|MediaTrackConstraints = false;
+    [requestedScreenSharingState, gameOverlayVisibilityStore, peerStore],
+    ([$requestedScreenSharingState, $gameOverlayVisibilityStore, $peerStore], set) => {
+        let currentVideoConstraint: boolean | MediaTrackConstraints = true;
+        let currentAudioConstraint: boolean | MediaTrackConstraints = false;
 
         // Disable screen sharing if the user requested so
         if (!$requestedScreenSharingState) {
@@ -78,7 +66,10 @@ export const screenSharingConstraintsStore = derived(
         }
 
         // Let's make the changes only if the new value is different from the old one.
-        if (previousComputedVideoConstraint != currentVideoConstraint || previousComputedAudioConstraint != currentAudioConstraint) {
+        if (
+            previousComputedVideoConstraint != currentVideoConstraint ||
+            previousComputedAudioConstraint != currentAudioConstraint
+        ) {
             previousComputedVideoConstraint = currentVideoConstraint;
             previousComputedAudioConstraint = currentAudioConstraint;
             // Let's copy the objects.
@@ -94,85 +85,89 @@ export const screenSharingConstraintsStore = derived(
                 audio: currentAudioConstraint,
             });
         }
-    }, {
+    },
+    {
         video: false,
-        audio: false
-    } as MediaStreamConstraints);
-
+        audio: false,
+    } as MediaStreamConstraints
+);
 
 /**
  * A store containing the MediaStream object for ScreenSharing (or null if nothing requested, or Error if an error occurred)
  */
-export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstraints>, LocalStreamStoreValue>(screenSharingConstraintsStore, ($screenSharingConstraintsStore, set) => {
-    const constraints = $screenSharingConstraintsStore;
+export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstraints>, LocalStreamStoreValue>(
+    screenSharingConstraintsStore,
+    ($screenSharingConstraintsStore, set) => {
+        const constraints = $screenSharingConstraintsStore;
 
-    if ($screenSharingConstraintsStore.video === false && $screenSharingConstraintsStore.audio === false) {
-        stopScreenSharing();
-        requestedScreenSharingState.disableScreenSharing();
-        set({
-            type: 'success',
-            stream: null,
-            constraints
-        });
-        return;
-    }
-
-    let currentStreamPromise: Promise<MediaStream>;
-    if (navigator.getDisplayMedia) {
-        currentStreamPromise = navigator.getDisplayMedia({constraints});
-    } else if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
-        currentStreamPromise = navigator.mediaDevices.getDisplayMedia({constraints});
-    } else {
-        stopScreenSharing();
-        set({
-            type: 'error',
-            error: new Error('Your browser does not support sharing screen'),
-            constraints
-        });
-        return;
-    }
-
-    (async () => {
-        try {
+        if ($screenSharingConstraintsStore.video === false && $screenSharingConstraintsStore.audio === false) {
             stopScreenSharing();
-            currentStream = await currentStreamPromise;
-
-            // If stream ends (for instance if user clicks the stop screen sharing button in the browser), let's close the view
-            for (const track of currentStream.getTracks()) {
-                track.onended = () => {
-                    stopScreenSharing();
-                    requestedScreenSharingState.disableScreenSharing();
-                    previousComputedVideoConstraint = false;
-                    previousComputedAudioConstraint = false;
-                    set({
-                        type: 'success',
-                        stream: null,
-                        constraints: {
-                            video: false,
-                            audio: false
-                        }
-                    });
-                };
-            }
-
+            requestedScreenSharingState.disableScreenSharing();
             set({
-                type: 'success',
-                stream: currentStream,
-                constraints
+                type: "success",
+                stream: null,
+                constraints,
             });
             return;
-        } catch (e) {
-            currentStream = null;
-            requestedScreenSharingState.disableScreenSharing();
-            console.info("Error. Unable to share screen.", e);
-            set({
-                type: 'error',
-                error: e,
-                constraints
-            });
         }
-    })();
-});
+
+        let currentStreamPromise: Promise<MediaStream>;
+        if (navigator.getDisplayMedia) {
+            currentStreamPromise = navigator.getDisplayMedia({ constraints });
+        } else if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
+            currentStreamPromise = navigator.mediaDevices.getDisplayMedia({ constraints });
+        } else {
+            stopScreenSharing();
+            set({
+                type: "error",
+                error: new Error("Your browser does not support sharing screen"),
+                constraints,
+            });
+            return;
+        }
+
+        (async () => {
+            try {
+                stopScreenSharing();
+                currentStream = await currentStreamPromise;
+
+                // If stream ends (for instance if user clicks the stop screen sharing button in the browser), let's close the view
+                for (const track of currentStream.getTracks()) {
+                    track.onended = () => {
+                        stopScreenSharing();
+                        requestedScreenSharingState.disableScreenSharing();
+                        previousComputedVideoConstraint = false;
+                        previousComputedAudioConstraint = false;
+                        set({
+                            type: "success",
+                            stream: null,
+                            constraints: {
+                                video: false,
+                                audio: false,
+                            },
+                        });
+                    };
+                }
+
+                set({
+                    type: "success",
+                    stream: currentStream,
+                    constraints,
+                });
+                return;
+            } catch (e) {
+                currentStream = null;
+                requestedScreenSharingState.disableScreenSharing();
+                console.info("Error. Unable to share screen.", e);
+                set({
+                    type: "error",
+                    error: e,
+                    constraints,
+                });
+            }
+        })();
+    }
+);
 
 /**
  * A store containing whether the screen sharing button should be displayed or hidden.
@@ -188,19 +183,18 @@ export const screenSharingAvailableStore = derived(peerStore, ($peerStore, set)
 
 export interface ScreenSharingLocalMedia {
     uniqueId: string;
-    stream: MediaStream|null;
+    stream: MediaStream | null;
     //subscribe(this: void, run: Subscriber<ScreenSharingLocalMedia>, invalidate?: (value?: ScreenSharingLocalMedia) => void): Unsubscriber;
 }
 
 /**
  * The representation of the screen sharing stream.
  */
-export const screenSharingLocalMedia = readable<ScreenSharingLocalMedia|null>(null, function start(set) {
-
+export const screenSharingLocalMedia = readable<ScreenSharingLocalMedia | null>(null, function start(set) {
     const localMedia: ScreenSharingLocalMedia = {
         uniqueId: "localScreenSharingStream",
-        stream: null
-    }
+        stream: null,
+    };
 
     const unsubscribe = screenSharingLocalStreamStore.subscribe((screenSharingLocalStream) => {
         if (screenSharingLocalStream.type === "success") {
@@ -214,4 +208,4 @@ export const screenSharingLocalMedia = readable<ScreenSharingLocalMedia|null>(nu
     return function stop() {
         unsubscribe();
     };
-})
+});