From c7623300f22b207b185a37960a8fc52b1d3fcdb0 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Sun, 16 May 2021 14:04:45 +0200
Subject: [PATCH] add input popup

---
 front/src/Api/Events/ButtonClickedEvent.ts |   2 +
 front/src/Api/Events/ClosePopupEvent.ts    |   1 +
 front/src/Api/Events/OpenPopupEvent.ts     |   3 +-
 front/src/Api/IframeListener.ts            |   6 +-
 front/src/Phaser/Game/GameScene.ts         |  16 ++-
 front/src/iframe_api.ts                    | 113 +++++++++++----------
 6 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/front/src/Api/Events/ButtonClickedEvent.ts b/front/src/Api/Events/ButtonClickedEvent.ts
index de807037..1343aa0a 100644
--- a/front/src/Api/Events/ButtonClickedEvent.ts
+++ b/front/src/Api/Events/ButtonClickedEvent.ts
@@ -4,6 +4,8 @@ export const isButtonClickedEvent =
     new tg.IsInterface().withProperties({
         popupId: tg.isNumber,
         buttonId: tg.isNumber,
+        input : tg.isBoolean,
+        inputValue : tg.isString,
     }).get();
 /**
  * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
diff --git a/front/src/Api/Events/ClosePopupEvent.ts b/front/src/Api/Events/ClosePopupEvent.ts
index 83b09c96..db64474b 100644
--- a/front/src/Api/Events/ClosePopupEvent.ts
+++ b/front/src/Api/Events/ClosePopupEvent.ts
@@ -3,6 +3,7 @@ import * as tg from "generic-type-guard";
 export const isClosePopupEvent =
     new tg.IsInterface().withProperties({
         popupId: tg.isNumber,
+        inputValue : tg.isString,
     }).get();
 
 /**
diff --git a/front/src/Api/Events/OpenPopupEvent.ts b/front/src/Api/Events/OpenPopupEvent.ts
index 094ba555..0abcd667 100644
--- a/front/src/Api/Events/OpenPopupEvent.ts
+++ b/front/src/Api/Events/OpenPopupEvent.ts
@@ -11,7 +11,8 @@ export const isOpenPopupEvent =
         popupId: tg.isNumber,
         targetObject: tg.isString,
         message: tg.isString,
-        buttons: tg.isArray(isButtonDescriptor)
+        buttons: tg.isArray(isButtonDescriptor),
+        input: tg.isBoolean
     }).get();
 
 /**
diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index bed65f2f..19d030b6 100644
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@@ -222,12 +222,14 @@ class IframeListener {
         });
     }
 
-    sendButtonClickedEvent(popupId: number, buttonId: number): void {
+    sendButtonClickedEvent(popupId: number, buttonId: number, input : boolean, inputValue : string | null): void {
         this.postMessage({
             'type': 'buttonClickedEvent',
             'data': {
                 popupId,
-                buttonId
+                buttonId,
+                input,
+                inputValue,
             } as ButtonClickedEvent
         });
     }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 27ad414c..bcf997a4 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -794,9 +794,12 @@ export class GameScene extends ResizableScene implements CenterListener {
                 return;
             }
             const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
-            let html = `<div id="container" hidden><div class="nes-container with-title is-centered">
-${escapedMessage}
- </div> `;
+            let html = `<div id="container" hidden><div class="nes-container with-title is-centered">`;
+            html += escapedMessage;
+            if (openPopupEvent.input) {
+                html += `<input id="popupinput-${openPopupEvent.popupId}" class="nes-input" \>`
+            }
+            html += `</div> `;
             const buttonContainer = `<div class="buttonContainer"</div>`;
             html += buttonContainer;
             let id = 0;
@@ -818,12 +821,15 @@ ${escapedMessage}
             }, 100);
 
             id = 0;
+            let inputElement : HTMLInputElement;
+            if (openPopupEvent.input) {
+                inputElement = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(`popupinput-${openPopupEvent.popupId}`);
+            }
             for (const button of openPopupEvent.buttons) {
                 const button = HtmlUtils.getElementByIdOrFail<HTMLButtonElement>(`popup-${openPopupEvent.popupId}-${id}`);
                 const btnId = id;
                 button.onclick = () => {
-                    iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId);
-                    button.disabled = true;
+                    iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId, openPopupEvent.input, openPopupEvent.input ? inputElement.value : '');
                 }
                 id++;
             }
diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index 06127dcd..290e11c2 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -5,7 +5,7 @@ import {Subject} from "rxjs";
 import {EnterLeaveEvent, isEnterLeaveEvent} from "./Api/Events/EnterLeaveEvent";
 import {OpenPopupEvent} from "./Api/Events/OpenPopupEvent";
 import {isButtonClickedEvent} from "./Api/Events/ButtonClickedEvent";
-import {ClosePopupEvent} from "./Api/Events/ClosePopupEvent";
+import {ClosePopupEvent, isClosePopupEvent} from "./Api/Events/ClosePopupEvent";
 import {OpenTabEvent} from "./Api/Events/OpenTabEvent";
 import {GoToPageEvent} from "./Api/Events/GoToPageEvent";
 import {OpenCoWebSiteEvent} from "./Api/Events/OpenCoWebSiteEvent";
@@ -13,18 +13,18 @@ import {OpenCoWebSiteEvent} from "./Api/Events/OpenCoWebSiteEvent";
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;
     onChatMessage(callback: (message: string) => void): void;
-    closeChatMessage() : void;
+    closeChatMessage(): 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;
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input: boolean): Popup;
+    openTab(url: string): void;
+    goToPage(url: string): void;
+    openCoWebSite(url: string): void;
     closeCoWebSite(): void;
-    disablePlayerControl() : void;
-    restorePlayerControl() : void;
-    displayBubble() : void;
-    removeBubble() : void;
+    disablePlayerControl(): void;
+    restorePlayerControl(): void;
+    displayBubble(): void;
+    removeBubble(): void;
 }
 
 declare global {
@@ -51,7 +51,7 @@ interface ButtonDescriptor {
     /**
      * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled"
      */
