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

implementation of DataLayerEvent

Browse source 
update GetGameState to add nickname to the returned data
update GameMap to separate phaserLayer and mapLayer
This commit is contained in:
GRL 2021-05-18 15:41:16 +02:00
parent 201fcf6afa
commit aa78bf44ef
10 changed files with 94 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
front/src/Api/Events/DataLayerEvent.ts
View file

@ -2,7 +2,7 @@ import * as tg from "generic-type-guard";
export const isHasDataLayerChangedEvent =
export const isDataLayerEvent =
new tg.IsInterface().withProperties({
data: tg.isObject
}).get();
@ -10,7 +10,4 @@ export const isHasDataLayerChangedEvent =
/**
* A message sent from the game to the iFrame when the data of the layers change after the iFrame send a message to the game that it want to listen to the data of the layers
*/
export type DataLayerEvent = tg.GuardedType<typeof isHasDataLayerChangedEvent>;
export type HasDataLayerChangedEventCallback = (event: DataLayerEvent) => void
export type DataLayerEvent = tg.GuardedType<typeof isDataLayerEvent>;

1
front/src/Api/Events/GameStateEvent.ts
View file

@ -18,6 +18,7 @@ export const isGameStateEvent =
new tg.IsInterface().withProperties({
roomId: tg.isString,
mapUrl: tg.isString,
nickname: tg.isUnion(tg.isString, tg.isNull),
uuid: tg.isUnion(tg.isString, tg.isUndefined),
startLayerName: tg.isUnion(tg.isString, tg.isNull)
}).get();

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

