From 29e44d30236680a2f61f5168beaa135413d4c03f Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Wed, 19 Jan 2022 09:34:06 +0100 Subject: [PATCH 01/12] Player move API wip --- front/src/Api/Events/IframeEvent.ts | 5 + front/src/Api/Events/WalkPlayerToEvent.ts | 11 + front/src/Api/iframe/player.ts | 7 + front/src/Phaser/Game/GameScene.ts | 9 + .../MovePlayer/move_player_api_test.json | 207 ++++++++++++++++++ maps/tests/MovePlayer/script.php | 50 +++++ maps/tests/index.html | 8 + 7 files changed, 297 insertions(+) create mode 100644 front/src/Api/Events/WalkPlayerToEvent.ts create mode 100644 maps/tests/MovePlayer/move_player_api_test.json create mode 100644 maps/tests/MovePlayer/script.php diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 93d0735c..e499f80a 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -34,6 +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"; export interface TypedMessageEvent extends MessageEvent { data: T; @@ -173,6 +174,10 @@ export const iframeQueryMapTypeGuards = { query: tg.isUndefined, answer: isPlayerPosition, }, + walkPlayerTo: { + query: isWalkPlayerToEventConfig, + answer: isPlayerPosition, + }, }; type GuardedType = T extends (x: unknown) => x is infer T ? T : never; diff --git a/front/src/Api/Events/WalkPlayerToEvent.ts b/front/src/Api/Events/WalkPlayerToEvent.ts new file mode 100644 index 00000000..82abcd03 --- /dev/null +++ b/front/src/Api/Events/WalkPlayerToEvent.ts @@ -0,0 +1,11 @@ +import * as tg from "generic-type-guard"; + +export const isWalkPlayerToEventConfig = new tg.IsInterface() + .withProperties({ + x: tg.isNumber, + y: tg.isNumber, + speed: tg.isNumber, + }) + .get(); + +export type WalkPlayerToEvent = tg.GuardedType; diff --git a/front/src/Api/iframe/player.ts b/front/src/Api/iframe/player.ts index 0c71ae33..dbc689d3 100644 --- a/front/src/Api/iframe/player.ts +++ b/front/src/Api/iframe/player.ts @@ -84,6 +84,13 @@ export class WorkadventurePlayerCommands extends IframeApiContribution { + return await queryWorkadventure({ + type: "walkPlayerTo", + data: { x, y, speed }, + }); + } + get userRoomToken(): string | undefined { if (userRoomToken === undefined) { throw new Error( diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 26e4004a..ea967cf3 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1456,6 +1456,15 @@ ${escapedMessage} y: this.CurrentPlayer.y, }; }); + + iframeListener.registerAnswerer("walkPlayerTo", () => { + // TODO: walk player to position, wait for promise to resolve + console.log("WALK PLAYER TO ACTION CALLED"); + return { + x: this.CurrentPlayer.x, + y: this.CurrentPlayer.y, + }; + }); } private setPropertyLayer( diff --git a/maps/tests/MovePlayer/move_player_api_test.json b/maps/tests/MovePlayer/move_player_api_test.json new file mode 100644 index 00000000..965428e7 --- /dev/null +++ b/maps/tests/MovePlayer/move_player_api_test.json @@ -0,0 +1,207 @@ +{ "compressionlevel":-1, + "height":30, + "infinite":false, + "layers":[ + { + "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + "height":30, + "id":1, + "name":"floor", + "opacity":1, + "properties":[ + { + "name":"openWebsite", + "type":"string", + "value":"script.php" + }, + { + "name":"openWebsiteAllowApi", + "type":"bool", + "value":true + }], + "type":"tilelayer", + "visible":true, + "width":30, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 0, 0, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 0, 0, 0, 0, 0, 0, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 0, 0, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 0, 0, 0, 0, 0, 0, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 0, 0, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 6, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 17, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 28, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 7, 6, 7, 6, 7, 6, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 7, 6, 7, 6, 7, 0, 17, 18, 17, 18, 17, 18, 17, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 18, 17, 18, 17, 18, 0, 28, 29, 28, 29, 28, 29, 28, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 28, 29, 28, 29, 28, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":30, + "id":6, + "name":"furnitures", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":30, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":30, + "id":2, + "name":"start", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":30, + "x":0, + "y":0 + }, + { + "draworder":"topdown", + "id":3, + "name":"floorLayer", + "objects":[ + { + "height":159.371714951095, + "id":4, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"MS Shell Dlg 2", + "pixelsize":21, + "text":"Set position of where you want the player character to move to. On movement's end or interruption, player's current position will be logged into the console", + "wrap":true + }, + "type":"", + "visible":true, + "width":315.438, + "x":64.7309301350722, + "y":95.2559217512811 + }, + { + "height":30.8202477876106, + "id":8, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"MS Shell Dlg 2", + "pixelsize":21, + "text":"x: 16 y: 16", + "wrap":true + }, + "type":"", + "visible":true, + "width":111.991330228225, + "x":39.0206367023754, + "y":2.47529762459247 + }, + { + "height":30.8202, + "id":9, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"MS Shell Dlg 2", + "pixelsize":21, + "text":"x: 464 y: 432", + "wrap":true + }, + "type":"", + "visible":true, + "width":149.997520726595, + "x":483.920662086633, + "y":417.193532976246 + }, + { + "height":113.333333333333, + "id":10, + "name":"", + "rotation":0, + "text": + { + "fontfamily":"MS Shell Dlg 2", + "pixelsize":21, + "text":"Top: 256\/512 Center: 496\/655 Width: 480 Height: 286", + "wrap":true + }, + "type":"", + "visible":true, + "width":172, + "x":256, + "y":512 + }], + "opacity":1, + "type":"objectgroup", + "visible":true, + "x":0, + "y":0 + }], + "nextlayerid":7, + "nextobjectid":11, + "orientation":"orthogonal", + "properties":[ + { + "name":"openWebsite", + "type":"string", + "value":"script.php" + }, + { + "name":"openWebsiteAllowApi", + "type":"bool", + "value":true + }], + "renderorder":"right-down", + "tiledversion":"1.7.2", + "tileheight":32, + "tilesets":[ + { + "columns":11, + "firstgid":1, + "image":"..\/tileset1.png", + "imageheight":352, + "imagewidth":352, + "margin":0, + "name":"tileset1", + "spacing":0, + "tilecount":121, + "tileheight":32, + "tiles":[ + { + "id":16, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":17, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":27, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":28, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }], + "tilewidth":32 + }], + "tilewidth":32, + "type":"map", + "version":"1.6", + "width":30 +} \ No newline at end of file diff --git a/maps/tests/MovePlayer/script.php b/maps/tests/MovePlayer/script.php new file mode 100644 index 00000000..24f7fff4 --- /dev/null +++ b/maps/tests/MovePlayer/script.php @@ -0,0 +1,50 @@ + + + + + + + +X:
+Y:
+width:
+height:
+Smooth:
+Lock:
+ + + + + + diff --git a/maps/tests/index.html b/maps/tests/index.html index 4a80634c..4af51be5 100644 --- a/maps/tests/index.html +++ b/maps/tests/index.html @@ -227,6 +227,14 @@ Test camera API + + + Success Failure Pending + + + Test Player Movement API + + Success Failure Pending From f78392ceabb04ff4315009fae73255bdea717187 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Wed, 19 Jan 2022 12:30:08 +0100 Subject: [PATCH 02/12] Pathfinding manager will now return path steps in pixel units by default --- front/src/Api/Events/IframeEvent.ts | 6 ++-- ...kPlayerToEvent.ts => MovePlayerToEvent.ts} | 4 +-- front/src/Api/iframe/player.ts | 4 +-- front/src/Phaser/Game/GameScene.ts | 21 +++++++++++-- .../UserInput/GameSceneUserInputHandler.ts | 13 ++------ front/src/Utils/PathfindingManager.ts | 16 ++++++++-- maps/tests/MovePlayer/script.php | 31 +++++-------------- 7 files changed, 50 insertions(+), 45 deletions(-) rename front/src/Api/Events/{WalkPlayerToEvent.ts => MovePlayerToEvent.ts} (58%) 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 @@