implement show/hide layer with scripting

front/src/Api/Events/LayerEvent.ts

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

front/src/Api/IframeListener.ts

@@ -12,6 +12,7 @@ import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent";
 import {scriptUtils} from "./ScriptUtils";
 import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
 import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent";
+import {isLayerEvent, LayerEvent} from "./Events/LayerEvent";
 
 
 /**
@@ -52,6 +53,12 @@ class IframeListener {
     private readonly _removeBubbleStream: Subject<void> = new Subject();
     public readonly removeBubbleStream = this._removeBubbleStream.asObservable();
 
+    private readonly _showLayerStream: Subject<LayerEvent> = new Subject();
+    public readonly showLayerStream = this._showLayerStream.asObservable();
+
+    private readonly _hideLayerStream: Subject<LayerEvent> = new Subject();
+    public readonly hideLayerStream = this._hideLayerStream.asObservable();
+
     private readonly iframes = new Set<HTMLIFrameElement>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
 
@@ -73,7 +80,13 @@ class IframeListener {
 
             const payload = message.data;
             if (isIframeEventWrapper(payload)) {
-                if (payload.type === 'chat' && isChatEvent(payload.data)) {
+                if (payload.type ==='showLayer' && isLayerEvent(payload.data)) {
+                    console.log('showLayer 2');
+                    this._showLayerStream.next(payload.data);
+                } else if (payload.type === 'hideLayer' && isLayerEvent(payload.data)) {
+                    console.log('hideLayer 2');
+                    this._hideLayerStream.next(payload.data);
+                } else if (payload.type === 'chat' && isChatEvent(payload.data)) {
                     this._chatStream.next(payload.data);
                 } else if (payload.type === 'openPopup' && isOpenPopupEvent(payload.data)) {
                     this._openPopupStream.next(payload.data);

front/src/iframe_api.ts

@@ -9,6 +9,7 @@ import {ClosePopupEvent} from "./Api/Events/ClosePopupEvent";
 import {OpenTabEvent} from "./Api/Events/OpenTabEvent";
 import {GoToPageEvent} from "./Api/Events/GoToPageEvent";
 import {OpenCoWebSiteEvent} from "./Api/Events/OpenCoWebSiteEvent";
+import {LayerEvent} from "./Api/Events/LayerEvent";
 
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;
@@ -24,6 +25,8 @@ interface WorkAdventureApi {
     restorePlayerControl() : void;
     displayBubble() : void;
     removeBubble() : void;
+    showLayer(layer: string) : void;
+    hideLayer(layer: string) : void;
 }
 
 declare global {
@@ -88,6 +91,24 @@ window.WA = {
             } as ChatEvent
         }, '*');
     },
+    showLayer(layer: string) : void {
+        console.log('showLayer');
+      window.parent.postMessage({
+          'type' : 'showLayer',
+          'data' : {
+              'name' : layer
+          } as LayerEvent
+      }, '*');
+    },
+    hideLayer(layer: string) : void {
+        console.log('hideLayer');
+        window.parent.postMessage({
+            'type' : 'hideLayer',
+            'data' : {
+                'name' : layer
+            } as LayerEvent
+        }, '*');
+    },
     disablePlayerControl() : void {
         window.parent.postMessage({'type' : 'disablePlayerControl'},'*');
     },