Merge branch 'develop' of github.com:thecodingmachine/workadventure into GlobalMessageToWorld

front/src/Phaser/Game/AddPlayerInterface.ts

@@ -1,5 +1,5 @@
-import type {PointInterface} from "../../Connexion/ConnexionModels";
-import type {PlayerInterface} from "./PlayerInterface";
+import type { PointInterface } from "../../Connexion/ConnexionModels";
+import type { PlayerInterface } from "./PlayerInterface";
 
 export interface AddPlayerInterface extends PlayerInterface {
     position: PointInterface;

front/src/Phaser/Game/GameMap.ts

@@ -1,4 +1,4 @@
-import type { ITiledMap, ITiledMapLayer, ITiledMapLayerProperty } from "../Map/ITiledMap";
+import type { ITiledMap, ITiledMapLayer, ITiledMapProperty } from "../Map/ITiledMap";
 import { flattenGroupLayersMap } from "../Map/LayersFlattener";
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer;
 import { DEPTH_OVERLAY_INDEX } from "./DepthIndexes";
@@ -19,7 +19,7 @@ export class GameMap {
     private callbacks = new Map<string, Array<PropertyChangeCallback>>();
     private tileNameMap = new Map<string, number>();
 
-    private tileSetPropertyMap: { [tile_index: number]: Array<ITiledMapLayerProperty> } = {};
+    private tileSetPropertyMap: { [tile_index: number]: Array<ITiledMapProperty> } = {};
     public readonly flatLayers: ITiledMapLayer[];
     public readonly phaserLayers: TilemapLayer[] = [];
 
@@ -61,7 +61,7 @@ export class GameMap {
         }
     }
 
-    public getPropertiesForIndex(index: number): Array<ITiledMapLayerProperty> {
+    public getPropertiesForIndex(index: number): Array<ITiledMapProperty> {
         if (this.tileSetPropertyMap[index]) {
             return this.tileSetPropertyMap[index];
         }
@@ -151,7 +151,7 @@ export class GameMap {
         return this.map;
     }
 
-    private getTileProperty(index: number): Array<ITiledMapLayerProperty> {
+    private getTileProperty(index: number): Array<ITiledMapProperty> {
         if (this.tileSetPropertyMap[index]) {
             return this.tileSetPropertyMap[index];
         }

front/src/Phaser/Game/GameScene.ts

@@ -46,13 +46,7 @@ import { RemotePlayer } from "../Entity/RemotePlayer";
 import type { ActionableItem } from "../Items/ActionableItem";
 import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface";
 import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene";
-import type {
-    ITiledMap,
-    ITiledMapLayer,
-    ITiledMapLayerProperty,
-    ITiledMapObject,
-    ITiledTileSet,
-} from "../Map/ITiledMap";
+import type { ITiledMap, ITiledMapLayer, ITiledMapProperty, ITiledMapObject, ITiledTileSet } from "../Map/ITiledMap";
 import { MenuScene, MenuSceneName } from "../Menu/MenuScene";
 import { PlayerAnimationDirections } from "../Player/Animation";
 import { hasMovedEventName, Player, requestEmoteEventName } from "../Player/Player";
@@ -90,6 +84,7 @@ import { soundManager } from "./SoundManager";
 import { peerStore, screenSharingPeerStore } from "../../Stores/PeerStore";
 import { videoFocusStore } from "../../Stores/VideoFocusStore";
 import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
+import { SharedVariablesManager } from "./SharedVariablesManager";
 import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
 
@@ -200,7 +195,8 @@ export class GameScene extends DirtyScene {
     private mapTransitioning: boolean = false; //used to prevent transitions happenning at the same time.
     private emoteManager!: EmoteManager;
     private preloading: boolean = true;
-    startPositionCalculator!: StartPositionCalculator;
+    private startPositionCalculator!: StartPositionCalculator;
+    private sharedVariablesManager!: SharedVariablesManager;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
         super({
@@ -715,6 +711,13 @@ export class GameScene extends DirtyScene {
                     this.gameMap.setPosition(event.x, event.y);
                 });
 
+                // Set up variables manager
+                this.sharedVariablesManager = new SharedVariablesManager(
+                    this.connection,
+                    this.gameMap,
+                    onConnect.room.variables
+                );
+
                 //this.initUsersPosition(roomJoinedMessage.users);
                 this.connectionAnswerPromiseResolve(onConnect.room);
                 // Analyze tags to find if we are admin. If yes, show console.
@@ -1050,20 +1053,24 @@ ${escapedMessage}
             })
         );
 
-        this.iframeSubscriptionList.push(
-            iframeListener.dataLayerChangeStream.subscribe(() => {
-                iframeListener.sendDataLayerEvent({ data: this.gameMap.getMap() });
-            })
-        );
+        iframeListener.registerAnswerer("getMapData", () => {
+            return {
+                data: this.gameMap.getMap(),
+            };
+        });
 
-        iframeListener.registerAnswerer("getState", () => {
+        iframeListener.registerAnswerer("getState", async () => {
+            // The sharedVariablesManager is not instantiated before the connection is established. So we need to wait
+            // for the connection to send back the answer.
+            await this.connectionAnswerPromise;
             return {
                 mapUrl: this.MapUrlFile,
                 startLayerName: this.startPositionCalculator.startLayerName,
                 uuid: localUserStore.getLocalUser()?.uuid,
-                nickname: localUserStore.getName(),
+                nickname: this.playerName,
                 roomId: this.roomUrl,
                 tags: this.connection ? this.connection.getAllTags() : [],
+                variables: this.sharedVariablesManager.variables,
             };
         });
         this.iframeSubscriptionList.push(
@@ -1194,6 +1201,7 @@ ${escapedMessage}
         this.chatVisibilityUnsubscribe();
         this.biggestAvailableAreaStoreUnsubscribe();
         iframeListener.unregisterAnswerer("getState");
+        this.sharedVariablesManager?.close();
 
         mediaManager.hideGameOverlay();
 
@@ -1233,12 +1241,12 @@ ${escapedMessage}
     }
 
     private getProperty(layer: ITiledMapLayer | ITiledMap, name: string): string | boolean | number | undefined {
-        const properties: ITiledMapLayerProperty[] | undefined = layer.properties;
+        const properties: ITiledMapProperty[] | undefined = layer.properties;
         if (!properties) {
             return undefined;
         }
         const obj = properties.find(
-            (property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()
+            (property: ITiledMapProperty) => property.name.toLowerCase() === name.toLowerCase()
         );
         if (obj === undefined) {
             return undefined;
@@ -1247,12 +1255,12 @@ ${escapedMessage}
     }
 
     private getProperties(layer: ITiledMapLayer | ITiledMap, name: string): (string | number | boolean | undefined)[] {
-        const properties: ITiledMapLayerProperty[] | undefined = layer.properties;
+        const properties: ITiledMapProperty[] | undefined = layer.properties;
         if (!properties) {
             return [];
         }
         return properties
-            .filter((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase())
+            .filter((property: ITiledMapProperty) => property.name.toLowerCase() === name.toLowerCase())
             .map((property) => property.value);
     }
 
@@ -1710,7 +1718,7 @@ ${escapedMessage}
         this.scene.start(ErrorSceneName, {
             title: "Banned",
             subTitle: "You were banned from WorkAdventure",
-            message: "If you want more information, you may contact us at: workadventure@thecodingmachine.com",
+            message: "If you want more information, you may contact us at: hello@workadventu.re",
         });
     }
 
@@ -1725,14 +1733,14 @@ ${escapedMessage}
             this.scene.start(ErrorSceneName, {
                 title: "Connection rejected",
                 subTitle: "The world you are trying to join is full. Try again later.",
-                message: "If you want more information, you may contact us at: workadventure@thecodingmachine.com",
+                message: "If you want more information, you may contact us at: hello@workadventu.re",
             });
         } else {
             this.scene.start(ErrorSceneName, {
                 title: "Connection rejected",
                 subTitle: "You cannot join the World. Try again later. \n\r \n\r Error: " + message + ".",
                 message:
-                    "If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com",
+                    "If you want more information, you may contact administrator or contact us at: hello@workadventu.re",
             });
         }
     }

front/src/Phaser/Game/SharedVariablesManager.ts

@@ -0,0 +1,159 @@
+import type { RoomConnection } from "../../Connexion/RoomConnection";
+import { iframeListener } from "../../Api/IframeListener";
+import type { Subscription } from "rxjs";
+import type { GameMap } from "./GameMap";
+import type { ITile, ITiledMapObject } from "../Map/ITiledMap";
+import type { Var } from "svelte/types/compiler/interfaces";
+import { init } from "svelte/internal";
+
+interface Variable {
+    defaultValue: unknown;
+    readableBy?: string;
+    writableBy?: string;
+}
+
+/**
+ * Stores variables and provides a bridge between scripts and the pusher server.
+ */
+export class SharedVariablesManager {
+    private _variables = new Map<string, unknown>();
+    private variableObjects: Map<string, Variable>;
+
+    constructor(
+        private roomConnection: RoomConnection,
+        private gameMap: GameMap,
+        serverVariables: Map<string, unknown>
+    ) {
+        // We initialize the list of variable object at room start. The objects cannot be edited later
+        // (otherwise, this would cause a security issue if the scripting API can edit this list of objects)
+        this.variableObjects = SharedVariablesManager.findVariablesInMap(gameMap);
+
+        // Let's initialize default values
+        for (const [name, variableObject] of this.variableObjects.entries()) {
+            if (variableObject.readableBy && !this.roomConnection.hasTag(variableObject.readableBy)) {
+                // Do not initialize default value for variables that are not readable
+                continue;
+            }
+
+            this._variables.set(name, variableObject.defaultValue);
+        }
+
+        // Override default values with the variables from the server:
+        for (const [name, value] of serverVariables) {
+            this._variables.set(name, value);
+        }
+
+        roomConnection.onSetVariable((name, value) => {
+            this._variables.set(name, value);
+
+            // On server change, let's notify the iframes
+            iframeListener.setVariable({
+                key: name,
+                value: value,
+            });
+        });
+
+        // When a variable is modified from an iFrame
+        iframeListener.registerAnswerer("setVariable", (event) => {
+            const key = event.key;
+
+            const object = this.variableObjects.get(key);
+
+            if (object === undefined) {
+                const errMsg =
+                    'A script is trying to modify variable "' +
+                    key +
+                    '" but this variable is not defined in the map.' +
+                    'There should be an object in the map whose name is "' +
+                    key +
+                    '" and whose type is "variable"';
+                console.error(errMsg);
+                throw new Error(errMsg);
+            }
+
+            if (object.writableBy && !this.roomConnection.hasTag(object.writableBy)) {
+                const errMsg =
+                    'A script is trying to modify variable "' +
+                    key +
+                    '" but this variable is only writable for users with tag "' +
+                    object.writableBy +
+                    '".';
+                console.error(errMsg);
+                throw new Error(errMsg);
+            }
+
+            this._variables.set(key, event.value);
+
+            // Dispatch to the room connection.
+            this.roomConnection.emitSetVariableEvent(key, event.value);
+        });
+    }
+
+    private static findVariablesInMap(gameMap: GameMap): Map<string, Variable> {
+        const objects = new Map<string, Variable>();
+        for (const layer of gameMap.getMap().layers) {
+            if (layer.type === "objectgroup") {
+                for (const object of layer.objects) {
+                    if (object.type === "variable") {
+                        if (object.template) {
+                            console.warn(
+                                'Warning, a variable object is using a Tiled "template". WorkAdventure does not support objects generated from Tiled templates.'
+                            );
+                        }
+
+                        // We store a copy of the object (to make it immutable)
+                        objects.set(object.name, this.iTiledObjectToVariable(object));
+                    }
+                }
+            }
+        }
+        return objects;
+    }
+
+    private static iTiledObjectToVariable(object: ITiledMapObject): Variable {
+        const variable: Variable = {
+            defaultValue: undefined,
+        };
+
+        if (object.properties) {
+            for (const property of object.properties) {
+                const value = property.value;
+                switch (property.name) {
+                    case "default":
+                        variable.defaultValue = value;
+                        break;
+                    case "writableBy":
+                        if (typeof value !== "string") {
+                            throw new Error(
+                                'The writableBy property of variable "' + object.name + '" must be a string'
+                            );
+                        }
+                        if (value) {
+                            variable.writableBy = value;
+                        }
+                        break;
+                    case "readableBy":
+                        if (typeof value !== "string") {
+                            throw new Error(
+                                'The readableBy property of variable "' + object.name + '" must be a string'
+                            );
+                        }
+                        if (value) {
+                            variable.readableBy = value;
+                        }
+                        break;
+                }
+            }
+        }
+
+        return variable;
+    }
+
+    public close(): void {
+        iframeListener.unregisterAnswerer("setVariable");
+    }
+
+    get variables(): Map<string, unknown> {
+        return this._variables;
+    }
+}

front/src/Phaser/Game/StartPositionCalculator.ts

@@ -1,5 +1,5 @@
 import type { PositionInterface } from "../../Connexion/ConnexionModels";
-import type { ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledMapTileLayer } from "../Map/ITiledMap";
+import type { ITiledMap, ITiledMapLayer, ITiledMapProperty, ITiledMapTileLayer } from "../Map/ITiledMap";
 import type { GameMap } from "./GameMap";
 
 const defaultStartLayerName = "start";
@@ -112,12 +112,12 @@ export class StartPositionCalculator {
     }
 
     private getProperty(layer: ITiledMapLayer | ITiledMap, name: string): string | boolean | number | undefined {
-        const properties: ITiledMapLayerProperty[] | undefined = layer.properties;
+        const properties: ITiledMapProperty[] | undefined = layer.properties;
         if (!properties) {
             return undefined;
         }
         const obj = properties.find(
-            (property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()
+            (property: ITiledMapProperty) => property.name.toLowerCase() === name.toLowerCase()
         );
         if (obj === undefined) {
             return undefined;

front/src/Phaser/Login/EntryScene.ts

@@ -1,8 +1,8 @@
-import {gameManager} from "../Game/GameManager";
-import {Scene} from "phaser";
-import {ErrorScene} from "../Reconnecting/ErrorScene";
-import {WAError} from "../Reconnecting/WAError";
-import {waScaleManager} from "../Services/WaScaleManager";
+import { gameManager } from "../Game/GameManager";
+import { Scene } from "phaser";
+import { ErrorScene } from "../Reconnecting/ErrorScene";
+import { WAError } from "../Reconnecting/WAError";
+import { waScaleManager } from "../Services/WaScaleManager";
 
 export const EntrySceneName = "EntryScene";
 
@@ -13,26 +13,32 @@ export const EntrySceneName = "EntryScene";
 export class EntryScene extends Scene {
     constructor() {
         super({
-            key: EntrySceneName
+            key: EntrySceneName,
         });
     }
 
     create() {
-
-        gameManager.init(this.scene).then((nextSceneName) => {
-            // Let's rescale before starting the game
-            // We can do it at this stage.
-            waScaleManager.applyNewSize();
-            this.scene.start(nextSceneName);
-        }).catch((err) => {
-            if (err.response && err.response.status == 404) {
-                ErrorScene.showError(new WAError(
-                    'Access link incorrect', 
-                    'Could not find map. Please check your access link.', 
-                    'If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com'), this.scene);
-            } else {
-                ErrorScene.showError(err, this.scene);
-            }
-        });
+        gameManager
+            .init(this.scene)
+            .then((nextSceneName) => {
+                // Let's rescale before starting the game
+                // We can do it at this stage.
+                waScaleManager.applyNewSize();
+                this.scene.start(nextSceneName);
+            })
+            .catch((err) => {
+                if (err.response && err.response.status == 404) {
+                    ErrorScene.showError(
+                        new WAError(
+                            "Access link incorrect",
+                            "Could not find map. Please check your access link.",
+                            "If you want more information, you may contact administrator or contact us at: hello@workadventu.re"
+                        ),
+                        this.scene
+                    );
+                } else {
+                    ErrorScene.showError(err, this.scene);
+                }
+            });
     }
 }

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -1,25 +1,25 @@
-import {gameManager} from "../Game/GameManager";
+import { gameManager } from "../Game/GameManager";
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {EnableCameraSceneName} from "./EnableCameraScene";
-import {CustomizeSceneName} from "./CustomizeScene";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
-import {addLoader} from "../Components/Loader";
-import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
-import {AbstractCharacterScene} from "./AbstractCharacterScene";
-import {areCharacterLayersValid} from "../../Connexion/LocalUser";
-import {touchScreenManager} from "../../Touch/TouchScreenManager";
-import {PinchManager} from "../UserInput/PinchManager";
-import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
-import {waScaleManager} from "../Services/WaScaleManager";
-import {isMobile} from "../../Enum/EnvironmentVariable";
+import { EnableCameraSceneName } from "./EnableCameraScene";
+import { CustomizeSceneName } from "./CustomizeScene";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
+import { addLoader } from "../Components/Loader";
+import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
+import { AbstractCharacterScene } from "./AbstractCharacterScene";
+import { areCharacterLayersValid } from "../../Connexion/LocalUser";
+import { touchScreenManager } from "../../Touch/TouchScreenManager";
+import { PinchManager } from "../UserInput/PinchManager";
+import { selectCharacterSceneVisibleStore } from "../../Stores/SelectCharacterStore";
+import { waScaleManager } from "../Services/WaScaleManager";
+import { isMobile } from "../../Enum/EnvironmentVariable";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
 
 export class SelectCharacterScene extends AbstractCharacterScene {
     protected readonly nbCharactersPerRow = 6;
-    protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
+    protected selectedPlayer!: Phaser.Physics.Arcade.Sprite | null; // null if we are selecting the "customize" option
     protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     protected playerModels!: BodyResourceDescriptionInterface[];
 
@@ -38,7 +38,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     preload() {
-
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 this.playerModels.push(bodyResourceDescription);
@@ -54,7 +53,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     create() {
         selectCharacterSceneVisibleStore.set(true);
-        this.events.addListener('wake', () => {
+        this.events.addListener("wake", () => {
             waScaleManager.saveZoom();
             waScaleManager.zoomModifier = isMobile() ? 2 : 1;
             selectCharacterSceneVisibleStore.set(true);
@@ -68,26 +67,26 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         waScaleManager.zoomModifier = isMobile() ? 2 : 1;
 
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
-        this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
+        this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xffffff);
         this.selectedRectangle.setDepth(2);
 
         /*create user*/
         this.createCurrentPlayer();
 
-        this.input.keyboard.on('keyup-ENTER', () => {
+        this.input.keyboard.on("keyup-ENTER", () => {
             return this.nextSceneToCameraScene();
         });
 
-        this.input.keyboard.on('keydown-RIGHT', () => {
+        this.input.keyboard.on("keydown-RIGHT", () => {
             this.moveToRight();
         });
-        this.input.keyboard.on('keydown-LEFT', () => {
+        this.input.keyboard.on("keydown-LEFT", () => {
             this.moveToLeft();
         });
-        this.input.keyboard.on('keydown-UP', () => {
+        this.input.keyboard.on("keydown-UP", () => {
             this.moveToUp();
         });
-        this.input.keyboard.on('keydown-DOWN', () => {
+        this.input.keyboard.on("keydown-DOWN", () => {
             this.moveToDown();
         });
     }
@@ -96,7 +95,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
-        if(!this.selectedPlayer){
+        if (!this.selectedPlayer) {
             return;
         }
         this.scene.stop(SelectCharacterSceneName);
@@ -105,7 +104,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.players = [];
         selectCharacterSceneVisibleStore.set(false);
-        this.events.removeListener('wake');
+        this.events.removeListener("wake");
     }
 
     public nextSceneToCustomizeScene(): void {
@@ -119,11 +118,11 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     createCurrentPlayer(): void {
-        for (let i = 0; i <this.playerModels.length; i++) {
+        for (let i = 0; i < this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
             //check already exist texture
-            if(this.players.find((c) => c.texture.key === playerResource.name)){
+            if (this.players.find((c) => c.texture.key === playerResource.name)) {
                 continue;
             }
 
@@ -132,9 +131,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             this.setUpPlayer(player, i);
             this.anims.create({
                 key: playerResource.name,
-                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}),
+                frames: this.anims.generateFrameNumbers(playerResource.name, { start: 0, end: 11 }),
                 frameRate: 8,
-                repeat: -1
+                repeat: -1,
             });
             player.setInteractive().on("pointerdown", () => {
                 if (this.pointerClicked) {
@@ -153,77 +152,79 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             });
             this.players.push(player);
         }
+        if (this.currentSelectUser >= this.players.length) {
+            this.currentSelectUser = 0;
+        }
         this.selectedPlayer = this.players[this.currentSelectUser];
         this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
     }
 
-    protected moveUser(){
-        for(let i = 0; i < this.players.length; i++){
+    protected moveUser() {
+        for (let i = 0; i < this.players.length; i++) {
             const player = this.players[i];
             this.setUpPlayer(player, i);
         }
         this.updateSelectedPlayer();
     }
 
-    public moveToLeft(){
-        if(this.currentSelectUser === 0){
+    public moveToLeft() {
+        if (this.currentSelectUser === 0) {
             return;
         }
         this.currentSelectUser -= 1;
         this.moveUser();
     }
 
-    public moveToRight(){
-        if(this.currentSelectUser === (this.players.length - 1)){
+    public moveToRight() {
+        if (this.currentSelectUser === this.players.length - 1) {
             return;
         }
         this.currentSelectUser += 1;
         this.moveUser();
     }
 
-    protected moveToUp(){
-        if(this.currentSelectUser < this.nbCharactersPerRow){
+    protected moveToUp() {
+        if (this.currentSelectUser < this.nbCharactersPerRow) {
             return;
         }
         this.currentSelectUser -= this.nbCharactersPerRow;
         this.moveUser();
     }
 
-    protected moveToDown(){
-        if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){
+    protected moveToDown() {
+        if (this.currentSelectUser + this.nbCharactersPerRow > this.players.length - 1) {
             return;
         }
         this.currentSelectUser += this.nbCharactersPerRow;
         this.moveUser();
     }
 
-    protected defineSetupPlayer(num: number){
+    protected defineSetupPlayer(num: number) {
         const deltaX = 32;
         const deltaY = 32;
         let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
 
-        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users
-        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users
+        playerX = playerX - deltaX * 2.5 + deltaX * (num % this.nbCharactersPerRow); // calcul position on line users
+        playerY = playerY - deltaY * 2 + deltaY * Math.floor(num / this.nbCharactersPerRow); // calcul position on column users
 
         const playerVisible = true;
         const playerScale = 1;
         const playerOpacity = 1;
 
         // if selected
-        if( num === this.currentSelectUser ){
+        if (num === this.currentSelectUser) {
             this.selectedRectangle.setX(playerX);
             this.selectedRectangle.setY(playerY);
         }
 
-        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
+        return { playerX, playerY, playerScale, playerOpacity, playerVisible };
     }
 
-    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){
-
-        const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number) {
+        const { playerX, playerY, playerScale, playerOpacity, playerVisible } = this.defineSetupPlayer(num);
         player.setBounce(0.2);
         player.setCollideWorldBounds(false);
-        player.setVisible( playerVisible );
+        player.setVisible(playerVisible);
         player.setScale(playerScale, playerScale);
         player.setAlpha(playerOpacity);
         player.setX(playerX);
@@ -234,10 +235,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
      * Returns pixel position by on column and row number
      */
     protected getCharacterPosition(): [number, number] {
-        return [
-            this.game.renderer.width / 2,
-            this.game.renderer.height / 2.5
-        ];
+        return [this.game.renderer.width / 2, this.game.renderer.height / 2.5];
     }
 
     protected updateSelectedPlayer(): void {
@@ -256,7 +254,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             this.pointerClicked = false;
         }
 
-        if(this.lazyloadingAttempt){
+        if (this.lazyloadingAttempt) {
             //re-render players list
             this.createCurrentPlayer();
             this.moveUser();

front/src/Phaser/Map/ITiledMap.ts

@@ -16,7 +16,7 @@ export interface ITiledMap {
      * Map orientation (orthogonal)
      */
     orientation: string;
-    properties?: ITiledMapLayerProperty[];
+    properties?: ITiledMapProperty[];
 
     /**
      * Render order (right-down)
@@ -33,7 +33,7 @@ export interface ITiledMap {
     type?: string;
 }
 
-export interface ITiledMapLayerProperty {
+export interface ITiledMapProperty {
     name: string;
     type: string;
     value: string | boolean | number | undefined;
@@ -51,7 +51,7 @@ export interface ITiledMapGroupLayer {
     id?: number;
     name: string;
     opacity: number;
-    properties?: ITiledMapLayerProperty[];
+    properties?: ITiledMapProperty[];
 
     type: "group";
     visible: boolean;
@@ -69,7 +69,7 @@ export interface ITiledMapTileLayer {
     height: number;
     name: string;
     opacity: number;
-    properties?: ITiledMapLayerProperty[];
+    properties?: ITiledMapProperty[];
     encoding?: string;
     compression?: string;
 
@@ -91,7 +91,7 @@ export interface ITiledMapObjectLayer {
     height: number;
     name: string;
     opacity: number;
-    properties?: ITiledMapLayerProperty[];
+    properties?: ITiledMapProperty[];
     encoding?: string;
     compression?: string;
 
@@ -117,7 +117,7 @@ export interface ITiledMapObject {
     gid: number;
     height: number;
     name: string;
-    properties: { [key: string]: string };
+    properties?: ITiledMapProperty[];
     rotation: number;
     type: string;
     visible: boolean;
@@ -141,6 +141,7 @@ export interface ITiledMapObject {
     polyline: { x: number; y: number }[];
 
     text?: ITiledText;
+    template?: string;
 }
 
 export interface ITiledText {
@@ -163,7 +164,7 @@ export interface ITiledTileSet {
     imagewidth: number;
     margin: number;
     name: string;
-    properties: { [key: string]: string };
+    properties?: ITiledMapProperty[];
     spacing: number;
     tilecount: number;
     tileheight: number;
@@ -182,7 +183,7 @@ export interface ITile {
     id: number;
     type?: string;
 
-    properties?: Array<ITiledMapLayerProperty>;
+    properties?: ITiledMapProperty[];
 }
 
 export interface ITiledMapTerrain {

front/src/Phaser/Reconnecting/ErrorScene.ts

@@ -1,14 +1,14 @@
-import {TextField} from "../Components/TextField";
+import { TextField } from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Sprite = Phaser.GameObjects.Sprite;
 import Text = Phaser.GameObjects.Text;
 import ScenePlugin = Phaser.Scenes.ScenePlugin;
-import {WAError} from "./WAError";
+import { WAError } from "./WAError";
 
 export const ErrorSceneName = "ErrorScene";
 enum Textures {
     icon = "icon",
-    mainFont = "main_font"
+    mainFont = "main_font",
 }
 
 export class ErrorScene extends Phaser.Scene {
@@ -23,25 +23,21 @@ export class ErrorScene extends Phaser.Scene {
 
     constructor() {
         super({
-            key: ErrorSceneName
+            key: ErrorSceneName,
         });
     }
 
-    init({title, subTitle, message}: { title?: string, subTitle?: string, message?: string }) {
-        this.title = title ? title : '';
-        this.subTitle = subTitle ? subTitle : '';
-        this.message = message ? message : '';
+    init({ title, subTitle, message }: { title?: string; subTitle?: string; message?: string }) {
+        this.title = title ? title : "";
+        this.subTitle = subTitle ? subTitle : "";
+        this.message = message ? message : "";
     }
 
     preload() {
-        this.load.image(Textures.icon, "resources/logos/tcm_full.png");
+        this.load.image(Textures.icon, "static/images/favicons/favicon-32x32.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(Textures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
-        this.load.spritesheet(
-            'cat',
-            'resources/characters/pipoya/Cat 01-1.png',
-            {frameWidth: 32, frameHeight: 32}
-        );
+        this.load.bitmapFont(Textures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
+        this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });
     }
 
     create() {
@@ -50,15 +46,25 @@ export class ErrorScene extends Phaser.Scene {
 
         this.titleField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, this.title);
 
-        this.subTitleField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, this.subTitle);
+        this.subTitleField = new TextField(
+            this,
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 2 + 24,
+            this.subTitle
+        );
 
-        this.messageField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 48, this.message, {
-            fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif',
-            fontSize: '10px'
-        });
+        this.messageField = this.add.text(
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 2 + 48,
+            this.message,
+            {
+                fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif',
+                fontSize: "10px",
+            }
+        );
         this.messageField.setOrigin(0.5, 0.5);
 
-        this.cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat', 6);
+        this.cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, "cat", 6);
         this.cat.flipY = true;
     }
 
@@ -69,38 +75,38 @@ export class ErrorScene extends Phaser.Scene {
     public static showError(error: any, scene: ScenePlugin): void {
         console.error(error);
 
-        if (typeof error === 'string' || error instanceof String) {
+        if (typeof error === "string" || error instanceof String) {
             scene.start(ErrorSceneName, {
-                title: 'An error occurred',
-                subTitle: error
+                title: "An error occurred",
+                subTitle: error,
             });
         } else if (error instanceof WAError) {
             scene.start(ErrorSceneName, {
                 title: error.title,
                 subTitle: error.subTitle,
-                message: error.details
+                message: error.details,
             });
         } else if (error.response) {
             // Axios HTTP error
             // client received an error response (5xx, 4xx)
             scene.start(ErrorSceneName, {
-                title: 'HTTP ' + error.response.status + ' - ' + error.response.statusText,
-                subTitle: 'An error occurred while accessing URL:',
-                message: error.response.config.url
+                title: "HTTP " + error.response.status + " - " + error.response.statusText,
+                subTitle: "An error occurred while accessing URL:",
+                message: error.response.config.url,
             });
         } else if (error.request) {
             // Axios HTTP error
             // client never received a response, or request never left
             scene.start(ErrorSceneName, {
-                title: 'Network error',
-                subTitle: error.message
+                title: "Network error",
+                subTitle: error.message,
             });
         } else if (error instanceof Error) {
             // Error
             scene.start(ErrorSceneName, {
-                title: 'An error occurred',
+                title: "An error occurred",
                 subTitle: error.name,
-                message: error.message
+                message: error.message,
             });
         } else {
             throw error;
@@ -114,7 +120,7 @@ export class ErrorScene extends Phaser.Scene {
         scene.start(ErrorSceneName, {
             title,
             subTitle,
-            message
+            message,
         });
     }
 }

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -1,11 +1,11 @@
-import {TextField} from "../Components/TextField";
+import { TextField } from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Sprite = Phaser.GameObjects.Sprite;
 
 export const ReconnectingSceneName = "ReconnectingScene";
 enum ReconnectingTextures {
     icon = "icon",
-    mainFont = "main_font"
+    mainFont = "main_font",
 }
 
 export class ReconnectingScene extends Phaser.Scene {
@@ -14,35 +14,40 @@ export class ReconnectingScene extends Phaser.Scene {
 
     constructor() {
         super({
-            key: ReconnectingSceneName
+            key: ReconnectingSceneName,
         });
     }
 
     preload() {
-        this.load.image(ReconnectingTextures.icon, "resources/logos/tcm_full.png");
+        this.load.image(ReconnectingTextures.icon, "static/images/favicons/favicon-32x32.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(ReconnectingTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
-        this.load.spritesheet(
-            'cat',
-            'resources/characters/pipoya/Cat 01-1.png',
-            {frameWidth: 32, frameHeight: 32}
-        );
+        this.load.bitmapFont(ReconnectingTextures.mainFont, "resources/fonts/arcade.png", "resources/fonts/arcade.xml");
+        this.load.spritesheet("cat", "resources/characters/pipoya/Cat 01-1.png", { frameWidth: 32, frameHeight: 32 });
     }
 
     create() {
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, ReconnectingTextures.icon);
+        this.logo = new Image(
+            this,
+            this.game.renderer.width - 30,
+            this.game.renderer.height - 20,
+            ReconnectingTextures.icon
+        );
         this.add.existing(this.logo);
 
-        this.reconnectingField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "Connection lost. Reconnecting...");
+        this.reconnectingField = new TextField(
+            this,
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 2,
+            "Connection lost. Reconnecting..."
+        );
 
-        const cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat');
+        const cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, "cat");
         this.anims.create({
-            key: 'right',
-            frames: this.anims.generateFrameNumbers('cat', { start: 6, end: 8 }),
+            key: "right",
+            frames: this.anims.generateFrameNumbers("cat", { start: 6, end: 8 }),
             frameRate: 10,
-            repeat: -1
+            repeat: -1,
         });
-        cat.play('right');
-
+        cat.play("right");
     }
 }