diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts index d8c385e6..00006a7d 100644 --- a/front/src/Phaser/Game/CameraManager.ts +++ b/front/src/Phaser/Game/CameraManager.ts @@ -1,28 +1,27 @@ -import { Easing } from '../../types'; -import { HtmlUtils } from '../../WebRtc/HtmlUtils'; -import type { Box } from '../../WebRtc/LayoutManager'; -import type { Player } from '../Player/Player'; -import type { WaScaleManager } from '../Services/WaScaleManager'; -import type { GameScene } from './GameScene'; +import { Easing } from "../../types"; +import { HtmlUtils } from "../../WebRtc/HtmlUtils"; +import type { Box } from "../../WebRtc/LayoutManager"; +import type { Player } from "../Player/Player"; +import type { WaScaleManager } from "../Services/WaScaleManager"; +import type { GameScene } from "./GameScene"; export enum CameraMode { - Free = 'Free', - Follow = 'Follow', - Focus = 'Focus', + Free = "Free", + Follow = "Follow", + Focus = "Focus", } export class CameraManager extends Phaser.Events.EventEmitter { - private scene: GameScene; private camera: Phaser.Cameras.Scene2D.Camera; - private cameraBounds: { x: number, y: number }; + private cameraBounds: { x: number; y: number }; private waScaleManager: WaScaleManager; private cameraMode: CameraMode = CameraMode.Free; private restoreZoomTween?: Phaser.Tweens.Tween; - constructor(scene: GameScene, cameraBounds: { x: number, y: number }, waScaleManager: WaScaleManager) { + constructor(scene: GameScene, cameraBounds: { x: number; y: number }, waScaleManager: WaScaleManager) { super(); this.scene = scene; @@ -39,7 +38,8 @@ export class CameraManager extends Phaser.Events.EventEmitter { } public enterFocusMode( - focusOn: { x: number, y: number, width: number, height: number }, duration: number = 1000, + focusOn: { x: number; y: number; width: number; height: number }, + duration: number = 1000 ): void { this.setCameraMode(CameraMode.Focus); this.waScaleManager.saveZoom(); @@ -53,9 +53,12 @@ export class CameraManager extends Phaser.Events.EventEmitter { focusOn.x + focusOn.width * 0.5, focusOn.y + focusOn.height * 0.5, duration, - Easing.SineEaseOut, false, (camera, progress, x, y) => { + Easing.SineEaseOut, + false, + (camera, progress, x, y) => { this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange; - }); + } + ); } public leaveFocusMode(player: Player): void { @@ -107,7 +110,7 @@ export class CameraManager extends Phaser.Events.EventEmitter { ease: Easing.SineEaseOut, onUpdate: (tween: Phaser.Tweens.Tween) => { this.waScaleManager.zoomModifier = tween.getValue(); - } + }, }); } @@ -115,4 +118,4 @@ export class CameraManager extends Phaser.Events.EventEmitter { this.camera = this.scene.cameras.main; this.camera.setBounds(0, 0, this.cameraBounds.x, this.cameraBounds.y); } -} \ No newline at end of file +} diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts index b2fab07d..40588923 100644 --- a/front/src/Phaser/Game/GameMap.ts +++ b/front/src/Phaser/Game/GameMap.ts @@ -1,9 +1,15 @@ -import type { ITiledMap, ITiledMapLayer, ITiledMapObject, ITiledMapObjectLayer, ITiledMapProperty } from "../Map/ITiledMap"; +import type { + ITiledMap, + ITiledMapLayer, + ITiledMapObject, + ITiledMapObjectLayer, + ITiledMapProperty, +} from "../Map/ITiledMap"; import { flattenGroupLayersMap } from "../Map/LayersFlattener"; import TilemapLayer = Phaser.Tilemaps.TilemapLayer; import { DEPTH_OVERLAY_INDEX } from "./DepthIndexes"; import { GameMapProperties } from "./GameMapProperties"; -import { MathUtils } from '../../Utils/MathUtils'; +import { MathUtils } from "../../Utils/MathUtils"; export type PropertyChangeCallback = ( newValue: string | number | boolean | undefined, @@ -28,20 +34,20 @@ export type zoneChangeCallback = ( export class GameMap { /** * oldKey is the index of the previous tile. - */ + */ private oldKey: number | undefined; /** * key is the index of the current tile. - */ + */ private key: number | undefined; /** * oldPosition is the previous position of the player. */ - private oldPosition: { x: number, y: number } | undefined; + private oldPosition: { x: number; y: number } | undefined; /** * position is the current position of the player. */ - private position: { x: number, y: number } | undefined; + private position: { x: number; y: number } | undefined; private lastProperties = new Map(); private propertiesChangeCallbacks = new Map>(); @@ -117,19 +123,19 @@ export class GameMap { this.oldPosition = this.position; this.position = { x, y }; this.triggerZonesChange(); - + this.oldKey = this.key; - + const xMap = Math.floor(x / this.map.tilewidth); const yMap = Math.floor(y / this.map.tileheight); const key = xMap + yMap * this.map.width; - + if (key === this.key) { return; } - + this.key = key; - + this.triggerAllProperties(); this.triggerLayersChange(); } @@ -189,25 +195,27 @@ export class GameMap { * We user Tiled Objects with type "zone" as zones with defined x, y, width and height for easier event triggering. */ private triggerZonesChange(): void { - const zones = this.tiledObjects.filter(object => object.type === "zone"); + const zones = this.tiledObjects.filter((object) => object.type === "zone"); // P.H. NOTE: We could also get all of the zones and add properties of occupied tiles to them, so we could later on check collision by using tileKeys // TODO: Change this to an array with currently occupied sone instead of doing elimination process - const zonesByOldPosition = this.oldPosition ? - zones.filter((zone) => { - if (!this.oldPosition) { - return false; - } - return MathUtils.isOverlappingWithRectangle(this.oldPosition, zone); - }) : []; + const zonesByOldPosition = this.oldPosition + ? zones.filter((zone) => { + if (!this.oldPosition) { + return false; + } + return MathUtils.isOverlappingWithRectangle(this.oldPosition, zone); + }) + : []; - const zonesByNewPosition = this.position ? - zones.filter((zone) => { - if (!this.position) { - return false; - } - return MathUtils.isOverlappingWithRectangle(this.position, zone); - }) : []; + const zonesByNewPosition = this.position + ? zones.filter((zone) => { + if (!this.position) { + return false; + } + return MathUtils.isOverlappingWithRectangle(this.position, zone); + }) + : []; const enterZones = new Set(zonesByNewPosition); const leaveZones = new Set(zonesByOldPosition); @@ -459,7 +467,7 @@ export class GameMap { private getObjectsFromLayers(layers: ITiledMapLayer[]): ITiledMapObject[] { const objects: ITiledMapObject[] = []; - const objectLayers = layers.filter(layer => layer.type === "objectgroup"); + const objectLayers = layers.filter((layer) => layer.type === "objectgroup"); for (const objectLayer of objectLayers) { if (this.isOfTypeITiledMapObjectLayer(objectLayer)) { objects.push(...objectLayer.objects); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index b04788e3..78b56327 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -60,7 +60,7 @@ import { PinchManager } from "../UserInput/PinchManager"; import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick"; import { waScaleManager } from "../Services/WaScaleManager"; import { EmoteManager } from "./EmoteManager"; -import { CameraManager } from './CameraManager'; +import { CameraManager } from "./CameraManager"; import EVENT_TYPE = Phaser.Scenes.Events; import type { HasPlayerMovedEvent } from "../../Api/Events/HasPlayerMovedEvent"; @@ -551,7 +551,11 @@ export class GameScene extends DirtyScene { this.createCurrentPlayer(); this.removeAllRemotePlayers(); //cleanup the list of remote players in case the scene was rebooted - this.cameraManager = new CameraManager(this, { x: this.Map.widthInPixels, y: this.Map.heightInPixels }, waScaleManager); + this.cameraManager = new CameraManager( + this, + { x: this.Map.widthInPixels, y: this.Map.heightInPixels }, + waScaleManager + ); biggestAvailableAreaStore.recompute(); this.cameraManager.startFollow(this.CurrentPlayer); @@ -787,7 +791,7 @@ export class GameScene extends DirtyScene { this.gameMap.onEnterZone((zones) => { for (const zone of zones) { for (const property of zone.properties ?? []) { - if (property.name === 'focusable' && property.value === true) { + if (property.name === "focusable" && property.value === true) { this.cameraManager.enterFocusMode(zone); break; } @@ -801,7 +805,7 @@ export class GameScene extends DirtyScene { this.gameMap.onLeaveZone((zones) => { for (const zone of zones) { for (const property of zone.properties ?? []) { - if (property.name === 'focusable' && property.value === true) { + if (property.name === "focusable" && property.value === true) { this.cameraManager.leaveFocusMode(this.CurrentPlayer); break; } diff --git a/front/src/Utils/MathUtils.ts b/front/src/Utils/MathUtils.ts index 098b86b4..aea3bb11 100644 --- a/front/src/Utils/MathUtils.ts +++ b/front/src/Utils/MathUtils.ts @@ -1,27 +1,25 @@ - export class MathUtils { - /** - * + * * @param p Position to check. * @param r Rectangle to check the overlap against. * @returns true is overlapping */ public static isOverlappingWithRectangle( - p: { x: number, y: number}, - r: { x: number, y: number, width: number, height: number}, + p: { x: number; y: number }, + r: { x: number; y: number; width: number; height: number } ): boolean { - return (this.isBetween(p.x, r.x, r.x + r.width) && this.isBetween(p.y, r.y, r.y + r.height)); + return this.isBetween(p.x, r.x, r.x + r.width) && this.isBetween(p.y, r.y, r.y + r.height); } /** - * + * * @param value Value to check * @param min inclusive min value * @param max inclusive max value * @returns true if value is in */ public static isBetween(value: number, min: number, max: number): boolean { - return (value >= min) && (value <= max); + return value >= min && value <= max; } -} \ No newline at end of file +} diff --git a/front/src/types.ts b/front/src/types.ts index 409070e5..d1ff3475 100644 --- a/front/src/types.ts +++ b/front/src/types.ts @@ -50,5 +50,5 @@ export enum Easing { ExpoEaseInOut = "Expo.easeInOut", CircEaseInOut = "Circ.easeInOut", BackEaseInOut = "Back.easeInOut", - BounceEaseInOut = "Bounce.easeInOut" + BounceEaseInOut = "Bounce.easeInOut", }