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":[
{