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

re-adding popup-input, video container fix

Browse Source
This commit is contained in:
_Bastler 2021-06-25 11:34:27 +02:00
parent 0bb39a6a5d
commit 07b6fce877
10 changed files with 208 additions and 187 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

@ -331,12 +331,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
});
}

5
front/src/Api/iframe/Ui/Popup.ts
View File

@ -2,7 +2,11 @@ import {sendToWorkadventure} from "../IframeApiContribution";
import type {ClosePopupEvent} from "../../Events/ClosePopupEvent";
export class Popup {
inputValue: string;
constructor(private id: number) {
this.inputValue = '';
}
/**
@ -13,6 +17,7 @@ export class Popup {
'type': 'closePopup',
'data': {
'popupId': this.id,
'inputValue': this.inputValue,
} as ClosePopupEvent
});
}

6
front/src/Api/iframe/ui.ts
View File

@ -33,6 +33,7 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
}
if (callback) {
popup.inputValue = payloadData.inputValue;
callback(popup);
}
}
@ -49,7 +50,7 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
})];
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>();
@ -76,7 +77,8 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
label: button.label,
className: button.className
};
})
}),
input
}
});

4
front/src/Components/Video/VideoMediaBox.svelte
View File

@ -20,7 +20,7 @@
</script>
<div class="video-container">
<div class="video-container nes-container is-rounded is-dark">
{#if $statusStore === 'connecting'}
<div class="connecting-spinner"></div>
{/if}
@ -33,7 +33,7 @@
{#if $constraintStore && $constraintStore.audio === false}
<img src={microphoneCloseImg} alt="Muted">
{/if}
<button class="report" on:click={() => openReport(peer)}>
<button class="report nes-button is-dark" on:click={() => openReport(peer)}>
<img alt="Report this user" src={reportImg}>
<span>Report/Block</span>
</button>

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

@ -63,7 +63,8 @@ import type {
ITiledMapLayerProperty,
ITiledMapObject,
ITiledMapTileLayer,
ITiledTileSet } from "../Map/ITiledMap";
ITiledTileSet
} from "../Map/ITiledMap";
import {MenuScene, MenuSceneName} from '../Menu/MenuScene';
import {PlayerAnimationDirections} from "../Player/Animation";
import {hasMovedEventName, Player, requestEmoteEventName} from "../Player/Player";
@ -820,9 +821,12 @@ export class GameScene extends DirtyScene {
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;
@ -848,8 +852,11 @@ ${escapedMessage}
const button = HtmlUtils.getElementByIdOrFail<HTMLButtonElement>(`popup-${openPopupEvent.popupId}-${id}`);
const btnId = id;
button.onclick = () => {
iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId);
button.disabled = true;
let inputValue = '';
if(openPopupEvent.input) {
inputValue = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(`popupinput-${openPopupEvent.popupId}`).value;
}
iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId, openPopupEvent.input, inputValue);
}
id++;
}

4
front/src/iframe_api.ts
View File

@ -119,9 +119,9 @@ const wa = {
/**
* @deprecated Use WA.controls.restorePlayerControls instead
*/
openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input : boolean): Popup {
console.warn('Method WA.openPopup is deprecated. Please use WA.ui.openPopup instead');
return ui.openPopup(targetObject, message, buttons);
return ui.openPopup(targetObject, message, buttons, input);
},
/**
* @deprecated Use WA.chat.onChatMessage instead

1
front/style/style.scss
View File

@ -40,6 +40,7 @@ body .message-info.warning {
position: relative;
transition: all 0.2s ease;
background-color: #00000099;
height: 100%;
video {
width: 100%;