From d62b116e5d22a54b6567d0ffca89303ed39e8920 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Thu, 13 Jan 2022 16:08:16 +0100 Subject: [PATCH] merge setPosition and focusOn into setViewport --- front/src/Api/Events/CameraFocusOnEvent.ts | 15 ------- ...tionEvent.ts => CameraSetViewportEvent.ts} | 5 ++- front/src/Api/Events/IframeEvent.ts | 6 +-- front/src/Api/IframeListener.ts | 16 +++----- front/src/Api/iframe/camera.ts | 20 +++++----- front/src/Phaser/Game/CameraManager.ts | 6 +-- front/src/Phaser/Game/GameScene.ts | 27 +++++++------ maps/tests/CameraApi/camera_api_test.json | 40 +------------------ maps/tests/CameraApi/script.php | 25 ++++-------- 9 files changed, 44 insertions(+), 116 deletions(-) delete mode 100644 front/src/Api/Events/CameraFocusOnEvent.ts rename front/src/Api/Events/{CameraSetPositionEvent.ts => CameraSetViewportEvent.ts} (63%) diff --git a/front/src/Api/Events/CameraFocusOnEvent.ts b/front/src/Api/Events/CameraFocusOnEvent.ts deleted file mode 100644 index e6a1547e..00000000 --- a/front/src/Api/Events/CameraFocusOnEvent.ts +++ /dev/null @@ -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; diff --git a/front/src/Api/Events/CameraSetPositionEvent.ts b/front/src/Api/Events/CameraSetViewportEvent.ts similarity index 63% rename from front/src/Api/Events/CameraSetPositionEvent.ts rename to front/src/Api/Events/CameraSetViewportEvent.ts index ef421c44..70a6d62c 100644 --- a/front/src/Api/Events/CameraSetPositionEvent.ts +++ b/front/src/Api/Events/CameraSetViewportEvent.ts @@ -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; +export type CameraSetViewportEvent = tg.GuardedType; diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 6503ccc9..0df53fbe 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -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 extends MessageEvent { export type IframeEventMap = { loadPage: LoadPageEvent; chat: ChatEvent; - cameraFocusOn: CameraFocusOnEvent; cameraFollowPlayer: CameraFollowPlayerEvent; - cameraSetPosition: CameraSetPositionEvent; + cameraSetViewport: CameraSetViewportEvent; openPopup: OpenPopupEvent; closePopup: ClosePopupEvent; openTab: OpenTabEvent; diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index 30d41340..49d8b37b 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -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 = ( @@ -59,11 +58,8 @@ class IframeListener { private readonly _disablePlayerControlStream: Subject = new Subject(); public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable(); - private readonly _cameraSetPositionStream: Subject = new Subject(); - public readonly cameraSetPositionStream = this._cameraSetPositionStream.asObservable(); - - private readonly _cameraFocusOnStream: Subject = new Subject(); - public readonly cameraFocusOnStream = this._cameraFocusOnStream.asObservable(); + private readonly _cameraSetViewportStream: Subject = new Subject(); + public readonly cameraSetViewportStream = this._cameraSetViewportStream.asObservable(); private readonly _cameraFollowPlayerStream: Subject = 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)) { diff --git a/front/src/Api/iframe/camera.ts b/front/src/Api/iframe/camera.ts index a8d6feff..9dc9e0bb 100644 --- a/front/src/Api/iframe/camera.ts +++ b/front/src/Api/iframe/camera.ts @@ -17,17 +17,17 @@ export class WorkAdventureCameraCommands extends IframeApiContribution { - 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, diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 0ab113f2..4e3f7be3 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -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); } }) ); diff --git a/maps/tests/CameraApi/camera_api_test.json b/maps/tests/CameraApi/camera_api_test.json index ea63ee57..395e3b4b 100644 --- a/maps/tests/CameraApi/camera_api_test.json +++ b/maps/tests/CameraApi/camera_api_test.json @@ -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", diff --git a/maps/tests/CameraApi/script.php b/maps/tests/CameraApi/script.php index d8fb03a7..94146a0c 100644 --- a/maps/tests/CameraApi/script.php +++ b/maps/tests/CameraApi/script.php @@ -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:
width:
height:
Smooth:
+Lock:
- - +