Merge pull request #1963 from thecodingmachine/develop

Deploy 2022-03-14

front/src/Api/Events/ActionsMenuActionClickedEvent.ts

@@ -0,0 +1,12 @@
+import * as tg from "generic-type-guard";
+
+export const isActionsMenuActionClickedEvent = new tg.IsInterface()
+    .withProperties({
+        id: tg.isNumber,
+        actionName: tg.isString,
+    })
+    .get();
+
+export type ActionsMenuActionClickedEvent = tg.GuardedType<typeof isActionsMenuActionClickedEvent>;
+
+export type ActionsMenuActionClickedEventCallback = (event: ActionsMenuActionClickedEvent) => void;

front/src/Api/Events/AddActionsMenuKeyToRemotePlayerEvent.ts

@@ -0,0 +1,12 @@
+import * as tg from "generic-type-guard";
+
+export const isAddActionsMenuKeyToRemotePlayerEvent = new tg.IsInterface()
+    .withProperties({
+        id: tg.isNumber,
+        actionKey: tg.isString,
+    })
+    .get();
+
+export type AddActionsMenuKeyToRemotePlayerEvent = tg.GuardedType<typeof isAddActionsMenuKeyToRemotePlayerEvent>;
+
+export type AddActionsMenuKeyToRemotePlayerEventCallback = (event: AddActionsMenuKeyToRemotePlayerEvent) => void;

front/src/Api/Events/IframeEvent.ts

@@ -36,6 +36,10 @@ import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
 import { isColorEvent } from "./ColorEvent";
 import { isMovePlayerToEventConfig } from "./MovePlayerToEvent";
 import { isMovePlayerToEventAnswer } from "./MovePlayerToEventAnswer";
