diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index e499f80a..12a9854e 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -34,7 +34,7 @@ import type { ChangeZoneEvent } from "./ChangeZoneEvent"; import type { CameraSetEvent } from "./CameraSetEvent"; import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent"; import { isColorEvent } from "./ColorEvent"; -import { isWalkPlayerToEventConfig } from "./WalkPlayerToEvent"; +import { isMovePlayerToEventConfig } from "./MovePlayerToEvent"; export interface TypedMessageEvent extends MessageEvent { data: T; @@ -174,8 +174,8 @@ export const iframeQueryMapTypeGuards = { query: tg.isUndefined, answer: isPlayerPosition, }, - walkPlayerTo: { - query: isWalkPlayerToEventConfig, + movePlayerTo: { + query: isMovePlayerToEventConfig, answer: isPlayerPosition, }, }; diff --git a/front/src/Api/Events/WalkPlayerToEvent.ts b/front/src/Api/Events/MovePlayerToEvent.ts similarity index 58% rename from front/src/Api/Events/WalkPlayerToEvent.ts rename to front/src/Api/Events/MovePlayerToEvent.ts index 82abcd03..cdb0830c 100644 --- a/front/src/Api/Events/WalkPlayerToEvent.ts +++ b/front/src/Api/Events/MovePlayerToEvent.ts @@ -1,6 +1,6 @@ import * as tg from "generic-type-guard"; -export const isWalkPlayerToEventConfig = new tg.IsInterface() +export const isMovePlayerToEventConfig = new tg.IsInterface() .withProperties({ x: tg.isNumber, y: tg.isNumber, @@ -8,4 +8,4 @@ export const isWalkPlayerToEventConfig = new tg.IsInterface() }) .get(); -export type WalkPlayerToEvent = tg.GuardedType; +export type MovePlayerToEvent = tg.GuardedType; diff --git a/front/src/Api/iframe/player.ts b/front/src/Api/iframe/player.ts index dbc689d3..59687a5e 100644 --- a/front/src/Api/iframe/player.ts +++ b/front/src/Api/iframe/player.ts @@ -84,9 +84,9 @@ export class WorkadventurePlayerCommands extends IframeApiContribution { + public async moveTo(x: number, y: number, speed: number): Promise<{ x: number; y: number }> { return await queryWorkadventure({ - type: "walkPlayerTo", + type: "movePlayerTo", data: { x, y, speed }, }); } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index ea967cf3..fc41c074 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -569,7 +569,11 @@ export class GameScene extends DirtyScene { waScaleManager ); - this.pathfindingManager = new PathfindingManager(this, this.gameMap.getCollisionsGrid()); + this.pathfindingManager = new PathfindingManager( + this, + this.gameMap.getCollisionsGrid(), + this.gameMap.getTileDimensions() + ); biggestAvailableAreaStore.recompute(); this.cameraManager.startFollowPlayer(this.CurrentPlayer); @@ -1457,9 +1461,20 @@ ${escapedMessage} }; }); - iframeListener.registerAnswerer("walkPlayerTo", () => { + iframeListener.registerAnswerer("movePlayerTo", (message) => { // TODO: walk player to position, wait for promise to resolve - console.log("WALK PLAYER TO ACTION CALLED"); + const index = this.getGameMap().getTileIndexAt(message.x, message.y); + const startTile = this.getGameMap().getTileIndexAt(this.CurrentPlayer.x, this.CurrentPlayer.y); + this.getPathfindingManager() + .findPath(startTile, index, true, true) + .then((path) => { + // Remove first step as it is for the tile we are currently standing on + path.shift(); + this.CurrentPlayer.setPathToFollow(path); + }) + .catch((reason) => { + console.warn(reason); + }); return { x: this.CurrentPlayer.x, y: this.CurrentPlayer.y, diff --git a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts b/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts index 2915901d..9874794c 100644 --- a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts +++ b/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts @@ -31,18 +31,11 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface { .getTileIndexAt(this.gameScene.CurrentPlayer.x, this.gameScene.CurrentPlayer.y); this.gameScene .getPathfindingManager() - .findPath(startTile, index, true) + .findPath(startTile, index, true, true) .then((path) => { - const tileDimensions = this.gameScene.getGameMap().getTileDimensions(); - const pixelPath = path.map((step) => { - return { - x: step.x * tileDimensions.width + tileDimensions.width * 0.5, - y: step.y * tileDimensions.height + tileDimensions.height * 0.5, - }; - }); // Remove first step as it is for the tile we are currently standing on - pixelPath.shift(); - this.gameScene.CurrentPlayer.setPathToFollow(pixelPath); + path.shift(); + this.gameScene.CurrentPlayer.setPathToFollow(path); }) .catch((reason) => { console.warn(reason); diff --git a/front/src/Utils/PathfindingManager.ts b/front/src/Utils/PathfindingManager.ts index 2d0cae27..71205070 100644 --- a/front/src/Utils/PathfindingManager.ts +++ b/front/src/Utils/PathfindingManager.ts @@ -6,20 +6,23 @@ export class PathfindingManager { private easyStar; private grid: number[][]; + private tileDimensions: { width: number; height: number }; - constructor(scene: Phaser.Scene, collisionsGrid: number[][]) { + constructor(scene: Phaser.Scene, collisionsGrid: number[][], tileDimensions: { width: number; height: number }) { this.scene = scene; this.easyStar = new EasyStar.js(); this.easyStar.enableDiagonals(); this.grid = collisionsGrid; + this.tileDimensions = tileDimensions; this.setEasyStarGrid(collisionsGrid); } public async findPath( start: { x: number; y: number }, end: { x: number; y: number }, + measuredInPixels: boolean = true, tryFindingNearestAvailable: boolean = false ): Promise<{ x: number; y: number }[]> { let endPoints: { x: number; y: number }[] = [end]; @@ -48,12 +51,21 @@ export class PathfindingManager { // rejected Promise will return undefined for path path = await this.getPath(start, endPoint).catch(); if (path && path.length > 0) { - return path; + return measuredInPixels ? this.mapTileUnitsToPixels(path) : path; } } return []; } + private mapTileUnitsToPixels(path: { x: number; y: number }[]): { x: number; y: number }[] { + return path.map((step) => { + return { + x: step.x * this.tileDimensions.width + this.tileDimensions.width * 0.5, + y: step.y * this.tileDimensions.height + this.tileDimensions.height * 0.5, + }; + }); + } + private getNeighbouringTiles(tile: { x: number; y: number }): { x: number; y: number }[] { const xOffsets = [-1, 0, 1, 1, 1, 0, -1, -1]; const yOffsets = [-1, -1, -1, 0, 1, 1, 1, 0]; diff --git a/maps/tests/MovePlayer/script.php b/maps/tests/MovePlayer/script.php index 24f7fff4..9d68065f 100644 --- a/maps/tests/MovePlayer/script.php +++ b/maps/tests/MovePlayer/script.php @@ -5,31 +5,20 @@