Merge branch 'correct-merge' into metadataScriptAPIV2

front/src/Api/Events/ChangeTileEvent.ts

@@ -0,0 +1,13 @@
+import * as tg from "generic-type-guard";
+
+export const isChangeTileEvent =
+    new tg.IsInterface().withProperties({
+        x: tg.isNumber,
+        y: tg.isNumber,
+        tile: tg.isUnion(tg.isNumber, tg.isString),
+        layer: tg.isUnion(tg.isNumber, tg.isString)
+    }).get();
+/**
+ * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
+ */
+export type ChangeTileEvent = tg.GuardedType<typeof isChangeTileEvent>;

front/src/Api/Events/IframeEvent.ts

@@ -17,6 +17,7 @@ import type { LayerEvent } from './LayerEvent';
 import type { SetPropertyEvent } from "./setPropertyEvent";
 import type { LoadSoundEvent } from "./LoadSoundEvent";
 import type { PlaySoundEvent } from "./PlaySoundEvent";
+import type { ChangeTileEvent } from "./ChangeTileEvent";
 
 
 export interface TypedMessageEvent<T> extends MessageEvent {
@@ -46,6 +47,7 @@ export type IframeEventMap = {
     loadSound: LoadSoundEvent
     playSound: PlaySoundEvent
     stopSound: null
+    changeTile: ChangeTileEvent
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

front/src/Api/IframeListener.ts

@@ -24,6 +24,7 @@ import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
 import { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
 import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
 import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
+import { isChangeTileEvent, ChangeTileEvent } from './Events/ChangeTileEvent';
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -93,6 +94,9 @@ class IframeListener {
     private readonly _loadSoundStream: Subject<LoadSoundEvent> = new Subject();
     public readonly loadSoundStream = this._loadSoundStream.asObservable();
 
+    private readonly _changeTileStream: Subject<ChangeTileEvent> = new Subject();
+    public readonly changeTileStream = this._changeTileStream.asObservable();
+
     private readonly iframes = new Set<HTMLIFrameElement>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
     private sendPlayerMove: boolean = false;
@@ -172,8 +176,8 @@ class IframeListener {
                     this._dataLayerChangeStream.next();
                 } else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) {
                     this._registerMenuCommandStream.next(payload.data.menutItem)
-/*              } else if (payload.type == "tilsetEvent" && isTilesetEvent(payload.data)) {
+                } else if (payload.type == "changeTile" && isChangeTileEvent(payload.data)) {
-                    this._tilesetLoaderStream.next(payload.data);*/
+                    this._changeTileStream.next(payload.data);
                 }
             }
         }, false);

front/src/Phaser/Game/GameScene.ts

@@ -81,6 +81,7 @@ import CanvasTexture = Phaser.Textures.CanvasTexture;
 import GameObject = Phaser.GameObjects.GameObject;
 import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import DOMElement = Phaser.GameObjects.DOMElement;
+import EVENT_TYPE = Phaser.Scenes.Events
 import type { Subscription } from "rxjs";
 import { worldFullMessageStream } from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
@@ -887,7 +888,35 @@ ${escapedMessage}
 
        this.iframeSubscriptionList.push(iframeListener.enablePlayerControlStream.subscribe(()=>{
             this.userInputManager.restoreControls();
-        }));
+        }))
+
+/*        this.iframeSubscriptionList.push(iframeListener.loadPageStream.subscribe((url: string) => {
+            this.loadNextGame(url).then(() => {
+                this.events.once(EVENT_TYPE.POST_UPDATE, () => {
+                    this.onMapExit(url);
+                })
+            })
+        }))*/
+
+        this.iframeSubscriptionList.push(iframeListener.updateTileEvent.subscribe(event => {
+            for (const eventTile of event) {
+                const layer = this.gameMap.findPhaserLayer(eventTile.layer);
+                if (layer) {
+                    const tile = layer.getTileAt(eventTile.x, eventTile.y)
+                    if (typeof eventTile.tile == "string") {
+                        const tileIndex = this.getIndexForTileType(eventTile.tile);
+                        if (tileIndex) {
+                            tile.index = tileIndex
+                        } else {
+                            return
+                        }
+                    } else {
+                        tile.index = eventTile.tile
+                    }
+                }
+            }
+            this.scene.scene.sys.game.events.emit("contextrestored")
+        }))
 
         let scriptedBubbleSprite: Sprite;
         this.iframeSubscriptionList.push(iframeListener.displayBubbleStream.subscribe(() => {
@@ -961,6 +990,18 @@ ${escapedMessage}
         this.dirty = true;
     }
 
+    private getIndexForTileType(tileType: string): number | null {
+            for (const tileset of this.mapFile.tilesets) {
+                if (tileset.tiles) {
+                    for (const tilesetTile of tileset.tiles) {
+                        if (tilesetTile.type == tileType) {
+                            return tileset.firstgid + tilesetTile.id
+                        }
+                    }
+                }
+            }
+            return null
+        }
 
     private getMapDirUrl(): string {
         return this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/'));

front/src/Phaser/Map/ITiledMap.ts

@@ -170,7 +170,7 @@ export interface ITiledTileSet {
     tilewidth: number;
     transparentcolor: string;
     terrains: ITiledMapTerrain[];
-    tiles: {[key: string]: { terrain: number[] }};
+    tiles: Array<ITile>;
 
     /**
      * Refers to external tileset file (should be JSON)
@@ -178,6 +178,11 @@ export interface ITiledTileSet {
     source: string;
 }
 
+export interface ITile {
+    id: number,
+    type?: string
+}
+
 export interface ITiledMapTerrain {
     name: string;
     tile: number;

maps/tests/Metadata/map.json

@@ -0,0 +1,230 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":1,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 33, 34, 34, 34, 34, 34, 34, 35, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 49, 50, 50, 50, 50, 50, 50, 51, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46],
+         "height":10,
+         "id":2,
+         "name":"bottom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 52, 52, 0, 0, 0, 0, 0, 0, 0, 52, 52, 52, 0, 0, 0, 0, 0, 0, 0, 52, 52, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":4,
+         "name":"metadata",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":5,
+         "name":"floorLayer",
+         "objects":[],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 17, 18, 18, 18, 18, 18, 18, 18, 18, 19],
+         "height":10,
+         "id":3,
+         "name":"wall",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":6,
+ "nextobjectid":1,
+ "orientation":"orthogonal",
+ "properties":[
+        {
+         "name":"script",
+         "type":"string",
+         "value":"script.js"
+        }],
+ "renderorder":"right-down",
+ "tiledversion":"1.4.3",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":8,
+         "firstgid":1,
+         "image":"tileset_dungeon.png",
+         "imageheight":256,
+         "imagewidth":256,
+         "margin":0,
+         "name":"TDungeon",
+         "spacing":0,
+         "tilecount":64,
+         "tileheight":32,
+         "tiles":[
+                {
+                 "id":0,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":1,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":2,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":3,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":4,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":8,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":9,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":10,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":11,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":12,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":16,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":17,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":18,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":19,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":20,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }],
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.4,
+ "width":10
+}

maps/tests/Metadata/script.js

@@ -0,0 +1,9 @@
+
+
+/*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.onPlayerMove(console.log);
+WA.setProperty('metadata', 'openWebsite', 'https://fr.wikipedia.org/');
+WA.getDataLayer().then((data) => {console.log('data 1 : ', data)});