Merge branch 'update-game-tiles' into correct-merge

back/.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Example",
+            "type": "node",
+            "request": "launch",
+            "runtimeExecutable": "node",
+            "runtimeArgs": [
+                "--nolazy",
+                "-r",
+                "ts-node/register/transpile-only"
+            ],
+            "args": [
+                "server.ts",
+                "--example",
+                "hello"
+            ],
+            "cwd": "${workspaceRoot}",
+            "internalConsoleOptions": "openOnSessionStart",
+            "skipFiles": [
+                "<node_internals>/**",
+                "node_modules/**"
+            ]
+        }
+    ]
+}

front/src/Api/Events/ApiUpdateTileEvent.ts

@@ -0,0 +1,17 @@
+
+import * as tg from "generic-type-guard";
+export const updateTile = "updateTile"
+
+
+export const isUpdateTileEvent = tg.isArray(
+    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 UpdateTileEvent = tg.GuardedType<typeof isUpdateTileEvent>;

front/src/Api/Events/DataLayerEvent.ts

@@ -0,0 +1,13 @@
+import * as tg from "generic-type-guard";
+
+
+
+export const isDataLayerEvent =
+    new tg.IsInterface().withProperties({
+        data: tg.isObject
+    }).get();
+
+/**
+ * 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<typeof isDataLayerEvent>;

front/src/Api/Events/GameStateEvent.ts

@@ -0,0 +1,28 @@
+import * as tg from "generic-type-guard";
+
+/*export const isPositionState = new tg.IsInterface().withProperties({
+    x: tg.isNumber,
+    y: tg.isNumber
+}).get()
+export const isPlayerState = new tg.IsInterface()
+    .withStringIndexSignature(
+        new tg.IsInterface().withProperties({
+            position: isPositionState,
+            pusherId: tg.isUnion(tg.isNumber, tg.isUndefined)
+        }).get()
+    ).get()
+
+export type PlayerStateObject = tg.GuardedType<typeof isPlayerState>;*/
+
+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();
+/**
+ * A message sent from the game to the iFrame when the gameState is got by the script
+ */
+export type GameStateEvent = tg.GuardedType<typeof isGameStateEvent>;

front/src/Api/Events/HasPlayerMovedEvent.ts

@@ -0,0 +1,19 @@
+import * as tg from "generic-type-guard";
+
+
+
+export const isHasPlayerMovedEvent =
+    new tg.IsInterface().withProperties({
+        direction: tg.isString,
+        moving: tg.isBoolean,
+        x: tg.isNumber,
+        y: tg.isNumber
+    }).get();
+
+/**
+ * A message sent from the game to the iFrame when the player move after the iFrame send a message to the game that it want to listen to the position of the player
+ */
+export type HasPlayerMovedEvent = tg.GuardedType<typeof isHasPlayerMovedEvent>;
+
+
+export type HasPlayerMovedEventCallback = (event: HasPlayerMovedEvent) => void

front/src/Api/Events/IframeEvent.ts

@@ -11,6 +11,8 @@ import type { OpenTabEvent } from './OpenTabEvent';
 import type { UserInputChatEvent } from './UserInputChatEvent';
 import type { LoadSoundEvent } from "./LoadSoundEvent";
 import type { PlaySoundEvent } from "./PlaySoundEvent";
+import type { LoadPageEvent } from "./LoadPageEvent";
+import type { UpdateTileEvent } from "./ApiUpdateTileEvent";
 
 
 export interface TypedMessageEvent<T> extends MessageEvent {
@@ -34,6 +36,8 @@ export type IframeEventMap = {
     loadSound: LoadSoundEvent
     playSound: PlaySoundEvent
     stopSound: null
+    loadPage: LoadPageEvent
+    updateTile: UpdateTileEvent
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

front/src/Api/Events/LayerEvent.ts

@@ -0,0 +1,10 @@
+import * as tg from "generic-type-guard";
+
+export const isLayerEvent =
+    new tg.IsInterface().withProperties({
+        name: tg.isString,
+    }).get();
+/**
+ * A message sent from the iFrame to the game to show/hide a layer.
+ */
+export type LayerEvent = tg.GuardedType<typeof isLayerEvent>;

front/src/Api/Events/LoadPageEvent.ts

@@ -0,0 +1,13 @@
+import * as tg from "generic-type-guard";
+
+
+
+export const isLoadPageEvent =
+    new tg.IsInterface().withProperties({
+        url: tg.isString,
+    }).get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type LoadPageEvent = tg.GuardedType<typeof isLoadPageEvent>;

front/src/Api/Events/setPropertyEvent.ts

@@ -0,0 +1,12 @@
+import * as tg from "generic-type-guard";
+
+export const isSetPropertyEvent =
+    new tg.IsInterface().withProperties({
+        layerName: tg.isString,
+        propertyName: tg.isString,
+        propertyValue: tg.isUnion(tg.isString, tg.isUnion(tg.isNumber, tg.isUnion(tg.isBoolean, tg.isUndefined)))
+    }).get();
+/**
+ * A message sent from the iFrame to the game to change the value of the property of the layer
+ */
+export type SetPropertyEvent = tg.GuardedType<typeof isSetPropertyEvent>;

front/src/Api/IframeListener.ts

@@ -15,6 +15,9 @@ import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
 import { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
 import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
 import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
+import { isLoadPageEvent } from './Events/LoadPageEvent';
+import { isUpdateTileEvent, UpdateTileEvent } from './Events/ApiUpdateTileEvent';
+
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -32,6 +35,9 @@ class IframeListener {
     private readonly _goToPageStream: Subject<GoToPageEvent> = new Subject();
     public readonly goToPageStream = this._goToPageStream.asObservable();
 
+    private readonly _loadPageStream: Subject<string> = new Subject();
+    public readonly loadPageStream = this._loadPageStream.asObservable();
+
     private readonly _openCoWebSiteStream: Subject<OpenCoWebSiteEvent> = new Subject();
     public readonly openCoWebSiteStream = this._openCoWebSiteStream.asObservable();
 
@@ -62,6 +68,9 @@ class IframeListener {
     private readonly _loadSoundStream: Subject<LoadSoundEvent> = new Subject();
     public readonly loadSoundStream = this._loadSoundStream.asObservable();
 
+    private readonly _updateTileEvent: Subject<UpdateTileEvent> = new Subject();
+    public readonly updateTileEvent = this._updateTileEvent.asObservable();
+
     private readonly iframes = new Set<HTMLIFrameElement>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
 
@@ -128,6 +137,10 @@ class IframeListener {
                 }
                 else if (payload.type === 'removeBubble') {
                     this._removeBubbleStream.next();
+                } else if (payload.type === 'loadPage' && isLoadPageEvent(payload.data)) {
+                    this._loadPageStream.next(payload.data.url);
+                } else if (payload.type == "updateTile" && isUpdateTileEvent(payload.data)) {
+                    this._updateTileEvent.next(payload.data)
                 }
             }
 

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";
@@ -895,7 +896,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.Layers.find(layer => layer.layer.name == 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(() => {
@@ -910,6 +939,19 @@ ${escapedMessage}
 
     }
 
+    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

@@ -167,7 +167,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)
@@ -175,6 +175,11 @@ export interface ITiledTileSet {
     source: string;
 }
 
+export interface ITile {
+    id: number,
+    type?: string
+}
+
 export interface ITiledMapTerrain {
     name: string;
     tile: number;

front/src/Phaser/Map/LayersFlattener.ts

@@ -0,0 +1,21 @@
+import type {ITiledMap, ITiledMapLayer} from "./ITiledMap";
+
+/**
+ * Flatten the grouped layers
+ */
+export function flattenGroupLayersMap(map: ITiledMap) {
+    const flatLayers: ITiledMapLayer[] = [];
+    flattenGroupLayers(map.layers, '', flatLayers);
+    return flatLayers;
+}
+
+function flattenGroupLayers(layers : ITiledMapLayer[], prefix : string, flatLayers: ITiledMapLayer[]) {
+    for (const layer of layers) {
+        if (layer.type === 'group') {
+            flattenGroupLayers(layer.layers, prefix + layer.name + '/', flatLayers);
+        } else {
+            layer.name = prefix+layer.name
+            flatLayers.push(layer);
+        }
+    }
+}

front/src/iframe_api.ts

@@ -13,6 +13,7 @@ import type {PlaySoundEvent} from "./Api/Events/PlaySoundEvent";
 import type  {StopSoundEvent } from "./Api/Events/StopSoundEvent";
 import type { LoadSoundEvent } from "./Api/Events/LoadSoundEvent";
 import SoundConfig = Phaser.Types.Sound.SoundConfig;
+import type { LoadPageEvent } from './Api/Events/LoadPageEvent';
 
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;
@@ -22,6 +23,7 @@ interface WorkAdventureApi {
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
     openTab(url : string): void;
     goToPage(url : string): void;
+    loadPage(url : string): void;
     openCoWebSite(url : string): void;
     closeCoWebSite(): void;
     disablePlayerControls(): void;
@@ -166,6 +168,15 @@ window.WA = {
         }, '*');
     },
 
+    loadPage(url : string) : void{
+        window.parent.postMessage({
+            "type" : 'loadPage',
+            "data" : {
+                url
+            } as LoadPageEvent
+            },'*');
+    },
+
     openCoWebSite(url : string) : void{
         window.parent.postMessage({
             "type" : 'openCoWebSite',

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)});

pusher/.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Pusher",
+            "type": "node",
+            "request": "launch",
+            "runtimeExecutable": "node",
+            "runtimeArgs": [
+                "--nolazy",
+                "-r",
+                "ts-node/register/transpile-only"
+            ],
+            "args": [
+                "server.ts",
+                "--example",
+                "hello"
+            ],
+            "cwd": "${workspaceRoot}",
+            "internalConsoleOptions": "openOnSessionStart",
+            "skipFiles": [
+                "<node_internals>/**",
+                "node_modules/**"
+            ]
+        }
+    ]
+}