From a6ba8d41b9a9c7d73cec0452b313c34bfd9e38b4 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 10 May 2021 11:19:18 +0200
Subject: [PATCH] implement show/hide layer with scripting

---
 front/src/Api/Events/LayerEvent.ts | 10 ++++++++++
 front/src/Api/IframeListener.ts    | 15 ++++++++++++++-
 front/src/iframe_api.ts            | 21 ++++++++++++++++++++
 maps/tests/iframe.html             | 31 +++++++++++++++++++++++++++++-
 maps/tests/iframe_api.json         | 25 +++++++++++++++++++++---
 5 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 front/src/Api/Events/LayerEvent.ts

diff --git a/front/src/Api/Events/LayerEvent.ts b/front/src/Api/Events/LayerEvent.ts
new file mode 100644
index 00000000..f854248b
--- /dev/null
+++ b/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>;
diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index 7e51a281..0820785a 100644
--- a/front/src/Api/IframeListener.ts
+++ b/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);
diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index 18d8d172..0b9fac46 100644
--- a/front/src/iframe_api.ts
+++ b/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'},'*');
     },
diff --git a/maps/tests/iframe.html b/maps/tests/iframe.html
index 23bfb479..4c7cd044 100644
--- a/maps/tests/iframe.html
+++ b/maps/tests/iframe.html
@@ -3,7 +3,7 @@
     <head>
         <script src="http://play.workadventure.localhost/iframe_api.js"></script>
         <script>
-
+        console.log('script');
         </script>
     </head>
     <body>
@@ -21,5 +21,34 @@
                 document.getElementById('chatSent').append(chatDiv);
             }));
         </script>
+        <div>
+            <label for="visibilityLayer">Metadata Layer</label><input type="checkbox" id="visibilityLayer" name="visible" value="show">
+        </div>
+        <script>
+            document.getElementById('visibilityLayer').onclick = () => {
+                if (document.getElementById('visibilityLayer').checked) {
+                    WA.showLayer('Metadata');
+                    console.log('show');
+                }
+                else {
+                    WA.hideLayer('Metadata');
+                    console.log('hide');
+                }
+            }
+        </script>
+        <!--<button id="showLayer">Show Layer</button>
+        <script>
+            document.getElementById('showLayer').onclick = () => {
+                WA.showLayer('Metadata');
+                console.log('show');
+            }
+        </script>
+        <button id="hideLayer">Hide Layer</button>
+        <script>
+            document.getElementById('hideLayer').onclick = () => {
+                WA.hideLayer('Metadata');
+                console.log('hide');
+            }
+        </script>-->
     </body>
 </html>
diff --git a/maps/tests/iframe_api.json b/maps/tests/iframe_api.json
index fa138500..db840b3f 100644
--- a/maps/tests/iframe_api.json
+++ b/maps/tests/iframe_api.json
@@ -1,4 +1,11 @@
 { "compressionlevel":-1,
+ "editorsettings":
+    {
+     "export":
+        {
+         "target":"."
+        }
+    },
  "height":10,
  "infinite":false,
  "layers":[
@@ -49,6 +56,18 @@
          "x":0,
          "y":0
         }, 
+        {
+         "data":[0, 0, 93, 0, 104, 0, 0, 0, 0, 0, 0, 0, 104, 0, 115, 0, 0, 0, 93, 0, 0, 0, 115, 0, 0, 0, 93, 0, 104, 0, 0, 0, 0, 0, 0, 0, 104, 0, 115, 93, 0, 0, 0, 0, 0, 0, 115, 0, 0, 104, 0, 0, 0, 0, 0, 0, 0, 0, 0, 115, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":6,
+         "name":"Metadata",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
         {
          "draworder":"topdown",
          "id":3,
@@ -78,11 +97,11 @@
          "x":0,
          "y":0
         }],
- "nextlayerid":6,
+ "nextlayerid":7,
  "nextobjectid":3,
  "orientation":"orthogonal",
  "renderorder":"right-down",
- "tiledversion":"2021.03.23",
+ "tiledversion":"1.4.3",
  "tileheight":32,
  "tilesets":[
         {
@@ -100,6 +119,6 @@
         }],
  "tilewidth":32,
  "type":"map",
- "version":1.5,
+ "version":1.4,
  "width":10
 }
\ No newline at end of file