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

implement show/hide layer with scripting

Browse Source
This commit is contained in:
GRL 2021-05-10 11:19:18 +02:00
parent 5605e63e5f
commit a6ba8d41b9
5 changed files with 97 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/Api/Events/LayerEvent.ts Normal file
View File

@ -0,0 +1,10 @@
import * as tg from "generic-type-guard";
export const isLayerEvent =
new tg.IsInterface().withProperties({
name: tg.isString,
}).get();
/**
* A message sent from the iFrame to the game to show/hide a layer.
*/
export type LayerEvent = tg.GuardedType<typeof isLayerEvent>;

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

@ -12,6 +12,7 @@ import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent";
import {scriptUtils} from "./ScriptUtils"; import {scriptUtils} from "./ScriptUtils";
import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent"; import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent"; import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent";
import {isLayerEvent, LayerEvent} from "./Events/LayerEvent";
/** /**
@ -52,6 +53,12 @@ class IframeListener {
private readonly _removeBubbleStream: Subject<void> = new Subject(); private readonly _removeBubbleStream: Subject<void> = new Subject();
public readonly removeBubbleStream = this._removeBubbleStream.asObservable(); public readonly removeBubbleStream = this._removeBubbleStream.asObservable();
private readonly _showLayerStream: Subject<LayerEvent> = new Subject();
public readonly showLayerStream = this._showLayerStream.asObservable();
private readonly _hideLayerStream: Subject<LayerEvent> = new Subject();
public readonly hideLayerStream = this._hideLayerStream.asObservable();
private readonly iframes = new Set<HTMLIFrameElement>(); private readonly iframes = new Set<HTMLIFrameElement>();
private readonly scripts = new Map<string, HTMLIFrameElement>(); private readonly scripts = new Map<string, HTMLIFrameElement>();
@ -73,7 +80,13 @@ class IframeListener {
const payload = message.data; const payload = message.data;
if (isIframeEventWrapper(payload)) { if (isIframeEventWrapper(payload)) {
if (payload.type === 'chat' && isChatEvent(payload.data)) { if (payload.type ==='showLayer' && isLayerEvent(payload.data)) {
console.log('showLayer 2');
this._showLayerStream.next(payload.data);
} else if (payload.type === 'hideLayer' && isLayerEvent(payload.data)) {
console.log('hideLayer 2');
this._hideLayerStream.next(payload.data);
} else if (payload.type === 'chat' && isChatEvent(payload.data)) {
this._chatStream.next(payload.data); this._chatStream.next(payload.data);
} else if (payload.type === 'openPopup' && isOpenPopupEvent(payload.data)) { } else if (payload.type === 'openPopup' && isOpenPopupEvent(payload.data)) {
this._openPopupStream.next(payload.data); this._openPopupStream.next(payload.data);

21
front/src/iframe_api.ts
View File

@ -9,6 +9,7 @@ import {ClosePopupEvent} from "./Api/Events/ClosePopupEvent";
import {OpenTabEvent} from "./Api/Events/OpenTabEvent"; import {OpenTabEvent} from "./Api/Events/OpenTabEvent";
import {GoToPageEvent} from "./Api/Events/GoToPageEvent"; import {GoToPageEvent} from "./Api/Events/GoToPageEvent";
import {OpenCoWebSiteEvent} from "./Api/Events/OpenCoWebSiteEvent"; import {OpenCoWebSiteEvent} from "./Api/Events/OpenCoWebSiteEvent";
import {LayerEvent} from "./Api/Events/LayerEvent";
interface WorkAdventureApi { interface WorkAdventureApi {
sendChatMessage(message: string, author: string): void; sendChatMessage(message: string, author: string): void;
@ -24,6 +25,8 @@ interface WorkAdventureApi {
restorePlayerControl() : void; restorePlayerControl() : void;
displayBubble() : void; displayBubble() : void;
removeBubble() : void; removeBubble() : void;
showLayer(layer: string) : void;
hideLayer(layer: string) : void;
} }
declare global { declare global {
@ -88,6 +91,24 @@ window.WA = {
} as ChatEvent } as ChatEvent
}, '*'); }, '*');
}, },
showLayer(layer: string) : void {
console.log('showLayer');
window.parent.postMessage({
'type' : 'showLayer',
'data' : {
'name' : layer
} as LayerEvent
}, '*');
},
hideLayer(layer: string) : void {
console.log('hideLayer');
window.parent.postMessage({
'type' : 'hideLayer',
'data' : {
'name' : layer
} as LayerEvent
}, '*');
},
disablePlayerControl() : void { disablePlayerControl() : void {
window.parent.postMessage({'type' : 'disablePlayerControl'},'*'); window.parent.postMessage({'type' : 'disablePlayerControl'},'*');
}, },

31
maps/tests/iframe.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script src="http://play.workadventure.localhost/iframe_api.js"></script> <script src="http://play.workadventure.localhost/iframe_api.js"></script>
<script> <script>
console.log('script');
</script> </script>
</head> </head>
<body> <body>
@ -21,5 +21,34 @@
document.getElementById('chatSent').append(chatDiv); document.getElementById('chatSent').append(chatDiv);
})); }));
</script> </script>
<div>
<label for="visibilityLayer">Metadata Layer</label><input type="checkbox" id="visibilityLayer" name="visible" value="show">
</div>
<script>
document.getElementById('visibilityLayer').onclick = () => {
if (document.getElementById('visibilityLayer').checked) {
WA.showLayer('Metadata');
console.log('show');
}
else {
WA.hideLayer('Metadata');
console.log('hide');
}
}
</script>
<!--<button id="showLayer">Show Layer</button>
<script>
document.getElementById('showLayer').onclick = () => {
WA.showLayer('Metadata');
console.log('show');
}
</script>
<button id="hideLayer">Hide Layer</button>
<script>
document.getElementById('hideLayer').onclick = () => {
WA.hideLayer('Metadata');
console.log('hide');
}
</script>-->
</body> </body>
</html> </html>

25
maps/tests/iframe_api.json
View File

@ -1,4 +1,11 @@
{ "compressionlevel":-1, { "compressionlevel":-1,
"editorsettings":
{
"export":
{
"target":"."
}
},
"height":10, "height":10,
"infinite":false, "infinite":false,
"layers":[ "layers":[
@ -49,6 +56,18 @@
"x":0, "x":0,
"y":0 "y":0
}, },
{
"data":[0, 0, 93, 0, 104, 0, 0, 0, 0, 0, 0, 0, 104, 0, 115, 0, 0, 0, 93, 0, 0, 0, 115, 0, 0, 0, 93, 0, 104, 0, 0, 0, 0, 0, 0, 0, 104, 0, 115, 93, 0, 0, 0, 0, 0, 0, 115, 0, 0, 104, 0, 0, 0, 0, 0, 0, 0, 0, 0, 115, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":6,
"name":"Metadata",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{ {
"draworder":"topdown", "draworder":"topdown",
"id":3, "id":3,
@ -78,11 +97,11 @@
"x":0, "x":0,
"y":0 "y":0
}], }],
"nextlayerid":6, "nextlayerid":7,
"nextobjectid":3, "nextobjectid":3,
"orientation":"orthogonal", "orientation":"orthogonal",
"renderorder":"right-down", "renderorder":"right-down",
"tiledversion":"2021.03.23", "tiledversion":"1.4.3",
"tileheight":32, "tileheight":32,
"tilesets":[ "tilesets":[
{ {
@ -100,6 +119,6 @@
}], }],
"tilewidth":32, "tilewidth":32,
"type":"map", "type":"map",
"version":1.5, "version":1.4,
"width":10 "width":10
} }