player following the path wip

front/src/Phaser/Game/GameMap.ts

@@ -130,6 +130,14 @@ export class GameMap {
         return grid;
     }
 
+    public getTileDimensions(): { width: number; height: number } {
+        return { width: this.map.tilewidth, height: this.map.tileheight };
+    }
+
+    public getTileIndexAt(x: number, y: number): { x: number; y: number } {
+        return { x: Math.floor(x / this.map.tilewidth), y: Math.floor(y / this.map.tileheight) };
+    }
+
     private getLayersByKey(key: number): Array<ITiledMapLayer> {
         return this.flatLayers.filter((flatLayer) => flatLayer.type === "tilelayer" && flatLayer.data[key] !== 0);
     }

front/src/Phaser/Game/GameScene.ts

@@ -570,7 +570,6 @@ export class GameScene extends DirtyScene {
         );
 
         this.pathfindingManager = new PathfindingManager(this, this.gameMap.getCollisionsGrid());
-        this.pathfindingManager.findPath({ x: 1, y: 3 }, { x: 29, y: 3 });
         biggestAvailableAreaStore.recompute();
         this.cameraManager.startFollowPlayer(this.CurrentPlayer);
 
@@ -2174,4 +2173,16 @@ ${escapedMessage}
         this.scene.stop(this.scene.key);
         this.scene.remove(this.scene.key);
     }
+
+    public getGameMap(): GameMap {
+        return this.gameMap;
+    }
+
+    public getCameraManager(): CameraManager {
+        return this.cameraManager;
+    }
+
+    public getPathfindingManager(): PathfindingManager {
+        return this.pathfindingManager;
+    }
 }

front/src/Phaser/Player/Player.ts