+import type { RemotePlayerClickedEvent } from "./RemotePlayerClickedEvent";
+import type { AddActionsMenuKeyToRemotePlayerEvent } from "./AddActionsMenuKeyToRemotePlayerEvent";
+import type { ActionsMenuActionClickedEvent } from "./ActionsMenuActionClickedEvent";
+import type { RemoveActionsMenuKeyFromRemotePlayerEvent } from "./RemoveActionsMenuKeyFromRemotePlayerEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T;
@@ -45,6 +49,8 @@ export interface TypedMessageEvent<T> extends MessageEvent {
  * List event types sent from an iFrame to WorkAdventure
  */
 export type IframeEventMap = {
+    addActionsMenuKeyToRemotePlayer: AddActionsMenuKeyToRemotePlayerEvent;
+    removeActionsMenuKeyFromRemotePlayer: RemoveActionsMenuKeyFromRemotePlayerEvent;
     loadPage: LoadPageEvent;
     chat: ChatEvent;
     cameraFollowPlayer: CameraFollowPlayerEvent;
@@ -58,6 +64,7 @@ export type IframeEventMap = {
     displayBubble: null;
     removeBubble: null;
     onPlayerMove: undefined;
+    onOpenActionMenu: undefined;
     onCameraUpdate: undefined;
     showLayer: LayerEvent;
     hideLayer: LayerEvent;
@@ -90,6 +97,8 @@ export interface IframeResponseEventMap {
     enterZoneEvent: ChangeZoneEvent;
     leaveZoneEvent: ChangeZoneEvent;
     buttonClickedEvent: ButtonClickedEvent;
+    remotePlayerClickedEvent: RemotePlayerClickedEvent;
+    actionsMenuActionClickedEvent: ActionsMenuActionClickedEvent;
     hasPlayerMoved: HasPlayerMovedEvent;
     wasCameraUpdated: WasCameraUpdatedEvent;
     menuItemClicked: MenuItemClickedEvent;

front/src/Api/Events/RemotePlayerClickedEvent.ts

@@ -0,0 +1,15 @@
+import * as tg from "generic-type-guard";
+
+// TODO: Change for player Clicked, add all neccessary data
+export const isRemotePlayerClickedEvent = new tg.IsInterface()
+    .withProperties({
+        id: tg.isNumber,
+    })
+    .get();
+
+/**
+ * A message sent from the game to the iFrame when RemotePlayer is clicked.
+ */
+export type RemotePlayerClickedEvent = tg.GuardedType<typeof isRemotePlayerClickedEvent>;
+
+export type RemotePlayerClickedEventCallback = (event: RemotePlayerClickedEvent) => void;

front/src/Api/Events/RemoveActionsMenuKeyFromRemotePlayerEvent.ts

@@ -0,0 +1,16 @@
+import * as tg from "generic-type-guard";
+
+export const isRemoveActionsMenuKeyFromRemotePlayerEvent = new tg.IsInterface()
+    .withProperties({
+        id: tg.isNumber,
+        actionKey: tg.isString,
+    })
+    .get();
+
+export type RemoveActionsMenuKeyFromRemotePlayerEvent = tg.GuardedType<
+    typeof isRemoveActionsMenuKeyFromRemotePlayerEvent
+>;
+
+export type RemoveActionsMenuKeyFromRemotePlayerEventCallback = (
+    event: RemoveActionsMenuKeyFromRemotePlayerEvent
+) => void;

front/src/Api/IframeListener.ts

@@ -34,6 +34,16 @@ import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
 import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
 import { CameraSetEvent, isCameraSetEvent } from "./Events/CameraSetEvent";
 import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
+import type { RemotePlayerClickedEvent } from "./Events/RemotePlayerClickedEvent";
+import {
+    AddActionsMenuKeyToRemotePlayerEvent,
+    isAddActionsMenuKeyToRemotePlayerEvent,
+} from "./Events/AddActionsMenuKeyToRemotePlayerEvent";
+import type { ActionsMenuActionClickedEvent } from "./Events/ActionsMenuActionClickedEvent";
+import {
+    isRemoveActionsMenuKeyFromRemotePlayerEvent,
+    RemoveActionsMenuKeyFromRemotePlayerEvent,
+} from "./Events/RemoveActionsMenuKeyFromRemotePlayerEvent";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
     query: IframeQueryMap[T]["query"],
@@ -63,6 +73,15 @@ class IframeListener {
     private readonly _cameraFollowPlayerStream: Subject<CameraFollowPlayerEvent> = new Subject();
     public readonly cameraFollowPlayerStream = this._cameraFollowPlayerStream.asObservable();
 
+    private readonly _addActionsMenuKeyToRemotePlayerStream: Subject<AddActionsMenuKeyToRemotePlayerEvent> =
+        new Subject();
+    public readonly addActionsMenuKeyToRemotePlayerStream = this._addActionsMenuKeyToRemotePlayerStream.asObservable();
+
+    private readonly _removeActionsMenuKeyFromRemotePlayerEvent: Subject<RemoveActionsMenuKeyFromRemotePlayerEvent> =
+        new Subject();
+    public readonly removeActionsMenuKeyFromRemotePlayerEvent =
+        this._removeActionsMenuKeyFromRemotePlayerEvent.asObservable();
+
     private readonly _enablePlayerControlStream: Subject<void> = new Subject();
     public readonly enablePlayerControlStream = this._enablePlayerControlStream.asObservable();
 
@@ -241,6 +260,16 @@ class IframeListener {
                         this._removeBubbleStream.next();
                     } else if (payload.type == "onPlayerMove") {
                         this.sendPlayerMove = true;
+                    } else if (
+                        payload.type == "addActionsMenuKeyToRemotePlayer" &&
+                        isAddActionsMenuKeyToRemotePlayerEvent(payload.data)
+                    ) {
+                        this._addActionsMenuKeyToRemotePlayerStream.next(payload.data);
+                    } else if (
+                        payload.type == "removeActionsMenuKeyFromRemotePlayer" &&
+                        isRemoveActionsMenuKeyFromRemotePlayerEvent(payload.data)
+                    ) {
+                        this._removeActionsMenuKeyFromRemotePlayerEvent.next(payload.data);
                     } else if (payload.type == "onCameraUpdate") {
                         this._trackCameraUpdateStream.next();
                     } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
@@ -289,68 +318,42 @@ class IframeListener {
         return new Promise<void>((resolve, reject) => {
             console.info("Loading map related script at ", scriptUrl);
 
-            if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
-                // Using external iframe mode (
-                const iframe = document.createElement("iframe");
-                iframe.id = IframeListener.getIFrameId(scriptUrl);
-                iframe.style.display = "none";
-                iframe.src =
-                    "/iframe.html?script=" +
-                    encodeURIComponent(scriptUrl) +
-                    "&moduleMode=" +
-                    (enableModuleMode ? "true" : "false");
+            const iframe = document.createElement("iframe");
+            iframe.id = IframeListener.getIFrameId(scriptUrl);
+            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");
+            // 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.addEventListener("load", () => {
-                    resolve();
-                });
+            //iframe.src = "data:text/html;charset=utf-8," + escape(html);
+            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 " +
+                (enableModuleMode ? 'type="module" ' : "") +
+                'src="' +
+                scriptUrl +
+                '" ></script>\n' +
+                "<title></title>\n" +
+                "</head>\n" +
+                "</html>\n";
 
-                document.body.prepend(iframe);
+            iframe.addEventListener("load", () => {
+                resolve();
+            });
 
-                this.scripts.set(scriptUrl, iframe);
-                this.registerIframe(iframe);
-            } else {
-                // production code
-                const iframe = document.createElement("iframe");
-                iframe.id = IframeListener.getIFrameId(scriptUrl);
-                iframe.style.display = "none";
+            document.body.prepend(iframe);
 
-                // 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.src = "data:text/html;charset=utf-8," + escape(html);
-                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 " +
-                    (enableModuleMode ? 'type="module" ' : "") +
-                    'src="' +
-                    scriptUrl +
-                    '" ></script>\n' +
-                    "<title></title>\n" +
-                    "</head>\n" +
-                    "</html>\n";
-
-                iframe.addEventListener("load", () => {
-                    resolve();
-                });
-
-                document.body.prepend(iframe);
-
-                this.scripts.set(scriptUrl, iframe);
-                this.registerIframe(iframe);
-            }
+            this.scripts.set(scriptUrl, iframe);
+            this.registerIframe(iframe);
         });
     }
 
@@ -465,6 +468,20 @@ class IframeListener {
         }
     }
 
+    sendRemotePlayerClickedEvent(event: RemotePlayerClickedEvent) {
+        this.postMessage({
+            type: "remotePlayerClickedEvent",
+            data: event,
+        });
+    }
+
+    sendActionsMenuActionClickedEvent(event: ActionsMenuActionClickedEvent) {
+        this.postMessage({
+            type: "actionsMenuActionClickedEvent",
+            data: event,
+        });
+    }
+
     sendCameraUpdated(event: WasCameraUpdatedEvent) {
         this.postMessage({
             type: "wasCameraUpdated",

front/src/Api/desktop/index.ts

@@ -0,0 +1,38 @@
+import { isSilentStore, requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
+import { get } from "svelte/store";
+
+class DesktopApi {
+    isSilent: boolean = false;
+
+    init() {
+        if (!window?.WAD?.desktop) {
+            return;
+        }
+
+        console.log("Yipee you are using the desktop app ;)");
+
+        window.WAD.onMuteToggle(() => {
+            if (this.isSilent) return;
+            if (get(requestedMicrophoneState) === true) {
+                requestedMicrophoneState.disableMicrophone();
+            } else {
+                requestedMicrophoneState.enableMicrophone();
+            }
+        });
+
+        window.WAD.onCameraToggle(() => {
+            if (this.isSilent) return;
+            if (get(requestedCameraState) === true) {
+                requestedCameraState.disableWebcam();
+            } else {
+                requestedCameraState.enableWebcam();
+            }
+        });
+
+        isSilentStore.subscribe((value) => {
+            this.isSilent = value;
+        });
+    }
+}
+
+export const desktopApi = new DesktopApi();

front/src/Api/iframe/ui.ts

@@ -8,6 +8,12 @@ import { ActionMessage } from "./Ui/ActionMessage";
 import { isMessageReferenceEvent } from "../Events/ui/TriggerActionMessageEvent";
 import { Menu } from "./Ui/Menu";
 import type { RequireOnlyOne } from "../types";
+import { isRemotePlayerClickedEvent, RemotePlayerClickedEvent } from "../Events/RemotePlayerClickedEvent";
+import {
+    ActionsMenuActionClickedEvent,
+    isActionsMenuActionClickedEvent,
+} from "../Events/ActionsMenuActionClickedEvent";
+import { Observable, Subject } from "rxjs";
 
 let popupId = 0;
 const popups: Map<number, Popup> = new Map<number, Popup>();
@@ -42,7 +48,77 @@ export interface ActionMessageOptions {
     callback: () => void;
 }
 
+export interface RemotePlayerInterface {
+    addAction(key: string, callback: Function): void;
+}
+
+export class RemotePlayer implements RemotePlayerInterface {
+    private id: number;
+
+    private actions: Map<string, ActionsMenuAction> = new Map<string, ActionsMenuAction>();
+
+    constructor(id: number) {
+        this.id = id;
+    }
+
+    public addAction(key: string, callback: Function): ActionsMenuAction {
+        const newAction = new ActionsMenuAction(this, key, callback);
+        this.actions.set(key, newAction);
+        sendToWorkadventure({
+            type: "addActionsMenuKeyToRemotePlayer",
+            data: { id: this.id, actionKey: key },
+        });
+        return newAction;
+    }
+
+    public callAction(key: string): void {
+        const action = this.actions.get(key);
+        if (action) {
+            action.call();
+        }
+    }
+
+    public removeAction(key: string): void {
+        this.actions.delete(key);
+        sendToWorkadventure({
+            type: "removeActionsMenuKeyFromRemotePlayer",
+            data: { id: this.id, actionKey: key },
+        });
+    }
+}
+
+export class ActionsMenuAction {
+    private remotePlayer: RemotePlayer;
+    private key: string;
+    private callback: Function;
+
+    constructor(remotePlayer: RemotePlayer, key: string, callback: Function) {
+        this.remotePlayer = remotePlayer;
+        this.key = key;
+        this.callback = callback;
+    }
+
+    public call(): void {
+        this.callback();
+    }
+
+    public remove(): void {
+        this.remotePlayer.removeAction(this.key);
+    }
+}
+
 export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiCommands> {
+    public readonly _onRemotePlayerClicked: Subject<RemotePlayerInterface>;
+    public readonly onRemotePlayerClicked: Observable<RemotePlayerInterface>;
+
+    private currentlyClickedRemotePlayer?: RemotePlayer;
+
+    constructor() {
+        super();
+        this._onRemotePlayerClicked = new Subject<RemotePlayerInterface>();
+        this.onRemotePlayerClicked = this._onRemotePlayerClicked.asObservable();
+    }
+
     callbacks = [
         apiCallback({
             type: "buttonClickedEvent",
@@ -82,9 +158,38 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
                 }
             },
         }),
+        apiCallback({
+            type: "remotePlayerClickedEvent",
+            typeChecker: isRemotePlayerClickedEvent,
+            callback: (payloadData: RemotePlayerClickedEvent) => {
+                this.currentlyClickedRemotePlayer = new RemotePlayer(payloadData.id);
+                this._onRemotePlayerClicked.next(this.currentlyClickedRemotePlayer);
+            },
+        }),
+        apiCallback({
+            type: "actionsMenuActionClickedEvent",
+            typeChecker: isActionsMenuActionClickedEvent,
+            callback: (payloadData: ActionsMenuActionClickedEvent) => {
+                this.currentlyClickedRemotePlayer?.callAction(payloadData.actionName);
+            },
+        }),
     ];
 
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
+    public addActionsMenuKeyToRemotePlayer(id: number, actionKey: string): void {
+        sendToWorkadventure({
+            type: "addActionsMenuKeyToRemotePlayer",
+            data: { id, actionKey },
+        });
+    }
+
+    public removeActionsMenuKeyFromRemotePlayer(id: number, actionKey: string): void {
+        sendToWorkadventure({
+            type: "removeActionsMenuKeyFromRemotePlayer",
+            data: { id, actionKey },
+        });
+    }
+
+    public openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
         popupId++;
         const popup = new Popup(popupId);
         const btnMap = new Map<number, () => void>();
@@ -119,7 +224,10 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
         return popup;
     }
 
-    registerMenuCommand(commandDescriptor: string, options: MenuOptions | ((commandDescriptor: string) => void)): Menu {
+    public registerMenuCommand(
+        commandDescriptor: string,
+        options: MenuOptions | ((commandDescriptor: string) => void)
+    ): Menu {
         const menu = new Menu(commandDescriptor);
 
         if (typeof options === "function") {
@@ -168,15 +276,15 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
         return menu;
     }
 
-    displayBubble(): void {
+    public displayBubble(): void {
         sendToWorkadventure({ type: "displayBubble", data: null });
     }
 
-    removeBubble(): void {
+    public removeBubble(): void {
         sendToWorkadventure({ type: "removeBubble", data: null });
     }
 
-    displayActionMessage(actionMessageOptions: ActionMessageOptions): ActionMessage {
+    public displayActionMessage(actionMessageOptions: ActionMessageOptions): ActionMessage {
         const actionMessage = new ActionMessage(actionMessageOptions, () => {
             actionMessages.delete(actionMessage.uuid);
         });

front/src/Components/ActionsMenu/ActionsMenu.svelte

@@ -1,11 +1,13 @@
-<script lang="typescript">
+<script lang="ts">
     import { actionsMenuStore } from "../../Stores/ActionsMenuStore";
     import { onDestroy } from "svelte";
 
+    import type { ActionsMenuAction } from "../../Stores/ActionsMenuStore";
     import type { Unsubscriber } from "svelte/store";
     import type { ActionsMenuData } from "../../Stores/ActionsMenuStore";
 
     let actionsMenuData: ActionsMenuData | undefined;
+    let sortedActions: ActionsMenuAction[] | undefined;
 
     let actionsMenuStoreUnsubscriber: Unsubscriber | null;
 
@@ -21,6 +23,20 @@
 
     actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value) => {
         actionsMenuData = value;
+        if (actionsMenuData) {
+            sortedActions = [...actionsMenuData.actions.values()].sort((a, b) => {
+                const ap = a.priority ?? 0;
+                const bp = b.priority ?? 0;
+                if (ap > bp) {
+                    return -1;
+                }
+                if (ap < bp) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            });
+        }
     });
 
     onDestroy(() => {
@@ -37,15 +53,15 @@
         <button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
         <h2>{actionsMenuData.playerName}</h2>
         <div class="actions">
-            {#each [...actionsMenuData.actions] as { actionName, callback }}
+            {#each sortedActions ?? [] as action}
                 <button
                     type="button"
-                    class="nes-btn"
+                    class="nes-btn {action.style ?? ''}"
                     on:click|preventDefault={() => {
-                        callback();
+                        action.callback();
                     }}
                 >
-                    {actionName}
+                    {action.actionName}
                 </button>
             {/each}
         </div>
@@ -68,7 +84,7 @@
         color: whitesmoke;
 
         .actions {
-            max-height: calc(100% - 50px);
+            max-height: 30vh;
             width: 100%;
             display: block;
             overflow-x: hidden;

front/src/Components/App.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import type { Game } from "../Phaser/Game/Game";
     import { chatVisibilityStore } from "../Stores/ChatStore";
     import { customCharacterSceneVisibleStore } from "../Stores/CustomCharacterStore";

front/src/Components/CameraControls.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { requestedScreenSharingState, screenSharingAvailableStore } from "../Stores/ScreenSharingStore";
     import { isSilentStore, requestedCameraState, requestedMicrophoneState } from "../Stores/MediaStore";
     import monitorImg from "./images/monitor.svg";

front/src/Components/Companion/Companion.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { gameManager } from "../../Phaser/Game/GameManager";
     import type { PictureStore } from "../../Stores/PictureStore";
     import { onDestroy } from "svelte";

front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import type { Game } from "../../Phaser/Game/Game";
     import { CustomizeScene, CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
     import { activeRowStore } from "../../Stores/CustomCharacterStore";

front/src/Components/EmbedScreens/CamerasContainer.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
     import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
     import MediaBox from "../Video/MediaBox.svelte";

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { onMount } from "svelte";
 
     import { ICON_URL } from "../../Enum/EnvironmentVariable";

front/src/Components/EmbedScreens/CoWebsitesContainer.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { coWebsites } from "../../Stores/CoWebsiteStore";
     import CoWebsiteThumbnail from "./CoWebsiteThumbnailSlot.svelte";
 

front/src/Components/EmbedScreens/EmbedScreensContainer.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import PresentationLayout from "./Layouts/PresentationLayout.svelte";
     import MozaicLayout from "./Layouts/MozaicLayout.svelte";
     import { LayoutMode } from "../../WebRtc/LayoutManager";

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import type { Unsubscriber } from "svelte/store";
     import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
     import { onDestroy, onMount } from "svelte";

front/src/Components/EnableCamera/EnableCameraScene.svelte

@@ -1,10 +1,11 @@
-<script lang="typescript">
+<script lang="ts">
     import type { Game } from "../../Phaser/Game/Game";
     import { EnableCameraScene, EnableCameraSceneName } from "../../Phaser/Login/EnableCameraScene";
     import {
         audioConstraintStore,
         cameraListStore,
         localStreamStore,
+        localVolumeStore,
         microphoneListStore,
         videoConstraintStore,
     } from "../../Stores/MediaStore";
@@ -38,7 +39,7 @@
 
     let stream: MediaStream | null;
 
-    const unsubscribe = localStreamStore.subscribe((value) => {
+    const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
         if (value.type === "success") {
             stream = value.stream;
 
@@ -59,7 +60,9 @@
         }
     });
 
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+        unsubscribeLocalStreamStore();
+    });
 
     function normalizeDeviceName(label: string): string {
         // remove IDs (that can appear in Chrome, like: "HD Pro Webcam (4df7:4eda)"
@@ -86,7 +89,7 @@
             <img class="background-img" src={cinemaCloseImg} alt="" />
         </div>
     {/if}
-    <HorizontalSoundMeterWidget {stream} />
+    <HorizontalSoundMeterWidget volume={$localVolumeStore} />
 
     <section class="selectWebcamForm">
         {#if $cameraListStore.length > 1}

front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte

@@ -1,50 +1,8 @@
-<script lang="typescript">
-    import { AudioContext } from "standardized-audio-context";
-    import { SoundMeter } from "../../Phaser/Components/SoundMeter";
-    import { onDestroy } from "svelte";
-
-    export let stream: MediaStream | null;
-    let volume = 0;
+<script lang="ts">
+    export let volume = 0;
 
     const NB_BARS = 20;
 
-    let timeout: ReturnType<typeof setTimeout>;
-    const soundMeter = new SoundMeter();
-    let display = false;
-    let error = false;
-
-    $: {
-        if (stream && stream.getAudioTracks().length > 0) {
-            display = true;
-            soundMeter.connectToSource(stream, new AudioContext());
-
-            if (timeout) {
-                clearInterval(timeout);
-                error = false;
-            }
-
-            timeout = setInterval(() => {
-                try {
-                    volume = parseInt(((soundMeter.getVolume() / 100) * NB_BARS).toFixed(0));
-                } catch (err) {
-                    if (!error) {
-                        console.error(err);
-                        error = true;
-                    }
-                }
-            }, 100);
-        } else {
-            display = false;
-        }
-    }
-
-    onDestroy(() => {
-        soundMeter.stop();
-        if (timeout) {
-            clearInterval(timeout);
-        }
-    });
-
     function color(i: number, volume: number) {
         const red = (255 * i) / NB_BARS;
         const green = 255 * (1 - i / NB_BARS);
@@ -58,7 +16,7 @@
     }
 </script>
 
-<div class="horizontal-sound-meter" class:active={display}>
+<div class="horizontal-sound-meter" class:active={volume !== undefined}>
     {#each [...Array(NB_BARS).keys()] as i (i)}
         <div style={color(i, volume)} />
     {/each}

front/src/Components/FollowMenu/FollowButton.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import followImg from "../images/follow.svg";
 
     export let hidden: Boolean;

front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { fly } from "svelte/transition";
     import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
     import firefoxImg from "./images/help-setting-camera-permission-firefox.png";

front/src/Components/Lazy.svelte

@@ -0,0 +1,21 @@
+<!-- https://lihautan.com/notes/svelte-lazy-load/ -->
+<script>
+    export let when = false;
+    export let component;
+
+    let loading;
+
+    $: if (when) {
+        load();
+    }
+
+    function load() {
+        loading = component();
+    }
+</script>
+
+{#if when}
+    {#await loading then { default: Component }}
+        <Component />
+    {/await}
+{/if}

front/src/Components/Login/LoginScene.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import type { Game } from "../../Phaser/Game/Game";
     import { LoginScene, LoginSceneName } from "../../Phaser/Login/LoginScene";
     import { DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH } from "../../Enum/EnvironmentVariable";

front/src/Components/MainLayout.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { onMount } from "svelte";
     import { audioManagerVisibilityStore } from "../Stores/AudioManagerStore";
     import { embedScreenLayout, hasEmbedScreen } from "../Stores/EmbedScreensStore";
@@ -12,7 +12,6 @@
     import AudioManager from "./AudioManager/AudioManager.svelte";
     import CameraControls from "./CameraControls.svelte";
     import EmbedScreensContainer from "./EmbedScreens/EmbedScreensContainer.svelte";
-    import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import LayoutActionManager from "./LayoutActionManager/LayoutActionManager.svelte";
     import Menu from "./Menu/Menu.svelte";
@@ -38,6 +37,7 @@
     import { LayoutMode } from "../WebRtc/LayoutManager";
     import { actionsMenuStore } from "../Stores/ActionsMenuStore";
     import ActionsMenu from "./ActionsMenu/ActionsMenu.svelte";
+    import Lazy from "./Lazy.svelte";
 
     let mainLayout: HTMLDivElement;
 
@@ -116,9 +116,7 @@
             <VisitCard visitCardUrl={$requestVisitCardsStore} />
         {/if}
 
-        {#if $emoteMenuStore}
-            <EmoteMenu />
-        {/if}
+        <Lazy when={$emoteMenuStore} component={() => import("./EmoteMenu/EmoteMenu.svelte")} />
 
         {#if hasEmbedScreen}
             <EmbedScreensContainer />

front/src/Components/Menu/Menu.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { fly } from "svelte/transition";
     import SettingsSubMenu from "./SettingsSubMenu.svelte";
     import ProfileSubMenu from "./ProfileSubMenu.svelte";

front/src/Components/Menu/MenuIcon.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import logoTalk from "../images/logo-message-pixel.png";
     import logoWA from "../images/logo-WA-pixel.png";
     import logoInvite from "../images/logo-invite-pixel.png";

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { gameManager } from "../../Phaser/Game/GameManager";
     import { SelectCompanionScene, SelectCompanionSceneName } from "../../Phaser/Login/SelectCompanionScene";
     import { menuIconVisiblilityStore, menuVisiblilityStore, userIsConnected } from "../../Stores/MenuStore";

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { localUserStore } from "../../Connexion/LocalUserStore";
     import { videoConstraintStore } from "../../Stores/MediaStore";
     import { HtmlUtils } from "../../WebRtc/HtmlUtils";

front/src/Components/Menu/TextGlobalMessage.svelte

@@ -76,7 +76,3 @@
 <section class="section-input-send-text">
     <div class="input-send-text" bind:this={QUILL_EDITOR} />
 </section>
-
-<style lang="scss">
-    @import "https://cdn.quilljs.com/1.3.7/quill.snow.css";
-</style>

front/src/Components/Modal/LimitRoomModal.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { fly } from "svelte/transition";
     import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
 

front/src/Components/Modal/ShareLinkMapModal.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { fly } from "svelte/transition";
     import { showShareLinkMapModalStore } from "../../Stores/ModalStore";
 

front/src/Components/MyCamera.svelte

@@ -1,5 +1,5 @@
-<script lang="typescript">
-    import { obtainedMediaConstraintStore } from "../Stores/MediaStore";
+<script lang="ts">
+    import { localVolumeStore, obtainedMediaConstraintStore } from "../Stores/MediaStore";
     import { localStreamStore, isSilentStore } from "../Stores/MediaStore";
     import SoundMeterWidget from "./SoundMeterWidget.svelte";
     import { onDestroy, onMount } from "svelte";
@@ -8,7 +8,7 @@
 
     let stream: MediaStream | null;
 
-    const unsubscribe = localStreamStore.subscribe((value) => {
+    const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
         if (value.type === "success") {
             stream = value.stream;
         } else {
@@ -16,7 +16,9 @@
         }
     });
 
-    onDestroy(unsubscribe);
+    onDestroy(() => {
+        unsubscribeLocalStreamStore();
+    });
 
     let isSilent: boolean;
     const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
@@ -51,7 +53,7 @@
         <div class="is-silent">{$LL.camera.my.silentZone()}</div>
     {:else if $localStreamStore.type === "success" && $localStreamStore.stream}
         <video class="my-cam-video" use:srcObject={stream} autoplay muted playsinline />
-        <SoundMeterWidget {stream} />
+        <SoundMeterWidget volume={$localVolumeStore} />
     {/if}
 </div>
 

front/src/Components/SelectCompanion/SelectCompanionScene.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import LL from "../../i18n/i18n-svelte";
     import type { Game } from "../../Phaser/Game/Game";
     import { SelectCompanionScene, SelectCompanionSceneName } from "../../Phaser/Login/SelectCompanionScene";

front/src/Components/SoundMeterWidget.svelte

@@ -1,47 +1,6 @@
-<script lang="typescript">
-    import { AudioContext } from "standardized-audio-context";
-    import { SoundMeter } from "../Phaser/Components/SoundMeter";
-    import { onDestroy } from "svelte";
-
-    export let stream: MediaStream | null;
-    let volume = 0;
-
-    let timeout: ReturnType<typeof setTimeout>;
-    const soundMeter = new SoundMeter();
-    let display = false;
-    let error = false;
-
-    $: {
-        if (stream && stream.getAudioTracks().length > 0) {
-            display = true;
-            soundMeter.connectToSource(stream, new AudioContext());
-
-            if (timeout) {
-                clearInterval(timeout);
-                error = false;
-            }
-
-            timeout = setInterval(() => {
-                try {
-                    volume = soundMeter.getVolume();
-                } catch (err) {
-                    if (!error) {
-                        console.error(err);
-                        error = true;
-                    }
-                }
-            }, 100);
-        } else {
-            display = false;
-        }
-    }
-
-    onDestroy(() => {
-        soundMeter.stop();
-        if (timeout) {
-            clearInterval(timeout);
-        }
-    });
+<script lang="ts">
+    export let volume = 0;
+    let display = true;
 </script>
 
 <div class="sound-progress" class:active={display}>

front/src/Components/Video/LocalStreamMediaBox.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { ScreenSharingLocalMedia } from "../../Stores/ScreenSharingStore";

front/src/Components/Video/VideoMediaBox.svelte

@@ -18,6 +18,7 @@
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
+    let volumeStore = peer.volumeStore;
     let name = peer.userName;
     let backGroundColor = getColorByString(peer.userName);
     let textColor = getTextColorByBackgroundColor(backGroundColor);
@@ -95,7 +96,7 @@
     />
     <img src={blockSignImg} draggable="false" on:dragstart|preventDefault={noDrag} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
-        <SoundMeterWidget stream={$streamStore} />
+        <SoundMeterWidget volume={$volumeStore} />
     {/if}
 </div>
 

front/src/Components/VisitCard/VisitCard.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { fly } from "svelte/transition";
     import { requestVisitCardsStore } from "../../Stores/GameStore";
     import { onMount } from "svelte";

front/src/Components/WarningContainer/WarningContainer.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { fly } from "svelte/transition";
     import { userIsAdminStore, limitMapStore } from "../../Stores/GameStore";
     import { ADMIN_URL } from "../../Enum/EnvironmentVariable";

front/src/Components/Woka/Woka.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
     import { onDestroy } from "svelte";
 
     import { gameManager } from "../../Phaser/Game/GameManager";

front/src/Components/selectCharacter/SelectCharacterScene.svelte

@@ -1,7 +1,8 @@
-<script lang="typescript">
+<script lang="ts">
     import type { Game } from "../../Phaser/Game/Game";
     import { SelectCharacterScene, SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
     import LL from "../../i18n/i18n-svelte";
+    import { customizeAvailableStore } from "../../Stores/SelectCharacterSceneStore";
 
     export let game: Game;
 
@@ -40,11 +41,13 @@
             class="selectCharacterSceneFormSubmit nes-btn is-primary"
             on:click|preventDefault={cameraScene}>{$LL.woka.selectWoka.continue()}</button
         >
-        <button
-            type="submit"
-            class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn"
-            on:click|preventDefault={customizeScene}>{$LL.woka.selectWoka.customize()}</button
-        >
+        {#if $customizeAvailableStore}
+            <button
+                type="submit"
+                class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn"
+                on:click|preventDefault={customizeScene}>{$LL.woka.selectWoka.customize()}</button
+            >
+        {/if}
     </section>
 </form>
 

front/src/Connexion/ConnectionManager.ts

@@ -16,6 +16,10 @@ import { isRegisterData } from "../Messages/JsonMessages/RegisterData";
 import { isAdminApiData } from "../Messages/JsonMessages/AdminApiData";
 import { limitMapStore } from "../Stores/GameStore";
 import { showLimitRoomModalStore } from "../Stores/ModalStore";
+import { gameManager } from "../Phaser/Game/GameManager";
+import { locales } from "../i18n/i18n-util";
+import type { Locales } from "../i18n/i18n-types";
+import { setCurrentLocale } from "../i18n/locales";
 
 class ConnectionManager {
     private localUser!: LocalUser;
@@ -134,7 +138,7 @@ class ConnectionManager {
                 console.error("Invalid data received from /register route. Data: ", data);
                 throw new Error("Invalid data received from /register route.");
             }
-            this.localUser = new LocalUser(data.userUuid, data.textures, data.email);
+            this.localUser = new LocalUser(data.userUuid, data.email);
             this.authToken = data.authToken;
             localUserStore.saveUser(this.localUser);
             localUserStore.setAuthToken(this.authToken);
@@ -214,22 +218,6 @@ class ConnectionManager {
                 }
             }
             this.localUser = localUserStore.getLocalUser() as LocalUser; //if authToken exist in localStorage then localUser cannot be null
-
-            if (this._currentRoom.textures != undefined && this._currentRoom.textures.length > 0) {
-                //check if texture was changed
-                if (this.localUser.textures.length === 0) {
-                    this.localUser.textures = this._currentRoom.textures;
-                } else {
-                    this._currentRoom.textures.forEach((newTexture) => {
-                        const alreadyExistTexture = this.localUser.textures.find((c) => newTexture.id === c.id);
-                        if (this.localUser.textures.findIndex((c) => newTexture.id === c.id) !== -1) {
-                            return;
-                        }
-                        this.localUser.textures.push(newTexture);
-                    });
-                }
-                localUserStore.saveUser(this.localUser);
-            }
         }
         if (this._currentRoom == undefined) {
             return Promise.reject(new Error("Invalid URL"));
@@ -255,7 +243,7 @@ class ConnectionManager {
 
     public async anonymousLogin(isBenchmark: boolean = false): Promise<void> {
         const data = await axiosWithRetry.post(`${PUSHER_URL}/anonymLogin`).then((res) => res.data);
-        this.localUser = new LocalUser(data.userUuid, [], data.email);
+        this.localUser = new LocalUser(data.userUuid, data.email);
         this.authToken = data.authToken;
         if (!isBenchmark) {
             // In benchmark, we don't have a local storage.
@@ -265,7 +253,7 @@ class ConnectionManager {
     }
 
     public initBenchmark(): void {
-        this.localUser = new LocalUser("", []);
+        this.localUser = new LocalUser("");
     }
 
     public connectToRoomSocket(
@@ -342,16 +330,52 @@ class ConnectionManager {
                 throw new Error("No Auth code provided");
             }
         }
-        const { authToken, userUuid, textures, email } = await Axios.get(`${PUSHER_URL}/login-callback`, {
-            params: { code, nonce, token, playUri: this.currentRoom?.key },
-        }).then((res) => {
+        const { authToken, userUuid, email, username, locale, textures } = await Axios.get(
+            `${PUSHER_URL}/login-callback`,
+            {
+                params: { code, nonce, token, playUri: this.currentRoom?.key },
+            }
+        ).then((res) => {
             return res.data;
         });
         localUserStore.setAuthToken(authToken);
-        this.localUser = new LocalUser(userUuid, textures, email);
+        this.localUser = new LocalUser(userUuid, email);
         localUserStore.saveUser(this.localUser);
         this.authToken = authToken;
 
+        if (username) {
+            gameManager.setPlayerName(username);
+        }
+
+        if (locale) {
+            try {
+                if (locales.indexOf(locale) == -1) {
+                    locales.forEach((l) => {
+                        if (l.startsWith(locale.split("-")[0])) {
+                            setCurrentLocale(l);
+                            return;
+                        }
+                    });
+                } else {
+                    setCurrentLocale(locale as Locales);
+                }
+            } catch (err) {
+                console.warn("Could not set locale", err);
+            }
+        }
+
+        if (textures) {
+            const layers: string[] = [];
+            for (const texture of textures) {
+                if (texture !== undefined) {
+                    layers.push(texture.id);
+                }
+            }
+            if (layers.length > 0) {
+                gameManager.setCharacterLayers(layers);
+            }
+        }
+
         //user connected, set connected store for menu at true
         userIsConnected.set(true);
     }

front/src/Connexion/ConnexionModels.ts

@@ -1,7 +1,6 @@
 import type { SignalData } from "simple-peer";
 import type { RoomConnection } from "./RoomConnection";
 import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
-import { PositionMessage_Direction } from "../Messages/ts-proto-generated/messages";
 
 export interface PointInterface {
     x: number;
@@ -83,6 +82,7 @@ export interface RoomJoinedMessageInterface {
     //groups: GroupCreatedUpdatedMessageInterface[],
     items: { [itemId: number]: unknown };
     variables: Map<string, unknown>;
+    characterLayers: BodyResourceDescriptionInterface[];
 }
 
 export interface PlayGlobalMessageInterface {

front/src/Connexion/LocalUser.ts

@@ -1,10 +1,11 @@
 import { MAX_USERNAME_LENGTH } from "../Enum/EnvironmentVariable";
 
+export type LayerNames = "woka" | "body" | "eyes" | "hair" | "clothes" | "hat" | "accessory";
+
 export interface CharacterTexture {
-    id: number;
-    level: number;
+    id: string;
+    layer: LayerNames;
     url: string;
-    rights: string;
 }
 
 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
@@ -14,9 +15,11 @@ export function isUserNameValid(value: unknown): boolean {
 }
 
 export function areCharacterLayersValid(value: string[] | null): boolean {
-    if (!value || !value.length) return false;
-    for (let i = 0; i < value.length; i++) {
-        if (/^\w+$/.exec(value[i]) === null) {
+    if (!value || !value.length) {
+        return false;
+    }
+    for (const layerName of value) {
+        if (layerName.length === 0 || layerName === " ") {
             return false;
         }
     }
@@ -24,9 +27,5 @@ export function areCharacterLayersValid(value: string[] | null): boolean {
 }
 
 export class LocalUser {
-    constructor(
-        public readonly uuid: string,
-        public textures: CharacterTexture[],
-        public email: string | null = null
-    ) {}
+    constructor(public readonly uuid: string, public email: string | null = null) {}
 }

front/src/Connexion/Room.ts

@@ -9,7 +9,7 @@ import { isMapDetailsData } from "../Messages/JsonMessages/MapDetailsData";
 import { isRoomRedirect } from "../Messages/JsonMessages/RoomRedirect";
 
 export class MapDetail {
-    constructor(public readonly mapUrl: string, public readonly textures: CharacterTexture[] | undefined) {}
+    constructor(public readonly mapUrl: string) {}
 }
 
 export interface RoomRedirect {
@@ -25,7 +25,6 @@ export class Room {
     private _authenticationMandatory: boolean = DISABLE_ANONYMOUS;
     private _iframeAuthentication?: string = OPID_LOGIN_SCREEN_PROVIDER;
     private _mapUrl: string | undefined;
-    private _textures: CharacterTexture[] | undefined;
     private instance: string | undefined;
     private readonly _search: URLSearchParams;
     private _contactPage: string | undefined;
@@ -118,7 +117,6 @@ export class Room {
             } else if (isMapDetailsData(data)) {
                 console.log("Map ", this.id, " resolves to URL ", data.mapUrl);
                 this._mapUrl = data.mapUrl;
-                this._textures = data.textures;
                 this._group = data.group;
                 this._authenticationMandatory =
                     data.authenticationMandatory != null ? data.authenticationMandatory : DISABLE_ANONYMOUS;
@@ -128,7 +126,7 @@ export class Room {
                     this._expireOn = new Date(data.expireOn);
                 }
                 this._canReport = data.canReport ?? false;
-                return new MapDetail(data.mapUrl, data.textures);
+                return new MapDetail(data.mapUrl);
             } else {
                 throw new Error("Data received by the /map endpoint of the Pusher is not in a valid format.");
             }
@@ -205,10 +203,6 @@ export class Room {
         return this.roomUrl.toString();
     }
 
-    get textures(): CharacterTexture[] | undefined {
-        return this._textures;
-    }
-
     get mapUrl(): string {
         if (!this._mapUrl) {
             throw new Error("Map URL not fetched yet");

front/src/Connexion/RoomConnection.ts

@@ -20,7 +20,7 @@ import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTe
 import { adminMessagesService } from "./AdminMessagesService";
 import { connectionManager } from "./ConnectionManager";
 import { get } from "svelte/store";
-import { warningContainerStore } from "../Stores/MenuStore";
+import { menuIconVisiblilityStore, menuVisiblilityStore, warningContainerStore } from "../Stores/MenuStore";
 import { followStateStore, followRoleStore, followUsersStore } from "../Stores/FollowStore";
 import { localUserStore } from "./LocalUserStore";
 import {
@@ -52,10 +52,14 @@ import {
     PositionMessage_Direction,
     SetPlayerDetailsMessage as SetPlayerDetailsMessageTsProto,
     PingMessage as PingMessageTsProto,
+    CharacterLayerMessage,
 } from "../Messages/ts-proto-generated/messages";
 import { Subject } from "rxjs";
 import { OpenPopupEvent } from "../Api/Events/OpenPopupEvent";
 import { match } from "assert";
+import { selectCharacterSceneVisibleStore } from "../Stores/SelectCharacterStore";
+import { gameManager } from "../Phaser/Game/GameManager";
+import { SelectCharacterScene, SelectCharacterSceneName } from "../Phaser/Login/SelectCharacterScene";
 
 const manualPingDelay = 20000;
 
@@ -337,11 +341,28 @@ export class RoomConnection implements RoomConnection {
                     this.tags = roomJoinedMessage.tag;
                     this._userRoomToken = roomJoinedMessage.userRoomToken;
 
+                    // If one of the URLs sent to us does not exist, let's go to the Woka selection screen.
+                    for (const characterLayer of roomJoinedMessage.characterLayer) {
+                        if (!characterLayer.url) {
+                            this.goToSelectYourWokaScene();
+                            this.closed = true;
+                            break;
+                        }
+                    }
+                    if (this.closed) {
+                        break;
+                    }
+
+                    const characterLayers = roomJoinedMessage.characterLayer.map(
+                        this.mapCharacterLayerToBodyResourceDescription.bind(this)
+                    );
+
                     this._roomJoinedMessageStream.next({
                         connection: this,
                         room: {
                             items,
                             variables,
+                            characterLayers,
                         } as RoomJoinedMessageInterface,
                     });
                     break;
@@ -351,6 +372,12 @@ export class RoomConnection implements RoomConnection {
                     this.closed = true;
                     break;
                 }
+                case "invalidTextureMessage": {
+                    this.goToSelectYourWokaScene();
+
+                    this.closed = true;
+                    break;
+                }
                 case "tokenExpiredMessage": {
                     connectionManager.logout().catch((e) => console.error(e));
                     this.closed = true; //technically, this isn't needed since loadOpenIDScreen() will do window.location.assign() but I prefer to leave it for consistency
@@ -591,6 +618,15 @@ export class RoomConnection implements RoomConnection {
         });
     }*/
 
+    private mapCharacterLayerToBodyResourceDescription(
+        characterLayer: CharacterLayerMessage
+    ): BodyResourceDescriptionInterface {
+        return {
+            id: characterLayer.name,
+            img: characterLayer.url,
+        };
+    }
+
     // TODO: move this to protobuf utils
     private toMessageUserJoined(message: UserJoinedMessageTsProto): MessageUserJoined {
         const position = message.position;
@@ -598,12 +634,7 @@ export class RoomConnection implements RoomConnection {
             throw new Error("Invalid JOIN_ROOM message");
         }
 
-        const characterLayers = message.characterLayers.map((characterLayer): BodyResourceDescriptionInterface => {
-            return {
-                name: characterLayer.name,
-                img: characterLayer.url,
-            };
-        });
+        const characterLayers = message.characterLayers.map(this.mapCharacterLayerToBodyResourceDescription.bind(this));
 
         const companion = message.companion;
 
@@ -863,4 +894,11 @@ export class RoomConnection implements RoomConnection {
     public get userRoomToken(): string | undefined {
         return this._userRoomToken;
     }
+
+    private goToSelectYourWokaScene(): void {
+        menuVisiblilityStore.set(false);
+        menuIconVisiblilityStore.set(false);
+        selectCharacterSceneVisibleStore.set(true);
+        gameManager.leaveGame(SelectCharacterSceneName, new SelectCharacterScene());
+    }
 }

front/src/Enum/EnvironmentVariable.ts

@@ -1,46 +1,33 @@
-declare global {
-    interface Window {
-        env?: Record<string, string>;
-    }
-}
+import { getEnvConfig } from "@geprog/vite-plugin-env-config/getEnvConfig";
 
-const getEnv = (key: string): string | undefined => {
-    if (global.window?.env) {
-        return global.window.env[key];
-    }
-    if (global.process?.env) {
-        return global.process.env[key];
-    }
-    return;
-};
-
-const DEBUG_MODE: boolean = getEnv("DEBUG_MODE") == "true";
-const START_ROOM_URL: string = getEnv("START_ROOM_URL") || "/_/global/maps.workadventure.localhost/Floor1/floor1.json";
-const PUSHER_URL = getEnv("PUSHER_URL") || "//pusher.workadventure.localhost";
-export const ADMIN_URL = getEnv("ADMIN_URL") || "//workadventu.re";
-const UPLOADER_URL = getEnv("UPLOADER_URL") || "//uploader.workadventure.localhost";
-const ICON_URL = getEnv("ICON_URL") || "//icon.workadventure.localhost";
-const STUN_SERVER: string = getEnv("STUN_SERVER") || "stun:stun.l.google.com:19302";
-const TURN_SERVER: string = getEnv("TURN_SERVER") || "";
-const SKIP_RENDER_OPTIMIZATIONS: boolean = getEnv("SKIP_RENDER_OPTIMIZATIONS") == "true";
-const DISABLE_NOTIFICATIONS: boolean = getEnv("DISABLE_NOTIFICATIONS") == "true";
-const TURN_USER: string = getEnv("TURN_USER") || "";
-const TURN_PASSWORD: string = getEnv("TURN_PASSWORD") || "";
-const JITSI_URL: string | undefined = getEnv("JITSI_URL") === "" ? undefined : getEnv("JITSI_URL");
-const JITSI_PRIVATE_MODE: boolean = getEnv("JITSI_PRIVATE_MODE") == "true";
+const DEBUG_MODE: boolean = getEnvConfig("DEBUG_MODE") == "true";
+const START_ROOM_URL: string =
+    getEnvConfig("START_ROOM_URL") || "/_/global/maps.workadventure.localhost/Floor1/floor1.json";
+const PUSHER_URL = getEnvConfig("PUSHER_URL") || "//pusher.workadventure.localhost";
+export const ADMIN_URL = getEnvConfig("ADMIN_URL") || "//workadventu.re";
+const UPLOADER_URL = getEnvConfig("UPLOADER_URL") || "//uploader.workadventure.localhost";
+const ICON_URL = getEnvConfig("ICON_URL") || "//icon.workadventure.localhost";
+const STUN_SERVER: string = getEnvConfig("STUN_SERVER") || "stun:stun.l.google.com:19302";
+const TURN_SERVER: string = getEnvConfig("TURN_SERVER") || "";
+const SKIP_RENDER_OPTIMIZATIONS: boolean = getEnvConfig("SKIP_RENDER_OPTIMIZATIONS") == "true";
+const DISABLE_NOTIFICATIONS: boolean = getEnvConfig("DISABLE_NOTIFICATIONS") == "true";
+const TURN_USER: string = getEnvConfig("TURN_USER") || "";
+const TURN_PASSWORD: string = getEnvConfig("TURN_PASSWORD") || "";
+const JITSI_URL: string | undefined = getEnvConfig("JITSI_URL") === "" ? undefined : getEnvConfig("JITSI_URL");
+const JITSI_PRIVATE_MODE: boolean = getEnvConfig("JITSI_PRIVATE_MODE") == "true";
 const POSITION_DELAY = 200; // Wait 200ms between sending position events
 const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
-export const MAX_USERNAME_LENGTH = parseInt(getEnv("MAX_USERNAME_LENGTH") || "") || 8;
-export const MAX_PER_GROUP = parseInt(getEnv("MAX_PER_GROUP") || "4");
-export const DISPLAY_TERMS_OF_USE = getEnv("DISPLAY_TERMS_OF_USE") == "true";
-export const NODE_ENV = getEnv("NODE_ENV") || "development";
-export const CONTACT_URL = getEnv("CONTACT_URL") || undefined;
-export const PROFILE_URL = getEnv("PROFILE_URL") || undefined;
-export const POSTHOG_API_KEY: string = (getEnv("POSTHOG_API_KEY") as string) || "";
-export const POSTHOG_URL = getEnv("POSTHOG_URL") || undefined;
-export const DISABLE_ANONYMOUS: boolean = getEnv("DISABLE_ANONYMOUS") === "true";
-export const OPID_LOGIN_SCREEN_PROVIDER = getEnv("OPID_LOGIN_SCREEN_PROVIDER");
-const FALLBACK_LOCALE = getEnv("FALLBACK_LOCALE") || undefined;
+export const MAX_USERNAME_LENGTH = parseInt(getEnvConfig("MAX_USERNAME_LENGTH") || "") || 8;
+export const MAX_PER_GROUP = parseInt(getEnvConfig("MAX_PER_GROUP") || "4");
+export const DISPLAY_TERMS_OF_USE = getEnvConfig("DISPLAY_TERMS_OF_USE") == "true";
+export const NODE_ENV = getEnvConfig("NODE_ENV") || "development";
+export const CONTACT_URL = getEnvConfig("CONTACT_URL") || undefined;
+export const PROFILE_URL = getEnvConfig("PROFILE_URL") || undefined;
+export const POSTHOG_API_KEY: string = (getEnvConfig("POSTHOG_API_KEY") as string) || "";
+export const POSTHOG_URL = getEnvConfig("POSTHOG_URL") || undefined;
+export const DISABLE_ANONYMOUS: boolean = getEnvConfig("DISABLE_ANONYMOUS") === "true";
+export const OPID_LOGIN_SCREEN_PROVIDER = getEnvConfig("OPID_LOGIN_SCREEN_PROVIDER");
+const FALLBACK_LOCALE = getEnvConfig("FALLBACK_LOCALE") || undefined;
 
 export {
     DEBUG_MODE,

front/src/Phaser/Components/SoundMeter.ts

@@ -1,4 +1,4 @@
-import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
+import { AudioContext, IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
 
 /**
  * Class to measure the sound volume of a media stream
@@ -6,41 +6,15 @@ import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "
 export class SoundMeter {
     private instant: number;
     private clip: number;
-    //private script: ScriptProcessorNode;
     private analyser: IAnalyserNode<IAudioContext> | undefined;
     private dataArray: Uint8Array | undefined;
     private context: IAudioContext | undefined;
     private source: IMediaStreamAudioSourceNode<IAudioContext> | undefined;
 
-    constructor() {
+    constructor(mediaStream: MediaStream) {
         this.instant = 0.0;
         this.clip = 0.0;
-        //this.script = context.createScriptProcessor(2048, 1, 1);
-    }
-
-    private init(context: IAudioContext) {
-        this.context = context;
-        this.analyser = this.context.createAnalyser();
-
-        this.analyser.fftSize = 2048;
-        const bufferLength = this.analyser.fftSize;
-        this.dataArray = new Uint8Array(bufferLength);
-    }
-
-    public connectToSource(stream: MediaStream, context: IAudioContext): void {
-        if (this.source !== undefined) {
-            this.stop();
-        }
-
-        this.init(context);
-
-        this.source = this.context?.createMediaStreamSource(stream);
-        if (this.analyser !== undefined) {
-            this.source?.connect(this.analyser);
-        }
-        //analyser.connect(distortion);
-        //distortion.connect(this.context.destination);
-        //this.analyser.connect(this.context.destination);
+        this.connectToSource(mediaStream, new AudioContext());
     }
 
     public getVolume(): number {
@@ -78,4 +52,29 @@ export class SoundMeter {
         this.dataArray = undefined;
         this.source = undefined;
     }
+
+    private init(context: IAudioContext) {
+        this.context = context;
+        this.analyser = this.context.createAnalyser();
+
+        this.analyser.fftSize = 2048;
+        const bufferLength = this.analyser.fftSize;
+        this.dataArray = new Uint8Array(bufferLength);
+    }
+
+    private connectToSource(stream: MediaStream, context: IAudioContext): void {
+        if (this.source !== undefined) {
+            this.stop();
+        }
+
+        this.init(context);
+
+        this.source = this.context?.createMediaStreamSource(stream);
+        if (this.analyser !== undefined) {
+            this.source?.connect(this.analyser);
+        }
+        //analyser.connect(distortion);
+        //distortion.connect(this.context.destination);
+        //this.analyser.connect(this.context.destination);
+    }
 }

front/src/Phaser/Components/TalkIcon.ts

@@ -0,0 +1,58 @@
+import { Easing } from "../../types";
+
+export class TalkIcon extends Phaser.GameObjects.Image {
+    private shown: boolean;
+    private showAnimationTween?: Phaser.Tweens.Tween;
+
+    private defaultPosition: { x: number; y: number };
+    private defaultScale: number;
+
+    constructor(scene: Phaser.Scene, x: number, y: number) {
+        super(scene, x, y, "iconTalk");
+
+        this.defaultPosition = { x, y };
+        this.defaultScale = 0.3;
+
+        this.shown = false;
+        this.setAlpha(0);
+        this.setScale(this.defaultScale);
+
+        this.scene.add.existing(this);
+    }
+
+    public show(show: boolean = true, forceClose: boolean = false): void {
+        if (this.shown === show && !forceClose) {
+            return;
+        }
+        this.showAnimation(show, forceClose);
+    }
+
+    private showAnimation(show: boolean = true, forceClose: boolean = false) {
+        if (forceClose && !show) {
+            this.showAnimationTween?.stop();
+        } else if (this.showAnimationTween?.isPlaying()) {
+            return;
+        }
+        this.shown = show;
+        if (show) {
+            this.y += 50;
+            this.scale = 0.05;
+            this.alpha = 0;
+        }
+        this.showAnimationTween = this.scene.tweens.add({
+            targets: [this],
+            duration: 350,
+            alpha: show ? 1 : 0,
+            y: this.defaultPosition.y,
+            scale: this.defaultScale,
+            ease: Easing.BackEaseOut,
+            onComplete: () => {
+                this.showAnimationTween = undefined;
+            },
+        });
+    }
+
+    public isShown(): boolean {
+        return this.shown;
+    }
+}

front/src/Phaser/Entity/Character.ts

@@ -10,13 +10,14 @@ import type { GameScene } from "../Game/GameScene";
 import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
 import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
 import { isSilentStore } from "../../Stores/MediaStore";
-import { lazyLoadPlayerCharacterTextures, loadAllDefaultModels } from "./PlayerTexturesLoadingManager";
+import { lazyLoadPlayerCharacterTextures } from "./PlayerTexturesLoadingManager";
 import { TexturesHelper } from "../Helpers/TexturesHelper";
 import type { PictureStore } from "../../Stores/PictureStore";
 import { Unsubscriber, Writable, writable } from "svelte/store";
 import { createColorStore } from "../../Stores/OutlineColorStore";
 import type { OutlineableInterface } from "../Game/OutlineableInterface";
 import type CancelablePromise from "cancelable-promise";
+import { TalkIcon } from "../Components/TalkIcon";
 
 const playerNameY = -25;
 
@@ -33,6 +34,7 @@ const interactiveRadius = 35;
 export abstract class Character extends Container implements OutlineableInterface {
     private bubble: SpeechBubble | null = null;
     private readonly playerNameText: Text;
+    private readonly talkIcon: TalkIcon;
     public playerName: string;
     public sprites: Map<string, Sprite>;
     protected lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
@@ -81,7 +83,16 @@ export abstract class Character extends Container implements OutlineableInterfac
                 });
             })
             .catch(() => {
-                return lazyLoadPlayerCharacterTextures(scene.load, ["color_22", "eyes_23"]).then((textures) => {
+                return lazyLoadPlayerCharacterTextures(scene.load, [
+                    {
+                        id: "color_22",
+                        img: "resources/customisation/character_color/character_color21.png",
+                    },
+                    {
+                        id: "eyes_23",
+                        img: "resources/customisation/character_eyes/character_eyes23.png",
+                    },
+                ]).then((textures) => {
                     this.addTextures(textures, frame);
                     this.invisible = false;
                     this.playAnimation(direction, moving);
@@ -102,6 +113,17 @@ export abstract class Character extends Container implements OutlineableInterfac
                 fontSize: 35,
             },
         });
+
+        this.talkIcon = new TalkIcon(scene, 0, -45);
+        this.add(this.talkIcon);
+
+        if (isClickable) {
+            this.setInteractive({
+                hitArea: new Phaser.Geom.Circle(0, 0, interactiveRadius),
+                hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
+                useHandCursor: true,
+            });
+        }
         this.playerNameText.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
         this.add(this.playerNameText);
 
@@ -200,6 +222,10 @@ export abstract class Character extends Container implements OutlineableInterfac
         });
     }
 
+    public showTalkIcon(show: boolean = true, forceClose: boolean = false): void {
+        this.talkIcon.show(show, forceClose);
+    }
+
     public addCompanion(name: string, texturePromise?: CancelablePromise<string>): void {
         if (typeof texturePromise !== "undefined") {
             this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);

front/src/Phaser/Entity/PlayerTextures.ts

@@ -5,446 +5,122 @@ export interface BodyResourceDescriptionListInterface {
 }
 
 export interface BodyResourceDescriptionInterface {
-    name: string;
+    id: string;
     img: string;
     level?: number;
 }
 
-export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
-    male1: { name: "male1", img: "resources/characters/pipoya/Male 01-1.png" },
-    male2: { name: "male2", img: "resources/characters/pipoya/Male 02-2.png" },
-    male3: { name: "male3", img: "resources/characters/pipoya/Male 03-4.png" },
-    male4: { name: "male4", img: "resources/characters/pipoya/Male 09-1.png" },
-    male5: { name: "male5", img: "resources/characters/pipoya/Male 10-3.png" },
-    male6: { name: "male6", img: "resources/characters/pipoya/Male 17-2.png" },
-    male7: { name: "male7", img: "resources/characters/pipoya/Male 18-1.png" },
-    male8: { name: "male8", img: "resources/characters/pipoya/Male 16-4.png" },
-    male9: { name: "male9", img: "resources/characters/pipoya/Male 07-2.png" },
-    male10: { name: "male10", img: "resources/characters/pipoya/Male 05-3.png" },
-    male11: { name: "male11", img: "resources/characters/pipoya/Teacher male 02.png" },
-    male12: { name: "male12", img: "resources/characters/pipoya/su4 Student male 12.png" },
-
-    Female1: { name: "Female1", img: "resources/characters/pipoya/Female 01-1.png" },
-    Female2: { name: "Female2", img: "resources/characters/pipoya/Female 02-2.png" },
-    Female3: { name: "Female3", img: "resources/characters/pipoya/Female 03-4.png" },
-    Female4: { name: "Female4", img: "resources/characters/pipoya/Female 09-1.png" },
-    Female5: { name: "Female5", img: "resources/characters/pipoya/Female 10-3.png" },
-    Female6: { name: "Female6", img: "resources/characters/pipoya/Female 17-2.png" },
-    Female7: { name: "Female7", img: "resources/characters/pipoya/Female 18-1.png" },
-    Female8: { name: "Female8", img: "resources/characters/pipoya/Female 16-4.png" },
-    Female9: { name: "Female9", img: "resources/characters/pipoya/Female 07-2.png" },
-    Female10: { name: "Female10", img: "resources/characters/pipoya/Female 05-3.png" },
-    Female11: { name: "Female11", img: "resources/characters/pipoya/Teacher fmale 02.png" },
-    Female12: { name: "Female12", img: "resources/characters/pipoya/su4 Student fmale 12.png" },
+/**
+ * Temporary object to map layers to the old "level" concept.
+ */
+export const mapLayerToLevel = {
+    woka: -1,
+    body: 0,
+    eyes: 1,
+    hair: 2,
+    clothes: 3,
+    hat: 4,
+    accessory: 5,
 };
 
-export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {
-    color_1: { name: "color_1", img: "resources/customisation/character_color/character_color0.png" },
-    color_2: { name: "color_2", img: "resources/customisation/character_color/character_color1.png" },
-    color_3: { name: "color_3", img: "resources/customisation/character_color/character_color2.png" },
-    color_4: { name: "color_4", img: "resources/customisation/character_color/character_color3.png" },
-    color_5: { name: "color_5", img: "resources/customisation/character_color/character_color4.png" },
-    color_6: { name: "color_6", img: "resources/customisation/character_color/character_color5.png" },
-    color_7: { name: "color_7", img: "resources/customisation/character_color/character_color6.png" },
-    color_8: { name: "color_8", img: "resources/customisation/character_color/character_color7.png" },
-    color_9: { name: "color_9", img: "resources/customisation/character_color/character_color8.png" },
-    color_10: { name: "color_10", img: "resources/customisation/character_color/character_color9.png" },
-    color_11: { name: "color_11", img: "resources/customisation/character_color/character_color10.png" },
-    color_12: { name: "color_12", img: "resources/customisation/character_color/character_color11.png" },
-    color_13: { name: "color_13", img: "resources/customisation/character_color/character_color12.png" },
-    color_14: { name: "color_14", img: "resources/customisation/character_color/character_color13.png" },
-    color_15: { name: "color_15", img: "resources/customisation/character_color/character_color14.png" },
-    color_16: { name: "color_16", img: "resources/customisation/character_color/character_color15.png" },
-    color_17: { name: "color_17", img: "resources/customisation/character_color/character_color16.png" },
-    color_18: { name: "color_18", img: "resources/customisation/character_color/character_color17.png" },
-    color_19: { name: "color_19", img: "resources/customisation/character_color/character_color18.png" },
-    color_20: { name: "color_20", img: "resources/customisation/character_color/character_color19.png" },
-    color_21: { name: "color_21", img: "resources/customisation/character_color/character_color20.png" },
-    color_22: { name: "color_22", img: "resources/customisation/character_color/character_color21.png" },
-    color_23: { name: "color_23", img: "resources/customisation/character_color/character_color22.png" },
-    color_24: { name: "color_24", img: "resources/customisation/character_color/character_color23.png" },
-    color_25: { name: "color_25", img: "resources/customisation/character_color/character_color24.png" },
-    color_26: { name: "color_26", img: "resources/customisation/character_color/character_color25.png" },
-    color_27: { name: "color_27", img: "resources/customisation/character_color/character_color26.png" },
-    color_28: { name: "color_28", img: "resources/customisation/character_color/character_color27.png" },
-    color_29: { name: "color_29", img: "resources/customisation/character_color/character_color28.png" },
-    color_30: { name: "color_30", img: "resources/customisation/character_color/character_color29.png" },
-    color_31: { name: "color_31", img: "resources/customisation/character_color/character_color30.png" },
-    color_32: { name: "color_32", img: "resources/customisation/character_color/character_color31.png" },
-    color_33: { name: "color_33", img: "resources/customisation/character_color/character_color32.png" },
-};
+export enum PlayerTexturesKey {
+    Accessory = "accessory",
+    Body = "body",
+    Clothes = "clothes",
+    Eyes = "eyes",
+    Hair = "hair",
+    Hat = "hat",
+    Woka = "woka",
+}
 
-export const EYES_RESOURCES: BodyResourceDescriptionListInterface = {
-    eyes_1: { name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png" },
-    eyes_2: { name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png" },
-    eyes_3: { name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png" },
-    eyes_4: { name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png" },
-    eyes_5: { name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png" },
-    eyes_6: { name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png" },
-    eyes_7: { name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png" },
-    eyes_8: { name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png" },
-    eyes_9: { name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png" },
-    eyes_10: { name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png" },
-    eyes_11: { name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png" },
-    eyes_12: { name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png" },
-    eyes_13: { name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png" },
-    eyes_14: { name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png" },
-    eyes_15: { name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png" },
-    eyes_16: { name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png" },
-    eyes_17: { name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png" },
-    eyes_18: { name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png" },
-    eyes_19: { name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png" },
-    eyes_20: { name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png" },
-    eyes_21: { name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png" },
-    eyes_22: { name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png" },
-    eyes_23: { name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png" },
-    eyes_24: { name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png" },
-    eyes_25: { name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png" },
-    eyes_26: { name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png" },
-    eyes_27: { name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png" },
-    eyes_28: { name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png" },
-    eyes_29: { name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png" },
-    eyes_30: { name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png" },
-};
+type PlayerTexturesMetadata = Record<PlayerTexturesKey, PlayerTexturesCategory>;
 
-export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = {
-    hair_1: { name: "hair_1", img: "resources/customisation/character_hairs/character_hairs0.png" },
-    hair_2: { name: "hair_2", img: "resources/customisation/character_hairs/character_hairs1.png" },
-    hair_3: { name: "hair_3", img: "resources/customisation/character_hairs/character_hairs2.png" },
-    hair_4: { name: "hair_4", img: "resources/customisation/character_hairs/character_hairs3.png" },
-    hair_5: { name: "hair_5", img: "resources/customisation/character_hairs/character_hairs4.png" },
-    hair_6: { name: "hair_6", img: "resources/customisation/character_hairs/character_hairs5.png" },
-    hair_7: { name: "hair_7", img: "resources/customisation/character_hairs/character_hairs6.png" },
-    hair_8: { name: "hair_8", img: "resources/customisation/character_hairs/character_hairs7.png" },
-    hair_9: { name: "hair_9", img: "resources/customisation/character_hairs/character_hairs8.png" },
-    hair_10: { name: "hair_10", img: "resources/customisation/character_hairs/character_hairs9.png" },
-    hair_11: { name: "hair_11", img: "resources/customisation/character_hairs/character_hairs10.png" },
-    hair_12: { name: "hair_12", img: "resources/customisation/character_hairs/character_hairs11.png" },
-    hair_13: { name: "hair_13", img: "resources/customisation/character_hairs/character_hairs12.png" },
-    hair_14: { name: "hair_14", img: "resources/customisation/character_hairs/character_hairs13.png" },
-    hair_15: { name: "hair_15", img: "resources/customisation/character_hairs/character_hairs14.png" },
-    hair_16: { name: "hair_16", img: "resources/customisation/character_hairs/character_hairs15.png" },
-    hair_17: { name: "hair_17", img: "resources/customisation/character_hairs/character_hairs16.png" },
-    hair_18: { name: "hair_18", img: "resources/customisation/character_hairs/character_hairs17.png" },
-    hair_19: { name: "hair_19", img: "resources/customisation/character_hairs/character_hairs18.png" },
-    hair_20: { name: "hair_20", img: "resources/customisation/character_hairs/character_hairs19.png" },
-    hair_21: { name: "hair_21", img: "resources/customisation/character_hairs/character_hairs20.png" },
-    hair_22: { name: "hair_22", img: "resources/customisation/character_hairs/character_hairs21.png" },
-    hair_23: { name: "hair_23", img: "resources/customisation/character_hairs/character_hairs22.png" },
-    hair_24: { name: "hair_24", img: "resources/customisation/character_hairs/character_hairs23.png" },
-    hair_25: { name: "hair_25", img: "resources/customisation/character_hairs/character_hairs24.png" },
-    hair_26: { name: "hair_26", img: "resources/customisation/character_hairs/character_hairs25.png" },
-    hair_27: { name: "hair_27", img: "resources/customisation/character_hairs/character_hairs26.png" },
-    hair_28: { name: "hair_28", img: "resources/customisation/character_hairs/character_hairs27.png" },
-    hair_29: { name: "hair_29", img: "resources/customisation/character_hairs/character_hairs28.png" },
-    hair_30: { name: "hair_30", img: "resources/customisation/character_hairs/character_hairs29.png" },
-    hair_31: { name: "hair_31", img: "resources/customisation/character_hairs/character_hairs30.png" },
-    hair_32: { name: "hair_32", img: "resources/customisation/character_hairs/character_hairs31.png" },
-    hair_33: { name: "hair_33", img: "resources/customisation/character_hairs/character_hairs32.png" },
-    hair_34: { name: "hair_34", img: "resources/customisation/character_hairs/character_hairs33.png" },
-    hair_35: { name: "hair_35", img: "resources/customisation/character_hairs/character_hairs34.png" },
-    hair_36: { name: "hair_36", img: "resources/customisation/character_hairs/character_hairs35.png" },
-    hair_37: { name: "hair_37", img: "resources/customisation/character_hairs/character_hairs36.png" },
-    hair_38: { name: "hair_38", img: "resources/customisation/character_hairs/character_hairs37.png" },
-    hair_39: { name: "hair_39", img: "resources/customisation/character_hairs/character_hairs38.png" },
-    hair_40: { name: "hair_40", img: "resources/customisation/character_hairs/character_hairs39.png" },
-    hair_41: { name: "hair_41", img: "resources/customisation/character_hairs/character_hairs40.png" },
-    hair_42: { name: "hair_42", img: "resources/customisation/character_hairs/character_hairs41.png" },
-    hair_43: { name: "hair_43", img: "resources/customisation/character_hairs/character_hairs42.png" },
-    hair_44: { name: "hair_44", img: "resources/customisation/character_hairs/character_hairs43.png" },
-    hair_45: { name: "hair_45", img: "resources/customisation/character_hairs/character_hairs44.png" },
-    hair_46: { name: "hair_46", img: "resources/customisation/character_hairs/character_hairs45.png" },
-    hair_47: { name: "hair_47", img: "resources/customisation/character_hairs/character_hairs46.png" },
-    hair_48: { name: "hair_48", img: "resources/customisation/character_hairs/character_hairs47.png" },
-    hair_49: { name: "hair_49", img: "resources/customisation/character_hairs/character_hairs48.png" },
-    hair_50: { name: "hair_50", img: "resources/customisation/character_hairs/character_hairs49.png" },
-    hair_51: { name: "hair_51", img: "resources/customisation/character_hairs/character_hairs50.png" },
-    hair_52: { name: "hair_52", img: "resources/customisation/character_hairs/character_hairs51.png" },
-    hair_53: { name: "hair_53", img: "resources/customisation/character_hairs/character_hairs52.png" },
-    hair_54: { name: "hair_54", img: "resources/customisation/character_hairs/character_hairs53.png" },
-    hair_55: { name: "hair_55", img: "resources/customisation/character_hairs/character_hairs54.png" },
-    hair_56: { name: "hair_56", img: "resources/customisation/character_hairs/character_hairs55.png" },
-    hair_57: { name: "hair_57", img: "resources/customisation/character_hairs/character_hairs56.png" },
-    hair_58: { name: "hair_58", img: "resources/customisation/character_hairs/character_hairs57.png" },
-    hair_59: { name: "hair_59", img: "resources/customisation/character_hairs/character_hairs58.png" },
-    hair_60: { name: "hair_60", img: "resources/customisation/character_hairs/character_hairs59.png" },
-    hair_61: { name: "hair_61", img: "resources/customisation/character_hairs/character_hairs60.png" },
-    hair_62: { name: "hair_62", img: "resources/customisation/character_hairs/character_hairs61.png" },
-    hair_63: { name: "hair_63", img: "resources/customisation/character_hairs/character_hairs62.png" },
-    hair_64: { name: "hair_64", img: "resources/customisation/character_hairs/character_hairs63.png" },
-    hair_65: { name: "hair_65", img: "resources/customisation/character_hairs/character_hairs64.png" },
-    hair_66: { name: "hair_66", img: "resources/customisation/character_hairs/character_hairs65.png" },
-    hair_67: { name: "hair_67", img: "resources/customisation/character_hairs/character_hairs66.png" },
-    hair_68: { name: "hair_68", img: "resources/customisation/character_hairs/character_hairs67.png" },
-    hair_69: { name: "hair_69", img: "resources/customisation/character_hairs/character_hairs68.png" },
-    hair_70: { name: "hair_70", img: "resources/customisation/character_hairs/character_hairs69.png" },
-    hair_71: { name: "hair_71", img: "resources/customisation/character_hairs/character_hairs70.png" },
-    hair_72: { name: "hair_72", img: "resources/customisation/character_hairs/character_hairs71.png" },
-    hair_73: { name: "hair_73", img: "resources/customisation/character_hairs/character_hairs72.png" },
-    hair_74: { name: "hair_74", img: "resources/customisation/character_hairs/character_hairs73.png" },
-};
+interface PlayerTexturesCategory {
+    collections: PlayerTexturesCollection[];
+    required?: boolean;
+}
 
-export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {
-    clothes_1: { name: "clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png" },
-    clothes_2: { name: "clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png" },
-    clothes_3: { name: "clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png" },
-    clothes_4: { name: "clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png" },
-    clothes_5: { name: "clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png" },
-    clothes_6: { name: "clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png" },
-    clothes_7: { name: "clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png" },
-    clothes_8: { name: "clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png" },
-    clothes_9: { name: "clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png" },
-    clothes_10: { name: "clothes_10", img: "resources/customisation/character_clothes/character_clothes9.png" },
-    clothes_11: { name: "clothes_11", img: "resources/customisation/character_clothes/character_clothes10.png" },
-    clothes_12: { name: "clothes_12", img: "resources/customisation/character_clothes/character_clothes11.png" },
-    clothes_13: { name: "clothes_13", img: "resources/customisation/character_clothes/character_clothes12.png" },
-    clothes_14: { name: "clothes_14", img: "resources/customisation/character_clothes/character_clothes13.png" },
-    clothes_15: { name: "clothes_15", img: "resources/customisation/character_clothes/character_clothes14.png" },
-    clothes_16: { name: "clothes_16", img: "resources/customisation/character_clothes/character_clothes15.png" },
-    clothes_17: { name: "clothes_17", img: "resources/customisation/character_clothes/character_clothes16.png" },
-    clothes_18: { name: "clothes_18", img: "resources/customisation/character_clothes/character_clothes17.png" },
-    clothes_19: { name: "clothes_19", img: "resources/customisation/character_clothes/character_clothes18.png" },
-    clothes_20: { name: "clothes_20", img: "resources/customisation/character_clothes/character_clothes19.png" },
-    clothes_21: { name: "clothes_21", img: "resources/customisation/character_clothes/character_clothes20.png" },
-    clothes_22: { name: "clothes_22", img: "resources/customisation/character_clothes/character_clothes21.png" },
-    clothes_23: { name: "clothes_23", img: "resources/customisation/character_clothes/character_clothes22.png" },
-    clothes_24: { name: "clothes_24", img: "resources/customisation/character_clothes/character_clothes23.png" },
-    clothes_25: { name: "clothes_25", img: "resources/customisation/character_clothes/character_clothes24.png" },
-    clothes_26: { name: "clothes_26", img: "resources/customisation/character_clothes/character_clothes25.png" },
-    clothes_27: { name: "clothes_27", img: "resources/customisation/character_clothes/character_clothes26.png" },
-    clothes_28: { name: "clothes_28", img: "resources/customisation/character_clothes/character_clothes27.png" },
-    clothes_29: { name: "clothes_29", img: "resources/customisation/character_clothes/character_clothes28.png" },
-    clothes_30: { name: "clothes_30", img: "resources/customisation/character_clothes/character_clothes29.png" },
-    clothes_31: { name: "clothes_31", img: "resources/customisation/character_clothes/character_clothes30.png" },
-    clothes_32: { name: "clothes_32", img: "resources/customisation/character_clothes/character_clothes31.png" },
-    clothes_33: { name: "clothes_33", img: "resources/customisation/character_clothes/character_clothes32.png" },
-    clothes_34: { name: "clothes_34", img: "resources/customisation/character_clothes/character_clothes33.png" },
-    clothes_35: { name: "clothes_35", img: "resources/customisation/character_clothes/character_clothes34.png" },
-    clothes_36: { name: "clothes_36", img: "resources/customisation/character_clothes/character_clothes35.png" },
-    clothes_37: { name: "clothes_37", img: "resources/customisation/character_clothes/character_clothes36.png" },
-    clothes_38: { name: "clothes_38", img: "resources/customisation/character_clothes/character_clothes37.png" },
-    clothes_39: { name: "clothes_39", img: "resources/customisation/character_clothes/character_clothes38.png" },
-    clothes_40: { name: "clothes_40", img: "resources/customisation/character_clothes/character_clothes39.png" },
-    clothes_41: { name: "clothes_41", img: "resources/customisation/character_clothes/character_clothes40.png" },
-    clothes_42: { name: "clothes_42", img: "resources/customisation/character_clothes/character_clothes41.png" },
-    clothes_43: { name: "clothes_43", img: "resources/customisation/character_clothes/character_clothes42.png" },
-    clothes_44: { name: "clothes_44", img: "resources/customisation/character_clothes/character_clothes43.png" },
-    clothes_45: { name: "clothes_45", img: "resources/customisation/character_clothes/character_clothes44.png" },
-    clothes_46: { name: "clothes_46", img: "resources/customisation/character_clothes/character_clothes45.png" },
-    clothes_47: { name: "clothes_47", img: "resources/customisation/character_clothes/character_clothes46.png" },
-    clothes_48: { name: "clothes_48", img: "resources/customisation/character_clothes/character_clothes47.png" },
-    clothes_49: { name: "clothes_49", img: "resources/customisation/character_clothes/character_clothes48.png" },
-    clothes_50: { name: "clothes_50", img: "resources/customisation/character_clothes/character_clothes49.png" },
-    clothes_51: { name: "clothes_51", img: "resources/customisation/character_clothes/character_clothes50.png" },
-    clothes_52: { name: "clothes_52", img: "resources/customisation/character_clothes/character_clothes51.png" },
-    clothes_53: { name: "clothes_53", img: "resources/customisation/character_clothes/character_clothes52.png" },
-    clothes_54: { name: "clothes_54", img: "resources/customisation/character_clothes/character_clothes53.png" },
-    clothes_55: { name: "clothes_55", img: "resources/customisation/character_clothes/character_clothes54.png" },
-    clothes_56: { name: "clothes_56", img: "resources/customisation/character_clothes/character_clothes55.png" },
-    clothes_57: { name: "clothes_57", img: "resources/customisation/character_clothes/character_clothes56.png" },
-    clothes_58: { name: "clothes_58", img: "resources/customisation/character_clothes/character_clothes57.png" },
-    clothes_59: { name: "clothes_59", img: "resources/customisation/character_clothes/character_clothes58.png" },
-    clothes_60: { name: "clothes_60", img: "resources/customisation/character_clothes/character_clothes59.png" },
-    clothes_61: { name: "clothes_61", img: "resources/customisation/character_clothes/character_clothes60.png" },
-    clothes_62: { name: "clothes_62", img: "resources/customisation/character_clothes/character_clothes61.png" },
-    clothes_63: { name: "clothes_63", img: "resources/customisation/character_clothes/character_clothes62.png" },
-    clothes_64: { name: "clothes_64", img: "resources/customisation/character_clothes/character_clothes63.png" },
-    clothes_65: { name: "clothes_65", img: "resources/customisation/character_clothes/character_clothes64.png" },
-    clothes_66: { name: "clothes_66", img: "resources/customisation/character_clothes/character_clothes65.png" },
-    clothes_67: { name: "clothes_67", img: "resources/customisation/character_clothes/character_clothes66.png" },
-    clothes_68: { name: "clothes_68", img: "resources/customisation/character_clothes/character_clothes67.png" },
-    clothes_69: { name: "clothes_69", img: "resources/customisation/character_clothes/character_clothes68.png" },
-    clothes_70: { name: "clothes_70", img: "resources/customisation/character_clothes/character_clothes69.png" },
-    clothes_pride_shirt: {
-        name: "clothes_pride_shirt",
-        img: "resources/customisation/character_clothes/pride_shirt.png",
-    },
-    clothes_black_hoodie: {
-        name: "clothes_black_hoodie",
-        img: "resources/customisation/character_clothes/black_hoodie.png",
-    },
-    clothes_white_hoodie: {
-        name: "clothes_white_hoodie",
-        img: "resources/customisation/character_clothes/white_hoodie.png",
-    },
-    clothes_engelbert: { name: "clothes_engelbert", img: "resources/customisation/character_clothes/engelbert.png" },
-};
+interface PlayerTexturesCollection {
+    name: string;
+    textures: PlayerTexturesRecord[];
+}
 
-export const HATS_RESOURCES: BodyResourceDescriptionListInterface = {
-    hats_1: { name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png" },
-    hats_2: { name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png" },
-    hats_3: { name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png" },
-    hats_4: { name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png" },
-    hats_5: { name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png" },
-    hats_6: { name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png" },
-    hats_7: { name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png" },
-    hats_8: { name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png" },
-    hats_9: { name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png" },
-    hats_10: { name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png" },
-    hats_11: { name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png" },
-    hats_12: { name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png" },
-    hats_13: { name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png" },
-    hats_14: { name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png" },
-    hats_15: { name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png" },
-    hats_16: { name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png" },
-    hats_17: { name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png" },
-    hats_18: { name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png" },
-    hats_19: { name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png" },
-    hats_20: { name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png" },
-    hats_21: { name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png" },
-    hats_22: { name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png" },
-    hats_23: { name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png" },
-    hats_24: { name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png" },
-    hats_25: { name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png" },
-    hats_26: { name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png" },
-    tinfoil_hat1: { name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png" },
-};
+interface PlayerTexturesRecord {
+    id: string;
+    name: string;
+    url: string;
+}
 
-export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {
-    accessory_1: {
-        name: "accessory_1",
-        img: "resources/customisation/character_accessories/character_accessories1.png",
-    },
-    accessory_2: {
-        name: "accessory_2",
-        img: "resources/customisation/character_accessories/character_accessories2.png",
-    },
-    accessory_3: {
-        name: "accessory_3",
-        img: "resources/customisation/character_accessories/character_accessories3.png",
-    },
-    accessory_4: {
-        name: "accessory_4",
-        img: "resources/customisation/character_accessories/character_accessories4.png",
-    },
-    accessory_5: {
-        name: "accessory_5",
-        img: "resources/customisation/character_accessories/character_accessories5.png",
-    },
-    accessory_6: {
-        name: "accessory_6",
-        img: "resources/customisation/character_accessories/character_accessories6.png",
-    },
-    accessory_7: {
-        name: "accessory_7",
-        img: "resources/customisation/character_accessories/character_accessories7.png",
-    },
-    accessory_8: {
-        name: "accessory_8",
-        img: "resources/customisation/character_accessories/character_accessories8.png",
-    },
-    accessory_9: {
-        name: "accessory_9",
-        img: "resources/customisation/character_accessories/character_accessories9.png",
-    },
-    accessory_10: {
-        name: "accessory_10",
-        img: "resources/customisation/character_accessories/character_accessories10.png",
-    },
-    accessory_11: {
-        name: "accessory_11",
-        img: "resources/customisation/character_accessories/character_accessories11.png",
-    },
-    accessory_12: {
-        name: "accessory_12",
-        img: "resources/customisation/character_accessories/character_accessories12.png",
-    },
-    accessory_13: {
-        name: "accessory_13",
-        img: "resources/customisation/character_accessories/character_accessories13.png",
-    },
-    accessory_14: {
-        name: "accessory_14",
-        img: "resources/customisation/character_accessories/character_accessories14.png",
-    },
-    accessory_15: {
-        name: "accessory_15",
-        img: "resources/customisation/character_accessories/character_accessories15.png",
-    },
-    accessory_16: {
-        name: "accessory_16",
-        img: "resources/customisation/character_accessories/character_accessories16.png",
-    },
-    accessory_17: {
-        name: "accessory_17",
-        img: "resources/customisation/character_accessories/character_accessories17.png",
-    },
-    accessory_18: {
-        name: "accessory_18",
-        img: "resources/customisation/character_accessories/character_accessories18.png",
-    },
-    accessory_19: {
-        name: "accessory_19",
-        img: "resources/customisation/character_accessories/character_accessories19.png",
-    },
-    accessory_20: {
-        name: "accessory_20",
-        img: "resources/customisation/character_accessories/character_accessories20.png",
-    },
-    accessory_21: {
-        name: "accessory_21",
-        img: "resources/customisation/character_accessories/character_accessories21.png",
-    },
-    accessory_22: {
-        name: "accessory_22",
-        img: "resources/customisation/character_accessories/character_accessories22.png",
-    },
-    accessory_23: {
-        name: "accessory_23",
-        img: "resources/customisation/character_accessories/character_accessories23.png",
-    },
-    accessory_24: {
-        name: "accessory_24",
-        img: "resources/customisation/character_accessories/character_accessories24.png",
-    },
-    accessory_25: {
-        name: "accessory_25",
-        img: "resources/customisation/character_accessories/character_accessories25.png",
-    },
-    accessory_26: {
-        name: "accessory_26",
-        img: "resources/customisation/character_accessories/character_accessories26.png",
-    },
-    accessory_27: {
-        name: "accessory_27",
-        img: "resources/customisation/character_accessories/character_accessories27.png",
-    },
-    accessory_28: {
-        name: "accessory_28",
-        img: "resources/customisation/character_accessories/character_accessories28.png",
-    },
-    accessory_29: {
-        name: "accessory_29",
-        img: "resources/customisation/character_accessories/character_accessories29.png",
-    },
-    accessory_30: {
-        name: "accessory_30",
-        img: "resources/customisation/character_accessories/character_accessories30.png",
-    },
-    accessory_31: {
-        name: "accessory_31",
-        img: "resources/customisation/character_accessories/character_accessories31.png",
-    },
-    accessory_32: {
-        name: "accessory_32",
-        img: "resources/customisation/character_accessories/character_accessories32.png",
-    },
-    accessory_mate_bottle: {
-        name: "accessory_mate_bottle",
-        img: "resources/customisation/character_accessories/mate_bottle1.png",
-    },
-    accessory_mask: { name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png" },
-};
+export class PlayerTextures {
+    private PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {};
+    private COLOR_RESOURCES: BodyResourceDescriptionListInterface = {};
+    private EYES_RESOURCES: BodyResourceDescriptionListInterface = {};
+    private HAIR_RESOURCES: BodyResourceDescriptionListInterface = {};
+    private CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {};
+    private HATS_RESOURCES: BodyResourceDescriptionListInterface = {};
+    private ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {};
+    private LAYERS: BodyResourceDescriptionListInterface[] = [];
 
-export const LAYERS: BodyResourceDescriptionListInterface[] = [
-    COLOR_RESOURCES,
-    EYES_RESOURCES,
-    HAIR_RESOURCES,
-    CLOTHES_RESOURCES,
-    HATS_RESOURCES,
-    ACCESSORIES_RESOURCES,
-];
+    public loadPlayerTexturesMetadata(metadata: PlayerTexturesMetadata): void {
+        this.mapTexturesMetadataIntoResources(metadata);
+    }
+
+    public getTexturesResources(key: PlayerTexturesKey): BodyResourceDescriptionListInterface {
+        switch (key) {
+            case PlayerTexturesKey.Accessory:
+                return this.ACCESSORIES_RESOURCES;
+            case PlayerTexturesKey.Body:
+                return this.COLOR_RESOURCES;
+            case PlayerTexturesKey.Clothes:
+                return this.CLOTHES_RESOURCES;
+            case PlayerTexturesKey.Eyes:
+                return this.EYES_RESOURCES;
+            case PlayerTexturesKey.Hair:
+                return this.HAIR_RESOURCES;
+            case PlayerTexturesKey.Hat:
+                return this.HATS_RESOURCES;
+            case PlayerTexturesKey.Woka:
+                return this.PLAYER_RESOURCES;
+        }
+    }
+
+    public getLayers(): BodyResourceDescriptionListInterface[] {
+        return this.LAYERS;
+    }
+
+    private mapTexturesMetadataIntoResources(metadata: PlayerTexturesMetadata): void {
+        this.PLAYER_RESOURCES = this.getMappedResources(metadata.woka);
+        this.COLOR_RESOURCES = this.getMappedResources(metadata.body);
+        this.EYES_RESOURCES = this.getMappedResources(metadata.eyes);
+        this.HAIR_RESOURCES = this.getMappedResources(metadata.hair);
+        this.CLOTHES_RESOURCES = this.getMappedResources(metadata.clothes);
+        this.HATS_RESOURCES = this.getMappedResources(metadata.hat);
+        this.ACCESSORIES_RESOURCES = this.getMappedResources(metadata.accessory);
+
+        this.LAYERS = [
+            this.COLOR_RESOURCES,
+            this.EYES_RESOURCES,
+            this.HAIR_RESOURCES,
+            this.CLOTHES_RESOURCES,
+            this.HATS_RESOURCES,
+            this.ACCESSORIES_RESOURCES,
+        ];
+    }
+
+    private getMappedResources(category: PlayerTexturesCategory): BodyResourceDescriptionListInterface {
+        const resources: BodyResourceDescriptionListInterface = {};
+        if (!category) {
+            return {};
+        }
+        for (const collection of category.collections) {
+            for (const texture of collection.textures) {
+                resources[texture.id] = { id: texture.id, img: texture.url };
+            }
+        }
+        return resources;
+    }
+}
 
 export const OBJECTS: BodyResourceDescriptionInterface[] = [
-    { name: "teleportation", img: "resources/objects/teleportation.png" },
+    { id: "teleportation", img: "resources/objects/teleportation.png" },
 ];

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -1,6 +1,6 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import type { CharacterTexture } from "../../Connexion/LocalUser";
-import { BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES } from "./PlayerTextures";
+import { BodyResourceDescriptionInterface, mapLayerToLevel, PlayerTextures, PlayerTexturesKey } from "./PlayerTextures";
 import CancelablePromise from "cancelable-promise";
 
 export interface FrameConfig {
@@ -8,33 +8,37 @@ export interface FrameConfig {
     frameHeight: number;
 }
 
-export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => {
+export const loadAllLayers = (
+    load: LoaderPlugin,
+    playerTextures: PlayerTextures
+): BodyResourceDescriptionInterface[][] => {
     const returnArray: BodyResourceDescriptionInterface[][] = [];
-    LAYERS.forEach((layer) => {
+    playerTextures.getLayers().forEach((layer) => {
         const layerArray: BodyResourceDescriptionInterface[] = [];
         Object.values(layer).forEach((textureDescriptor) => {
             layerArray.push(textureDescriptor);
-            load.spritesheet(textureDescriptor.name, textureDescriptor.img, { frameWidth: 32, frameHeight: 32 });
+            load.spritesheet(textureDescriptor.id, textureDescriptor.img, { frameWidth: 32, frameHeight: 32 });
         });
         returnArray.push(layerArray);
     });
     return returnArray;
 };
-export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptionInterface[] => {
-    const returnArray = Object.values(PLAYER_RESOURCES);
+export const loadAllDefaultModels = (
+    load: LoaderPlugin,
+    playerTextures: PlayerTextures
+): BodyResourceDescriptionInterface[] => {
+    const returnArray = Object.values(playerTextures.getTexturesResources(PlayerTexturesKey.Woka));
     returnArray.forEach((playerResource: BodyResourceDescriptionInterface) => {
-        load.spritesheet(playerResource.name, playerResource.img, { frameWidth: 32, frameHeight: 32 });
+        load.spritesheet(playerResource.id, playerResource.img, { frameWidth: 32, frameHeight: 32 });
     });
     return returnArray;
 };
 
-export const loadCustomTexture = (
+export const loadWokaTexture = (
     loaderPlugin: LoaderPlugin,
-    texture: CharacterTexture
+    texture: BodyResourceDescriptionInterface
 ): CancelablePromise<BodyResourceDescriptionInterface> => {
-    const name = "customCharacterTexture" + texture.id;
-    const playerResourceDescriptor: BodyResourceDescriptionInterface = { name, img: texture.url, level: texture.level };
-    return createLoadingPromise(loaderPlugin, playerResourceDescriptor, {
+    return createLoadingPromise(loaderPlugin, texture, {
         frameWidth: 32,
         frameHeight: 32,
     });
@@ -42,16 +46,15 @@ export const loadCustomTexture = (
 
 export const lazyLoadPlayerCharacterTextures = (
     loadPlugin: LoaderPlugin,
-    texturekeys: Array<string | BodyResourceDescriptionInterface>
+    textures: BodyResourceDescriptionInterface[]
 ): CancelablePromise<string[]> => {
     const promisesList: CancelablePromise<unknown>[] = [];
-    texturekeys.forEach((textureKey: string | BodyResourceDescriptionInterface) => {
+    textures.forEach((texture) => {
         try {
             //TODO refactor
-            const playerResourceDescriptor = getRessourceDescriptor(textureKey);
-            if (playerResourceDescriptor && !loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
+            if (!loadPlugin.textureManager.exists(texture.id)) {
                 promisesList.push(
-                    createLoadingPromise(loadPlugin, playerResourceDescriptor, {
+                    createLoadingPromise(loadPlugin, texture, {
                         frameWidth: 32,
                         frameHeight: 32,
                     })
@@ -64,58 +67,41 @@ export const lazyLoadPlayerCharacterTextures = (
     let returnPromise: CancelablePromise<Array<string | BodyResourceDescriptionInterface>>;
     if (promisesList.length > 0) {
         loadPlugin.start();
-        returnPromise = CancelablePromise.all(promisesList).then(() => texturekeys);
+        returnPromise = CancelablePromise.all(promisesList).then(() => textures);
     } else {
-        returnPromise = CancelablePromise.resolve(texturekeys);
+        returnPromise = CancelablePromise.resolve(textures);
     }
 
     //If the loading fail, we render the default model instead.
     return returnPromise.then((keys) =>
         keys.map((key) => {
-            return typeof key !== "string" ? key.name : key;
+            return typeof key !== "string" ? key.id : key;
         })
     );
 };
 
-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 playerResource = PLAYER_RESOURCES[textureName];
-    if (playerResource !== undefined) return playerResource;
-
-    for (let i = 0; i < LAYERS.length; i++) {
-        const playerResource = LAYERS[i][textureName];
-        if (playerResource !== undefined) return playerResource;
-    }
-    throw new Error("Could not find a data for texture " + textureName);
-};
-
 export const createLoadingPromise = (
     loadPlugin: LoaderPlugin,
     playerResourceDescriptor: BodyResourceDescriptionInterface,
     frameConfig: FrameConfig
 ) => {
     return new CancelablePromise<BodyResourceDescriptionInterface>((res, rej, cancel) => {
-        if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
+        if (loadPlugin.textureManager.exists(playerResourceDescriptor.id)) {
             return res(playerResourceDescriptor);
         }
 
         cancel(() => {
             loadPlugin.off("loaderror");
-            loadPlugin.off("filecomplete-spritesheet-" + playerResourceDescriptor.name);
+            loadPlugin.off("filecomplete-spritesheet-" + playerResourceDescriptor.id);
             return;
         });
 
-        loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, frameConfig);
+        loadPlugin.spritesheet(playerResourceDescriptor.id, playerResourceDescriptor.img, frameConfig);
         const errorCallback = (file: { src: string }) => {
             if (file.src !== playerResourceDescriptor.img) return;
             console.error("failed loading player resource: ", playerResourceDescriptor);
             rej(playerResourceDescriptor);
-            loadPlugin.off("filecomplete-spritesheet-" + playerResourceDescriptor.name, successCallback);
+            loadPlugin.off("filecomplete-spritesheet-" + playerResourceDescriptor.id, successCallback);
             loadPlugin.off("loaderror", errorCallback);
         };
         const successCallback = () => {
@@ -123,7 +109,7 @@ export const createLoadingPromise = (
             res(playerResourceDescriptor);
         };
 
-        loadPlugin.once("filecomplete-spritesheet-" + playerResourceDescriptor.name, successCallback);
+        loadPlugin.once("filecomplete-spritesheet-" + playerResourceDescriptor.id, successCallback);
         loadPlugin.on("loaderror", errorCallback);
     });
 };

front/src/Phaser/Entity/RemotePlayer.ts

@@ -1,5 +1,5 @@
 import { requestVisitCardsStore } from "../../Stores/GameStore";
-import { ActionsMenuData, actionsMenuStore } from "../../Stores/ActionsMenuStore";
+import { ActionsMenuAction, ActionsMenuData, actionsMenuStore } from "../../Stores/ActionsMenuStore";
 import { Character } from "../Entity/Character";
 import type { GameScene } from "../Game/GameScene";
 import type { PointInterface } from "../../Connexion/ConnexionModels";
@@ -8,21 +8,28 @@ import type { Unsubscriber } from "svelte/store";
 import type { ActivatableInterface } from "../Game/ActivatableInterface";
 import type CancelablePromise from "cancelable-promise";
 import LL from "../../i18n/i18n-svelte";
+import { blackListManager } from "../../WebRtc/BlackListManager";
+import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
+
+export enum RemotePlayerEvent {
+    Clicked = "Clicked",
+}
 
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
  */
 export class RemotePlayer extends Character implements ActivatableInterface {
-    public userId: number;
+    public readonly userId: number;
+    public readonly userUuid: string;
     public readonly activationRadius: number;
 
-    private registeredActions: { actionName: string; callback: Function }[];
     private visitCardUrl: string | null;
     private isActionsMenuInitialized: boolean = false;
     private actionsMenuStoreUnsubscriber: Unsubscriber;
 
     constructor(
         userId: number,
+        userUuid: string,
         Scene: GameScene,
         x: number,
         y: number,
@@ -39,10 +46,9 @@ export class RemotePlayer extends Character implements ActivatableInterface {
 
         //set data
         this.userId = userId;
+        this.userUuid = userUuid;
         this.visitCardUrl = visitCardUrl;
-        this.registeredActions = [];
-        this.registerDefaultActionsMenuActions();
-        this.setClickable(this.registeredActions.length > 0);
+        this.setClickable(this.getDefaultActionsMenuActions().length > 0);
         this.activationRadius = activationRadius ?? 96;
         this.actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value: ActionsMenuData | undefined) => {
             this.isActionsMenuInitialized = value ? true : false;
@@ -63,17 +69,19 @@ export class RemotePlayer extends Character implements ActivatableInterface {
         }
     }
 
-    public registerActionsMenuAction(action: { actionName: string; callback: Function }): void {
-        this.registeredActions.push(action);
-        this.updateIsClickable();
+    public registerActionsMenuAction(action: ActionsMenuAction): void {
+        actionsMenuStore.addAction({
+            ...action,
+            priority: action.priority ?? 0,
+            callback: () => {
+                action.callback();
+                actionsMenuStore.clear();
+            },
+        });
     }
 
     public unregisterActionsMenuAction(actionName: string) {
-        const index = this.registeredActions.findIndex((action) => action.actionName === actionName);
-        if (index !== -1) {
-            this.registeredActions.splice(index, 1);
-        }
-        this.updateIsClickable();
+        actionsMenuStore.removeAction(actionName);
     }
 
     public activate(): void {
@@ -90,37 +98,52 @@ export class RemotePlayer extends Character implements ActivatableInterface {
         return this.isClickable();
     }
 
-    private updateIsClickable(): void {
-        this.setClickable(this.registeredActions.length > 0);
-    }
-
     private toggleActionsMenu(): void {
         if (this.isActionsMenuInitialized) {
             actionsMenuStore.clear();
             return;
         }
         actionsMenuStore.initialize(this.playerName);
-        for (const action of this.registeredActions) {
-            actionsMenuStore.addAction(action.actionName, action.callback);
+        for (const action of this.getDefaultActionsMenuActions()) {
+            actionsMenuStore.addAction(action);
         }
     }
 
-    private registerDefaultActionsMenuActions(): void {
+    private getDefaultActionsMenuActions(): ActionsMenuAction[] {
+        const actions: ActionsMenuAction[] = [];
         if (this.visitCardUrl) {
-            this.registeredActions.push({
+            actions.push({
                 actionName: LL.woka.menu.businessCard(),
+                protected: true,
+                priority: 1,
                 callback: () => {
                     requestVisitCardsStore.set(this.visitCardUrl);
                     actionsMenuStore.clear();
                 },
             });
         }
+
+        actions.push({
+            actionName: blackListManager.isBlackListed(this.userUuid)
+                ? LL.report.block.unblock()
+                : LL.report.block.block(),
+            protected: true,
+            priority: -1,
+            style: "is-error",
+            callback: () => {
+                showReportScreenStore.set({ userId: this.userId, userName: this.name });
+                actionsMenuStore.clear();
+            },
+        });
+
+        return actions;
     }
 
     private bindEventHandlers(): void {
         this.on(Phaser.Input.Events.POINTER_DOWN, (event: Phaser.Input.Pointer) => {
             if (event.downElement.nodeName === "CANVAS" && event.leftButtonDown()) {
                 this.toggleActionsMenu();
+                this.emit(RemotePlayerEvent.Clicked);
             }
         });
     }

front/src/Phaser/Game/GameMap.ts

@@ -126,7 +126,7 @@ export class GameMap {
         for (let y = 0; y < this.map.height; y += 1) {
             const row: number[] = [];
             for (let x = 0; x < this.map.width; x += 1) {
-                row.push(this.isCollidingAt(x, y) ? 1 : 0);
+                row.push(this.isCollidingAt(x, y) ? 1 : this.isExitTile(x, y) ? 2 : 0);
             }
             grid.push(row);
         }
@@ -336,13 +336,38 @@ export class GameMap {
             if (!layer.visible) {
                 continue;
             }
-            if (layer.getTileAt(x, y)?.properties[GameMapProperties.COLLIDES]) {
+            if (layer.getTileAt(x, y)?.properties?.[GameMapProperties.COLLIDES]) {
                 return true;
             }
         }
         return false;
     }
 
+    private isExitTile(x: number, y: number): boolean {
+        for (const layer of this.phaserLayers) {
+            if (!layer.visible) {
+                continue;
+            }
+            const tile = layer.getTileAt(x, y);
+            if (!tile) {
+                continue;
+            }
+            if (
+                tile &&
+                (tile.properties[GameMapProperties.EXIT_URL] || tile.properties[GameMapProperties.EXIT_SCENE_URL])
+            ) {
+                return true;
+            }
+            for (const property of layer.layer.properties) {
+                //@ts-ignore
+                if (property.name && property.name === "exitUrl") {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
     private triggerAllProperties(): void {
         const newProps = this.getProperties(this.key ?? 0);
         const oldProps = this.lastProperties;

front/src/Phaser/Game/GameScene.ts

@@ -18,7 +18,7 @@ import { soundManager } from "./SoundManager";
 import { SharedVariablesManager } from "./SharedVariablesManager";
 import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
 
-import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
+import { lazyLoadPlayerCharacterTextures, loadWokaTexture } from "../Entity/PlayerTexturesLoadingManager";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
 import { iframeListener } from "../../Api/IframeListener";
 import { DEBUG_MODE, JITSI_URL, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
@@ -30,7 +30,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 import { SimplePeer } from "../../WebRtc/SimplePeer";
 import { Loader } from "../Components/Loader";
-import { RemotePlayer } from "../Entity/RemotePlayer";
+import { RemotePlayer, RemotePlayerEvent } from "../Entity/RemotePlayer";
 import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene";
 import { PlayerAnimationDirections } from "../Player/Animation";
 import { hasMovedEventName, Player, requestEmoteEventName } from "../Player/Player";
@@ -91,11 +91,14 @@ import { MapStore } from "../../Stores/Utils/MapStore";
 import { followUsersColorStore } from "../../Stores/FollowStore";
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
 import { locale } from "../../i18n/i18n-svelte";
+import { localVolumeStore } from "../../Stores/MediaStore";
 import { StringUtils } from "../../Utils/StringUtils";
 import { startLayerNamesStore } from "../../Stores/StartLayerNamesStore";
 import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
 import { SimpleCoWebsite } from "../../WebRtc/CoWebsite/SimpleCoWebsite";
 import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
+import { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
+import CancelablePromise from "cancelable-promise";
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
     reconnecting: boolean;
@@ -172,6 +175,9 @@ export class GameScene extends DirtyScene {
     private peerStoreUnsubscribe!: Unsubscriber;
     private emoteUnsubscribe!: Unsubscriber;
     private emoteMenuUnsubscribe!: Unsubscriber;
+
+    private volumeStoreUnsubscribers: Map<number, Unsubscriber> = new Map<number, Unsubscriber>();
+    private localVolumeStoreUnsubscriber: Unsubscriber | undefined;
     private followUsersColorStoreUnsubscribe!: Unsubscriber;
 
     private biggestAvailableAreaStoreUnsubscribe!: () => void;
@@ -240,13 +246,7 @@ export class GameScene extends DirtyScene {
         //initialize frame event of scripting API
         this.listenToIframeEvents();
 
-        const localUser = localUserStore.getLocalUser();
-        const textures = localUser?.textures;
-        if (textures) {
-            for (const texture of textures) {
-                loadCustomTexture(this.load, texture).catch((e) => console.error(e));
-            }
-        }
+        this.load.image("iconTalk", "/resources/icons/icon_talking.png");
 
         if (touchScreenManager.supportTouchScreen) {
             this.load.image(joystickBaseKey, joystickBaseImg);
@@ -338,7 +338,6 @@ export class GameScene extends DirtyScene {
         (this.load as any).rexWebFont({
             custom: {
                 families: ["Press Start 2P"],
-                urls: ["/resources/fonts/fonts.css"],
                 testString: "abcdefg",
             },
         });
@@ -582,12 +581,6 @@ export class GameScene extends DirtyScene {
             waScaleManager
         );
 
-        this.pathfindingManager = new PathfindingManager(
-            this,
-            this.gameMap.getCollisionGrid(),
-            this.gameMap.getTileDimensions()
-        );
-
         this.activatablesManager = new ActivatablesManager(this.CurrentPlayer);
 
         biggestAvailableAreaStore.recompute();
@@ -641,14 +634,45 @@ export class GameScene extends DirtyScene {
             this.connect();
         }
 
+        const talkIconVolumeTreshold = 10;
         let oldPeerNumber = 0;
         this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
+            this.volumeStoreUnsubscribers.forEach((unsubscribe) => unsubscribe());
+            this.volumeStoreUnsubscribers.clear();
+
+            for (const [key, videoStream] of peers) {
+                this.volumeStoreUnsubscribers.set(
+                    key,
+                    videoStream.volumeStore.subscribe((volume) => {
+                        if (volume) {
+                            this.MapPlayersByKey.get(key)?.showTalkIcon(volume > talkIconVolumeTreshold);
+                        }
+                    })
+                );
+            }
+
             const newPeerNumber = peers.size;
             if (newPeerNumber > oldPeerNumber) {
                 this.playSound("audio-webrtc-in");
             } else if (newPeerNumber < oldPeerNumber) {
                 this.playSound("audio-webrtc-out");
             }
+            if (newPeerNumber > 0) {
+                if (!this.localVolumeStoreUnsubscriber) {
+                    this.localVolumeStoreUnsubscriber = localVolumeStore.subscribe((volume) => {
+                        if (volume) {
+                            this.CurrentPlayer.showTalkIcon(volume > talkIconVolumeTreshold);
+                        }
+                    });
+                }
+            } else {
+                this.CurrentPlayer.showTalkIcon(false, true);
+                this.MapPlayersByKey.forEach((remotePlayer) => remotePlayer.showTalkIcon(false, true));
+                if (this.localVolumeStoreUnsubscriber) {
+                    this.localVolumeStoreUnsubscriber();
+                    this.localVolumeStoreUnsubscriber = undefined;
+                }
+            }
             oldPeerNumber = newPeerNumber;
         });
 
@@ -715,6 +739,14 @@ export class GameScene extends DirtyScene {
             .then((onConnect: OnConnectInterface) => {
                 this.connection = onConnect.connection;
 
+                lazyLoadPlayerCharacterTextures(this.load, onConnect.room.characterLayers)
+                    .then((layers) => {
+                        this.currentPlayerTexturesResolve(layers);
+                    })
+                    .catch((e) => {
+                        this.currentPlayerTexturesReject(e);
+                    });
+
                 playersStore.connectToRoomConnection(this.connection);
                 userIsAdminStore.set(this.connection.hasTag("admin"));
 
@@ -1076,6 +1108,23 @@ ${escapedMessage}
             })
         );
 
+        this.iframeSubscriptionList.push(
+            iframeListener.addActionsMenuKeyToRemotePlayerStream.subscribe((data) => {
+                this.MapPlayersByKey.get(data.id)?.registerActionsMenuAction({
+                    actionName: data.actionKey,
+                    callback: () => {
+                        iframeListener.sendActionsMenuActionClickedEvent({ actionName: data.actionKey, id: data.id });
+                    },
+                });
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.removeActionsMenuKeyFromRemotePlayerEvent.subscribe((data) => {
+                this.MapPlayersByKey.get(data.id)?.unregisterActionsMenuAction(data.actionKey);
+            })
+        );
+
         this.iframeSubscriptionList.push(
             iframeListener.trackCameraUpdateStream.subscribe(() => {
                 if (!this.firstCameraUpdateSent) {
@@ -1407,7 +1456,7 @@ ${escapedMessage}
             phaserLayer.setCollisionByProperty({ collides: true }, visible);
         } else {
             const phaserLayers = this.gameMap.findPhaserLayers(layerName + "/");
-            if (phaserLayers === []) {
+            if (phaserLayers.length === 0) {
                 console.warn(
                     'Could not find layer with name that contains "' +
                         layerName +
@@ -1502,7 +1551,7 @@ ${escapedMessage}
         this.messageSubscription?.unsubscribe();
         this.userInputManager.destroy();
         this.pinchManager?.destroy();
-        this.emoteManager.destroy();
+        this.emoteManager?.destroy();
         this.cameraManager.destroy();
         this.peerStoreUnsubscribe();
         this.emoteUnsubscribe();
@@ -1568,6 +1617,8 @@ ${escapedMessage}
                         }
                     })
                     .catch((reason) => console.warn(reason));
+
+                urlManager.clearHashParameter();
             } catch (err) {
                 console.warn(`Cannot proceed with moveTo command:\n\t-> ${err}`);
             }
@@ -1659,16 +1710,23 @@ ${escapedMessage}
         }
     }
 
+    // The promise that will resolve to the current player texture. This will be available only after connection is established.
+    private currentPlayerTexturesResolve!: (value: string[]) => void;
+    private currentPlayerTexturesReject!: (reason: unknown) => void;
+    private currentPlayerTexturesPromise: CancelablePromise<string[]> = new CancelablePromise((resolve, reject) => {
+        this.currentPlayerTexturesResolve = resolve;
+        this.currentPlayerTexturesReject = reject;
+    });
+
     private createCurrentPlayer() {
         //TODO create animation moving between exit and start
-        const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.characterLayers);
         try {
             this.CurrentPlayer = new Player(
                 this,
                 this.startPositionCalculator.startPosition.x,
                 this.startPositionCalculator.startPosition.y,
                 this.playerName,
-                texturesPromise,
+                this.currentPlayerTexturesPromise,
                 PlayerAnimationDirections.Down,
                 false,
                 this.companion,
@@ -1852,6 +1910,7 @@ ${escapedMessage}
         const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, addPlayerData.characterLayers);
         const player = new RemotePlayer(
             addPlayerData.userId,
+            addPlayerData.userUuid,
             this,
             addPlayerData.position.x,
             addPlayerData.position.y,
@@ -1879,6 +1938,10 @@ ${escapedMessage}
             this.activatablesManager.handlePointerOutActivatableObject();
             this.markDirty();
         });
+
+        player.on(RemotePlayerEvent.Clicked, () => {
+            iframeListener.sendRemotePlayerClickedEvent({ id: player.userId });
+        });
     }
 
     /**

front/src/Phaser/Items/Computer/computer.ts

@@ -61,7 +61,6 @@ export default {
             state = initState;
         }
 
-        // Idée: ESSAYER WebPack? https://paultavares.wordpress.com/2018/07/02/webpack-how-to-generate-an-es-module-bundle/
         const computer = new Sprite(scene, object.x, object.y, "computer");
         scene.add.existing(computer);
         if (state.status === "on") {

front/src/Phaser/Login/AbstractCharacterScene.ts

@@ -1,41 +1,41 @@
 import { ResizableScene } from "./ResizableScene";
-import { localUserStore } from "../../Connexion/LocalUserStore";
-import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
-import { loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
-import type { CharacterTexture } from "../../Connexion/LocalUser";
+import { BodyResourceDescriptionInterface, PlayerTexturesKey } from "../Entity/PlayerTextures";
+import { loadWokaTexture } from "../Entity/PlayerTexturesLoadingManager";
 import type CancelablePromise from "cancelable-promise";
+import { PlayerTextures } from "../Entity/PlayerTextures";
 
 export abstract class AbstractCharacterScene extends ResizableScene {
+    protected playerTextures: PlayerTextures;
+
+    constructor(params: { key: string }) {
+        super(params);
+        this.playerTextures = new PlayerTextures();
+    }
+
     loadCustomSceneSelectCharacters(): Promise<BodyResourceDescriptionInterface[]> {
-        const textures = this.getTextures();
+        const textures = this.playerTextures.getTexturesResources(PlayerTexturesKey.Woka);
         const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
-            for (const texture of textures) {
+            for (const texture of Object.values(textures)) {
                 if (texture.level === -1) {
                     continue;
                 }
-                promises.push(loadCustomTexture(this.load, texture));
+                promises.push(loadWokaTexture(this.load, texture));
             }
         }
         return Promise.all(promises);
     }
 
     loadSelectSceneCharacters(): Promise<BodyResourceDescriptionInterface[]> {
-        const textures = this.getTextures();
         const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
-        if (textures) {
-            for (const texture of textures) {
+        for (const textures of this.playerTextures.getLayers()) {
+            for (const texture of Object.values(textures)) {
                 if (texture.level !== -1) {
                     continue;
                 }
-                promises.push(loadCustomTexture(this.load, texture));
+                promises.push(loadWokaTexture(this.load, texture));
             }
         }
         return Promise.all(promises);
     }
-
-    private getTextures(): CharacterTexture[] | undefined {
-        const localUser = localUserStore.getLocalUser();
-        return localUser?.textures;
-    }
 }

front/src/Phaser/Login/CustomizeScene.ts

@@ -15,6 +15,7 @@ import { CustomizedCharacter } from "../Entity/CustomizedCharacter";
 import { get } from "svelte/store";
 import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
+import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -40,27 +41,45 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     preload() {
-        this.loadCustomSceneSelectCharacters()
-            .then((bodyResourceDescriptions) => {
-                bodyResourceDescriptions.forEach((bodyResourceDescription) => {
-                    if (
-                        bodyResourceDescription.level == undefined ||
-                        bodyResourceDescription.level < 0 ||
-                        bodyResourceDescription.level > 5
-                    ) {
-                        throw new Error("Texture level is null");
-                    }
-                    this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
-                });
-                this.lazyloadingAttempt = true;
-            })
-            .catch((e) => console.error(e));
+        const wokaMetadataKey = "woka-list";
+        this.cache.json.remove(wokaMetadataKey);
+        // FIXME: window.location.href is wrong. We need the URL of the main room (so we need to apply any redirect before!)
+        this.load.json(
+            wokaMetadataKey,
+            `${PUSHER_URL}/woka/list?roomUrl=` + encodeURIComponent(window.location.href),
+            undefined,
+            {
+                responseType: "text",
+                headers: {
+                    Authorization: localUserStore.getAuthToken() ?? "",
+                },
+                withCredentials: true,
+            }
+        );
+        this.load.once(`filecomplete-json-${wokaMetadataKey}`, () => {
+            this.playerTextures.loadPlayerTexturesMetadata(this.cache.json.get(wokaMetadataKey));
+            this.loadCustomSceneSelectCharacters()
+                .then((bodyResourceDescriptions) => {
+                    bodyResourceDescriptions.forEach((bodyResourceDescription) => {
+                        if (
+                            bodyResourceDescription.level == undefined ||
+                            bodyResourceDescription.level < 0 ||
+                            bodyResourceDescription.level > 5
+                        ) {
+                            throw new Error("Texture level is null");
+                        }
+                        this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
+                    });
+                    this.lazyloadingAttempt = true;
+                })
+                .catch((e) => console.error(e));
 
-        this.layers = loadAllLayers(this.load);
-        this.lazyloadingAttempt = false;
+            this.layers = loadAllLayers(this.load, this.playerTextures);
+            this.lazyloadingAttempt = false;
 
-        //this function must stay at the end of preload function
-        this.loader.addLoader();
+            //this function must stay at the end of preload function
+            this.loader.addLoader();
+        });
     }
 
     create() {
@@ -192,13 +211,13 @@ export class CustomizeScene extends AbstractCharacterScene {
         const children: Array<string> = new Array<string>();
         for (let j = 0; j <= layerNumber; j++) {
             if (j === layerNumber) {
-                children.push(this.layers[j][selectedItem].name);
+                children.push(this.layers[j][selectedItem].id);
             } else {
                 const layer = this.selectedLayers[j];
                 if (layer === undefined) {
                     continue;
                 }
-                children.push(this.layers[j][layer].name);
+                children.push(this.layers[j][layer].id);
             }
         }
         return children;
@@ -276,7 +295,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         let i = 0;
         for (const layerItem of this.selectedLayers) {
             if (layerItem !== undefined) {
-                layers.push(this.layers[i][layerItem].name);
+                layers.push(this.layers[i][layerItem].id);
             }
             i++;
         }
@@ -287,14 +306,14 @@ export class CustomizeScene extends AbstractCharacterScene {
         analyticsClient.validationWoka("CustomizeWoka");
 
         gameManager.setCharacterLayers(layers);
-        this.scene.sleep(CustomizeSceneName);
+        this.scene.stop(CustomizeSceneName);
         waScaleManager.restoreZoom();
         gameManager.tryResumingGame(EnableCameraSceneName);
         customCharacterSceneVisibleStore.set(false);
     }
 
     public backToPreviousScene() {
-        this.scene.sleep(CustomizeSceneName);
+        this.scene.stop(CustomizeSceneName);
         waScaleManager.restoreZoom();
         this.scene.run(SelectCharacterSceneName);
         customCharacterSceneVisibleStore.set(false);

front/src/Phaser/Login/EntryScene.ts

@@ -7,6 +7,8 @@ import { ReconnectingTextures } from "../Reconnecting/ReconnectingScene";
 import LL from "../../i18n/i18n-svelte";
 import { get } from "svelte/store";
 import { localeDetector } from "../../i18n/locales";
+import { PlayerTextures } from "../Entity/PlayerTextures";
+import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
 
 export const EntrySceneName = "EntryScene";
 
@@ -15,6 +17,8 @@ export const EntrySceneName = "EntryScene";
  * and to route to the next correct scene.
  */
 export class EntryScene extends Scene {
+    private localeLoaded: boolean = false;
+
     constructor() {
         super({
             key: EntrySceneName,
@@ -30,6 +34,10 @@ export class EntryScene extends Scene {
     }
 
     create() {
+        this.loadLocale();
+    }
+
+    private loadLocale(): void {
         localeDetector()
             .then(() => {
                 gameManager

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -5,7 +5,7 @@ import { CustomizeSceneName } from "./CustomizeScene";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
 import { Loader } from "../Components/Loader";
-import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
+import { BodyResourceDescriptionInterface, PlayerTextures } from "../Entity/PlayerTextures";
 import { AbstractCharacterScene } from "./AbstractCharacterScene";
 import { areCharacterLayersValid } from "../../Connexion/LocalUser";
 import { touchScreenManager } from "../../Touch/TouchScreenManager";
@@ -14,6 +14,8 @@ import { selectCharacterSceneVisibleStore } from "../../Stores/SelectCharacterSt
 import { waScaleManager } from "../Services/WaScaleManager";
 import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
+import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
+import { customizeAvailableStore } from "../../Stores/SelectCharacterSceneStore";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -38,25 +40,46 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             key: SelectCharacterSceneName,
         });
         this.loader = new Loader(this);
+        this.playerTextures = new PlayerTextures();
     }
 
     preload() {
-        this.loadSelectSceneCharacters()
-            .then((bodyResourceDescriptions) => {
-                bodyResourceDescriptions.forEach((bodyResourceDescription) => {
-                    this.playerModels.push(bodyResourceDescription);
-                });
-                this.lazyloadingAttempt = true;
-            })
-            .catch((e) => console.error(e));
-        this.playerModels = loadAllDefaultModels(this.load);
-        this.lazyloadingAttempt = false;
+        const wokaMetadataKey = "woka-list";
+        this.cache.json.remove(wokaMetadataKey);
 
-        //this function must stay at the end of preload function
-        this.loader.addLoader();
+        // FIXME: window.location.href is wrong. We need the URL of the main room (so we need to apply any redirect before!)
+        this.load.json(
+            wokaMetadataKey,
+            `${PUSHER_URL}/woka/list?roomUrl=` + encodeURIComponent(window.location.href),
+            undefined,
+            {
+                responseType: "text",
+                headers: {
+                    Authorization: localUserStore.getAuthToken() ?? "",
+                },
+                withCredentials: true,
+            }
+        );
+        this.load.once(`filecomplete-json-${wokaMetadataKey}`, () => {
+            this.playerTextures.loadPlayerTexturesMetadata(this.cache.json.get(wokaMetadataKey));
+            this.loadSelectSceneCharacters()
+                .then((bodyResourceDescriptions) => {
+                    bodyResourceDescriptions.forEach((bodyResourceDescription) => {
+                        this.playerModels.push(bodyResourceDescription);
+                    });
+                    this.lazyloadingAttempt = true;
+                })
+                .catch((e) => console.error(e));
+            this.playerModels = loadAllDefaultModels(this.load, this.playerTextures);
+            this.lazyloadingAttempt = false;
+
+            //this function must stay at the end of preload function
+            this.loader.addLoader();
+        });
     }
 
     create() {
+        customizeAvailableStore.set(this.isCustomizationAvailable());
         selectCharacterSceneVisibleStore.set(true);
         this.events.addListener("wake", () => {
             waScaleManager.saveZoom();
@@ -130,16 +153,16 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             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.id)) {
                 continue;
             }
 
             const [middleX, middleY] = this.getCharacterPosition();
-            const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
+            const player = this.physics.add.sprite(middleX, middleY, playerResource.id, 0);
             this.setUpPlayer(player, i);
             this.anims.create({
-                key: playerResource.name,
-                frames: this.anims.generateFrameNumbers(playerResource.name, { start: 0, end: 11 }),
+                key: playerResource.id,
+                frames: this.anims.generateFrameNumbers(playerResource.id, { start: 0, end: 11 }),
                 frameRate: 8,
                 repeat: -1,
             });
@@ -164,7 +187,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             this.currentSelectUser = 0;
         }
         this.selectedPlayer = this.players[this.currentSelectUser];
-        this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
+        this.selectedPlayer.play(this.playerModels[this.currentSelectUser].id);
     }
 
     protected moveUser() {
@@ -247,9 +270,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     protected updateSelectedPlayer(): void {
-        this.selectedPlayer?.anims.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
+        this.selectedPlayer?.anims?.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
         const player = this.players[this.currentSelectUser];
-        player.play(this.playerModels[this.currentSelectUser].name);
+        player?.play(this.playerModels[this.currentSelectUser].id);
         this.selectedPlayer = player;
         localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
     }
@@ -274,4 +297,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         //move position of user
         this.moveUser();
     }
+
+    private isCustomizationAvailable(): boolean {
+        for (const layer of this.playerTextures.getLayers()) {
+            if (Object.keys(layer).length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
 }

front/src/Stores/ActionsMenuStore.ts

@@ -1,8 +1,15 @@
 import { writable } from "svelte/store";
 
+export type ActionsMenuAction = {
+    actionName: string;
+    callback: Function;
+    protected?: boolean;
+    priority?: number;
+    style?: "is-success" | "is-error" | "is-primary";
+};
 export interface ActionsMenuData {
     playerName: string;
-    actions: { actionName: string; callback: Function }[];
+    actions: Map<string, ActionsMenuAction>;
 }
 
 function createActionsMenuStore() {
@@ -13,21 +20,18 @@ function createActionsMenuStore() {
         initialize: (playerName: string) => {
             set({
                 playerName,
-                actions: [],
+                actions: new Map<string, ActionsMenuAction>(),
             });
         },
-        addAction: (actionName: string, callback: Function) => {
+        addAction: (action: ActionsMenuAction) => {
             update((data) => {
-                data?.actions.push({ actionName, callback });
+                data?.actions.set(action.actionName, action);
                 return data;
             });
         },
         removeAction: (actionName: string) => {
             update((data) => {
-                const actionIndex = data?.actions.findIndex((action) => action.actionName === actionName);
-                if (actionIndex !== undefined && actionIndex != -1) {
-                    data?.actions.splice(actionIndex, 1);
-                }
+                data?.actions.delete(actionName);
                 return data;
             });
         },

front/src/Stores/MediaStore.ts

@@ -10,6 +10,8 @@ import { myCameraVisibilityStore } from "./MyCameraStoreVisibility";
 import { peerStore } from "./PeerStore";
 import { privacyShutdownStore } from "./PrivacyShutdownStore";
 import { MediaStreamConstraintsError } from "./Errors/MediaStreamConstraintsError";
+import { SoundMeter } from "../Phaser/Components/SoundMeter";
+import { AudioContext } from "standardized-audio-context";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -541,6 +543,41 @@ export const obtainedMediaConstraintStore = derived<Readable<MediaStreamConstrai
     }
 );
 
+export const localVolumeStore = readable<number | undefined>(undefined, (set) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    const unsubscribe = localStreamStore.subscribe((localStreamStoreValue) => {
+        clearInterval(timeout);
+        if (localStreamStoreValue.type === "error") {
+            set(undefined);
+            return;
+        }
+        const mediaStream = localStreamStoreValue.stream;
+
+        if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) {
+            set(undefined);
+            return;
+        }
+        const soundMeter = new SoundMeter(mediaStream);
+        let error = false;
+
+        timeout = setInterval(() => {
+            try {
+                set(soundMeter.getVolume());
+            } catch (err) {
+                if (!error) {
+                    console.error(err);
+                    error = true;
+                }
+            }
+        }, 100);
+    });
+
+    return () => {
+        unsubscribe();
+        clearInterval(timeout);
+    };
+});
+
 /**
  * Device list
  */

front/src/Stores/SelectCharacterSceneStore.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const customizeAvailableStore = writable(false);

front/src/Stores/Utils/MapStore.ts

@@ -89,7 +89,7 @@ export class MapStore<K, V> extends Map<K, V> implements Readable<Map<K, V>> {
             }
         }
 
-        return readable(initStoreValue, (set) => {
+        return readable<T | undefined>(initStoreValue, (set) => {
             const storeByKey = this.getStore(key);
 
             let unsubscribeDeepStore: Unsubscriber | undefined;

front/src/Url/UrlManager.ts

@@ -58,6 +58,10 @@ class UrlManager {
         return this.getHashParameters()[name];
     }
 
+    public clearHashParameter(): void {
+        window.location.hash = "";
+    }
+
     private getHashParameters(): Record<string, string> {
         return window.location.hash
             .substring(1)

front/src/Utils/PathfindingManager.ts

@@ -13,6 +13,8 @@ export class PathfindingManager {
 
         this.easyStar = new EasyStar.js();
         this.easyStar.enableDiagonals();
+        this.easyStar.disableCornerCutting();
+        this.easyStar.setTileCost(2, 100);
 
         this.grid = collisionsGrid;
         this.tileDimensions = tileDimensions;
@@ -112,7 +114,7 @@ export class PathfindingManager {
 
     private setEasyStarGrid(grid: number[][]): void {
         this.easyStar.setGrid(grid);
-        this.easyStar.setAcceptableTiles([0]); // zeroes are walkable
+        this.easyStar.setAcceptableTiles([0, 2]); // zeroes are walkable, 2 are exits, also walkable
     }
 
     private logGridToTheConsole(grid: number[][]): void {

front/src/WebRtc/ScreenSharingPeer.ts

@@ -1,4 +1,3 @@
-import type * as SimplePeerNamespace from "simple-peer";
 import type { RoomConnection } from "../Connexion/RoomConnection";
 import { MESSAGE_TYPE_CONSTRAINT, PeerStatus } from "./VideoPeer";
 import type { UserSimplePeerInterface } from "./SimplePeer";
@@ -6,8 +5,8 @@ import { Readable, readable, writable, Writable } from "svelte/store";
 import { getIceServersConfig } from "../Components/Video/utils";
 import { highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
 import { isMediaBreakpointUp } from "../Utils/BreakpointsUtils";
-
-const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
+import Peer from "simple-peer/simplepeer.min.js";
+import { Buffer } from "buffer";
 
 /**
  * A peer connection used to transmit video / audio signals between 2 peers.

front/src/WebRtc/VideoPeer.ts

@@ -1,4 +1,3 @@
-import type * as SimplePeerNamespace from "simple-peer";
 import { mediaManager } from "./MediaManager";
 import type { RoomConnection } from "../Connexion/RoomConnection";
 import { blackListManager } from "./BlackListManager";
@@ -10,8 +9,11 @@ import { playersStore } from "../Stores/PlayersStore";
 import { chatMessagesStore, newChatMessageSubject } from "../Stores/ChatStore";
 import { getIceServersConfig } from "../Components/Video/utils";
 import { isMediaBreakpointUp } from "../Utils/BreakpointsUtils";
-
-const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
+import { SoundMeter } from "../Phaser/Components/SoundMeter";
+import { AudioContext } from "standardized-audio-context";
+import { Console } from "console";
+import Peer from "simple-peer/simplepeer.min.js";
+import { Buffer } from "buffer";
 
 export type PeerStatus = "connecting" | "connected" | "error" | "closed";
 
@@ -33,6 +35,7 @@ export class VideoPeer extends Peer {
     private onBlockSubscribe: Subscription;
     private onUnBlockSubscribe: Subscription;
     public readonly streamStore: Readable<MediaStream | null>;
+    public readonly volumeStore: Readable<number | undefined>;
     public readonly statusStore: Readable<PeerStatus>;
     public readonly constraintsStore: Readable<ObtainedMediaStreamConstraints | null>;
     private newMessageSubscribtion: Subscription | undefined;
@@ -69,6 +72,34 @@ export class VideoPeer extends Peer {
             };
         });
 
+        this.volumeStore = readable<number | undefined>(undefined, (set) => {
+            let timeout: ReturnType<typeof setTimeout>;
+            const unsubscribe = this.streamStore.subscribe((mediaStream) => {
+                if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) {
+                    set(undefined);
+                    return;
+                }
+                const soundMeter = new SoundMeter(mediaStream);
+                let error = false;
+
+                timeout = setInterval(() => {
+                    try {
+                        set(soundMeter.getVolume());
+                    } catch (err) {
+                        if (!error) {
+                            console.error(err);
+                            error = true;
+                        }
+                    }
+                }, 100);
+            });
+
+            return () => {
+                unsubscribe();
+                clearInterval(timeout);
+            };
+        });
+
         this.constraintsStore = readable<ObtainedMediaStreamConstraints | null>(null, (set) => {
             const onData = (chunk: Buffer) => {
                 const message = JSON.parse(chunk.toString("utf8"));

front/src/iframe_api.ts

@@ -21,6 +21,7 @@ import type { Popup } from "./Api/iframe/Ui/Popup";
 import type { Sound } from "./Api/iframe/Sound/Sound";
 import { answerPromises, queryWorkadventure } from "./Api/iframe/IframeApiContribution";
 import camera from "./Api/iframe/camera";
+import {} from "./window";
 
 const globalState = createState("global");
 
@@ -182,13 +183,6 @@ const wa = {
 
 export type WorkAdventureApi = typeof wa;
 
-declare global {
-    interface Window {
-        WA: WorkAdventureApi;
-    }
-    let WA: WorkAdventureApi;
-}
-
 window.WA = wa;
 
 window.addEventListener(

front/src/index.ts

@@ -16,6 +16,7 @@ import { coWebsiteManager } from "./WebRtc/CoWebsiteManager";
 import { localUserStore } from "./Connexion/LocalUserStore";
 import { ErrorScene } from "./Phaser/Reconnecting/ErrorScene";
 import { iframeListener } from "./Api/IframeListener";
+import { desktopApi } from "./Api/desktop/index";
 import { SelectCharacterMobileScene } from "./Phaser/Login/SelectCharacterMobileScene";
 import { HdpiManager } from "./Phaser/Services/HdpiManager";
 import { waScaleManager } from "./Phaser/Services/WaScaleManager";
@@ -154,6 +155,7 @@ coWebsiteManager.onResize.subscribe(() => {
 });
 
 iframeListener.init();
+desktopApi.init();
 
 const app = new App({
     target: HtmlUtils.getElementByIdOrFail("game-overlay"),

front/src/simple-peer.d.ts

@@ -0,0 +1,4 @@
+declare module "simple-peer/simplepeer.min.js" {
+    import SimplePeer from "simple-peer";
+    export default SimplePeer;
+}

front/src/window.d.ts

@@ -0,0 +1,10 @@
+import { WorkAdventureApi } from "./iframe_api";
+import { WorkAdventureDesktopApi } from "@wa-preload-app";
+
+declare global {
+    interface Window {
+        WA: WorkAdventureApi;
+        WAD: WorkAdventureDesktopApi;
+    }
+    let WA: WorkAdventureApi;
+}