From 255f4375daab7be0ed1cb3d18997c7225fdb4e57 Mon Sep 17 00:00:00 2001 From: Piotr 'pwh' Hanusiak Date: Mon, 11 Apr 2022 16:16:52 +0200 Subject: [PATCH] go from zones to area name for interactive Tiled Objects --- ...{ChangeZoneEvent.ts => ChangeAreaEvent.ts} | 4 +- front/src/Api/Events/IframeEvent.ts | 6 +- front/src/Api/IframeListener.ts | 18 ++--- front/src/Phaser/Game/GameMap.ts | 77 ++++++++++--------- front/src/Phaser/Game/GameScene.ts | 30 ++++---- maps/tests/tiled_objects.json | 27 +++++-- 6 files changed, 90 insertions(+), 72 deletions(-) rename front/src/Api/Events/{ChangeZoneEvent.ts => ChangeAreaEvent.ts} (64%) diff --git a/front/src/Api/Events/ChangeZoneEvent.ts b/front/src/Api/Events/ChangeAreaEvent.ts similarity index 64% rename from front/src/Api/Events/ChangeZoneEvent.ts rename to front/src/Api/Events/ChangeAreaEvent.ts index e7ca3668..0ad7decb 100644 --- a/front/src/Api/Events/ChangeZoneEvent.ts +++ b/front/src/Api/Events/ChangeAreaEvent.ts @@ -1,6 +1,6 @@ import * as tg from "generic-type-guard"; -export const isChangeZoneEvent = new tg.IsInterface() +export const isChangeAreaEvent = new tg.IsInterface() .withProperties({ name: tg.isString, }) @@ -8,4 +8,4 @@ export const isChangeZoneEvent = new tg.IsInterface() /** * A message sent from the game to the iFrame when a user enters or leaves a zone. */ -export type ChangeZoneEvent = tg.GuardedType; +export type ChangeAreaEvent = tg.GuardedType; diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 9daccbec..2f92161f 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -31,7 +31,7 @@ import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEv import type { ChangeLayerEvent } from "./ChangeLayerEvent"; import { isPlayerPosition } from "./PlayerPosition"; import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent"; -import type { ChangeZoneEvent } from "./ChangeZoneEvent"; +import type { ChangeAreaEvent } from "./ChangeAreaEvent"; import type { CameraSetEvent } from "./CameraSetEvent"; import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent"; import { isColorEvent } from "./ColorEvent"; @@ -95,8 +95,8 @@ export interface IframeResponseEventMap { leaveEvent: EnterLeaveEvent; enterLayerEvent: ChangeLayerEvent; leaveLayerEvent: ChangeLayerEvent; - enterZoneEvent: ChangeZoneEvent; - leaveZoneEvent: ChangeZoneEvent; + enterAreaEvent: ChangeAreaEvent; + leaveAreaEvent: ChangeAreaEvent; buttonClickedEvent: ButtonClickedEvent; remotePlayerClickedEvent: RemotePlayerClickedEvent; actionsMenuActionClickedEvent: ActionsMenuActionClickedEvent; diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index e3609b9f..c78c5909 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -31,7 +31,7 @@ import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/Emb import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore"; import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent"; import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent"; -import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent"; +import type { ChangeAreaEvent } from "./Events/ChangeAreaEvent"; import { CameraSetEvent, isCameraSetEvent } from "./Events/CameraSetEvent"; import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent"; import type { RemotePlayerClickedEvent } from "./Events/RemotePlayerClickedEvent"; @@ -441,21 +441,21 @@ class IframeListener { }); } - sendEnterZoneEvent(zoneName: string) { + sendEnterAreaEvent(areaName: string) { this.postMessage({ - type: "enterZoneEvent", + type: "enterAreaEvent", data: { - name: zoneName, - } as ChangeZoneEvent, + name: areaName, + } as ChangeAreaEvent, }); } - sendLeaveZoneEvent(zoneName: string) { + sendLeaveAreaEvent(areaName: string) { this.postMessage({ - type: "leaveZoneEvent", + type: "leaveAreaEvent", data: { - name: zoneName, - } as ChangeZoneEvent, + name: areaName, + } as ChangeAreaEvent, }); } diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts index ce6e2711..8894d726 100644 --- a/front/src/Phaser/Game/GameMap.ts +++ b/front/src/Phaser/Game/GameMap.ts @@ -22,9 +22,9 @@ export type layerChangeCallback = ( allLayersOnNewPosition: Array ) => void; -export type zoneChangeCallback = ( - zonesChangedByAction: Array, - allZonesOnNewPosition: Array +export type areaChangeCallback = ( + areasChangedByAction: Array, + allAreasOnNewPosition: Array ) => void; /** @@ -54,8 +54,8 @@ export class GameMap { private enterLayerCallbacks = Array(); private leaveLayerCallbacks = Array(); - private enterZoneCallbacks = Array(); - private leaveZoneCallbacks = Array(); + private enterAreaCallbacks = Array(); + private leaveAreaCallbacks = Array(); private tileNameMap = new Map(); @@ -63,7 +63,7 @@ export class GameMap { public readonly flatLayers: ITiledMapLayer[]; public readonly tiledObjects: ITiledMapObject[]; public readonly phaserLayers: TilemapLayer[] = []; - public readonly zones: ITiledMapObject[] = []; + public readonly areas: ITiledMapObject[] = []; public exitUrls: Array = []; @@ -76,7 +76,8 @@ export class GameMap { ) { this.flatLayers = flattenGroupLayersMap(map); this.tiledObjects = this.getObjectsFromLayers(this.flatLayers); - this.zones = this.tiledObjects.filter((object) => object.width > 0); + // NOTE: We leave "zone" for legacy reasons + this.areas = this.tiledObjects.filter((object) => ["zone", "area"].includes(object.type)); let depth = -2; for (const layer of this.flatLayers) { @@ -148,7 +149,7 @@ export class GameMap { public setPosition(x: number, y: number) { this.oldPosition = this.position; this.position = { x, y }; - this.triggerZonesChange(); + this.triggerAreasChange(); this.oldKey = this.key; @@ -201,17 +202,17 @@ export class GameMap { } /** - * Registers a callback called when the user moves inside another zone. + * Registers a callback called when the user moves inside another area. */ - public onEnterZone(callback: zoneChangeCallback) { - this.enterZoneCallbacks.push(callback); + public onEnterArea(callback: areaChangeCallback) { + this.enterAreaCallbacks.push(callback); } /** - * Registers a callback called when the user moves outside another zone. + * Registers a callback called when the user moves outside another area. */ - public onLeaveZone(callback: zoneChangeCallback) { - this.leaveZoneCallbacks.push(callback); + public onLeaveArea(callback: areaChangeCallback) { + this.leaveAreaCallbacks.push(callback); } public findLayer(layerName: string): ITiledMapLayer | undefined { @@ -420,33 +421,33 @@ export class GameMap { } /** - * We use Tiled Objects with type "zone" as zones with defined x, y, width and height for easier event triggering. + * We use Tiled Objects with type "area" as areas with defined x, y, width and height for easier event triggering. */ - private triggerZonesChange(): void { - const zonesByOldPosition = this.getZonesOnPosition(this.oldPosition); - const zonesByNewPosition = this.getZonesOnPosition(this.position); + private triggerAreasChange(): void { + const areasByOldPosition = this.getAreasOnPosition(this.oldPosition); + const areasByNewPosition = this.getAreasOnPosition(this.position); - const enterZones = new Set(zonesByNewPosition); - const leaveZones = new Set(zonesByOldPosition); + const enterAreas = new Set(areasByNewPosition); + const leaveAreas = new Set(areasByOldPosition); - enterZones.forEach((zone) => { - if (leaveZones.has(zone)) { - leaveZones.delete(zone); - enterZones.delete(zone); + enterAreas.forEach((area) => { + if (leaveAreas.has(area)) { + leaveAreas.delete(area); + enterAreas.delete(area); } }); - if (enterZones.size > 0) { - const zonesArray = Array.from(enterZones); - for (const callback of this.enterZoneCallbacks) { - callback(zonesArray, zonesByNewPosition); + if (enterAreas.size > 0) { + const areasArray = Array.from(enterAreas); + for (const callback of this.enterAreaCallbacks) { + callback(areasArray, areasByNewPosition); } } - if (leaveZones.size > 0) { - const zonesArray = Array.from(leaveZones); - for (const callback of this.leaveZoneCallbacks) { - callback(zonesArray, zonesByNewPosition); + if (leaveAreas.size > 0) { + const areasArray = Array.from(leaveAreas); + for (const callback of this.leaveAreaCallbacks) { + callback(areasArray, areasByNewPosition); } } } @@ -454,9 +455,9 @@ export class GameMap { private getProperties(key: number): Map { const properties = new Map(); - for (const zone of this.getZonesOnPosition(this.position)) { - if (zone.properties !== undefined) { - for (const property of zone.properties) { + for (const area of this.getAreasOnPosition(this.position)) { + if (area.properties !== undefined) { + for (const property of area.properties) { if (property.value === undefined) { continue; } @@ -503,13 +504,13 @@ export class GameMap { return properties; } - private getZonesOnPosition(position?: { x: number; y: number }): ITiledMapObject[] { + private getAreasOnPosition(position?: { x: number; y: number }): ITiledMapObject[] { return position - ? this.zones.filter((zone) => { + ? this.areas.filter((area) => { if (!position) { return false; } - return MathUtils.isOverlappingWithRectangle(position, zone); + return MathUtils.isOverlappingWithRectangle(position, area); }) : []; } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 210cfba1..7478540d 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -892,42 +892,42 @@ export class GameScene extends DirtyScene { }); }); - this.gameMap.onEnterZone((zones) => { - for (const zone of zones) { - const focusable = zone.properties?.find( + this.gameMap.onEnterArea((areas) => { + for (const area of areas) { + const focusable = area.properties?.find( (property) => property.name === GameMapProperties.FOCUSABLE ); if (focusable && focusable.value === true) { - const zoomMargin = zone.properties?.find( + const zoomMargin = area.properties?.find( (property) => property.name === GameMapProperties.ZOOM_MARGIN ); this.cameraManager.enterFocusMode( { - x: zone.x + zone.width * 0.5, - y: zone.y + zone.height * 0.5, - width: zone.width, - height: zone.height, + x: area.x + area.width * 0.5, + y: area.y + area.height * 0.5, + width: area.width, + height: area.height, }, zoomMargin ? Math.max(0, Number(zoomMargin.value)) : undefined ); break; } } - zones.forEach((zone) => { - iframeListener.sendEnterZoneEvent(zone.name); + areas.forEach((area) => { + iframeListener.sendEnterAreaEvent(area.name); }); }); - this.gameMap.onLeaveZone((zones) => { - for (const zone of zones) { - const focusable = zone.properties?.find((property) => property.name === "focusable"); + this.gameMap.onLeaveArea((areas) => { + for (const area of areas) { + const focusable = area.properties?.find((property) => property.name === "focusable"); if (focusable && focusable.value === true) { this.cameraManager.leaveFocusMode(this.CurrentPlayer, 1000); break; } } - zones.forEach((zone) => { - iframeListener.sendLeaveZoneEvent(zone.name); + areas.forEach((area) => { + iframeListener.sendLeaveAreaEvent(area.name); }); }); diff --git a/maps/tests/tiled_objects.json b/maps/tests/tiled_objects.json index f59380fd..d22a2efc 100644 --- a/maps/tests/tiled_objects.json +++ b/maps/tests/tiled_objects.json @@ -27,7 +27,7 @@ "y":0 }, { - "data":[201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201], + "data":[201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 223, 223, 223, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201], "height":17, "id":4, "name":"floor", @@ -72,7 +72,7 @@ "value":"onaction" }], "rotation":0, - "type":"", + "type":"area", "visible":true, "width":320, "x":317.331510594668, @@ -89,7 +89,7 @@ "value":"MeetingRoom" }], "rotation":0, - "type":"", + "type":"area", "visible":true, "width":192.568694463431, "x":30.738664843928, @@ -106,11 +106,28 @@ "value":true }], "rotation":0, - "type":"", + "type":"area", "visible":true, "width":225.115516062885, "x":735.919799498747, "y":354.398724082935 + }, + { + "height":63.2854864433812, + "id":13, + "name":"", + "properties":[ + { + "name":"openWebsite", + "type":"string", + "value":"https:\/\/youtu.be\/iF-ucIgP0OE?list=RDGMEMWO-g6DgCWEqKlDtKbJA1GwVMiF-ucIgP0OE" + }], + "rotation":0, + "type":"area", + "visible":true, + "width":96.736386420597, + "x":799.205285942128, + "y":96.736386420597 }], "opacity":1, "type":"objectgroup", @@ -119,7 +136,7 @@ "y":0 }], "nextlayerid":39, - "nextobjectid":13, + "nextobjectid":15, "orientation":"orthogonal", "properties":[ {