-    className?: "normal"|"primary"|"success"|"warning"|"error"|"disabled",
+    className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled",
     /**
      * Callback called if the button is pressed
      */
@@ -59,7 +59,10 @@ interface ButtonDescriptor {
 }
 
 class Popup {
+    inputValue: string;
+
     constructor(private id: number) {
+        this.inputValue = '';
     }
 
     /**
@@ -70,6 +73,7 @@ class Popup {
             'type': 'closePopup',
             'data': {
                 'popupId': this.id,
+                'inputValue': this.inputValue,
             } as ClosePopupEvent
         }, '*');
     }
@@ -89,69 +93,69 @@ window.WA = {
             } as ChatEvent
         }, '*');
     },
-    closeChatMessage() : void{
+    closeChatMessage(): void {
         window.parent.postMessage({
-            "type" : 'closeChatMessage'
-            },'*');
+            "type": 'closeChatMessage'
+        }, '*');
     },
-    disablePlayerControl() : void {
-        window.parent.postMessage({'type' : 'disablePlayerControl'},'*');
+    disablePlayerControl(): void {
+        window.parent.postMessage({'type': 'disablePlayerControl'}, '*');
     },
 
-    restorePlayerControl() : void {
-        window.parent.postMessage({'type' : 'restorePlayerControl'},'*');
+    restorePlayerControl(): void {
+        window.parent.postMessage({'type': 'restorePlayerControl'}, '*');
     },
 
-    displayBubble() : void {
-        window.parent.postMessage({'type' : 'displayBubble'},'*');
+    displayBubble(): void {
+        window.parent.postMessage({'type': 'displayBubble'}, '*');
     },
 
-    removeBubble() : void {
-        window.parent.postMessage({'type' : 'removeBubble'},'*');
+    removeBubble(): void {
+        window.parent.postMessage({'type': 'removeBubble'}, '*');
     },
 
-    openTab(url : string) : void{
+    openTab(url: string): void {
         window.parent.postMessage({
-            "type" : 'openTab',
-            "data" : {
+            "type": 'openTab',
+            "data": {
                 url
             } as OpenTabEvent
-            },'*');
+        }, '*');
     },
 
-    goToPage(url : string) : void{
+    goToPage(url: string): void {
         window.parent.postMessage({
-            "type" : 'goToPage',
-            "data" : {
+            "type": 'goToPage',
+            "data": {
                 url
             } as GoToPageEvent
-            },'*');
+        }, '*');
     },
 
-    openCoWebSite(url : string) : void{
+    openCoWebSite(url: string): void {
         window.parent.postMessage({
-            "type" : 'openCoWebSite',
-            "data" : {
+            "type": 'openCoWebSite',
+            "data": {
                 url
             } as OpenCoWebSiteEvent
-            },'*');
+        }, '*');
     },
 
-    closeCoWebSite() : void{
+    closeCoWebSite(): void {
         window.parent.postMessage({
-            "type" : 'closeCoWebSite'
-            },'*');
+            "type": 'closeCoWebSite'
+        }, '*');
     },
 
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input: boolean = false): 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) {
+        for(const button of buttons) {
             const callback = button.callback;
-            if (callback) {
+            if(callback) {
                 btnMap.set(id, () => {
                     callback(popup);
                 });
@@ -159,6 +163,9 @@ window.WA = {
             id++;
         }
 
+        if(input) {
+            this.disablePlayerControl();
+        }
 
         window.parent.postMessage({
             'type': 'openPopup',
@@ -171,7 +178,8 @@ window.WA = {
                         label: button.label,
                         className: button.className
                     };
-                })
+                }),
+                input: input
             } as OpenPopupEvent
         }, '*');
 
@@ -188,7 +196,7 @@ window.WA = {
     },
     onEnterZone(name: string, callback: () => void): void {
         let subject = enterStreams.get(name);
-        if (subject === undefined) {
+        if(subject === undefined) {
             subject = new Subject<EnterLeaveEvent>();
             enterStreams.set(name, subject);
         }
@@ -196,7 +204,7 @@ window.WA = {
     },
     onLeaveZone(name: string, callback: () => void): void {
         let subject = leaveStreams.get(name);
-        if (subject === undefined) {
+        if(subject === undefined) {
             subject = new Subject<EnterLeaveEvent>();
             leaveStreams.set(name, subject);
         }
@@ -205,7 +213,7 @@ window.WA = {
 }
 
 window.addEventListener('message', message => {
-    if (message.source !== window.parent) {
+    if(message.source !== window.parent) {
         return; // Skip message in this event listener
     }
 
@@ -213,21 +221,22 @@ window.addEventListener('message', message => {
 
     console.log(payload);
 
-    if (isIframeEventWrapper(payload)) {
+    if(isIframeEventWrapper(payload)) {
         const payloadData = payload.data;
-        if (payload.type === 'userInputChat' && isUserInputChatEvent(payloadData)) {
+        if(payload.type === 'userInputChat' && isUserInputChatEvent(payloadData)) {
             userInputChatStream.next(payloadData);
-        } else if (payload.type === 'enterEvent' && isEnterLeaveEvent(payloadData)) {
+        } else if(payload.type === 'enterEvent' && isEnterLeaveEvent(payloadData)) {
             enterStreams.get(payloadData.name)?.next();
-        } else if (payload.type === 'leaveEvent' && isEnterLeaveEvent(payloadData)) {
+        } else if(payload.type === 'leaveEvent' && isEnterLeaveEvent(payloadData)) {
             leaveStreams.get(payloadData.name)?.next();
-        } else if (payload.type === 'buttonClickedEvent' && isButtonClickedEvent(payloadData)) {
+        } 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(popup === undefined) {
+                throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
             }
-            if (callback) {
+            if(callback) {
+                popup.inputValue = payloadData.inputValue;
                 callback(popup);
             }
         }