add companion to remote player

front/src/Phaser/Companion/Companion.ts

@@ -8,18 +8,19 @@ export class Companion extends Container {
 
     private delta: number;
     private invisible: boolean;
-    private target: { x: number, y: number };
+    private stepListener: Function;
+    private target: { x: number, y: number, direction: PlayerAnimationDirections };
 
     constructor(
         scene: Phaser.Scene,
         x: number,
         y: number
         ) {
-        super(scene, x, y);
+        super(scene, x + 8, y + 8);
             
         this.delta = 0;
         this.invisible = true;
-        this.target = { x, y };
+        this.target = { x, y, direction: PlayerAnimationDirections.Down };
         this.sprites = new Map<string, Sprite>();
 
         const animal = ["dog1", "dog2", "dog3", "cat1", "cat2", "cat3"];
@@ -40,19 +41,21 @@ export class Companion extends Container {
 
         this.setDepth(-1);
 
-        scene.game.events.addListener('step', this.step.bind(this));
+        this.stepListener = this.step.bind(this);
+
+        scene.game.events.addListener('step', this.stepListener);
         scene.add.existing(this);
     }
 
-    public setTarget(x: number, y: number) {
-        this.target = { x, y };
+    public setTarget(x: number, y: number, direction: PlayerAnimationDirections) {
+        this.target = { x, y, direction };
     }
 
     private step(time: any, delta: any) {
         if (typeof this.target === 'undefined') return;
 
         this.delta += delta;
-        if (this.delta < 256) {
+        if (this.delta < 128) {
             return;
         }
         this.delta = 0;
@@ -63,10 +66,12 @@ export class Companion extends Container {
         let direction: PlayerAnimationDirections;
         let type: PlayerAnimationTypes;
 
-        const distance = Math.sqrt(Math.pow(Math.abs(xDist), 2) + Math.pow(Math.abs(yDist), 2));
+        const distance = Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2));
 
         if (distance < 16) {
             type = PlayerAnimationTypes.Idle;
+            direction = this.target.direction;
+
             this.getBody().stop();
         } else {
             type = PlayerAnimationTypes.Walk;
@@ -76,22 +81,22 @@ export class Companion extends Container {
 
             const speed = 256;
             this.getBody().setVelocity(Math.min(Math.abs(xDist * 2), speed) * xDir, Math.min(Math.abs(yDist * 2), speed) * yDir);
-        }
 
-        if (Math.abs(xDist) > Math.abs(yDist)) {
-            if (xDist < 0) {
-                direction = PlayerAnimationDirections.Left;
+            if (Math.abs(xDist) > Math.abs(yDist)) {
+                if (xDist < 0) {
+                    direction = PlayerAnimationDirections.Left;
+                } else {
+                    direction = PlayerAnimationDirections.Right;
+                }
             } else {
-                direction = PlayerAnimationDirections.Right;
-            }
-        } else {
-            if (yDist < 0) {
-                direction = PlayerAnimationDirections.Up;
-            } else {
-                direction = PlayerAnimationDirections.Down;
+                if (yDist < 0) {
+                    direction = PlayerAnimationDirections.Up;
+                } else {
+                    direction = PlayerAnimationDirections.Down;
+                }
             }
         }
-
+        
         this.setDepth(this.y);
         this.playAnimation(direction, type);
     }
@@ -188,7 +193,7 @@ export class Companion extends Container {
         }
 
         if (this.scene) {
-            this.scene.game.events.removeListener('step', this.step.bind(this));
+            this.scene.game.events.removeListener('step', this.stepListener);
         }
 
         super.destroy();

front/src/Phaser/Entity/Character.ts

@@ -4,6 +4,7 @@ import BitmapText = Phaser.GameObjects.BitmapText;
 import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
 import {TextureError} from "../../Exception/TextureError";
+import {Companion} from "../Companion/Companion";
 
 interface AnimationData {
     key: string;
@@ -21,6 +22,7 @@ export abstract class Character extends Container {
     private lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
     //private teleportation: Sprite;
     private invisible: boolean;
+    public companion?: Companion;
 
     constructor(scene: Phaser.Scene,
                 x: number,
@@ -67,6 +69,12 @@ export abstract class Character extends Container {
         this.setDepth(-1);
 
         this.playAnimation(direction, moving);
+
+        this.addCompanion();
+    }
+
+    private addCompanion(): void {
+        this.companion = new Companion(this.scene, this.x, this.y);
     }
 
     public addTextures(textures: string[], frame?: string | number): void {
@@ -189,6 +197,10 @@ export abstract class Character extends Container {
         }
 
         this.setDepth(this.y);
+
+        if (this.companion) {
+            this.companion.setTarget(this.x, this.y, this.lastDirection);
+        }
     }
 
     stop(){
@@ -215,5 +227,9 @@ export abstract class Character extends Container {
         }
         super.destroy();
         this.playerName.destroy();
+
+        if (this.companion) {
+            this.companion.destroy();
+        }
     }
 }

front/src/Phaser/Entity/RemotePlayer.ts

@@ -31,5 +31,9 @@ export class RemotePlayer extends Character {
         this.setY(position.y);
         
         this.setDepth(position.y); //this is to make sure the perspective (player models closer the bottom of the screen will appear in front of models nearer the top of the screen).
+    
+        if (this.companion) {
+            this.companion.setTarget(position.x, position.y, position.direction as PlayerAnimationDirections);
+        }
     }
 }

front/src/Phaser/Player/Player.ts

@@ -2,7 +2,6 @@ import {PlayerAnimationDirections} from "./Animation";
 import {GameScene} from "../Game/GameScene";
 import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
 import {Character} from "../Entity/Character";
-import {Companion} from "../Companion/Companion";
 
 export const hasMovedEventName = "hasMoved";
 export interface CurrentGamerInterface extends Character{
@@ -13,7 +12,6 @@ export interface CurrentGamerInterface extends Character{
 export class Player extends Character implements CurrentGamerInterface {
     private previousDirection: string = PlayerAnimationDirections.Down;
     private wasMoving: boolean = false;
-    private companion?: Companion;
 
     constructor(
         Scene: GameScene,
@@ -29,20 +27,6 @@ export class Player extends Character implements CurrentGamerInterface {
 
         //the current player model should be push away by other players to prevent conflict
         this.getBody().setImmovable(false);
-
-        this.addCompanion();
-    }
-
-    addCompanion(): void {
-        this.companion = new Companion(this.scene, this.x, this.y);
-    }
-
-    move(x: number, y: number) {
-        super.move(x, y);
-
-        if (this.companion) {
-            this.companion.setTarget(this.x, this.y);
-        }
     }
 
     moveUser(delta: number): void {