lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge branch 'menu-command-api' of github.com:jonnytest1/workadventure into metadataScriptingApi

Browse source
This commit is contained in:
GRL 2021-05-19 09:36:11 +02:00
parent b509471140 127a4759ac
commit ce0a72c6ce
9 changed files with 119 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
front/src/Api/Events/IframeEvent.ts
View file

@ -5,6 +5,8 @@ import type { ChatEvent } from './ChatEvent';
import type { ClosePopupEvent } from './ClosePopupEvent';
import type { EnterLeaveEvent } from './EnterLeaveEvent';
import type { GoToPageEvent } from './GoToPageEvent';
import type { MenuItemClickedEvent } from './MenuItemClickedEvent';
import type { MenuItemRegisterEvent } from './MenuItemRegisterEvent';
import type { HasPlayerMovedEvent } from './HasPlayerMovedEvent';
import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
import type { OpenPopupEvent } from './OpenPopupEvent';
@ -21,6 +23,7 @@ export interface TypedMessageEvent<T> extends MessageEvent {
export type IframeEventMap = {
getState: GameStateEvent,
// updateTile: UpdateTileEvent
registerMenuCommand: MenuItemRegisterEvent
chat: ChatEvent,
openPopup: OpenPopupEvent
closePopup: ClosePopupEvent
@ -56,6 +59,7 @@ export interface IframeResponseEventMap {
gameState: GameStateEvent
hasPlayerMoved: HasPlayerMovedEvent
dataLayer: DataLayerEvent
menuItemClicked: MenuItemClickedEvent
}
export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
type: T;

10
front/src/Api/Events/MenuItemClickedEvent.ts Normal file
View file

@ -0,0 +1,10 @@
import * as tg from "generic-type-guard";
export const isMenuItemClickedEvent =
new tg.IsInterface().withProperties({
menuItem: tg.isString
}).get();
/**
* A message sent from the game to the iFrame when a menu item is clicked.
*/
export type MenuItemClickedEvent = tg.GuardedType<typeof isMenuItemClickedEvent>;

10
front/src/Api/Events/MenuItemRegisterEvent.ts Normal file
View file

@ -0,0 +1,10 @@
import * as tg from "generic-type-guard";
export const isMenuItemRegisterEvent =
new tg.IsInterface().withProperties({
menutItem: tg.isString
}).get();
/**
* A message sent from the iFrame to the game to add a new menu item.
*/
export type MenuItemRegisterEvent = tg.GuardedType<typeof isMenuItemRegisterEvent>;

16
front/src/Api/IframeListener.ts
View file

@ -17,7 +17,8 @@ import type { GameStateEvent } from './Events/GameStateEvent';
import type { HasPlayerMovedEvent } from './Events/HasPlayerMovedEvent';
import { Math } from 'phaser';
import type { DataLayerEvent } from "./Events/DataLayerEvent";
import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
/**
@ -74,6 +75,8 @@ class IframeListener {
private readonly _dataLayerChangeStream: Subject<void> = new Subject();
public readonly dataLayerChangeStream = this._dataLayerChangeStream.asObservable();
private readonly _registerMenuCommandStream: Subject<string> = new Subject();
public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
private readonly iframes = new Set<HTMLIFrameElement>();
private readonly scripts = new Map<string, HTMLIFrameElement>();
private sendPlayerMove: boolean = false;
@ -140,6 +143,8 @@ class IframeListener {
this.sendPlayerMove = true
} else if (payload.type == "getDataLayer") {
this._dataLayerChangeStream.next();
} else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) {
this._registerMenuCommandStream.next(payload.data.menutItem)
}
}
}, false);
@ -237,6 +242,15 @@ class IframeListener {
this.scripts.delete(scriptUrl);
}
sendMenuClickedEvent(menuItem: string) {
this.postMessage({
'type': 'menuItemClicked',
'data': {
menuItem: menuItem,
} as MenuItemClickedEvent
});
}
sendUserInputChat(message: string) {
this.postMessage({
'type': 'userInputChat',

4
front/src/Phaser/Game/GameMap.ts
View file

@ -137,8 +137,8 @@ export class GameMap {
public findPhaserLayer(layerName: string): TilemapLayer | undefined {
let i = 0;
let found = false;
while (!found && i<this.flatLayers.length) {
if (this.flatLayers[i].name === layerName) {
while (!found && i<this.phaserLayers.length) {
if (this.phaserLayers[i].layer.name === layerName) {
found = true;
}
else {

18
front/src/Phaser/Game/GameScene.ts
View file

@ -90,9 +90,11 @@ import { TextUtils } from "../Components/TextUtils";
import { touchScreenManager } from "../../Touch/TouchScreenManager";
import { PinchManager } from "../UserInput/PinchManager";
import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick";
import { waScaleManager } from "../Services/WaScaleManager";
import { MenuScene, MenuSceneName } from '../Menu/MenuScene';
import {waScaleManager } from "../Services/WaScaleManager";
import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
export interface GameSceneInitInterface {
initPosition: PointInterface | null,
reconnecting: boolean
@ -884,10 +886,12 @@ ${escapedMessage}
}));
this.iframeSubscriptionList.push(iframeListener.showLayerStream.subscribe((layerEvent)=>{
console.log('show');
this.setLayerVisibility(layerEvent.name, true);
}));
this.iframeSubscriptionList.push(iframeListener.hideLayerStream.subscribe((layerEvent)=>{
console.log('hide');
this.setLayerVisibility(layerEvent.name, false);
}));
@ -917,16 +921,12 @@ ${escapedMessage}
}
private setLayerVisibility(layerName: string, visible: boolean): void {
const phaserlayer = this.gameMap.findPhaserLayer(layerName);
if (phaserlayer === undefined) {
const phaserLayer = this.gameMap.findPhaserLayer(layerName);
if (phaserLayer === undefined) {
console.warn('Could not find layer "' + layerName + '" when calling WA.hideLayer / WA.showLayer');
return;
}
if(phaserlayer.type != "tilelayer"){
console.warn('The layer "' + layerName + '" is not a tilelayer. It can not be show/hide');
return;
}
phaserlayer.setVisible(visible);
phaserLayer.setVisible(visible);
this.dirty = true;
}
@ -941,6 +941,8 @@ ${escapedMessage}
const {roomId, hash} = Room.getIdFromIdentifier(exitKey, this.MapUrlFile, this.instance);
if (!roomId) throw new Error('Could not find the room from its exit key: '+exitKey);
urlManager.pushStartLayerNameToUrl(hash);
const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene
menuScene.reset()
if (roomId !== this.scene.key) {
if (this.scene.get(roomId) === null) {
console.error("next room not loaded", exitKey);

40
front/src/Phaser/Menu/MenuScene.ts
View file

@ -10,6 +10,9 @@ import {GameConnexionTypes} from "../../Url/UrlManager";
import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Components/WarningContainer";
import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
import {menuIconVisible} from "../../Stores/MenuStore";
import { HtmlUtils } from '../../WebRtc/HtmlUtils';
import { iframeListener } from '../../Api/IframeListener';
import { Subscription } from 'rxjs';
export const MenuSceneName = 'MenuScene';
const gameMenuKey = 'gameMenu';
@ -36,12 +39,17 @@ export class MenuScene extends Phaser.Scene {
private menuButton!: Phaser.GameObjects.DOMElement;
private warningContainer: WarningContainer | null = null;
private warningContainerTimeout: NodeJS.Timeout | null = null;
private subscriptions = new Subscription()
constructor() {
super({key: MenuSceneName});
this.gameQualityValue = localUserStore.getGameQualityValue();
this.videoQualityValue = localUserStore.getVideoQualityValue();
this.subscriptions.add(iframeListener.registerMenuCommandStream.subscribe(menuCommand => {
this.addMenuOption(menuCommand);
}))
}
preload () {
@ -53,6 +61,13 @@ export class MenuScene extends Phaser.Scene {
this.load.html(warningContainerKey, warningContainerHtml);
}
reset() {
const addedMenuItems=[...this.menuElement.node.querySelectorAll(".fromApi")];
for(let index=addedMenuItems.length-1;index>=0;index--){
addedMenuItems[index].remove()
}
}
create() {
menuIconVisible.set(true);
this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
@ -268,13 +283,30 @@ export class MenuScene extends Phaser.Scene {
});
}
private onMenuClick(event:MouseEvent) {
if((event?.target as HTMLInputElement).classList.contains('not-button')){
public addMenuOption(menuText: string) {
const wrappingSection = document.createElement("section")
const excapedHtml = HtmlUtils.escapeHtml(menuText);
wrappingSection.innerHTML = `<button class="fromApi" id="${excapedHtml}">${excapedHtml}</button>`
const menuItemContainer = this.menuElement.node.querySelector("#gameMenu main");
if (menuItemContainer) {
menuItemContainer.querySelector(`#${excapedHtml}.fromApi`)?.remove()
menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks"))
}
}
private onMenuClick(event: MouseEvent) {
const htmlMenuItem = (event?.target as HTMLInputElement);
if (htmlMenuItem.classList.contains('not-button')) {
return;
}
event.preventDefault();
switch ((event?.target as HTMLInputElement).id) {
if (htmlMenuItem.classList.contains("fromApi")) {
iframeListener.sendMenuClickedEvent(htmlMenuItem.id)
return
}
switch (htmlMenuItem.id) {
case 'changeNameButton':
this.closeSideMenu();
gameManager.leaveGame(this, LoginSceneName, new LoginScene());

23
front/src/iframe_api.ts
View file

@ -14,7 +14,9 @@ import type { SetPropertyEvent } from "./Api/Events/setPropertyEvent";
import { GameStateEvent, isGameStateEvent } from './Api/Events/GameStateEvent';
import { HasPlayerMovedEvent, HasPlayerMovedEventCallback, isHasPlayerMovedEvent } from './Api/Events/HasPlayerMovedEvent';
import { DataLayerEvent, isDataLayerEvent } from "./Api/Events/DataLayerEvent";
import type {ITiledMap} from "./Phaser/Map/ITiledMap";
import type { ITiledMap } from "./Phaser/Map/ITiledMap";
import type { MenuItemRegisterEvent } from "./Api/Events/MenuItemRegisterEvent";
import { isMenuItemClickedEvent } from "./Api/Events/MenuItemClickedEvent";
interface WorkAdventureApi {
sendChatMessage(message: string, author: string): void;
@ -37,6 +39,7 @@ interface WorkAdventureApi {
restorePlayerControls(): void;
displayBubble(): void;
removeBubble(): void;
registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void): void
getMapUrl(): Promise<string>;
getUuid(): Promise<string | undefined>;
getRoomId(): Promise<string>;
@ -62,7 +65,7 @@ const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subj
const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
const popups: Map<number, Popup> = new Map<number, Popup>();
const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<number, Map<number, ButtonClickedCallback>>();
const menuCallbacks: Map<string, (command: string) => void> = new Map()
let popupId = 0;
interface ButtonDescriptor {
/**
@ -308,6 +311,16 @@ window.WA = {
popups.set(popupId, popup)
return popup;
},
registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
menuCallbacks.set(commandDescriptor, callback);
window.parent.postMessage({
'type': 'registerMenuCommand',
'data': {
menutItem: commandDescriptor
} as MenuItemRegisterEvent
}, '*');
},
/**
* Listen to messages sent by the local user, in the chat.
*/
@ -371,8 +384,12 @@ window.addEventListener('message', message => {
dataLayerResolver.forEach(resolver => {
resolver(payloadData);
})
} else if (payload.type == "menuItemClicked" && isMenuItemClickedEvent(payload.data)) {
const callback = menuCallbacks.get(payload.data.menuItem);
if (callback) {
callback(payload.data.menuItem)
}
}
}
// ...

20
maps/tests/iframe.html
View file

@ -7,16 +7,22 @@
<button id="sendchat">Send chat message</button>
<script>
document.getElementById('sendchat').onclick = () => {
WA.sendChatMessage('Hello world!', 'Mr Robot');
WA.sendChatMessage('Hello world!', 'Mr ROBOT');
}
</script>
<div id="chatSent"></div>
<script>
WA.onChatMessage((message => {
const chatDiv = document.createElement('p');
chatDiv.innerText = message;
document.getElementById('chatSent').append(chatDiv);
}));
let chatbotEnabled=false
WA.registerMenuCommand('help', () => {
chatbotEnabled=true;
WA.sendChatMessage("Bonjour Monsieur/Madame, Comment puis-je vous aider ?", 'Mr Robot');
WA.onChatMessage((message => {
const chatDiv = document.createElement('p');
chatDiv.innerText = 'Vous avez tapé : ' + message;
document.getElementById('chatSent').append(chatDiv);
WA.sendChatMessage('Votre message : "' + message + '" a bien ete recu. Merci de bien vouloir patienter pendant son traitement.', 'Mr ROBOT');
}));
});
</script>
<div>
<label for="show/hideLayer">Metadata Layer : </label><input type="checkbox" id="show/hideLayer" name="visible" value="show" checked>
@ -30,8 +36,6 @@
WA.hideLayer('Metadata');
}
}
</script>
<script>
WA.setProperty('start', 'openWebsite', 'https://www.wikipedia.org/');
</script>
</body>