Refactoring and documentation update

This commit is contained in:
Benedicte Quimbert 2021-11-23 17:39:45 +01:00
parent 5b6a8ca4d7
commit f761858328
7 changed files with 47 additions and 23 deletions

23
docs/maps/api-camera.md Normal file
View File

@ -0,0 +1,23 @@
{.section-title.accent.text-primary}
# API Camera functions Reference
### Listen to the camera update
```
WA.camera.onCameraUpdate(callback: WasCameraUpdatedEventCallback): void
```
Listens to the updating of the camera linked to the player. It will trigger for every update of the camera's properties (position or scale for instance) or of the Game Object it is linked to (undestand: if the player moves). An event will then be sent.
The event has the following attributes :
* **x (number):** coordinate X of the camera's world view (the area looked at by the camera).
* **y (number):** coordinate Y of the camera's world view.
* **width (number):** the width of the camera's world view.
* **height (number):** the height of the camera's world view.
**callback:** the function that will be called when the camera is updated.
Example :
```javascript
WA.camera.onCameraUpdate((worldView) => console.log(worldView));
```

View File

@ -10,5 +10,6 @@
- [UI functions](api-ui.md) - [UI functions](api-ui.md)
- [Sound functions](api-sound.md) - [Sound functions](api-sound.md)
- [Controls functions](api-controls.md) - [Controls functions](api-controls.md)
- [Camera functions](api-camera.md)
- [List of deprecated functions](api-deprecated.md) - [List of deprecated functions](api-deprecated.md)

View File

