Add image to report and to teleport player

front/src/Phaser/Entity/Character.ts

@@ -46,6 +46,8 @@ export abstract class Character extends Container {
     public PlayerValue: string;
     public sprites: Map<string, Sprite>;
     private lastDirection: string = PlayerAnimationNames.WalkDown;
+    private report: Sprite;
+    private teleportation: Sprite;
 
     constructor(scene: Phaser.Scene,
                 x: number,
@@ -62,6 +64,15 @@ export abstract class Character extends Container {
 
         for (const texture of textures) {
             const sprite = new Sprite(scene, 0, 0, texture, frame);
+            sprite.setInteractive({useHandCursor: true});
+            sprite.on('pointerover', () => {
+                this.report.visible = true;
+                this.teleportation.visible = true;
+            });
+            sprite.on('pointerup', () => {
+                this.report.visible = true;
+                this.teleportation.visible = true;
+            });
             this.add(sprite);
             this.getPlayerAnimations(texture).forEach(d => {
                 this.scene.anims.create({
@@ -76,6 +87,24 @@ export abstract class Character extends Container {
             this.sprites.set(texture, sprite);
         }
 
+        this.report = new Sprite(scene, 20, -10, 'report_flag', 3);
+        this.report.setInteractive();
+        this.report.visible = false;
+        this.report.on('pointerup', () => {
+            this.report.visible = false;
+            this.teleportation.visible = false;
+        });
+        this.add(this.report);
+
+        this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3);
+        this.teleportation.setInteractive();
+        this.teleportation.visible = false;
+        this.teleportation.on('pointerup', () => {
+            this.report.visible = false;
+            this.teleportation.visible = false;
+        });
+        this.add(this.teleportation);
+
         this.PlayerValue = name;
         this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8);
         this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);

front/src/Phaser/Entity/body_character.ts

@@ -1,4 +1,5 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
+import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character";
 
 export interface BodyResourceDescriptionInterface {
     name: string,
@@ -310,3 +311,29 @@ export const loadAllLayers = (load: LoaderPlugin) => {
         }
     }
 }
+
+export const OBJECTS: Array<PlayerResourceDescriptionInterface> = [
+    {name:'report_flag', img:'resources/objects/report_flag.png'},
+    {name:'layout_modes', img:'resources/objects/layout_modes.png'},
+    {name:'teleportation', img:'resources/objects/teleportation.png'},
+];
+
+export const loadObject = (load: LoaderPlugin) => {
+    for (let j = 0; j < OBJECTS.length; j++) {
+        load.spritesheet(
+            OBJECTS[j].name,
+            OBJECTS[j].img,
+            {frameWidth: 32, frameHeight: 32}
+        )
+    }
+}
+
+export const loadPlayerCharacters = (load: LoaderPlugin) => {
+    PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
+        load.spritesheet(
+            playerResource.name,
+            playerResource.img,
+            {frameWidth: 32, frameHeight: 32}
+        );
+    });
+}

front/src/Phaser/Game/GameScene.ts

@@ -16,7 +16,6 @@ import {
     ITiledMapLayerProperty, ITiledMapObject,
     ITiledTileSet
 } from "../Map/ITiledMap";
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationNames} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
@@ -25,7 +24,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
-import {loadAllLayers} from "../Entity/body_character";
+import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character";
 import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager";
 import Texture = Phaser.Textures.Texture;
 import Sprite = Phaser.GameObjects.Sprite;
@@ -189,21 +188,9 @@ export class GameScene extends Phaser.Scene implements CenterListener {
         }
 
         //add player png
-        PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
+        loadPlayerCharacters(this.load);
-            this.load.spritesheet(
-                playerResource.name,
-                playerResource.img,
-                {frameWidth: 32, frameHeight: 32}
-            );
-        });
-
-        this.load.spritesheet(
-            'layout_modes',
-            'resources/objects/layout_modes.png',
-            {frameWidth: 32, frameHeight: 32}
-        );
-
         loadAllLayers(this.load);
+        loadObject(this.load);
 
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');