WIP API updates for tutorial and more

front/src/Api/Events/EmbeddedWebsiteEvent.ts

@@ -22,6 +22,8 @@ export const isEmbeddedWebsiteEvent = new tg.IsInterface()
         y: tg.isNumber,
         width: tg.isNumber,
         height: tg.isNumber,
+        origin: tg.isSingletonStringUnion("player", "map"),
+        scale: tg.isNumber,
     })
     .get();
 
@@ -35,6 +37,8 @@ export const isCreateEmbeddedWebsiteEvent = new tg.IsInterface()
         visible: tg.isBoolean,
         allowApi: tg.isBoolean,
         allow: tg.isString,
+        origin: tg.isSingletonStringUnion("player", "map"),
+        scale: tg.isNumber,
     })
     .get();
 

front/src/Api/Events/IframeEvent.ts

@@ -215,6 +215,7 @@ export const isIframeQuery = (event: any): event is IframeQuery<keyof IframeQuer
     const result = iframeQueryMapTypeGuards[type].query(event.data);
     if (!result) {
         console.warn('Received a query with type "' + type + '" but the payload is invalid.');
+        console.log(event);
     }
     return result;
 };

front/src/Api/iframe/Room/EmbeddedWebsite.ts

@@ -12,6 +12,8 @@ export class EmbeddedWebsite {
     private _allow: string;
     private _allowApi: boolean;
     private _position: Rectangle;
+    private readonly origin: "map" | "player" | undefined;
+    private _scale: number | undefined;
 
     constructor(private config: CreateEmbeddedWebsiteEvent) {
         this.name = config.name;
@@ -20,6 +22,12 @@ export class EmbeddedWebsite {
         this._allow = config.allow ?? "";
         this._allowApi = config.allowApi ?? false;
         this._position = config.position;
+        this.origin = config.origin;
+        this._scale = config.scale;
+    }
+
+    public get url() {
+        return this._url;
     }
 
     public set url(url: string) {
@@ -33,6 +41,10 @@ export class EmbeddedWebsite {
         });
     }
 
+    public get visible() {
+        return this._visible;
+    }
+
     public set visible(visible: boolean) {
         this._visible = visible;
         sendToWorkadventure({
@@ -44,6 +56,10 @@ export class EmbeddedWebsite {
         });
     }
 
+    public get x() {
+        return this._position.x;
+    }
+
     public set x(x: number) {
         this._position.x = x;
         sendToWorkadventure({
@@ -55,6 +71,10 @@ export class EmbeddedWebsite {
         });
     }
 
+    public get y() {
+        return this._position.y;
+    }
+
     public set y(y: number) {
         this._position.y = y;
         sendToWorkadventure({
@@ -66,6 +86,10 @@ export class EmbeddedWebsite {
         });
     }
 
+    public get width() {
+        return this._position.width;
+    }
+
     public set width(width: number) {
         this._position.width = width;
         sendToWorkadventure({
@@ -77,6 +101,10 @@ export class EmbeddedWebsite {
         });
     }
 
+    public get height() {
+        return this._position.height;
+    }
+
     public set height(height: number) {
         this._position.height = height;
         sendToWorkadventure({
@@ -87,4 +115,19 @@ export class EmbeddedWebsite {
             },
         });
     }
+
+    public get scale() {
+        return this._scale;
+    }
+
+    public set scale(scale: number) {
+        this._scale = scale;
+        sendToWorkadventure({
+            type: "modifyEmbeddedWebsite",
+            data: {
+                name: this.name,
+                scale: this._scale,
+            },
+        });
+    }
 }

front/src/Api/iframe/website.ts

@@ -1,8 +1,4 @@
-import type { LoadSoundEvent } from "../Events/LoadSoundEvent";
-import type { PlaySoundEvent } from "../Events/PlaySoundEvent";
-import type { StopSoundEvent } from "../Events/StopSoundEvent";
 import { IframeApiContribution, queryWorkadventure, sendToWorkadventure } from "./IframeApiContribution";
-import { Sound } from "./Sound/Sound";
 import { EmbeddedWebsite } from "./Room/EmbeddedWebsite";
 import type { CreateEmbeddedWebsiteEvent } from "../Events/EmbeddedWebsiteEvent";
 

front/src/Phaser/Game/EmbeddedWebsiteManager.ts

@@ -29,6 +29,7 @@ export class EmbeddedWebsiteManager {
                     width: rect["width"],
                     height: rect["height"],
                 },
+                origin: website.origin,
             };
         });
 
@@ -59,7 +60,9 @@ export class EmbeddedWebsiteManager {
                     createEmbeddedWebsiteEvent.position.height,
                     createEmbeddedWebsiteEvent.visible ?? true,
                     createEmbeddedWebsiteEvent.allowApi ?? false,
-                    createEmbeddedWebsiteEvent.allow ?? ""
+                    createEmbeddedWebsiteEvent.allow ?? "",
+                    createEmbeddedWebsiteEvent.origin ?? "map",
+                    createEmbeddedWebsiteEvent.scale ?? 1
                 );
             }
         );
