Merge pull request #946 from jonnytest1/load-page-api

Load page iframe-api

docs/maps/api-reference.md

@@ -187,6 +187,26 @@ Example:
 WA.goToPage('https://www.wikipedia.org/');
 ```
 
+### Going to a different map from the script
+
+```
+
+goToRoom(url: string): void
+```
+
+Load the map at url without unloading workadventure
+
+relative urls: "../subFolder/map.json[#start-layer-name]"
+global urls: "/_/global/domain/path/map.json[#start-layer-name]"
+
+Example:
+
+```javascript
+WA.goToRoom("/@/tcm/workadventure/floor0")  // workadventure urls
+WA.goToRoom('../otherMap/map.json');
+WA.goToRoom("/_/global/<path to global map>.json#start-layer-2")
+```
+
 ### Opening/closing a web page in an iFrame
 
 ```

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

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/Phaser/Game/GameScene.ts

@@ -80,6 +80,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";
@@ -920,7 +921,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');
@@ -1095,10 +1102,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/iframe_api.ts

@@ -9,10 +9,11 @@ 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 { PlaySoundEvent } from "./Api/Events/PlaySoundEvent";
-import type  {StopSoundEvent} from "./Api/Events/StopSoundEvent";
+import type { StopSoundEvent } from "./Api/Events/StopSoundEvent";
-import type {LoadSoundEvent} from "./Api/Events/LoadSoundEvent";
+import type { LoadSoundEvent } from "./Api/Events/LoadSoundEvent";
 import SoundConfig = Phaser.Types.Sound.SoundConfig;
+import type { LoadPageEvent } from './Api/Events/LoadPageEvent';
 
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;
@@ -20,9 +21,10 @@ interface WorkAdventureApi {
     onEnterZone(name: string, callback: () => void): void;
     onLeaveZone(name: string, callback: () => void): void;
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
-    openTab(url : string): void;
+    openTab(url: string): void;
-    goToPage(url : string): void;
+    goToPage(url: string): void;
-    openCoWebSite(url : string): void;
+    goToRoom(url: string): void;
+    openCoWebSite(url: string): void;
     closeCoWebSite(): void;
     disablePlayerControls(): void;
     restorePlayerControls(): void;
@@ -166,6 +168,15 @@ window.WA = {
         }, '*');
     },
 
+    goToRoom(url: string): void {
+        window.parent.postMessage({
+            "type" : 'loadPage',
+            "data" : {
+                url
+            } as LoadPageEvent
+            },'*');
+    },
+
     openCoWebSite(url : string) : void{
         window.parent.postMessage({
             "type" : 'openCoWebSite',

maps/tests/goToPageScript.js

@@ -1,14 +1,16 @@
+/// <reference path="../../front/src/iframe_api.ts" />
 var zoneName = "popUpGoToPageZone";
 var urlPricing = "https://workadventu.re/pricing";
 var urlGettingStarted = "https://workadventu.re/getting-started";
-var isCoWebSiteOpened =  false;
+var urlRelativeMap = "script_api.json";
+var isCoWebSiteOpened = false;
 
 WA.onChatMessage((message => {
-    WA.sendChatMessage('Poly Parrot says: "'+message+'"', 'Poly Parrot');
+    WA.sendChatMessage('Poly Parrot says: "' + message + '"', 'Poly Parrot');
 }));
 
 WA.onEnterZone(zoneName, () => {
-    WA.openPopup("popUp","Open Links",[
+    WA.openPopup("popUp", "Open Links", [
         {
             label: "Open Tab",
             className: "popUpElement",
@@ -18,27 +20,34 @@ WA.onEnterZone(zoneName, () => {
             })
         },
         {
-            label: "Go To Page", className : "popUpElement",
+            label: "Go To Page", className: "popUpElement",
-            callback:(popup => {
+            callback: (popup => {
                 WA.goToPage(urlPricing);
                 popup.close();
             })
 
-        }
+        },
-        ,
         {
-            label: "openCoWebSite", className : "popUpElement",
+            label: "openCoWebSite", className: "popUpElement",
-            callback:(popup => {
+            callback: (popup => {
                 WA.openCoWebSite(urlPricing);
                 isCoWebSiteOpened = true;
                 popup.close();
             })
 
+        }, {
+            label: "load grouped map",
+            className: "popUpElement",
+            callback: (popup => {
+                WA.goToRoom(urlRelativeMap);
+                popup.close();
+            })
+
         }]);
 })
 
 WA.onLeaveZone(zoneName, () => {
-    if (isCoWebSiteOpened) {
+    if(isCoWebSiteOpened) {
         WA.closeCoWebSite();
         isCoWebSiteOpened = false;
     }

maps/tests/index.html

@@ -41,6 +41,14 @@
                 <td>
                     <a href="#" class="testLink" data-testmap="script_api.json" target="_blank">Testing scripting API with a script</a>
                 </td>
+            </tr>
+			  <tr>
+                <td>
+                    <input type="radio" name="test-scripting-api"> Success <input type="radio" name="test-scripting-api"> Failure <input type="radio" name="test-scripting-api" checked> Pending
+                </td>
+                <td>
+                    <a href="#" class="testLink" data-testmap="goToPage.json" target="_blank">Testing scripting API with a script</a>
+                </td>
             </tr>
             <tr>
                 <td>