@ -10,7 +10,7 @@ import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
import type { OpenPopupEvent } from './OpenPopupEvent';
import type { OpenTabEvent } from './OpenTabEvent';
import type { UserInputChatEvent } from './UserInputChatEvent';
import type { HasDataLayerChangedEvent } from "./HasDataLayerChangedEvent";
import type { DataLayerEvent } from "./DataLayerEvent";
import type { LayerEvent } from './LayerEvent';
import type { SetPropertyEvent } from "./setPropertyEvent";
@ -37,6 +37,7 @@ export type IframeEventMap = {
showLayer: LayerEvent
hideLayer: LayerEvent
setProperty: SetPropertyEvent
getDataLayer: undefined
}
export interface IframeEvent<T extends keyof IframeEventMap> {
type: T;
@ -54,7 +55,7 @@ export interface IframeResponseEventMap {
buttonClickedEvent: ButtonClickedEvent
gameState: GameStateEvent
hasPlayerMoved: HasPlayerMovedEvent
hasDataLayerChanged: HasDataLayerChangedEvent
dataLayer: DataLayerEvent
}
export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
type: T;

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

@ -13,11 +13,10 @@ import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMa
import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
import { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
import { isSetPropertyEvent, SetPropertyEvent} from "./Events/setPropertyEvent";
import { GameStateEvent } from './Events/GameStateEvent';
import { deepFreezeClone as deepFreezeClone } from '../utility';
import { HasPlayerMovedEvent } from './Events/HasPlayerMovedEvent';
import type { GameStateEvent } from './Events/GameStateEvent';
import type { HasPlayerMovedEvent } from './Events/HasPlayerMovedEvent';
import { Math } from 'phaser';
import { HasDataLayerChangedEvent } from "./Events/HasDataLayerChangedEvent";
import type { DataLayerEvent } from "./Events/DataLayerEvent";
@ -72,11 +71,12 @@ class IframeListener {
private readonly _gameStateStream: Subject<void> = new Subject();
public readonly gameStateStream = this._gameStateStream.asObservable();
private readonly _dataLayerChangeStream: Subject<void> = new Subject();
public readonly dataLayerChangeStream = this._dataLayerChangeStream.asObservable();
private readonly iframes = new Set<HTMLIFrameElement>();
private readonly scripts = new Map<string, HTMLIFrameElement>();
private sendPlayerMove: boolean = false;
private sendDataLayerChange: boolean = false;
init() {
window.addEventListener("message", (message: TypedMessageEvent<IframeEvent<keyof IframeEventMap>>) => {
@ -138,21 +138,26 @@ class IframeListener {
this._gameStateStream.next();
} else if (payload.type == "onPlayerMove") {
this.sendPlayerMove = true
} else if (payload.type == "onDataLayerChange") {
this.sendDataLayerChange = true
} else if (payload.type == "getDataLayer") {
this._dataLayerChangeStream.next();
}
}
}, false);
}
sendDataLayerEvent(dataLayerEvent: DataLayerEvent) {
this.postMessage({
'type' : 'dataLayer',
'data' : dataLayerEvent
})
}
sendFrozenGameStateEvent(gameStateEvent: GameStateEvent) {
this.postMessage({
'type': 'gameState',
'data': gameStateEvent //deepFreezeClone(gameStateEvent)
'data': gameStateEvent
});
}
@ -268,15 +273,6 @@ class IframeListener {
}
}
hasDataLayerChanged(event: HasDataLayerChangedEvent) {
if (this.sendDataLayerChange) {
this.postMessage({
'type' : 'hasDataLayerChanged',
'data' : event
});
}
}
sendButtonClickedEvent(popupId: number, buttonId: number): void {
this.postMessage({
'type': 'buttonClickedEvent',

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

@ -1,5 +1,7 @@
import type {ITiledMap, ITiledMapLayer, ITiledMapTileLayer} from "../Map/ITiledMap";
import { flattenGroupLayersMap } from "../Map/LayersFlattener";
import {iframeListener} from "../../Api/IframeListener";
import TilemapLayer = Phaser.Tilemaps.TilemapLayer;
export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void;
@ -12,13 +14,14 @@ export class GameMap {
private lastProperties = new Map<string, string|boolean|number>();
private callbacks = new Map<string, Array<PropertyChangeCallback>>();
public readonly flatLayers: ITiledMapLayer[];
public readonly phaserLayers: TilemapLayer[] = [];
public constructor(private map: ITiledMap, phaserMap: Phaser.Tilemaps.Tilemap, terrains: Array<Phaser.Tilemaps.Tileset>) {
this.flatLayers = flattenGroupLayersMap(map);
let depth = -2;
for (const layer of this.flatLayers) {
if(layer.type === 'tilelayer'){
layer.phaserLayer = phaserMap.createLayer(layer.name, terrains, 0, 0).setDepth(depth);
this.phaserLayers.push(phaserMap.createLayer(layer.name, terrains, 0, 0).setDepth(depth));
}
if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
depth = 10000;
@ -89,6 +92,10 @@ export class GameMap {
return properties;
}
public getMap(): ITiledMap{
return this.map;
}
private trigger(propName: string, oldValue: string | number | boolean | undefined, newValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) {
const callbacksArray = this.callbacks.get(propName);
if (callbacksArray !== undefined) {
@ -127,4 +134,21 @@ export class GameMap {
return undefined;
}
public findPhaserLayer(layerName: string): TilemapLayer | undefined {
let i = 0;
let found = false;
while (!found && i<this.flatLayers.length) {
if (this.flatLayers[i].name === layerName) {
found = true;
}
else {
i++;
}
}
if (found) {
return this.phaserLayers[i];
}
return undefined;
}
}

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

@ -1,4 +1,4 @@
import {gameManager, HasMovedEvent} from "./GameManager";
import {gameManager} from "./GameManager";
import type {
GroupCreatedUpdatedMessageInterface,
MessageUserJoined,
@ -91,9 +91,7 @@ import { touchScreenManager } from "../../Touch/TouchScreenManager";
import { PinchManager } from "../UserInput/PinchManager";
import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick";
import { waScaleManager } from "../Services/WaScaleManager";
import { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
import {LayerEvent} from "../../Api/Events/LayerEvent";
import {SetPropertyEvent} from "../../Api/Events/setPropertyEve
import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
export interface GameSceneInitInterface {
initPosition: PointInterface | null,
@ -869,6 +867,7 @@ ${escapedMessage}
mapUrl: this.MapUrlFile,
startLayerName: this.startLayerName,
uuid: localUserStore.getLocalUser()?.uuid,
nickname: localUserStore.getName(),
roomId: this.RoomId,
})
}));
@ -896,6 +895,10 @@ ${escapedMessage}
this.setPropertyLayer(setProperty.layerName, setProperty.propertyName, setProperty.propertyValue);
}));
this.iframeSubscriptionList.push(iframeListener.dataLayerChangeStream.subscribe(() => {
iframeListener.sendDataLayerEvent({data: this.gameMap.getMap()});
}))
}
private setPropertyLayer(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {
@ -909,21 +912,21 @@ ${escapedMessage}
layer.properties = [];
layer.properties.push({name : propertyName, type : typeof propertyValue, value : propertyValue});
return;
}
property.value = propertyValue;
}
property.value = propertyValue;
}
private setLayerVisibility(layerName: string, visible: boolean): void {
const layer = this.gameMap.findLayer(layerName);
if (layer === 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(layer.type != "tilelayer"){
if(phaserlayer.type != "tilelayer"){
console.warn('The layer "' + layerName + '" is not a tilelayer. It can not be show/hide');
return;
}
layer.phaserLayer?.setVisible(visible);
phaserlayer.setVisible(visible);
this.dirty = true;
}
@ -1131,18 +1134,15 @@ ${escapedMessage}
this.physics.disableUpdate();
this.physicsEnabled = false;
//add collision layer
for (const Layer of this.gameMap.flatLayers) {
if (Layer.type == "tilelayer") {
if (Layer.phaserLayer === undefined) {
throw new Error('phaserLayer of layer "' + Layer.name + '" is undefined');
}
this.physics.add.collider(this.CurrentPlayer, Layer.phaserLayer, (object1: GameObject, object2: GameObject) => {
for (const phaserLayer of this.gameMap.phaserLayers) {
if (phaserLayer.type == "tilelayer") {
this.physics.add.collider(this.CurrentPlayer, phaserLayer, (object1: GameObject, object2: GameObject) => {
//this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
});
Layer.phaserLayer.setCollisionByProperty({collides: true});
phaserLayer.setCollisionByProperty({collides: true});
if (DEBUG_MODE) {
//debug code to see the collision hitbox of the object in the top layer
Layer.phaserLayer.renderDebug(this.add.graphics(), {
phaserLayer.renderDebug(this.add.graphics(), {
tileColor: null, //non-colliding tiles
collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles,
faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges

1
front/src/Phaser/Game/PlayerMovement.ts
View file

@ -1,4 +1,3 @@
import type {HasMovedEvent} from "./GameManager";
import { MAX_EXTRAPOLATION_TIME } from "../../Enum/EnvironmentVariable";
import type { PositionInterface } from "../../Connexion/ConnexionModels";
import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';

5
front/src/Phaser/Map/LayersFlattener.ts
View file

@ -14,9 +14,8 @@ function flattenGroupLayers(layers : ITiledMapLayer[], prefix : string, flatLaye
if (layer.type === 'group') {
flattenGroupLayers(layer.layers, prefix + layer.name + '/', flatLayers);
} else {
const layerWithNewName = { ...layer };
layerWithNewName.name = prefix+layerWithNewName.name;
flatLayers.push(layerWithNewName);
layer.name = prefix+layer.name
flatLayers.push(layer);
}
}
}

36
front/src/iframe_api.ts
View file

@ -13,7 +13,7 @@ import type { LayerEvent } from "./Api/Events/LayerEvent";
import type { SetPropertyEvent } from "./Api/Events/setPropertyEvent";
import { GameStateEvent, isGameStateEvent } from './Api/Events/GameStateEvent';
import { HasPlayerMovedEvent, HasPlayerMovedEventCallback, isHasPlayerMovedEvent } from './Api/Events/HasPlayerMovedEvent';
import { HasDataLayerChangedEvent, HasDataLayerChangedEventCallback, isHasDataLayerChangedEvent} from "./Api/Events/HasDataLayerChangedEvent";
import { DataLayerEvent, isDataLayerEvent } from "./Api/Events/DataLayerEvent";
interface WorkAdventureApi {
sendChatMessage(message: string, author: string): void;
@ -40,10 +40,11 @@ interface WorkAdventureApi {
getUuid(): Promise<string | undefined>;
getRoomId(): Promise<string>;
getStartLayerName(): Promise<string | null>;
getNickName(): Promise<string | null>;
onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void
onDataLayerChange(callback: (dataLayerChangedEvent: HasDataLayerChangedEvent) => void): void
getDataLayer(): Promise<DataLayerEvent>
}
declare global {
@ -105,7 +106,7 @@ function getGameState(): Promise<GameStateEvent> {
}
else {
return new Promise<GameStateEvent>((resolver, thrower) => {
stateResolvers.push(resolver);
gameStateResolver.push(resolver);
window.parent.postMessage({
type: "getState"
}, "*")
@ -113,11 +114,11 @@ function getGameState(): Promise<GameStateEvent> {
}
}
const stateResolvers: Array<(event: GameStateEvent) => void> = []
const gameStateResolver: Array<(event: GameStateEvent) => void> = []
const dataLayerResolver: Array<(event: DataLayerEvent) => void> = []
let immutableData: GameStateEvent;
const callbackPlayerMoved: { [type: string]: HasPlayerMovedEventCallback | ((arg?: HasPlayerMovedEvent | never) => void) } = {}
const callbackDataLayerChanged: { [type: string]: HasDataLayerChangedEventCallback | ((arg?: HasDataLayerChangedEvent | never) => void) } = {}
function postToParent(content: IframeEvent<keyof IframeEventMap>) {
@ -136,14 +137,21 @@ window.WA = {
})
},
onDataLayerChange(callback: HasDataLayerChangedEventCallback): void {
callbackDataLayerChanged['test'] = callback;
postToParent({
type : "onDataLayerChange",
data: undefined
getDataLayer(): Promise<DataLayerEvent> {
return new Promise<DataLayerEvent>((resolver, thrower) => {
dataLayerResolver.push(resolver);
postToParent({
type: "getDataLayer",
data: undefined
})
})
},
getNickName() {
return getGameState().then((res) => {
return res.nickname;
})
},
getMapUrl() {
return getGameState().then((res) => {
@ -345,14 +353,16 @@ window.addEventListener('message', message => {
callback(popup);
}
} else if (payload.type == "gameState" && isGameStateEvent(payloadData)) {
stateResolvers.forEach(resolver => {
gameStateResolver.forEach(resolver => {
resolver(payloadData);
})
immutableData = payloadData;
} else if (payload.type == "hasPlayerMoved" && isHasPlayerMovedEvent(payloadData) && playerUuid) {
callbackPlayerMoved[playerUuid](payloadData)
} else if (payload.type == "hasDataLayerChanged" && isHasDataLayerChangedEvent(payloadData)) {
callbackDataLayerChanged['test'](payloadData)
} else if (payload.type == "dataLayer" && isDataLayerEvent(payloadData)) {
dataLayerResolver.forEach(resolver => {
resolver(payloadData);
})
}
}

10
maps/tests/Metadata/script.js
View file

@ -1,9 +1,9 @@
WA.getMapUrl().then((map) => {console.log('mapUrl : ', map)});
/*WA.getMapUrl().then((map) => {console.log('mapUrl : ', map)});
WA.getUuid().then((uuid) => {console.log('Uuid : ',uuid)});
WA.getRoomId().then((roomId) => console.log('roomID : ',roomId));
WA.listenPositionPlayer(console.log);
WA.getRoomId().then((roomId) => console.log('roomID : ',roomId));*/
//WA.onPlayerMove(console.log);
WA.setProperty('metadata', 'openWebsite', 'https://fr.wikipedia.org/');
WA.getDataLayer().then((data) => {console.log('data 1 : ', data)});