diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 47d3cf3b..b7358af7 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -167,10 +167,7 @@ export class GameScene extends ResizableScene implements CenterListener { private playerName!: string; private characterLayers!: string[]; private popUpElements : Map = new Map(); - private popUpX! : number; - private popUpY! : number; - private popUpWidth! : number; - private popUpHeight! : number; + private objectLayerPopUp! : ITiledMapObject; constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) { super({ @@ -384,14 +381,6 @@ export class GameScene extends ResizableScene implements CenterListener { } if (layer.type === 'objectgroup' && layer.name === 'floorLayer') { depth = 10000; - for (const object of layer.objects) { - if (object.name === 'myPopup') { - this.popUpX = Math.floor(object.x); - this.popUpY = Math.floor(object.y); - this.popUpWidth = Math.floor(object.width); - this.popUpHeight = Math.floor(object.height); - } - } } } if (depth === -2) { @@ -746,15 +735,24 @@ export class GameScene extends ResizableScene implements CenterListener { this.gameMap.onPropertyChange('zone', (newValue, oldValue) => { if (newValue === undefined || newValue === false || newValue === '') { iframeListener.sendLeaveEvent(oldValue as string); + } else { + console.log(newValue); iframeListener.sendEnterEvent(newValue as string); } }); - } private listenToIframeEvents(): void { iframeListener.openPopupStream.subscribe((openPopupEvent) => { + let objectLayerSquare : ITiledMapObject; + if (this.getObjectLayerData(openPopupEvent.targetObject) !== undefined){ + objectLayerSquare = this.getObjectLayerData(openPopupEvent.targetObject) as ITiledMapObject; + } + else{ + console.error("The name of your square is not mathing with your param targetObject, check the two names. ") + return; + } const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message); let html = `
@@ -765,15 +763,17 @@ ${escapedMessage} html += ``; id++; } - const domElement = this.add.dom(this.popUpX + this.popUpWidth/2 , - this.popUpY + this.popUpHeight/2).createFromHTML(html); + const domElement = this.add.dom(objectLayerSquare.x + objectLayerSquare.width/2 , + objectLayerSquare.y + objectLayerSquare.height/2).createFromHTML(html); let container : HTMLDivElement = domElement.getChildByID("container") as HTMLDivElement; - container.style.width = this.popUpWidth + "px"; - container.style.height = this.popUpHeight + "px"; + container.style.width = objectLayerSquare.width + "px"; + container.style.height = objectLayerSquare.height + "px"; domElement.scale = 0; domElement.setClassName('popUpElement'); + + id = 0; for (const button of openPopupEvent.buttons) { const button = HtmlUtils.getElementByIdOrFail(`popup-${openPopupEvent.popupId}-${id}`); @@ -1332,7 +1332,23 @@ ${escapedMessage} bottom: camera.scrollY + camera.height, }); } + private getObjectLayerData(objectName : string) : ITiledMapObject| undefined{ + for (const layer of this.mapFile.layers) { + if (layer.type === 'objectgroup' && layer.name === 'floorLayer') { + for (const object of layer.objects) { + if (object.name === objectName) { + console.log("je return l'object"); + return object; + } + else continue; + } + } + } + console.log("je return undefined"); + return undefined; + + } private reposition(): void { this.presentationModeSprite.setY(this.game.renderer.height - 2); this.chatModeSprite.setY(this.game.renderer.height - 2); diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts index b8bbecfe..72cb3d32 100644 --- a/front/src/iframe_api.ts +++ b/front/src/iframe_api.ts @@ -81,10 +81,9 @@ window.WA = { popupId++; const popup = new Popup(popupId); - const btnMap = new Map void>(); popupCallbacks.set(popupId, btnMap); - + targetObject = "tutoBobble"; let id = 0; for (const button of buttons) { const callback = button.callback; diff --git a/maps/tests/script_api.json b/maps/tests/script_api.json index 7889877d..fd5cda9c 100644 --- a/maps/tests/script_api.json +++ b/maps/tests/script_api.json @@ -75,15 +75,26 @@ "name":"floorLayer", "objects":[ { - "height":162.662798398032, + "height":120.885497146101, "id":1, - "name":"myPopup", + "name":"tutoChat", "rotation":0, "type":"", "visible":true, - "width":16.3413326605909, - "x":275.392367109435, - "y":141.649957637921 + "width":82.9428274100469, + "x":1.31712507985543, + "y":141.448134926559 + }, + { + "height":169.934722966794, + "id":2, + "name":"tutoBobble", + "rotation":0, + "type":"", + "visible":true, + "width":125.735549178518, + "x":105.149632619596, + "y":11.1002491249093 }], "opacity":1, "type":"objectgroup", @@ -92,7 +103,7 @@ "y":0 }], "nextlayerid":8, - "nextobjectid":2, + "nextobjectid":3, "orientation":"orthogonal", "properties":[ {