_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add input popup

Browse Source
This commit is contained in:
_Bastler 2021-05-16 14:04:45 +02:00
parent c6eee39057
commit c7623300f2
6 changed files with 81 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/Api/Events/ButtonClickedEvent.ts
View File

@ -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.

1
front/src/Api/Events/ClosePopupEvent.ts
View File

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

3
front/src/Api/Events/OpenPopupEvent.ts
View File

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

6
front/src/Api/IframeListener.ts
View File

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

16
front/src/Phaser/Game/GameScene.ts
View File

@ -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++;
}

113
front/src/iframe_api.ts
View File

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