Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge setPosition and focusOn into setViewport

Browse source
This commit is contained in:
Hanusiak Piotr 2022-01-13 16:08:16 +01:00
parent a1c96b0524
commit d62b116e5d
9 changed files with 44 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

15
front/src/Api/Events/CameraFocusOnEvent.ts
View file

@ -1,15 +0,0 @@
import * as tg from "generic-type-guard";
export const isCameraFocusOnEvent = new tg.IsInterface()
.withProperties({
x: tg.isNumber,
y: tg.isNumber,
width: tg.isNumber,
height: tg.isNumber,
smooth: tg.isBoolean,
})
.get();
/**
* A message sent from the iFrame to the game to set the camera focus on certain place.
*/
export type CameraFocusOnEvent = tg.GuardedType<typeof isCameraFocusOnEvent>;

5
front/src/Api/Events/CameraSetPositionEvent.ts → front/src/Api/Events/CameraSetViewportEvent.ts
View file

@ -1,15 +1,16 @@
import * as tg from "generic-type-guard";
export const isCameraSetPositionEvent = new tg.IsInterface()
export const isCameraSetViewportEvent = new tg.IsInterface()
.withProperties({
x: tg.isNumber,
y: tg.isNumber,
width: tg.isNumber,
height: tg.isNumber,
lock: tg.isBoolean,
smooth: tg.isBoolean,
})
.get();
/**
* A message sent from the iFrame to the game to change the camera position.
*/
export type CameraSetPositionEvent = tg.GuardedType<typeof isCameraSetPositionEvent>;
export type CameraSetViewportEvent = tg.GuardedType<typeof isCameraSetViewportEvent>;

6
front/src/Api/Events/IframeEvent.ts
View file

