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

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
Show stats 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);
}
})
);

40
maps/tests/CameraApi/camera_api_test.json
View file

@ -51,32 +51,14 @@
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"Set Position - Move the camera to the given point but do not lock it. If the player moves, camera will back to following him",
"text":"Set Viewport - Move the camera to the given point. It will be locked if Lock checkbox is checked",
"wrap":true
},
"type":"",
"visible":true,
"width":315.4375,
"x":68.4021076998051,
"y":8.73391812865529
},
{
"height":115.776,
"id":3,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"Focus On - Works like for Focusable Zones. Camera will be locked and won't move unless we explicitly change the mode",
"wrap":true
},
"type":"",
"visible":true,
"width":315.438,
"x":64.7309301350722,
"y":126.555409408477
"y":160.73391812865529
},
{
"height":115.776,
@ -95,24 +77,6 @@
"width":315.438,
"x":64.7309301350722,
"y":256.224715416861
},
{
"height":115.776,
"id":5,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"MS Shell Dlg 2",
"pixelsize":21,
"text":"Both Set Position and Focus On will lock the ability of changing the game zoom",
"wrap":true
},
"type":"",
"visible":true,
"width":315.438,
"x":65.848768979972,
"y":351.241017233349
}],
"opacity":1,
"type":"objectgroup",

25
maps/tests/CameraApi/script.php
View file

@ -8,33 +8,22 @@
WA.camera.onCameraUpdate((worldView) => console.log(worldView));
WA.onInit().then(() => {
console.log('After WA init');
const setPositionButton = document.getElementById('setPositionButton');
const focusOnButton = document.getElementById('focusOnButton');
const setViewportButton = document.getElementById('setViewportButton');
const followPlayerButton = document.getElementById('followPlayerButton');
const xField = document.getElementById('x');
const yField = document.getElementById('y');
const widthField = document.getElementById('width');
const heightField = document.getElementById('height');
const smoothField = document.getElementById('smooth');
const lockField = document.getElementById('lock');
setPositionButton.addEventListener('click', () => {
console.log('SET POSITION BUTTON PRESSED');
console.log(smoothField.checked);
WA.camera.setPosition(
parseInt(xField.value),
parseInt(yField.value),
parseInt(widthField.value),
parseInt(heightField.value),
smoothField.checked,
);
});
focusOnButton.addEventListener('click', () => {
WA.camera.focusOn(
setViewportButton.addEventListener('click', () => {
WA.camera.setViewport(
parseInt(xField.value),
parseInt(yField.value),
parseInt(widthField.value),
parseInt(heightField.value),
lockField.checked,
smoothField.checked,
);
});
@ -52,9 +41,9 @@ Y: <input type="text" id="y" value="64" /><br/>
width: <input type="text" id="width" value="600" /><br/>
height: <input type="text" id="height" value="400" /><br/>
Smooth: <input type="checkbox" id="smooth" value=1 /><br/>
Lock: <input type="checkbox" id="lock" value=1 /><br/>
<button id="setPositionButton">Set Position</button>
<button id="focusOnButton">Focus On</button>
<button id="setViewportButton">Set Viewport</button>
<button id="followPlayerButton">Follow Player</button>
</body>