lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

ran prettier

Browse source
This commit is contained in:
Hanusiak Piotr 2021-12-03 10:11:16 +01:00
parent a1a83775d6
commit 4bc21a95c5
5 changed files with 71 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
front/src/Phaser/Game/CameraManager.ts
View file

@ -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);
}
}
}

62
front/src/Phaser/Game/GameMap.ts
View file

@ -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<string, string | boolean | number>();
private propertiesChangeCallbacks = new Map<string, Array<PropertyChangeCallback>>();
@ -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);

12
front/src/Phaser/Game/GameScene.ts
View file

@ -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;
}

16
front/src/Utils/MathUtils.ts
View file

@ -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 <min, max>
*/
public static isBetween(value: number, min: number, max: number): boolean {
return (value >= min) && (value <= max);
return value >= min && value <= max;
}
}
}

2
front/src/types.ts
View file

@ -50,5 +50,5 @@ export enum Easing {
ExpoEaseInOut = "Expo.easeInOut",
CircEaseInOut = "Circ.easeInOut",
BackEaseInOut = "Back.easeInOut",
BounceEaseInOut = "Bounce.easeInOut"
BounceEaseInOut = "Bounce.easeInOut",
}