@ -31,8 +31,7 @@ import type { ChangeLayerEvent } from "./ChangeLayerEvent";
import { isPlayerPosition } from "./PlayerPosition";
import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
import type { ChangeZoneEvent } from "./ChangeZoneEvent";
import type { CameraSetPositionEvent } from "./CameraSetPositionEvent";
import type { CameraFocusOnEvent } from "./CameraFocusOnEvent";
import type { CameraSetViewportEvent } from "./CameraSetViewportEvent";
import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
import { isColorEvent } from "./ColorEvent";
@ -46,9 +45,8 @@ export interface TypedMessageEvent<T> extends MessageEvent {
export type IframeEventMap = {
loadPage: LoadPageEvent;
chat: ChatEvent;
cameraFocusOn: CameraFocusOnEvent;
cameraFollowPlayer: CameraFollowPlayerEvent;
cameraSetPosition: CameraSetPositionEvent;
cameraSetViewport: CameraSetViewportEvent;
openPopup: OpenPopupEvent;
closePopup: ClosePopupEvent;
openTab: OpenTabEvent;

16
front/src/Api/IframeListener.ts
View file

@ -33,8 +33,7 @@ import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Store
import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
import { CameraSetPositionEvent, isCameraSetPositionEvent } from "./Events/CameraSetPositionEvent";
import { CameraFocusOnEvent, isCameraFocusOnEvent } from "./Events/CameraFocusOnEvent";
import { CameraSetViewportEvent, isCameraSetViewportEvent } from "./Events/CameraSetViewportEvent";
import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
type AnswererCallback<T extends keyof IframeQueryMap> = (
@ -59,11 +58,8 @@ class IframeListener {
private readonly _disablePlayerControlStream: Subject<void> = new Subject();
public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
private readonly _cameraSetPositionStream: Subject<CameraSetPositionEvent> = new Subject();
public readonly cameraSetPositionStream = this._cameraSetPositionStream.asObservable();
private readonly _cameraFocusOnStream: Subject<CameraFocusOnEvent> = new Subject();
public readonly cameraFocusOnStream = this._cameraFocusOnStream.asObservable();
private readonly _cameraSetViewportStream: Subject<CameraSetViewportEvent> = new Subject();
public readonly cameraSetViewportStream = this._cameraSetViewportStream.asObservable();
private readonly _cameraFollowPlayerStream: Subject<CameraFollowPlayerEvent> = new Subject();
public readonly cameraFollowPlayerStream = this._cameraFollowPlayerStream.asObservable();
@ -214,10 +210,8 @@ class IframeListener {
this._hideLayerStream.next(payload.data);
} else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
this._setPropertyStream.next(payload.data);
} else if (payload.type === "cameraSetPosition" && isCameraSetPositionEvent(payload.data)) {
this._cameraSetPositionStream.next(payload.data);
} else if (payload.type === "cameraFocusOn" && isCameraFocusOnEvent(payload.data)) {
this._cameraFocusOnStream.next(payload.data);
} else if (payload.type === "cameraSetViewport" && isCameraSetViewportEvent(payload.data)) {
this._cameraSetViewportStream.next(payload.data);
} else if (payload.type === "cameraFollowPlayer" && isCameraFollowPlayerEvent(payload.data)) {
this._cameraFollowPlayerStream.next(payload.data);
} else if (payload.type === "chat" && isChatEvent(payload.data)) {

20
front/src/Api/iframe/camera.ts
View file

@ -17,17 +17,17 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
}),
];
public setPosition(x: number, y: number, width: number, height: number, smooth: boolean = false): void {
public setViewport(
x: number,
y: number,
width: number,
height: number,
lock: boolean = false,
smooth: boolean = false
): void {
sendToWorkadventure({
type: "cameraSetPosition",
data: { x, y, width, height, smooth },
});
}
public focusOn(x: number, y: number, width: number, height: number, smooth: boolean = false): void {
sendToWorkadventure({
type: "cameraFocusOn",
data: { x, y, width, height, smooth },
type: "cameraSetViewport",
data: { x, y, width, height, lock, smooth },
});
}

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

@ -254,14 +254,10 @@ export class CameraManager extends Phaser.Events.EventEmitter {
);
this.camera.on("followupdate", () => {
this.sendCameraUpdateEvent();
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
});
}
private sendCameraUpdateEvent(): void {
this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
}
private getCameraUpdateEventData(): CameraManagerEventCameraUpdateData {
return {
x: this.camera.worldView.x,

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

@ -1120,20 +1120,23 @@ ${escapedMessage}
);
this.iframeSubscriptionList.push(
iframeListener.cameraSetPositionStream.subscribe((cameraSetPositionEvent) => {
this.cameraManager.setPosition({ ...cameraSetPositionEvent }, cameraSetPositionEvent.smooth ? 1000 : 0);
iframeListener.cameraSetViewportStream.subscribe((cameraSetViewportEvent) => {
const duration = cameraSetViewportEvent.smooth ? 1000 : 0;
cameraSetViewportEvent.lock
? this.cameraManager.enterFocusMode({ ...cameraSetViewportEvent }, undefined, duration)
: this.cameraManager.setPosition({ ...cameraSetViewportEvent }, duration);
})
);
this.iframeSubscriptionList.push(
iframeListener.cameraFocusOnStream.subscribe((cameraFocusOnEvent) => {
this.cameraManager.enterFocusMode(
{ ...cameraFocusOnEvent },
undefined,
cameraFocusOnEvent.smooth ? 1000 : 0
);
})
);
// this.iframeSubscriptionList.push(
// iframeListener.cameraFocusOnStream.subscribe((cameraFocusOnEvent) => {
// this.cameraManager.enterFocusMode(
// { ...cameraFocusOnEvent },
// undefined,
// cameraFocusOnEvent.smooth ? 1000 : 0
// );
// })
// );
this.iframeSubscriptionList.push(
iframeListener.cameraFollowPlayerStream.subscribe((cameraFollowPlayerEvent) => {
@ -1178,8 +1181,6 @@ ${escapedMessage}
this.firstCameraUpdateSent = true;
}
);
iframeListener.sendCameraUpdated(this.cameras.main);
}
})
);