@ -30,7 +30,7 @@ import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEv
import type { ChangeLayerEvent } from "./ChangeLayerEvent"; import type { ChangeLayerEvent } from "./ChangeLayerEvent";
import { isPlayerPropertyEvent } from "./PlayerPropertyEvent"; import { isPlayerPropertyEvent } from "./PlayerPropertyEvent";
import { isPlayerPosition } from "./PlayerPosition"; import { isPlayerPosition } from "./PlayerPosition";
import type { HasCameraMovedEvent } from "./HasCameraMovedEvent"; import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
export interface TypedMessageEvent<T> extends MessageEvent { export interface TypedMessageEvent<T> extends MessageEvent {
data: T; data: T;
@ -51,7 +51,7 @@ export type IframeEventMap = {
displayBubble: null; displayBubble: null;
removeBubble: null; removeBubble: null;
onPlayerMove: undefined; onPlayerMove: undefined;
onCameraMove: undefined; onCameraUpdate: undefined;
showLayer: LayerEvent; showLayer: LayerEvent;
hideLayer: LayerEvent; hideLayer: LayerEvent;
setProperty: SetPropertyEvent; setProperty: SetPropertyEvent;
@ -82,7 +82,7 @@ export interface IframeResponseEventMap {
leaveLayerEvent: ChangeLayerEvent; leaveLayerEvent: ChangeLayerEvent;
buttonClickedEvent: ButtonClickedEvent; buttonClickedEvent: ButtonClickedEvent;
hasPlayerMoved: HasPlayerMovedEvent; hasPlayerMoved: HasPlayerMovedEvent;
hasCameraMoved: HasCameraMovedEvent; wasCameraUpdated: WasCameraUpdatedEvent;
menuItemClicked: MenuItemClickedEvent; menuItemClicked: MenuItemClickedEvent;
setVariable: SetVariableEvent; setVariable: SetVariableEvent;
messageTriggered: MessageReferenceEvent; messageTriggered: MessageReferenceEvent;

View File

@ -1,6 +1,6 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
export const isHasCameraMovedEvent = new tg.IsInterface() export const isWasCameraUpdatedEvent = new tg.IsInterface()
.withProperties({ .withProperties({
x: tg.isNumber, x: tg.isNumber,
y: tg.isNumber, y: tg.isNumber,
@ -13,6 +13,6 @@ export const isHasCameraMovedEvent = new tg.IsInterface()
* A message sent from the game to the iFrame to notify a movement from the camera. * A message sent from the game to the iFrame to notify a movement from the camera.
*/ */
export type HasCameraMovedEvent = tg.GuardedType<typeof isHasCameraMovedEvent>; export type WasCameraUpdatedEvent = tg.GuardedType<typeof isWasCameraUpdatedEvent>;
export type HasCameraMovedEventCallback = (event: HasCameraMovedEvent) => void; export type WasCameraUpdatedEventCallback = (event: WasCameraUpdatedEvent) => void;

View File

@ -31,7 +31,7 @@ import type { SetVariableEvent } from "./Events/SetVariableEvent";
import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent"; import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore"; import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent"; import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
import type { HasCameraMovedEvent } from "./Events/HasCameraMovedEvent"; import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
type AnswererCallback<T extends keyof IframeQueryMap> = ( type AnswererCallback<T extends keyof IframeQueryMap> = (
query: IframeQueryMap[T]["query"], query: IframeQueryMap[T]["query"],
@ -95,7 +95,7 @@ class IframeListener {
private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>(); private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
private readonly scripts = new Map<string, HTMLIFrameElement>(); private readonly scripts = new Map<string, HTMLIFrameElement>();
private sendPlayerMove: boolean = false; private sendPlayerMove: boolean = false;
private sendCameraMove: boolean = false; private sendCameraUpdate: boolean = false;
// Note: we are forced to type this in unknown and later cast with "as" because of https://github.com/microsoft/TypeScript/issues/31904 // Note: we are forced to type this in unknown and later cast with "as" because of https://github.com/microsoft/TypeScript/issues/31904
private answerers: { private answerers: {
@ -227,8 +227,8 @@ class IframeListener {
this._removeBubbleStream.next(); this._removeBubbleStream.next();
} else if (payload.type == "onPlayerMove") { } else if (payload.type == "onPlayerMove") {
this.sendPlayerMove = true; this.sendPlayerMove = true;
} else if (payload.type == "onCameraMove") { } else if (payload.type == "onCameraUpdate") {
this.sendCameraMove = true; this.sendCameraUpdate = true;
} else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) { } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
this._setTilesStream.next(payload.data); this._setTilesStream.next(payload.data);
} else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) { } else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) {
@ -427,10 +427,10 @@ class IframeListener {
} }
} }
hasCameraMoved(event: HasCameraMovedEvent) { sendCameraUpdated(event: WasCameraUpdatedEvent) {
if (this.sendCameraMove) { if (this.sendCameraUpdate) {
this.postMessage({ this.postMessage({
type: "hasCameraMoved", type: "wasCameraUpdated",
data: event, data: event,
}); });
} }

View File

@ -1,26 +1,26 @@
import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution"; import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
import { Subject } from "rxjs"; import { Subject } from "rxjs";
import type { HasCameraMovedEvent, HasCameraMovedEventCallback } from "../Events/HasCameraMovedEvent"; import type { WasCameraUpdatedEvent, WasCameraUpdatedEventCallback } from "../Events/WasCameraUpdatedEvent";
import { apiCallback } from "./registeredCallbacks"; import { apiCallback } from "./registeredCallbacks";
import { isHasCameraMovedEvent } from "../Events/HasCameraMovedEvent"; import { isWasCameraUpdatedEvent } from "../Events/WasCameraUpdatedEvent";
const moveStream = new Subject<HasCameraMovedEvent>(); const moveStream = new Subject<WasCameraUpdatedEvent>();
export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdventureCameraCommands> { export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdventureCameraCommands> {
callbacks = [ callbacks = [
apiCallback({ apiCallback({
type: "hasCameraMoved", type: "wasCameraUpdated",
typeChecker: isHasCameraMovedEvent, typeChecker: isWasCameraUpdatedEvent,
callback: (payloadData) => { callback: (payloadData) => {
moveStream.next(payloadData); moveStream.next(payloadData);
}, },
}), }),
]; ];
onCameraMove(callback: HasCameraMovedEventCallback): void { onCameraUpdate(callback: WasCameraUpdatedEventCallback): void {
moveStream.subscribe(callback); moveStream.subscribe(callback);
sendToWorkadventure({ sendToWorkadventure({
type: "onCameraMove", type: "onCameraUpdate",
data: null, data: null,
}); });
} }

View File

@ -90,7 +90,7 @@ import { contactPageStore } from "../../Stores/MenuStore";
import { GameMapProperties } from "./GameMapProperties"; import { GameMapProperties } from "./GameMapProperties";
import SpriteSheetFile = Phaser.Loader.FileTypes.SpriteSheetFile; import SpriteSheetFile = Phaser.Loader.FileTypes.SpriteSheetFile;
import Camera = Phaser.Cameras.Scene2D.Camera; import Camera = Phaser.Cameras.Scene2D.Camera;
import type { HasCameraMovedEvent } from "../../Api/Events/HasCameraMovedEvent"; import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
export interface GameSceneInitInterface { export interface GameSceneInitInterface {
initPosition: PointInterface | null; initPosition: PointInterface | null;
@ -754,13 +754,13 @@ export class GameScene extends DirtyScene {
//listen event to share the actual worldView when the camera is updated //listen event to share the actual worldView when the camera is updated
this.cameras.main.on("followupdate", (camera: Camera) => { this.cameras.main.on("followupdate", (camera: Camera) => {
const worldView: HasCameraMovedEvent = { const worldView: WasCameraUpdatedEvent = {
x: camera.worldView.x, x: camera.worldView.x,
y: camera.worldView.y, y: camera.worldView.y,
width: camera.worldView.width, width: camera.worldView.width,
height: camera.worldView.height, height: camera.worldView.height,
}; };
iframeListener.hasCameraMoved(worldView); iframeListener.sendCameraUpdated(worldView);
}); });
// Set up variables manager // Set up variables manager