adding error log if name of square in Tile not matching with the param targetObject of OpenPopup in script.js

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<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
-    private popUpX! : number;
+    private objectLayerPopUp! : ITiledMapObject;
-    private popUpY! : number;
-    private popUpWidth! : number;
-    private popUpHeight! : number;
 
     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 = `<div id="container" <div class="nes-container with-title is-centered" 
 >
@@ -765,15 +763,17 @@ ${escapedMessage}
                 html += `<button type="button" class="nes-btn is-${HtmlUtils.escapeHtml(button.className ?? '')}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(button.label)}</button>`;
                 id++;
             }
-            const domElement = this.add.dom(this.popUpX + this.popUpWidth/2 ,
+            const domElement = this.add.dom(objectLayerSquare.x  + objectLayerSquare.width/2 ,
-                this.popUpY + this.popUpHeight/2).createFromHTML(html);
+                objectLayerSquare.y + objectLayerSquare.height/2).createFromHTML(html);
 
             let container : HTMLDivElement =  domElement.getChildByID("container") as HTMLDivElement;
-            container.style.width = this.popUpWidth + "px";
+            container.style.width = objectLayerSquare.width + "px";
-            container.style.height = this.popUpHeight + "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<HTMLButtonElement>(`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);

front/src/iframe_api.ts

@@ -81,10 +81,9 @@ window.WA = {
         popupId++;
 
         const popup = new Popup(popupId);
-
         const btnMap = new Map<number, () => void>();
         popupCallbacks.set(popupId, btnMap);
-
+        targetObject = "tutoBobble";
         let id = 0;
         for (const button of buttons) {
             const callback = button.callback;

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,
+                 "width":82.9428274100469,
-                 "x":275.392367109435,
+                 "x":1.31712507985543,
-                 "y":141.649957637921
+                 "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":[
         {