add input popup

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.

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();
 
 /**

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();
 
 /**

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
         });
     }

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">
+            let html = `<div id="container" hidden><div class="nes-container with-title is-centered">`;
-${escapedMessage}
+            html += escapedMessage;
- </div> `;
+            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);
+                    iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId, openPopupEvent.input, openPopupEvent.input ? inputElement.value : '');
-                    button.disabled = true;
                 }
                 id++;
             }

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";
@@ -16,7 +16,7 @@ interface WorkAdventureApi {
     closeChatMessage(): void;
     onEnterZone(name: string, callback: () => void): void;
     onLeaveZone(name: string, callback: () => void): void;
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input: boolean): Popup;
     openTab(url: string): void;
     goToPage(url: string): void;
     openCoWebSite(url: string): void;
@@ -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
         }, '*');
     }
@@ -143,7 +147,7 @@ window.WA = {
         }, '*');
     },
 
-    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>();
@@ -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
         }, '*');
 
@@ -228,6 +236,7 @@ window.addEventListener('message', message => {
                 throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
             }
             if(callback) {
+                popup.inputValue = payloadData.inputValue;
                 callback(popup);
             }
         }