@@ -11,6 +11,8 @@ export const hasMovedEventName = "hasMoved";
 export const requestEmoteEventName = "requestEmote";
 
 export class Player extends Character {
+    private pathToFollow?: { x: number; y: number }[];
+
     constructor(
         Scene: GameScene,
         x: number,
@@ -28,6 +30,44 @@ export class Player extends Character {
         this.getBody().setImmovable(false);
     }
 
+    public moveUser(delta: number, activeUserInputEvents: ActiveEventList): void {
+        const state = get(followStateStore);
+        const role = get(followRoleStore);
+
+        if (activeUserInputEvents.get(UserInputEvent.Follow)) {
+            if (state === "off" && this.scene.groups.size > 0) {
+                this.sendFollowRequest();
+            } else if (state === "active") {
+                followStateStore.set("ending");
+            }
+        }
+
+        let x = 0;
+        let y = 0;
+        if ((state === "active" || state === "ending") && role === "follower") {
+            [x, y] = this.computeFollowMovement();
+        }
+        if (this.pathToFollow && this.pathToFollow.length !== 0) {
+            [x, y] = this.computeFollowPathMovement();
+        }
+        this.inputStep(activeUserInputEvents, x, y);
+    }
+
+    public sendFollowRequest() {
+        this.scene.connection?.emitFollowRequest();
+        followRoleStore.set("leader");
+        followStateStore.set("active");
+    }
+
+    public startFollowing() {
+        followStateStore.set("active");
+        this.scene.connection?.emitFollowConfirmation();
+    }
+
+    public setPathToFollow(path: { x: number; y: number }[]): void {
+        this.pathToFollow = path;
+    }
+
     private inputStep(activeEvents: ActiveEventList, x: number, y: number) {
         // Process input events
         if (activeEvents.get(UserInputEvent.MoveUp)) {
@@ -98,34 +138,21 @@ export class Player extends Character {
         return [xMovement, yMovement];
     }
 
-    public moveUser(delta: number, activeUserInputEvents: ActiveEventList): void {
+    private computeFollowPathMovement(): number[] {
-        const state = get(followStateStore);
+        if (!this.pathToFollow || this.pathToFollow.length === 0) {
-        const role = get(followRoleStore);
+            return [0, 0];
-
-        if (activeUserInputEvents.get(UserInputEvent.Follow)) {
-            if (state === "off" && this.scene.groups.size > 0) {
-                this.sendFollowRequest();
-            } else if (state === "active") {
-                followStateStore.set("ending");
-            }
         }
+        const nextStep = this.pathToFollow[0];
 
-        let x = 0;
+        // Compute movement direction
-        let y = 0;
+        const xDistance = nextStep.x - this.x;
-        if ((state === "active" || state === "ending") && role === "follower") {
+        const yDistance = nextStep.y - this.y;
-            [x, y] = this.computeFollowMovement();
+        const distance = Math.pow(xDistance, 2) + Math.pow(yDistance, 2);
+        if (distance < 200) {
+            this.pathToFollow.shift();
         }
-        this.inputStep(activeUserInputEvents, x, y);
+        const xMovement = xDistance / Math.sqrt(distance);
-    }
+        const yMovement = yDistance / Math.sqrt(distance);
-
+        return [xMovement, yMovement];
-    public sendFollowRequest() {
-        this.scene.connection?.emitFollowRequest();
-        followRoleStore.set("leader");
-        followStateStore.set("active");
-    }
-
-    public startFollowing() {
-        followStateStore.set("active");
-        this.scene.connection?.emitFollowConfirmation();
     }
 }

front/src/Phaser/UserInput/GameSceneUserInputHandler.ts

@@ -19,8 +19,27 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface {
     }
 
     public handlePointerUpEvent(pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]): void {
-        const camera = this.gameScene.cameras.main;
+        const camera = this.gameScene.getCameraManager().getCamera();
-        console.log(`${pointer.x + camera.scrollX}, ${pointer.y + camera.scrollY}`);
+        const index = this.gameScene
+            .getGameMap()
+            .getTileIndexAt(pointer.x + camera.scrollX, pointer.y + camera.scrollY);
+        const startTile = this.gameScene
+            .getGameMap()
+            .getTileIndexAt(this.gameScene.CurrentPlayer.x, this.gameScene.CurrentPlayer.y);
+        this.gameScene
+            .getPathfindingManager()
+            .findPath(startTile, index)
+            .then((path) => {
+                const tileDimensions = this.gameScene.getGameMap().getTileDimensions();
+                const pixelPath = path.map((step) => {
+                    return { x: step.x * tileDimensions.width, y: step.y * tileDimensions.height };
+                });
+                this.gameScene.CurrentPlayer.setPathToFollow([...pixelPath]);
+                console.log(pixelPath);
+            })
+            .catch((reason) => {
+                console.log(reason);
+            });
     }
 
     public handleSpaceKeyUpEvent(event: Event): Event {

front/src/Utils/PathfindingManager.ts

@@ -9,28 +9,30 @@ export class PathfindingManager {
         this.scene = scene;
 
         this.easyStar = new EasyStar.js();
+        this.easyStar.disableDiagonals();
 
         this.setGrid(collisionsGrid);
     }
 
-    public findPath(start: { x: number; y: number }, end: { x: number; y: number }): void {
+    public async findPath(
-        console.log("TRY TO FIND PATH");
+        start: { x: number; y: number },
-        this.easyStar.findPath(start.x, start.y, end.x, end.y, (path) => {
+        end: { x: number; y: number }
-            if (path === null) {
+    ): Promise<{ x: number; y: number }[]> {
-                console.warn("Path was not found.");
+        return new Promise((resolve, reject) => {
-            } else {
+            this.easyStar.findPath(start.x, start.y, end.x, end.y, (path) => {
-                console.log("path was found");
+                if (path === null) {
-                console.log(path);
+                    reject("Path was not found");
-            }
+                } else {
+                    resolve(path);
+                }
+            });
+            this.easyStar.calculate();
         });
-        this.easyStar.calculate();
     }
 
     private setGrid(grid: number[][]): void {
-        console.log(grid);
         this.easyStar.setGrid(grid);
         this.easyStar.setAcceptableTiles([0]); // zeroes are walkable
-        this.logGridToTheConsole(grid);
     }
 
     private logGridToTheConsole(grid: number[][]): void {