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

Implementation of getTag of the current user

Browse source 
documentation of getTag
Adding map for test of getTag
This commit is contained in:
GRL 2021-05-20 10:57:36 +02:00
parent 96545c618a
commit 2f9cc393a7
9 changed files with 354 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
docs/maps/api-reference.md
View file

@ -370,3 +370,18 @@ WA.registerMenuCommand('help', () => {
WA.onChatMessage ...
});
```
### Getting the list of tags of the current user
```
getTagUser(): Promise<string[]>
```
Return the list of all the tags that has the current user. If the current user has no tag, return an empty list. If there is no connection with the room, return nothing.
Example :
```javascript
WA.getTagUser().then((tagList) => {
...
});
```

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

@ -15,6 +15,7 @@ import type { UserInputChatEvent } from './UserInputChatEvent';
import type { DataLayerEvent } from "./DataLayerEvent";
import type { LayerEvent } from './LayerEvent';
import type { SetPropertyEvent } from "./setPropertyEvent";
import type { TagEvent } from "./TagEvent";
export interface TypedMessageEvent<T> extends MessageEvent {
data: T
@ -36,11 +37,11 @@ export type IframeEventMap = {
displayBubble: null
removeBubble: null
onPlayerMove: undefined
onDataLayerChange: undefined
showLayer: LayerEvent
hideLayer: LayerEvent
setProperty: SetPropertyEvent
getDataLayer: undefined
getTag: undefined
}
export interface IframeEvent<T extends keyof IframeEventMap> {
type: T;
@ -60,6 +61,7 @@ export interface IframeResponseEventMap {
hasPlayerMoved: HasPlayerMovedEvent
dataLayer: DataLayerEvent
menuItemClicked: MenuItemClickedEvent
tagList: TagEvent
}
export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
type: T;

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

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

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

@ -19,6 +19,7 @@ import { Math } from 'phaser';
import type { DataLayerEvent } from "./Events/DataLayerEvent";
import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
import type { TagEvent } from "./Events/TagEvent";
/**
@ -77,6 +78,10 @@ class IframeListener {
private readonly _registerMenuCommandStream: Subject<string> = new Subject();
public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
private readonly _tagListStream: Subject<string> = new Subject();
public readonly tagListStream = this._tagListStream.asObservable();
private readonly iframes = new Set<HTMLIFrameElement>();
private readonly scripts = new Map<string, HTMLIFrameElement>();
private sendPlayerMove: boolean = false;
@ -145,12 +150,21 @@ class IframeListener {
this._dataLayerChangeStream.next();
} else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) {
this._registerMenuCommandStream.next(payload.data.menutItem)
} else if (payload.type == "getTag") {
this._tagListStream.next();
}
}
}, false);
}
sendUserTagList(tagList: TagEvent){
this.postMessage({
'type' : 'tagList',
'data' : tagList
})
}
sendDataLayerEvent(dataLayerEvent: DataLayerEvent) {
this.postMessage({
'type' : 'dataLayer',

7
front/src/Connexion/RoomConnection.ts
View file

@ -598,4 +598,11 @@ export class RoomConnection implements RoomConnection {
public isAdmin(): boolean {
return this.hasTag('admin');
}
public getAllTag() : string[] {
this.tags.push('TEST');
this.tags.push('TEST 2');
this.tags.push('TEST 3');
return this.tags;
}
}

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

@ -903,6 +903,13 @@ ${escapedMessage}
iframeListener.sendDataLayerEvent({data: this.gameMap.getMap()});
}))
this.iframeSubscriptionList.push(iframeListener.tagListStream.subscribe(()=> {
if (this.connection === undefined) {
return;
}
iframeListener.sendUserTagList({list: this.connection.getAllTag()});
}))
}
private setPropertyLayer(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {

27
front/src/iframe_api.ts
View file

@ -17,6 +17,7 @@ import { DataLayerEvent, isDataLayerEvent } from "./Api/Events/DataLayerEvent";
import type { ITiledMap } from "./Phaser/Map/ITiledMap";
import type { MenuItemRegisterEvent } from "./Api/Events/MenuItemRegisterEvent";
import { isMenuItemClickedEvent } from "./Api/Events/MenuItemClickedEvent";
import {TagEvent, isTagEvent} from "./Api/Events/TagEvent";
interface WorkAdventureApi {
sendChatMessage(message: string, author: string): void;
@ -45,10 +46,10 @@ interface WorkAdventureApi {
getRoomId(): Promise<string>;
getStartLayerName(): Promise<string | null>;
getNickName(): Promise<string | null>;
getTagUser(): Promise<string[]>;
getMap(): Promise<ITiledMap>
onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void
getMap(): Promise<ITiledMap>
}
declare global {
@ -128,8 +129,19 @@ function getDataLayer(): Promise<DataLayerEvent> {
})
}
function getTag(): Promise<TagEvent> {
return new Promise<TagEvent>((resolver, thrower) => {
tagResolver.push((resolver));
postToParent({
type: "getTag",
data: undefined
})
})
}
const gameStateResolver: Array<(event: GameStateEvent) => void> = []
const dataLayerResolver: Array<(event: DataLayerEvent) => void> = []
const tagResolver: Array<(event : TagEvent) => void> = []
let immutableData: GameStateEvent;
const callbackPlayerMoved: { [type: string]: HasPlayerMovedEventCallback | ((arg?: HasPlayerMovedEvent | never) => void) } = {}
@ -151,6 +163,11 @@ window.WA = {
})
},
getTagUser(): Promise<string[]> {
return getTag().then((res) => {
return res.list;
})
},
getMap(): Promise<ITiledMap> {
return getDataLayer().then((res) => {
@ -389,6 +406,12 @@ window.addEventListener('message', message => {
if (callback) {
callback(payload.data.menuItem)
}
} else {
if (payload.type == "tagList" && isTagEvent(payloadData)) {
tagResolver.forEach(resolver => {
resolver(payloadData);
})
}
}
}

19
maps/tests/Metadata/TagList.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<script src="http://play.workadventure.localhost/iframe_api.js"></script>
</head>
<body>
<button id="getTagList">Get Tag List</button>
<script>
document.getElementById('getTagList').onclick = () => {
WA.getTagUser().then((res) => {
const tagListDiv = document.createElement('p');
tagListDiv.innerText = res;
document.getElementById('tagList').append(tagListDiv);
})
}
</script>
<div id="tagList"></div>
</body>
</html>

254
maps/tests/Metadata/TagList.json Normal file
View file

@ -0,0 +1,254 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 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, 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, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":1,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
"height":10,
"id":2,
"name":"bottom",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 128, 128, 128, 128, 128, 0, 0, 0, 0, 0, 128, 128, 128, 128, 128, 0, 0, 0, 0, 0, 128, 128, 128, 128, 128, 0, 0, 0, 0, 0, 128, 128, 128, 128, 128, 0, 0, 0, 0, 0, 128, 128, 128, 128, 128, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":4,
"name":"metadata",
"opacity":1,
"properties":[
{
"name":"openWebsite",
"type":"string",
"value":"TagList.html"
},
{
"name":"openWebsiteAllowApi",
"type":"bool",
"value":true
}],
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":5,
"name":"floorLayer",
"objects":[
{
"height":131.903791109293,
"id":1,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":9,
"text":"Test : \nWalk on the grass, an iframe open, click on the 'Get Tag List' button.\nResult : \nThe list of the tag is displayed in the iframe.\n\n\n",
"wrap":true
},
"type":"",
"visible":true,
"width":305.097705765524,
"x":14.750638909983,
"y":188.268561247737
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":10,
"nextobjectid":2,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.4.3",
"tileheight":32,
"tilesets":[
{
"columns":8,
"firstgid":1,
"image":"tileset_dungeon.png",
"imageheight":256,
"imagewidth":256,
"margin":0,
"name":"TDungeon",
"spacing":0,
"tilecount":64,
"tileheight":32,
"tiles":[
{
"id":0,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":1,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":2,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":3,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":4,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":8,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":9,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":10,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":11,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":12,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":16,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":17,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":18,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":19,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
},
{
"id":20,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
}],
"tilewidth":32
},
{
"columns":8,
"firstgid":65,
"image":"floortileset.png",
"imageheight":288,
"imagewidth":256,
"margin":0,
"name":"Floor",
"spacing":0,
"tilecount":72,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.4,
"width":10
}