Adding the ability to display "Text" objects from Tiled

I honestly don't believe text objects look good on map, and in real maps, I think text should be written on tiles.

However, for a variety of use cases (like in test maps in the /maps/test directory, it can be useful to be
able to display some text easily on a map.

This PR adds the ability to display this text.

Note: the "font" support cannot work correctly, as Tiled is listing fonts from the local
system, and those fonts are not available in a browser.

front/src/Phaser/Components/TextUtils.ts

@@ -0,0 +1,45 @@
+import {ITiledMapObject} from "../Map/ITiledMap";
+import Text = Phaser.GameObjects.Text;
+import {GameScene} from "../Game/GameScene";
+import TextStyle = Phaser.GameObjects.TextStyle;
+
+export class TextUtils {
+    public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
+        if (object.text === undefined) {
+            throw new Error('This object has not textual representation.');
+        }
+        const options: {font?: string} = {};
+        let font = '';
+        if (object.text.italic) {
+            font += 'italic ';
+        }
+        // Note: there is no support for "strikeout" and "underline"
+        let fontSize: number = 16;
+        if (object.text.pixelsize) {
+            font += object.text.pixelsize+'px ';
+            fontSize = object.text.pixelsize;
+        } else {
+            font += '16px ';
+        }
+        if (object.text.fontfamily) {
+            font += '"'+object.text.fontfamily+'"';
+        }
+        if (font !== '') {
+            options.font = font;
+        }
+        const textElem = scene.add.text(object.x, object.y, object.text.text, options);
+        textElem.setFontSize(fontSize);
+        let color = '#000000';
+        if (object.text.color !== undefined) {
+            color = object.text.color;
+        }
+        textElem.setColor(color);
+        if (object.text.wrap) {
+            textElem.setWordWrapWidth(textElem.width);
+        }
+        textElem.setAngle(object.rotation);
+        if (object.text.halign !== undefined) {
+            textElem.setAlign(object.text.halign);
+        }
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -18,7 +18,14 @@ import {
     RESOLUTION,
     ZOOM_LEVEL
 } from "../../Enum/EnvironmentVariable";
-import {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledMapObject, ITiledTileSet} from "../Map/ITiledMap";
+import {
+    ITiledMap,
+    ITiledMapLayer,
+    ITiledMapLayerProperty,
+    ITiledMapObject,
+    ITiledText,
+    ITiledTileSet
+} from "../Map/ITiledMap";
 import {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
@@ -81,6 +88,7 @@ import DOMElement = Phaser.GameObjects.DOMElement;
 import {Subscription} from "rxjs";
 import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
+import {TextUtils} from "../Components/TextUtils";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -398,6 +406,13 @@ export class GameScene extends ResizableScene implements CenterListener {
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
                 depth = 10000;
             }
+            if (layer.type === 'objectgroup') {
+                for (const object of layer.objects) {
+                    if (object.text) {
+                        TextUtils.createTextFromITiledMapObject(this, object);
+                    }
+                }
+            }
         }
         if (depth === -2) {
             throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at.');

front/src/Phaser/Map/ITiledMap.ts

@@ -94,6 +94,20 @@ export interface ITiledMapObject {
      * Polyline points
      */
     polyline: {x: number, y: number}[];
+
+    text?: ITiledText
+}
+
+export interface ITiledText {
+    text: string,
+    wrap?: boolean,
+    fontfamily?: string,
+    pixelsize?: number,
+    color?: string,
+    underline?: boolean,
+    italic?: boolean,
+    strikeout?: boolean,
+    halign?: "center"|"right"|"justify"|"left"
 }
 
 export interface ITiledTileSet {