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

front/src/Api/Events/IframeEvent.ts

@@ -5,11 +5,12 @@ import type { ChatEvent } from './ChatEvent';
 import type { ClosePopupEvent } from './ClosePopupEvent';
 import type { EnterLeaveEvent } from './EnterLeaveEvent';
 import type { GoToPageEvent } from './GoToPageEvent';
+import type { LoadPageEvent } from './LoadPageEvent';
 import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
 import type { OpenPopupEvent } from './OpenPopupEvent';
 import type { OpenTabEvent } from './OpenTabEvent';
 import type { UserInputChatEvent } from './UserInputChatEvent';
-import type {LoadSoundEvent} from "./LoadSoundEvent";
+import type { LoadSoundEvent} from "./LoadSoundEvent";
 import type {PlaySoundEvent} from "./PlaySoundEvent";
 
 
@@ -20,6 +21,7 @@ export interface TypedMessageEvent<T> extends MessageEvent {
 export type IframeEventMap = {
     //getState: GameStateEvent,
     // updateTile: UpdateTileEvent
+    loadPage: LoadPageEvent
     chat: ChatEvent,
     openPopup: OpenPopupEvent
     closePopup: ClosePopupEvent
@@ -33,7 +35,7 @@ export type IframeEventMap = {
     removeBubble: null
     loadSound: LoadSoundEvent
     playSound: PlaySoundEvent
-    stopSound: null
+    stopSound: null,
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

front/src/Api/Events/LoadPageEvent.ts

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

front/src/Api/IframeListener.ts

@@ -12,6 +12,7 @@ import { GoToPageEvent, isGoToPageEvent } from "./Events/GoToPageEvent";
 import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
 import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper, TypedMessageEvent } from "./Events/IframeEvent";
 import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
+import { isLoadPageEvent } from './Events/LoadPageEvent';
 import {isPlaySoundEvent, PlaySoundEvent} from "./Events/PlaySoundEvent";
 import {isStopSoundEvent, StopSoundEvent} from "./Events/StopSoundEvent";
 import {isLoadSoundEvent, LoadSoundEvent} from "./Events/LoadSoundEvent";
@@ -32,6 +33,10 @@ class IframeListener {
     private readonly _goToPageStream: Subject<GoToPageEvent> = new Subject();
     public readonly goToPageStream = this._goToPageStream.asObservable();
 
+    
+    private readonly _loadPageStream: Subject<string> = new Subject();
+    public readonly loadPageStream = this._loadPageStream.asObservable();
+
     private readonly _openCoWebSiteStream: Subject<OpenCoWebSiteEvent> = new Subject();
     public readonly openCoWebSiteStream = this._openCoWebSiteStream.asObservable();
 
@@ -132,6 +137,8 @@ class IframeListener {
                 }
                 else if (payload.type === 'removeBubble') {
                     this._removeBubbleStream.next();
+                }else if (payload.type === 'loadPage' && isLoadPageEvent(payload.data)){
+                    this._loadPageStream.next(payload.data.url);
                 }
             }
 

front/src/Api/iframe/IframeApiContribution.ts

@@ -0,0 +1,31 @@
+import type * as tg from "generic-type-guard";
+import type { IframeEvent, IframeEventMap, IframeResponseEventMap } from '../Events/IframeEvent';
+
+export function sendToWorkadventure(content: IframeEvent<keyof IframeEventMap>) {
+    window.parent.postMessage(content, "*")
+}
+type GuardedType<Guard extends tg.TypeGuard<unknown>> = Guard extends tg.TypeGuard<infer T> ? T : never
+
+export interface IframeCallback<Key extends keyof IframeResponseEventMap, T = IframeResponseEventMap[Key], Guard = tg.TypeGuard<T>> {
+
+    typeChecker: Guard,
+    callback: (payloadData: T) => void
+}
+
+export interface IframeCallbackContribution<Key extends keyof IframeResponseEventMap> extends IframeCallback<Key> {
+
+    type: Key
+}
+
+/**
+ * !! be aware that the implemented attributes (addMethodsAtRoot and subObjectIdentifier) must be readonly
+ *
+ *
+ */
+
+export abstract class IframeApiContribution<T extends {
+    callbacks: Array<IframeCallbackContribution<keyof IframeResponseEventMap>>,
+}> {
+
+    abstract callbacks: T["callbacks"]
+}

front/src/Api/iframe/Sound/Sound.ts

@@ -0,0 +1,39 @@
+import {sendToWorkadventure} from "../IframeApiContribution";
+import type {LoadSoundEvent} from "../../Events/LoadSoundEvent";
+import type {PlaySoundEvent} from "../../Events/PlaySoundEvent";
+import type {StopSoundEvent} from "../../Events/StopSoundEvent";
+import SoundConfig = Phaser.Types.Sound.SoundConfig;
+
+export class Sound {
+    constructor(private url: string) {
+        sendToWorkadventure({
+            "type": 'loadSound',
+            "data": {
+                url: this.url,
+            } as LoadSoundEvent
+
+        });
+    }
+
+    public play(config: SoundConfig) {
+        sendToWorkadventure({
+            "type": 'playSound',
+            "data": {
+                url: this.url,
+                config
+            } as PlaySoundEvent
+
+        });
+        return this.url;
+    }
+    public stop() {
+        sendToWorkadventure({
+            "type": 'stopSound',
+            "data": {
+                url: this.url,
+            } as StopSoundEvent
+
+        });
+        return this.url;
+    }
+}

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

@@ -0,0 +1,18 @@
+import type {Popup} from "./Popup";
+
+export type ButtonClickedCallback = (popup: Popup) => void;
+
+export interface ButtonDescriptor {
+    /**
+     * The label of the button
+     */
+    label: string,
+    /**
+     * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled"
+     */
+    className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled",
+    /**
+     * Callback called if the button is pressed
+     */
+    callback: ButtonClickedCallback,
+}

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

@@ -0,0 +1,19 @@
+import {sendToWorkadventure} from "../IframeApiContribution";
+import type {ClosePopupEvent} from "../../Events/ClosePopupEvent";
+
+export class Popup {
+    constructor(private id: number) {
+    }
+
+    /**
+     * Closes the popup
+     */
+    public close(): void {
+        sendToWorkadventure({
+            'type': 'closePopup',
+            'data': {
+                'popupId': this.id,
+            } as ClosePopupEvent
+        });
+    }
+}

front/src/Api/iframe/chat.ts

@@ -0,0 +1,38 @@
+import type { ChatEvent } from '../Events/ChatEvent'
+import { isUserInputChatEvent, UserInputChatEvent } from '../Events/UserInputChatEvent'
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution'
+import { apiCallback } from "./registeredCallbacks";
+import {Subject} from "rxjs";
+
+const chatStream = new Subject<string>();
+
+class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatCommands> {
+
+    callbacks = [apiCallback({
+        callback: (event: UserInputChatEvent) => {
+            chatStream.next(event.message);
+        },
+        type: "userInputChat",
+        typeChecker: isUserInputChatEvent
+    })]
+
+
+    sendChatMessage(message: string, author: string) {
+        sendToWorkadventure({
+            type: 'chat',
+            data: {
+                'message': message,
+                'author': author
+            } as ChatEvent
+        })
+    }
+
+    /**
+     * Listen to messages sent by the local user, in the chat.
+     */
+    onChatMessage(callback: (message: string) => void) {
+        chatStream.subscribe(callback);
+    }
+}
+
+export default new WorkadventureChatCommands()

front/src/Api/iframe/controls.ts

@@ -0,0 +1,16 @@
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+
+class WorkadventureControlsCommands extends IframeApiContribution<WorkadventureControlsCommands> {
+    callbacks = []
+
+    disablePlayerControls(): void {
+        sendToWorkadventure({ 'type': 'disablePlayerControls', data: null });
+    }
+
+    restorePlayerControls(): void {
+        sendToWorkadventure({ 'type': 'restorePlayerControls', data: null });
+    }
+}
+
+
+export default new WorkadventureControlsCommands();

front/src/Api/iframe/nav.ts

@@ -0,0 +1,56 @@
+import type { GoToPageEvent } from '../Events/GoToPageEvent';
+import type { OpenTabEvent } from '../Events/OpenTabEvent';
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import type {OpenCoWebSiteEvent} from "../Events/OpenCoWebSiteEvent";
+
+
+class WorkadventureNavigationCommands extends IframeApiContribution<WorkadventureNavigationCommands> {
+    callbacks = []
+
+
+    openTab(url: string): void {
+        sendToWorkadventure({
+            "type": 'openTab',
+            "data": {
+                url
+            } as OpenTabEvent
+        });
+    }
+
+    goToPage(url: string): void {
+        sendToWorkadventure({
+            "type": 'goToPage',
+            "data": {
+                url
+            } as GoToPageEvent
+        });
+    }
+
+    goToRoom(url: string): void {
+        sendToWorkadventure({
+            "type": 'loadPage',
+            "data": {
+                url
+            }
+        });
+    }
+
+    openCoWebSite(url: string): void {
+        sendToWorkadventure({
+            "type": 'openCoWebSite',
+            "data": {
+                url
+            } as OpenCoWebSiteEvent
+        });
+    }
+
+    closeCoWebSite(): void {
+        sendToWorkadventure({
+            "type": 'closeCoWebSite',
+            data: null
+        });
+    }
+}
+
+
+export default new WorkadventureNavigationCommands();

front/src/Api/iframe/registeredCallbacks.ts

@@ -0,0 +1,16 @@
+import type {IframeResponseEventMap} from "../../Api/Events/IframeEvent";
+import type {IframeCallback} from "../../Api/iframe/IframeApiContribution";
+import type {IframeCallbackContribution} from "../../Api/iframe/IframeApiContribution";
+
+export const registeredCallbacks: { [K in keyof IframeResponseEventMap]?: IframeCallback<K> } = {}
+
+export function apiCallback<T extends keyof IframeResponseEventMap>(callbackData: IframeCallbackContribution<T>): IframeCallbackContribution<keyof IframeResponseEventMap> {
+    const iframeCallback = {
+        typeChecker: callbackData.typeChecker,
+        callback: callbackData.callback
+    } as IframeCallback<T>;
+
+    const newCallback = { [callbackData.type]: iframeCallback };
+    Object.assign(registeredCallbacks, newCallback)
+    return callbackData as unknown as IframeCallbackContribution<keyof IframeResponseEventMap>;
+}

front/src/Api/iframe/room.ts

@@ -0,0 +1,50 @@
+import { Subject } from "rxjs";
+import { EnterLeaveEvent, isEnterLeaveEvent } from '../Events/EnterLeaveEvent';
+import { IframeApiContribution } from './IframeApiContribution';
+import { apiCallback } from "./registeredCallbacks";
+
+const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+
+class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomCommands> {
+    callbacks = [
+        apiCallback({
+            callback: (payloadData: EnterLeaveEvent) => {
+                enterStreams.get(payloadData.name)?.next();
+            },
+            type: "enterEvent",
+            typeChecker: isEnterLeaveEvent
+        }),
+        apiCallback({
+            type: "leaveEvent",
+            typeChecker: isEnterLeaveEvent,
+            callback: (payloadData) => {
+                leaveStreams.get(payloadData.name)?.next();
+            }
+        })
+
+    ]
+
+
+    onEnterZone(name: string, callback: () => void): void {
+        let subject = enterStreams.get(name);
+        if (subject === undefined) {
+            subject = new Subject<EnterLeaveEvent>();
+            enterStreams.set(name, subject);
+        }
+        subject.subscribe(callback);
+
+    }
+    onLeaveZone(name: string, callback: () => void): void {
+        let subject = leaveStreams.get(name);
+        if (subject === undefined) {
+            subject = new Subject<EnterLeaveEvent>();
+            leaveStreams.set(name, subject);
+        }
+        subject.subscribe(callback);
+    }
+
+}
+
+
+export default new WorkadventureRoomCommands();

front/src/Api/iframe/sound.ts

@@ -0,0 +1,17 @@
+import type { LoadSoundEvent } from '../Events/LoadSoundEvent';
+import type { PlaySoundEvent } from '../Events/PlaySoundEvent';
+import type { StopSoundEvent } from '../Events/StopSoundEvent';
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import {Sound} from "./Sound/Sound";
+
+class WorkadventureSoundCommands extends IframeApiContribution<WorkadventureSoundCommands> {
+    callbacks = []
+
+    loadSound(url: string): Sound {
+        return new Sound(url);
+    }
+
+}
+
+
+export default new WorkadventureSoundCommands();

front/src/Api/iframe/ui.ts

@@ -0,0 +1,83 @@
+import { isButtonClickedEvent } from '../Events/ButtonClickedEvent';
+import type { ClosePopupEvent } from '../Events/ClosePopupEvent';
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import { apiCallback } from "./registeredCallbacks";
+import {Popup} from "./Ui/Popup";
+import type {ButtonClickedCallback, ButtonDescriptor} from "./Ui/ButtonDescriptor";
+
+let popupId = 0;
+const popups: Map<number, Popup> = new Map<number, Popup>();
+const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<number, Map<number, ButtonClickedCallback>>();
+
+interface ZonedPopupOptions {
+    zone: string
+    objectLayerName?: string,
+    popupText: string,
+    delay?: number
+    popupOptions: Array<ButtonDescriptor>
+}
+
+
+class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiCommands> {
+
+    callbacks = [apiCallback({
+        type: "buttonClickedEvent",
+        typeChecker: isButtonClickedEvent,
+        callback: (payloadData) => {
+            const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
+            const popup = popups.get(payloadData.popupId);
+            if (popup === undefined) {
+                throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
+            }
+            if (callback) {
+                callback(popup);
+            }
+        }
+    })];
+
+
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
+        popupId++;
+        const popup = new Popup(popupId);
+        const btnMap = new Map<number, () => void>();
+        popupCallbacks.set(popupId, btnMap);
+        let id = 0;
+        for (const button of buttons) {
+            const callback = button.callback;
+            if (callback) {
+                btnMap.set(id, () => {
+                    callback(popup);
+                });
+            }
+            id++;
+        }
+
+        sendToWorkadventure({
+            'type': 'openPopup',
+            'data': {
+                popupId,
+                targetObject,
+                message,
+                buttons: buttons.map((button) => {
+                    return {
+                        label: button.label,
+                        className: button.className
+                    };
+                })
+            }
+        });
+
+        popups.set(popupId, popup)
+        return popup;
+    }
+
+    displayBubble(): void {
+        sendToWorkadventure({ 'type': 'displayBubble', data: null });
+    }
+
+    removeBubble(): void {
+        sendToWorkadventure({ 'type': 'removeBubble', data: null });
+    }
+}
+
+export default new WorkAdventureUiCommands();

front/src/Components/App.svelte

@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import MenuIcon from "./Menu/MenuIcon.svelte";
-    import {menuIconVisible} from "../Stores/MenuStore";
     import {enableCameraSceneVisibilityStore, gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -17,7 +15,7 @@
     import VisitCard from "./VisitCard/VisitCard.svelte";
     import {requestVisitCardsStore} from "../Stores/GameStore";
 
-    import {Game} from "../Phaser/Game/Game";
+    import type {Game} from "../Phaser/Game/Game";
     import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import AudioPlaying from "./UI/AudioPlaying.svelte";
@@ -81,7 +79,7 @@
     {/if}
     {#if $helpCameraSettingsVisibleStore}
         <div>
-            <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+            <HelpCameraSettingsPopup></HelpCameraSettingsPopup>
         </div>
     {/if}
     {#if $requestVisitCardsStore}

front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte

@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import { Game } from "../../Phaser/Game/Game";
-    import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
+    import type { Game } from "../../Phaser/Game/Game";
+    import {CustomizeScene, CustomizeSceneName} from "../../Phaser/Login/CustomizeScene";
 
     export let game: Game;
 
-    const customCharacterScene = game.scene.getScene(CustomizeSceneName);
+    const customCharacterScene = game.scene.getScene(CustomizeSceneName) as CustomizeScene;
     let activeRow = customCharacterScene.activeRow;
 
     function selectLeft() {
@@ -116,4 +116,4 @@
   }
 
 
-</style>
+</style>

front/src/Components/EnableCamera/EnableCameraScene.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
+    import type {Game} from "../../Phaser/Game/Game";
     import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
     import {
         audioConstraintStore,
@@ -15,8 +15,8 @@
     import microphoneImg from "../images/microphone.svg";
 
     export let game: Game;
-    let selectedCamera : string|null = null;
-    let selectedMicrophone : string|null = null;
+    let selectedCamera : string|undefined = undefined;
+    let selectedMicrophone : string|undefined = undefined;
 
     const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
 
@@ -24,10 +24,10 @@
         enableCameraScene.login();
     }
 
-    function srcObject(node, stream) {
+    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         node.srcObject = stream;
         return {
-            update(newStream) {
+            update(newStream: MediaStream) {
                 if (node.srcObject != newStream) {
                     node.srcObject = newStream
                 }
@@ -53,8 +53,8 @@
             }
         } else {
             stream = null;
-            selectedCamera = null;
-            selectedMicrophone = null;
+            selectedCamera = undefined;
+            selectedMicrophone = undefined;
         }
     });
 
@@ -79,7 +79,7 @@
     <section class="text-center">
         <h2>Turn on your camera and microphone</h2>
     </section>
-        {#if $localStreamStore.stream}
+        {#if $localStreamStore.type === 'success' && $localStreamStore.stream}
             <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
         {:else }
             <div class="webrtcsetup">

front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte

@@ -8,7 +8,7 @@
 
     const NB_BARS = 20;
 
-    let timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     const soundMeter = new SoundMeter();
     let display = false;
 

front/src/Components/Login/LoginScene.svelte

@@ -1,14 +1,13 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
-    import {LoginSceneName} from "../../Phaser/Login/LoginScene";
+    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";
     import logoImg from "../images/logo.png";
     import {gameManager} from "../../Phaser/Game/GameManager";
-    import {maxUserNameLength} from "../../Connexion/LocalUser";
 
     export let game: Game;
 
-    const loginScene = game.scene.getScene(LoginSceneName);
+    const loginScene = game.scene.getScene(LoginSceneName) as LoginScene;
 
     let name = gameManager.getPlayerName() || '';
     let startValidating = false;

front/src/Components/MyCamera.svelte

@@ -3,10 +3,10 @@
     import SoundMeterWidget from "./SoundMeterWidget.svelte";
     import {onDestroy} from "svelte";
 
-    function srcObject(node, stream) {
+    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         node.srcObject = stream;
         return {
-            update(newStream) {
+            update(newStream: MediaStream) {
                 if (node.srcObject != newStream) {
                     node.srcObject = newStream
                 }
@@ -38,9 +38,9 @@
 
 <div>
     <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
+        {#if $localStreamStore.type === "success" && $localStreamStore.stream }
         <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
-        <!-- {#if stream}
         <SoundMeterWidget stream={stream}></SoundMeterWidget>
-        {/if} -->
+        {/if}
     </div>
 </div>

front/src/Components/SelectCompanion/SelectCompanionScene.svelte

@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
-    import {SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
+    import type {Game} from "../../Phaser/Game/Game";
+    import {SelectCompanionScene, SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
 
     export let game: Game;
 
-    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName);
+    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName) as SelectCompanionScene;
 
     function selectLeft() {
         selectCompanionScene.moveToLeft();

front/src/Components/SoundMeterWidget.svelte

@@ -8,7 +8,7 @@
 
     const NB_BARS = 5;
 
-    let timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     const soundMeter = new SoundMeter();
     let display = false;
 

front/src/Components/UI/AudioPlaying.svelte

@@ -2,7 +2,7 @@
     import { fly } from 'svelte/transition';
     import megaphoneImg from "./images/megaphone.svg";
     import {soundPlayingStore} from "../../Stores/SoundPlayingStore";
-    import {afterUpdate, onMount} from "svelte";
+    import {afterUpdate} from "svelte";
 
     export let url: string;
     let audio: HTMLAudioElement;

front/src/Components/VisitCard/VisitCard.svelte

@@ -7,7 +7,7 @@
     let w = '500px';
     let h = '250px';
     let hidden = true;
-    let cvIframe;
+    let cvIframe: HTMLIFrameElement;
 
     function closeCard() {
         requestVisitCardsStore.set(null);

front/src/Components/selectCharacter/SelectCharacterScene.svelte

@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import { Game } from "../../Phaser/Game/Game";
-    import { SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
+    import type { Game } from "../../Phaser/Game/Game";
+    import {SelectCharacterScene, SelectCharacterSceneName} from "../../Phaser/Login/SelectCharacterScene";
 
     export let game: Game;
 
-    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName);
+    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName) as SelectCharacterScene;
 
     function selectLeft() {
         selectCharacterScene.moveToLeft();
@@ -89,4 +89,4 @@
   }
 
 
-</style>
+</style>

front/src/Connexion/LocalUser.ts

@@ -10,7 +10,7 @@ export interface CharacterTexture {
 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
 
 export function isUserNameValid(value: unknown): boolean {
-    return typeof value === "string" && value.length > 0 && value.length <= maxUserNameLength && value.indexOf(' ') === -1;
+    return typeof value === "string" && value.length > 0 && value.length <= maxUserNameLength && /\S/.test(value);
 }
 
 export function areCharacterLayersValid(value: string[] | null): boolean {

front/src/Phaser/Game/GameScene.ts

@@ -79,6 +79,7 @@ import CanvasTexture = Phaser.Textures.CanvasTexture;
 import GameObject = Phaser.GameObjects.GameObject;
 import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import DOMElement = Phaser.GameObjects.DOMElement;
+import EVENT_TYPE =Phaser.Scenes.Events
 import type {Subscription} from "rxjs";
 import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
@@ -917,7 +918,13 @@ ${escapedMessage}
        this.iframeSubscriptionList.push(iframeListener.enablePlayerControlStream.subscribe(()=>{
             this.userInputManager.restoreControls();
         }));
-
+        this.iframeSubscriptionList.push(iframeListener.loadPageStream.subscribe((url:string)=>{
+            this.loadNextGame(url).then(()=>{
+                this.events.once(EVENT_TYPE.POST_UPDATE,()=>{
+                    this.onMapExit(url);
+                })
+            })
+        }));
         let scriptedBubbleSprite : Sprite;
        this.iframeSubscriptionList.push(iframeListener.displayBubbleStream.subscribe(()=>{
             scriptedBubbleSprite = new Sprite(this,this.CurrentPlayer.x + 25,this.CurrentPlayer.y,'circleSprite-white');
@@ -1092,10 +1099,10 @@ ${escapedMessage}
     }
 
     //todo: push that into the gameManager
-    private loadNextGame(exitSceneIdentifier: string): void {
+    private loadNextGame(exitSceneIdentifier: string): Promise<void> {
         const {roomId, hash} = Room.getIdFromIdentifier(exitSceneIdentifier, this.MapUrlFile, this.instance);
         const room = new Room(roomId);
-        gameManager.loadMap(room, this.scene).catch(() => {});
+        return gameManager.loadMap(room, this.scene).catch(() => {});
     }
 
     private startUser(layer: ITiledMapTileLayer): PositionInterface {

front/src/Phaser/Login/CustomizeScene.ts

@@ -2,26 +2,20 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
 import Sprite = Phaser.GameObjects.Sprite;
-import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
 import {localUserStore} from "../../Connexion/LocalUserStore";
 import {addLoader} from "../Components/Loader";
 import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
-import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
 import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
-import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
 import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
 
 export const CustomizeSceneName = "CustomizeScene";
 
-export const CustomizeSceneKey = "CustomizeScene";
-const customizeSceneKey = 'customizeScene';
-
 export class CustomizeScene extends AbstractCharacterScene {
     private Rectangle!: Rectangle;
 
@@ -42,7 +36,6 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     preload() {
-        this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
 
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
@@ -111,7 +104,15 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    public doMoveCursorHorizontally(index: number): void {
+    public moveCursorHorizontally(index: number): void {
+        this.moveHorizontally = index;
+    }
+
+    public moveCursorVertically(index: number): void {
+        this.moveVertically = index;
+    }
+
+    private doMoveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -123,7 +124,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    public doMoveCursorVertically(index:number): void {
+    private doMoveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {
@@ -262,7 +263,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
      }
 
-    private nextSceneToCamera(){
+    public nextSceneToCamera(){
         const layers: string[] = [];
             let i = 0;
             for (const layerItem of this.selectedLayers) {
@@ -283,7 +284,7 @@ export class CustomizeScene extends AbstractCharacterScene {
             customCharacterSceneVisibleStore.set(false);
     }
 
-    private backToPreviousScene(){
+    public backToPreviousScene(){
         this.scene.sleep(CustomizeSceneName);
         waScaleManager.restoreZoom();
         this.scene.run(SelectCharacterSceneName);

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -10,17 +10,13 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
-import {MenuScene} from "../Menu/MenuScene";
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
-import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
 
-const selectCharacterKey = 'selectCharacterScene';
-
 export class SelectCharacterScene extends AbstractCharacterScene {
     protected readonly nbCharactersPerRow = 6;
     protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
@@ -29,7 +25,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     protected selectedRectangle!: Rectangle;
 
-    protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
     protected currentSelectUser = 0;
     protected pointerClicked: boolean = false;
     protected pointerTimer: number = 0;
@@ -43,7 +38,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     preload() {
-        this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
 
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
@@ -98,7 +92,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         });
     }
 
-    protected nextSceneToCameraScene(): void {
+    public nextSceneToCameraScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -114,7 +108,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.events.removeListener('wake');
     }
 
-    protected nextSceneToCustomizeScene(): void {
+    public nextSceneToCustomizeScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -124,7 +118,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         selectCharacterSceneVisibleStore.set(false);
     }
 
-    createCurrentPlayer(): void {        
+    createCurrentPlayer(): void {
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
@@ -171,7 +165,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.updateSelectedPlayer();
     }
 
-    protected moveToLeft(){
+    public moveToLeft(){
         if(this.currentSelectUser === 0){
             return;
         }
@@ -179,7 +173,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    protected moveToRight(){
+    public moveToRight(){
         if(this.currentSelectUser === (this.players.length - 1)){
             return;
         }

front/src/WebRtc/CoWebsiteManager.ts

@@ -1,6 +1,7 @@
 import {HtmlUtils} from "./HtmlUtils";
 import {Subject} from "rxjs";
 import {iframeListener} from "../Api/IframeListener";
+import {touchScreenManager} from "../Touch/TouchScreenManager";
 
 enum iframeStates {
     closed = 1,
@@ -17,6 +18,11 @@ const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
 const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
 const animationTime = 500; //time used by the css transitions, in ms.
 
+interface TouchMoveCoordinates {
+    x: number;
+    y: number;
+}
+
 class CoWebsiteManager {
 
     private opened: iframeStates = iframeStates.closed;
@@ -32,6 +38,7 @@ class CoWebsiteManager {
     private resizing: boolean = false;
     private cowebsiteMainDom: HTMLDivElement;
     private cowebsiteAsideDom: HTMLDivElement;
+    private previousTouchMoveCoordinates: TouchMoveCoordinates|null = null; //only use on touchscreens to track touch movement
 
     get width(): number {
         return this.cowebsiteDiv.clientWidth;
@@ -62,7 +69,10 @@ class CoWebsiteManager {
         this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
         this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
 
-        this.initResizeListeners();
+        if (touchScreenManager.supportTouchScreen) {
+            this.initResizeListeners(true);
+        }
+        this.initResizeListeners(false);
 
         const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
         buttonCloseFrame.addEventListener('click', () => {
@@ -77,22 +87,43 @@ class CoWebsiteManager {
         });
     }
 
-    private initResizeListeners() {
-        const movecallback = (event:MouseEvent) => {
-            this.verticalMode ? this.height += event.movementY / this.getDevicePixelRatio() : this.width -= event.movementX / this.getDevicePixelRatio();
+    private initResizeListeners(touchMode:boolean) {
+        const movecallback = (event:MouseEvent|TouchEvent) => {
+            let x, y;
+            if (event.type === 'mousemove') {
+                x = (event as MouseEvent).movementX / this.getDevicePixelRatio();
+                y = (event as MouseEvent).movementY / this.getDevicePixelRatio();
+            } else {
+                const touchEvent = (event as TouchEvent).touches[0];
+                const last = {x: touchEvent.pageX, y: touchEvent.pageY};
+                const previous = this.previousTouchMoveCoordinates as TouchMoveCoordinates;
+                this.previousTouchMoveCoordinates = last;
+                x = last.x - previous.x;
+                y = last.y - previous.y;
+            }
+            
+            
+            this.verticalMode ? this.height += y : this.width -= x;
             this.fire();
         }
 
-        this.cowebsiteAsideDom.addEventListener('mousedown', (event) => {
+        this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => {
             this.resizing = true;
             this.getIframeDom().style.display = 'none';
+            if (touchMode) {
+                const touchEvent = (event as TouchEvent).touches[0];
+                this.previousTouchMoveCoordinates = {x: touchEvent.pageX, y: touchEvent.pageY};
+            }
 
-            document.addEventListener('mousemove', movecallback);
+            document.addEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
         });
 
-        document.addEventListener('mouseup', (event) => {
+        document.addEventListener(touchMode ? 'touchend' : 'mouseup', (event) => {
             if (!this.resizing) return;
-            document.removeEventListener('mousemove', movecallback);
+            if (touchMode) {
+                this.previousTouchMoveCoordinates = null;
+            }
+            document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
             this.getIframeDom().style.display = 'block';
             this.resizing = false;
         });

front/src/ambient.d.ts

@@ -0,0 +1,38 @@
+/**
+ * These declarations tell TypeScript that we allow import of images, e.g.
+ * ```
+ <script lang='ts'>
+ import successkid from 'images/successkid.jpg';
+ </script>
+ <img src="{successkid}">
+ ```
+ */
+declare module "*.gif" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.jpg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.jpeg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.png" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.svg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.webp" {
+    const value: string;
+    export = value;
+}

front/src/iframe_api.ts

@@ -1,275 +1,175 @@
-import type { ChatEvent } from "./Api/Events/ChatEvent";
-import { isIframeResponseEventWrapper } from "./Api/Events/IframeEvent";
-import { isUserInputChatEvent, UserInputChatEvent } from "./Api/Events/UserInputChatEvent";
-import { Subject } from "rxjs";
-import { EnterLeaveEvent, isEnterLeaveEvent } from "./Api/Events/EnterLeaveEvent";
-import type { OpenPopupEvent } from "./Api/Events/OpenPopupEvent";
-import { isButtonClickedEvent } from "./Api/Events/ButtonClickedEvent";
-import type { ClosePopupEvent } from "./Api/Events/ClosePopupEvent";
-import type { OpenTabEvent } from "./Api/Events/OpenTabEvent";
-import type { GoToPageEvent } from "./Api/Events/GoToPageEvent";
-import type { OpenCoWebSiteEvent } from "./Api/Events/OpenCoWebSiteEvent";
-import type {PlaySoundEvent} from "./Api/Events/PlaySoundEvent";
-import type  {StopSoundEvent} from "./Api/Events/StopSoundEvent";
-import type {LoadSoundEvent} from "./Api/Events/LoadSoundEvent";
-import SoundConfig = Phaser.Types.Sound.SoundConfig;
+import {registeredCallbacks} from "./Api/iframe/registeredCallbacks";
+import {
+    IframeResponseEvent,
+    IframeResponseEventMap,
+    isIframeResponseEventWrapper,
+    TypedMessageEvent
+} from "./Api/Events/IframeEvent";
+import chat from "./Api/iframe/chat";
+import type {IframeCallback} from './Api/iframe/IframeApiContribution';
+import nav from "./Api/iframe/nav";
+import controls from "./Api/iframe/controls";
+import ui from "./Api/iframe/ui";
+import sound from "./Api/iframe/sound";
+import room from "./Api/iframe/room";
+import type {ButtonDescriptor} from "./Api/iframe/Ui/ButtonDescriptor";
+import type {Popup} from "./Api/iframe/Ui/Popup";
+import type {Sound} from "./Api/iframe/Sound/Sound";
 
-interface WorkAdventureApi {
-    sendChatMessage(message: string, author: string): void;
-    onChatMessage(callback: (message: string) => void): void;
-    onEnterZone(name: string, callback: () => void): void;
-    onLeaveZone(name: string, callback: () => void): void;
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
-    openTab(url : string): void;
-    goToPage(url : string): void;
-    openCoWebSite(url : string): void;
-    closeCoWebSite(): void;
-    disablePlayerControls(): void;
-    restorePlayerControls(): void;
-    displayBubble(): void;
-    removeBubble(): void;
-    loadSound(url : string): Sound;
-}
+const wa = {
+    ui,
+    nav,
+    controls,
+    chat,
+    sound,
+    room,
+
+    // All methods below are deprecated and should not be used anymore.
+    // They are kept here for backward compatibility.
+
+    /**
+     * @deprecated Use WA.chat.sendChatMessage instead
+     */
+    sendChatMessage(message: string, author: string): void {
+        console.warn('Method WA.sendChatMessage is deprecated. Please use WA.chat.sendChatMessage instead');
+        chat.sendChatMessage(message, author);
+    },
+    /**
+     * @deprecated Use WA.chat.disablePlayerControls instead
+     */
+    disablePlayerControls(): void {
+        console.warn('Method WA.disablePlayerControls is deprecated. Please use WA.controls.disablePlayerControls instead');
+        controls.disablePlayerControls();
+    },
+
+    /**
+     * @deprecated Use WA.controls.restorePlayerControls instead
+     */
+    restorePlayerControls(): void {
+        console.warn('Method WA.restorePlayerControls is deprecated. Please use WA.controls.restorePlayerControls instead');
+        controls.restorePlayerControls();
+    },
+
+    /**
+     * @deprecated Use WA.ui.displayBubble instead
+     */
+    displayBubble(): void {
+        console.warn('Method WA.displayBubble is deprecated. Please use WA.ui.displayBubble instead');
+        ui.displayBubble();
+    },
+
+    /**
+     * @deprecated Use WA.ui.removeBubble instead
+     */
+    removeBubble(): void {
+        console.warn('Method WA.removeBubble is deprecated. Please use WA.ui.removeBubble instead');
+        ui.removeBubble();
+    },
+
+    /**
+     * @deprecated Use WA.nav.openTab instead
+     */
+    openTab(url: string): void {
+        console.warn('Method WA.openTab is deprecated. Please use WA.nav.openTab instead');
+        nav.openTab(url);
+    },
+
+    /**
+     * @deprecated Use WA.sound.loadSound instead
+     */
+    loadSound(url: string) : Sound {
+        console.warn('Method WA.loadSound is deprecated. Please use WA.sound.loadSound instead');
+        return sound.loadSound(url);
+    },
+
+    /**
+     * @deprecated Use WA.nav.goToPage instead
+     */
+    goToPage(url : string) : void {
+        console.warn('Method WA.goToPage is deprecated. Please use WA.nav.goToPage instead');
+        nav.goToPage(url);
+    },
+
+    /**
+     * @deprecated Use WA.nav.goToRoom instead
+     */
+    goToRoom(url: string): void {
+        console.warn('Method WA.goToRoom is deprecated. Please use WA.nav.goToRoom instead');
+        nav.goToRoom(url);
+    },
+
+    /**
+     * @deprecated Use WA.nav.openCoWebSite instead
+     */
+    openCoWebSite(url : string) : void{
+        console.warn('Method WA.openCoWebSite is deprecated. Please use WA.nav.openCoWebSite instead');
+        nav.openCoWebSite(url);
+    },
+
+    /**
+     * @deprecated Use WA.nav.closeCoWebSite instead
+     */
+    closeCoWebSite(): void {
+        console.warn('Method WA.closeCoWebSite is deprecated. Please use WA.nav.closeCoWebSite instead');
+        nav.closeCoWebSite();
+    },
+
+    /**
+     * @deprecated Use WA.controls.restorePlayerControls instead
+     */
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
+        console.warn('Method WA.openPopup is deprecated. Please use WA.ui.openPopup instead');
+        return ui.openPopup(targetObject, message, buttons);
+    },
+    /**
+     * @deprecated Use WA.chat.onChatMessage instead
+     */
+    onChatMessage(callback: (message: string) => void): void {
+        console.warn('Method WA.onChatMessage is deprecated. Please use WA.chat.onChatMessage instead');
+        chat.onChatMessage(callback);
+    },
+    /**
+     * @deprecated Use WA.room.onEnterZone instead
+     */
+    onEnterZone(name: string, callback: () => void): void {
+        console.warn('Method WA.onEnterZone is deprecated. Please use WA.room.onEnterZone instead');
+        room.onEnterZone(name, callback);
+    },
+    /**
+     * @deprecated Use WA.room.onLeaveZone instead
+     */
+    onLeaveZone(name: string, callback: () => void): void {
+        console.warn('Method WA.onLeaveZone is deprecated. Please use WA.room.onLeaveZone instead');
+        room.onLeaveZone(name, callback);
+    },
+};
+
+export type WorkAdventureApi = typeof wa;
 
 declare global {
-    // eslint-disable-next-line no-var
-    var WA: WorkAdventureApi
 
+    interface Window {
+        WA: WorkAdventureApi
+    }
+    let WA: WorkAdventureApi
 }
 
-type ChatMessageCallback = (message: string) => void;
-type ButtonClickedCallback = (popup: Popup) => void;
+window.WA = wa;
 
-const userInputChatStream: Subject<UserInputChatEvent> = new Subject();
-const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
-const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
-const popups: Map<number, Popup> = new Map<number, Popup>();
-const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<number, Map<number, ButtonClickedCallback>>();
-
-let popupId = 0;
-interface ButtonDescriptor {
-    /**
-     * The label of the button
-     */
-    label: string,
-    /**
-     * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled"
-     */
-    className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled",
-    /**
-     * Callback called if the button is pressed
-     */
-    callback: ButtonClickedCallback,
-}
-
-export class Popup {
-    constructor(private id: number) {
-    }
-
-    /**
-     * Closes the popup
-     */
-    public close(): void {
-        window.parent.postMessage({
-            'type': 'closePopup',
-            'data': {
-                'popupId': this.id,
-            } as ClosePopupEvent
-        }, '*');
-    }
-}
-
-export class Sound {
-    constructor(private url: string) {
-        window.parent.postMessage({
-            "type" : 'loadSound',
-            "data": {
-                url: this.url,
-            } as LoadSoundEvent
-
-        },'*');
-    }
-
-    public play(config : SoundConfig) {
-        window.parent.postMessage({
-            "type" : 'playSound',
-            "data": {
-                url: this.url,
-                config
-            } as PlaySoundEvent
-
-        },'*');
-        return this.url;
-    }
-    public stop() {
-        window.parent.postMessage({
-            "type" : 'stopSound',
-            "data": {
-                url: this.url,
-            } as StopSoundEvent
-
-        },'*');
-        return this.url;
-    }
-
-}
-
-window.WA = {
-    /**
-     * Send a message in the chat.
-     * Only the local user will receive this message.
-     */
-    sendChatMessage(message: string, author: string) {
-        window.parent.postMessage({
-            'type': 'chat',
-            'data': {
-                'message': message,
-                'author': author
-            } as ChatEvent
-        }, '*');
-    },
-    disablePlayerControls(): void {
-        window.parent.postMessage({ 'type': 'disablePlayerControls' }, '*');
-    },
-
-    restorePlayerControls(): void {
-        window.parent.postMessage({ 'type': 'restorePlayerControls' }, '*');
-    },
-
-    displayBubble(): void {
-        window.parent.postMessage({ 'type': 'displayBubble' }, '*');
-    },
-
-    removeBubble(): void {
-        window.parent.postMessage({ 'type': 'removeBubble' }, '*');
-    },
-
-    openTab(url: string): void {
-        window.parent.postMessage({
-            "type": 'openTab',
-            "data": {
-                url
-            } as OpenTabEvent
-        }, '*');
-    },
-
-    loadSound(url: string) : Sound {
-        return new Sound(url);
-    },
-
-    goToPage(url : string) : void{
-        window.parent.postMessage({
-            "type": 'goToPage',
-            "data": {
-                url
-            } as GoToPageEvent
-        }, '*');
-    },
-
-    openCoWebSite(url : string) : void{
-        window.parent.postMessage({
-            "type" : 'openCoWebSite',
-            "data" : {
-                url
-            } as OpenCoWebSiteEvent
-        }, '*');
-    },
-
-    closeCoWebSite(): void {
-        window.parent.postMessage({
-            "type": 'closeCoWebSite'
-        }, '*');
-    },
-
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
-        popupId++;
-        const popup = new Popup(popupId);
-        const btnMap = new Map<number, () => void>();
-        popupCallbacks.set(popupId, btnMap);
-        let id = 0;
-        for (const button of buttons) {
-            const callback = button.callback;
-            if (callback) {
-                btnMap.set(id, () => {
-                    callback(popup);
-                });
-            }
-            id++;
-        }
-
-
-        window.parent.postMessage({
-            'type': 'openPopup',
-            'data': {
-                popupId,
-                targetObject,
-                message,
-                buttons: buttons.map((button) => {
-                    return {
-                        label: button.label,
-                        className: button.className
-                    };
-                })
-            } as OpenPopupEvent
-        }, '*');
-
-        popups.set(popupId, popup)
-        return popup;
-    },
-    /**
-     * Listen to messages sent by the local user, in the chat.
-     */
-    onChatMessage(callback: ChatMessageCallback): void {
-        userInputChatStream.subscribe((userInputChatEvent) => {
-            callback(userInputChatEvent.message);
-        });
-    },
-    onEnterZone(name: string, callback: () => void): void {
-        let subject = enterStreams.get(name);
-        if (subject === undefined) {
-            subject = new Subject<EnterLeaveEvent>();
-            enterStreams.set(name, subject);
-        }
-        subject.subscribe(callback);
-    },
-    onLeaveZone(name: string, callback: () => void): void {
-        let subject = leaveStreams.get(name);
-        if (subject === undefined) {
-            subject = new Subject<EnterLeaveEvent>();
-            leaveStreams.set(name, subject);
-        }
-        subject.subscribe(callback);
-    },
-}
-
-window.addEventListener('message', message => {
+window.addEventListener('message', <T extends keyof IframeResponseEventMap>(message: TypedMessageEvent<IframeResponseEvent<T>>) => {
     if (message.source !== window.parent) {
         return; // Skip message in this event listener
     }
-
     const payload = message.data;
-
     console.debug(payload);
 
     if (isIframeResponseEventWrapper(payload)) {
         const payloadData = payload.data;
-        if (payload.type === 'userInputChat' && isUserInputChatEvent(payloadData)) {
-            userInputChatStream.next(payloadData);
-        } else if (payload.type === 'enterEvent' && isEnterLeaveEvent(payloadData)) {
-            enterStreams.get(payloadData.name)?.next();
-        } else if (payload.type === 'leaveEvent' && isEnterLeaveEvent(payloadData)) {
-            leaveStreams.get(payloadData.name)?.next();
-        } else if (payload.type === 'buttonClickedEvent' && isButtonClickedEvent(payloadData)) {
-            const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
-            const popup = popups.get(payloadData.popupId);
-            if (popup === undefined) {
-                throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
-            }
-            if (callback) {
-                callback(popup);
-            }
-        }
 
+        const callback = registeredCallbacks[payload.type] as IframeCallback<T> | undefined
+        if (callback?.typeChecker(payloadData)) {
+            callback?.callback(payloadData)
+        }
     }
 
     // ...