From aa78bf44eff5becdcfc954bcb29f46cdbd16bd52 Mon Sep 17 00:00:00 2001 From: GRL Date: Tue, 18 May 2021 15:41:16 +0200 Subject: [PATCH] implementation of DataLayerEvent update GetGameState to add nickname to the returned data update GameMap to separate phaserLayer and mapLayer --- front/src/Api/Events/DataLayerEvent.ts | 7 ++--- front/src/Api/Events/GameStateEvent.ts | 1 + front/src/Api/Events/IframeEvent.ts | 5 ++-- front/src/Api/IframeListener.ts | 34 +++++++++++------------ front/src/Phaser/Game/GameMap.ts | 26 +++++++++++++++++- front/src/Phaser/Game/GameScene.ts | 36 ++++++++++++------------- front/src/Phaser/Game/PlayerMovement.ts | 1 - front/src/Phaser/Map/LayersFlattener.ts | 5 ++-- front/src/iframe_api.ts | 36 ++++++++++++++++--------- maps/tests/Metadata/script.js | 10 +++---- 10 files changed, 94 insertions(+), 67 deletions(-) diff --git a/front/src/Api/Events/DataLayerEvent.ts b/front/src/Api/Events/DataLayerEvent.ts index 8d2ffa23..096d6ef5 100644 --- a/front/src/Api/Events/DataLayerEvent.ts +++ b/front/src/Api/Events/DataLayerEvent.ts @@ -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; - - -export type HasDataLayerChangedEventCallback = (event: DataLayerEvent) => void \ No newline at end of file +export type DataLayerEvent = tg.GuardedType; \ No newline at end of file diff --git a/front/src/Api/Events/GameStateEvent.ts b/front/src/Api/Events/GameStateEvent.ts index 418d1ca0..72e40898 100644 --- a/front/src/Api/Events/GameStateEvent.ts +++ b/front/src/Api/Events/GameStateEvent.ts @@ -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(); diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 3ba5529f..e267fe90 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -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 { type: T; @@ -54,7 +55,7 @@ export interface IframeResponseEventMap { buttonClickedEvent: ButtonClickedEvent gameState: GameStateEvent hasPlayerMoved: HasPlayerMovedEvent - hasDataLayerChanged: HasDataLayerChangedEvent + dataLayer: DataLayerEvent } export interface IframeResponseEvent { type: T; diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index 48441d34..600ff0a6 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -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 = new Subject(); public readonly gameStateStream = this._gameStateStream.asObservable(); + private readonly _dataLayerChangeStream: Subject = new Subject(); + public readonly dataLayerChangeStream = this._dataLayerChangeStream.asObservable(); private readonly iframes = new Set(); private readonly scripts = new Map(); private sendPlayerMove: boolean = false; - private sendDataLayerChange: boolean = false; init() { window.addEventListener("message", (message: TypedMessageEvent>) => { @@ -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', diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts index 0c5d804a..f95bfa0f 100644 --- a/front/src/Phaser/Game/GameMap.ts +++ b/front/src/Phaser/Game/GameMap.ts @@ -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) => void; @@ -12,13 +14,14 @@ export class GameMap { private lastProperties = new Map(); private callbacks = new Map>(); public readonly flatLayers: ITiledMapLayer[]; + public readonly phaserLayers: TilemapLayer[] = []; public constructor(private map: ITiledMap, phaserMap: Phaser.Tilemaps.Tilemap, terrains: Array) { 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) { 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 { + 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 diff --git a/front/src/Phaser/Game/PlayerMovement.ts b/front/src/Phaser/Game/PlayerMovement.ts index b70124b3..2369b86b 100644 --- a/front/src/Phaser/Game/PlayerMovement.ts +++ b/front/src/Phaser/Game/PlayerMovement.ts @@ -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'; diff --git a/front/src/Phaser/Map/LayersFlattener.ts b/front/src/Phaser/Map/LayersFlattener.ts index 3ea8a449..c5092779 100644 --- a/front/src/Phaser/Map/LayersFlattener.ts +++ b/front/src/Phaser/Map/LayersFlattener.ts @@ -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); } } } \ No newline at end of file diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts index 6734388f..a2fbb70b 100644 --- a/front/src/iframe_api.ts +++ b/front/src/iframe_api.ts @@ -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; getRoomId(): Promise; getStartLayerName(): Promise; + getNickName(): Promise; onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void - onDataLayerChange(callback: (dataLayerChangedEvent: HasDataLayerChangedEvent) => void): void + getDataLayer(): Promise } declare global { @@ -105,7 +106,7 @@ function getGameState(): Promise { } else { return new Promise((resolver, thrower) => { - stateResolvers.push(resolver); + gameStateResolver.push(resolver); window.parent.postMessage({ type: "getState" }, "*") @@ -113,11 +114,11 @@ function getGameState(): Promise { } } -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) { @@ -136,14 +137,21 @@ window.WA = { }) }, - onDataLayerChange(callback: HasDataLayerChangedEventCallback): void { - callbackDataLayerChanged['test'] = callback; - postToParent({ - type : "onDataLayerChange", - data: undefined + getDataLayer(): Promise { + return new Promise((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); + }) } } diff --git a/maps/tests/Metadata/script.js b/maps/tests/Metadata/script.js index f3ac255a..c857d783 100644 --- a/maps/tests/Metadata/script.js +++ b/maps/tests/Metadata/script.js @@ -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)}); \ No newline at end of file