@@ -112,6 +115,10 @@ export class EmbeddedWebsiteManager {
                 if (embeddedWebsiteEvent?.height !== undefined) {
                     website.iframe.style.height = embeddedWebsiteEvent.height + "px";
                 }
+
+                if (embeddedWebsiteEvent?.scale !== undefined) {
+                    website.phaserObject.scale = embeddedWebsiteEvent.scale;
+                }
             }
         );
     }
@@ -125,7 +132,9 @@ export class EmbeddedWebsiteManager {
         height: number,
         visible: boolean,
         allowApi: boolean,
-        allow: string
+        allow: string,
+        origin: "map" | "player" | undefined,
+        scale: number | undefined
     ): void {
         if (this.embeddedWebsites.has(name)) {
             throw new Error('An embedded website with the name "' + name + '" already exists in your map');
@@ -147,6 +156,8 @@ export class EmbeddedWebsiteManager {
                 width,
                 height,
             },
+            origin,
+            scale,
         };
 
         const embeddedWebsite = this.doCreateEmbeddedWebsite(embeddedWebsiteEvent, visible);
@@ -169,14 +180,41 @@ export class EmbeddedWebsiteManager {
         iframe.style.padding = "0";
         iframe.style.border = "none";
 
-        const embeddedWebsite = {
+        let embeddedWebsite;
-            ...embeddedWebsiteEvent,
+        let domElement;
-            phaserObject: this.gameScene.add
+
-                .dom(embeddedWebsiteEvent.position.x, embeddedWebsiteEvent.position.y, iframe)
+        switch (embeddedWebsiteEvent.origin) {
-                .setVisible(visible)
+            case "player":
-                .setOrigin(0, 0),
+                domElement = new DOMElement(
-            iframe: iframe,
+                    this.gameScene,
-        };
+                    embeddedWebsiteEvent.position.x,
+                    embeddedWebsiteEvent.position.y,
+                    iframe
+                );
+                if (embeddedWebsiteEvent.scale) {
+                    domElement.scale = embeddedWebsiteEvent.scale;
+                }
+                this.gameScene.CurrentPlayer.add(domElement);
+
+                embeddedWebsite = {
+                    ...embeddedWebsiteEvent,
+                    phaserObject: domElement,
+                    iframe: iframe,
+                };
+
+                break;
+            case "map":
+            default:
+                embeddedWebsite = {
+                    ...embeddedWebsiteEvent,
+                    phaserObject: this.gameScene.add
+                        .dom(embeddedWebsiteEvent.position.x, embeddedWebsiteEvent.position.y, iframe)
+                        .setVisible(visible)
+                        .setOrigin(0, 0),
+                    iframe: iframe,
+                };
+        }
+
         if (embeddedWebsiteEvent.allowApi) {
             iframeListener.registerIframe(iframe);
         }

front/src/Phaser/Game/GameScene.ts

@@ -523,7 +523,9 @@ export class GameScene extends DirtyScene {
                             object.height,
                             object.visible,
                             allowApi ?? false,
-                            ""
+                            "",
+                            "map",
+                            1
                         );
                     }
                 }

maps/tests/EmbeddedWebsite/website_in_map_script.php

@@ -15,6 +15,8 @@
                 const heightField = document.getElementById('height');
                 const urlField = document.getElementById('url');
                 const visibleField = document.getElementById('visible');
+                const originField = document.getElementById('origin');
+                const scaleField = document.getElementById('scale');
 
                 createButton.addEventListener('click', () => {
                     console.log('CREATING NEW EMBEDDED IFRAME');
@@ -28,6 +30,8 @@
                             height: parseInt(heightField.value),
                         },
                         visible: !!visibleField.value,
+                        origin: originField.value,
+                        scale: parseFloat(scaleField.value),
                     });
                 });
 
@@ -61,6 +65,16 @@
                     const website = await WA.room.website.get('test');
                     website.visible = this.checked;
                 });
+
+                originField.addEventListener('change', async function() {
+                    const website = await WA.room.website.get('test');
+                    website.origin = this.value;
+                });
+
+                scaleField.addEventListener('change', async function() {
+                    const website = await WA.room.website.get('test');
+                    website.scale = parseFloat(this.value);
+                });
             });
         })
     </script>
@@ -72,6 +86,8 @@ width: <input type="text" id="width" value="600" /><br/>
 height: <input type="text" id="height" value="400" /><br/>
 URL: <input type="text" id="url" value="https://mensuel.framapad.org/p/rt6c904745-9oxm?lang=en" /><br/>
 Visible: <input type="checkbox" id="visible" value=1 /><br/>
+Origin: <input type="text" id="origin" value="map" /><br/>
+Scale: <input type="text" id="scale" value=1 /><br/>
 
 <button id="createEmbeddedWebsite">Create embedded website</button>