GameState is now save in cache
HasPlayerMoved is send when the player is actually moving on the map every 200ms.
This commit is contained in:
parent
8cef4f6e90
commit
3edfd5b285
@ -1,6 +1,6 @@
|
|||||||
import * as tg from "generic-type-guard";
|
import * as tg from "generic-type-guard";
|
||||||
|
|
||||||
export const isPositionState = new tg.IsInterface().withProperties({
|
/*export const isPositionState = new tg.IsInterface().withProperties({
|
||||||
x: tg.isNumber,
|
x: tg.isNumber,
|
||||||
y: tg.isNumber
|
y: tg.isNumber
|
||||||
}).get()
|
}).get()
|
||||||
@ -12,19 +12,16 @@ export const isPlayerState = new tg.IsInterface()
|
|||||||
}).get()
|
}).get()
|
||||||
).get()
|
).get()
|
||||||
|
|
||||||
export type PlayerStateObject = tg.GuardedType<typeof isPlayerState>;
|
export type PlayerStateObject = tg.GuardedType<typeof isPlayerState>;*/
|
||||||
|
|
||||||
export const isGameStateEvent =
|
export const isGameStateEvent =
|
||||||
new tg.IsInterface().withProperties({
|
new tg.IsInterface().withProperties({
|
||||||
roomId: tg.isString,
|
roomId: tg.isString,
|
||||||
data: tg.isObject,
|
|
||||||
mapUrl: tg.isString,
|
mapUrl: tg.isString,
|
||||||
nickName: tg.isString,
|
|
||||||
uuid: tg.isUnion(tg.isString, tg.isUndefined),
|
uuid: tg.isUnion(tg.isString, tg.isUndefined),
|
||||||
players: isPlayerState,
|
|
||||||
startLayerName: tg.isUnion(tg.isString, tg.isNull)
|
startLayerName: tg.isUnion(tg.isString, tg.isNull)
|
||||||
}).get();
|
}).get();
|
||||||
/**
|
/**
|
||||||
* A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.
|
* A message sent from the game to the iFrame when the gameState is got by the script
|
||||||
*/
|
*/
|
||||||
export type GameStateEvent = tg.GuardedType<typeof isGameStateEvent>;
|
export type GameStateEvent = tg.GuardedType<typeof isGameStateEvent>;
|
16
front/src/Api/Events/HasDataLayerChangedEvent.ts
Normal file
16
front/src/Api/Events/HasDataLayerChangedEvent.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import * as tg from "generic-type-guard";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const isHasDataLayerChangedEvent =
|
||||||
|
new tg.IsInterface().withProperties({
|
||||||
|
data: tg.isObject
|
||||||
|
}).get();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A message sent from the game to the iFrame when the data of the layers change after the iFrame send a message to the game that it want to listen to the data of the layers
|
||||||
|
*/
|
||||||
|
export type HasDataLayerChangedEvent = tg.GuardedType<typeof isHasDataLayerChangedEvent>;
|
||||||
|
|
||||||
|
|
||||||
|
export type HasDataLayerChangedEventCallback = (event: HasDataLayerChangedEvent) => void
|
@ -1,19 +0,0 @@
|
|||||||
import * as tg from "generic-type-guard";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const isHasMovedEvent =
|
|
||||||
new tg.IsInterface().withProperties({
|
|
||||||
direction: tg.isString,
|
|
||||||
moving: tg.isBoolean,
|
|
||||||
x: tg.isNumber,
|
|
||||||
y: tg.isNumber
|
|
||||||
}).get();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A message sent from the iFrame to the game to add a message in the chat.
|
|
||||||
*/
|
|
||||||
export type HasMovedEvent = tg.GuardedType<typeof isHasMovedEvent>;
|
|
||||||
|
|
||||||
|
|
||||||
export type HasMovedEventCallback = (event: HasMovedEvent) => void
|
|
19
front/src/Api/Events/HasPlayerMovedEvent.ts
Normal file
19
front/src/Api/Events/HasPlayerMovedEvent.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import * as tg from "generic-type-guard";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const isHasPlayerMovedEvent =
|
||||||
|
new tg.IsInterface().withProperties({
|
||||||
|
direction: tg.isString,
|
||||||
|
moving: tg.isBoolean,
|
||||||
|
x: tg.isNumber,
|
||||||
|
y: tg.isNumber
|
||||||
|
}).get();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A message sent from the game to the iFrame when the player move after the iFrame send a message to the game that it want to listen to the position of the player
|
||||||
|
*/
|
||||||
|
export type HasPlayerMovedEvent = tg.GuardedType<typeof isHasPlayerMovedEvent>;
|
||||||
|
|
||||||
|
|
||||||
|
export type HasPlayerMovedEventCallback = (event: HasPlayerMovedEvent) => void
|
@ -1,15 +1,16 @@
|
|||||||
|
|
||||||
import { GameStateEvent } from './ApiGameStateEvent';
|
import { GameStateEvent } from './GameStateEvent';
|
||||||
import { ButtonClickedEvent } from './ButtonClickedEvent';
|
import { ButtonClickedEvent } from './ButtonClickedEvent';
|
||||||
import { ChatEvent } from './ChatEvent';
|
import { ChatEvent } from './ChatEvent';
|
||||||
import { ClosePopupEvent } from './ClosePopupEvent';
|
import { ClosePopupEvent } from './ClosePopupEvent';
|
||||||
import { EnterLeaveEvent } from './EnterLeaveEvent';
|
import { EnterLeaveEvent } from './EnterLeaveEvent';
|
||||||
import { GoToPageEvent } from './GoToPageEvent';
|
import { GoToPageEvent } from './GoToPageEvent';
|
||||||
import { HasMovedEvent } from './HasMovedEvent';
|
import { HasPlayerMovedEvent } from './HasPlayerMovedEvent';
|
||||||
import { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
|
import { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
|
||||||
import { OpenPopupEvent } from './OpenPopupEvent';
|
import { OpenPopupEvent } from './OpenPopupEvent';
|
||||||
import { OpenTabEvent } from './OpenTabEvent';
|
import { OpenTabEvent } from './OpenTabEvent';
|
||||||
import { UserInputChatEvent } from './UserInputChatEvent';
|
import { UserInputChatEvent } from './UserInputChatEvent';
|
||||||
|
import { HasDataLayerChangedEvent } from "./HasDataLayerChangedEvent";
|
||||||
|
|
||||||
|
|
||||||
export interface TypedMessageEvent<T> extends MessageEvent {
|
export interface TypedMessageEvent<T> extends MessageEvent {
|
||||||
@ -30,7 +31,8 @@ export type IframeEventMap = {
|
|||||||
restorePlayerControls: null
|
restorePlayerControls: null
|
||||||
displayBubble: null
|
displayBubble: null
|
||||||
removeBubble: null
|
removeBubble: null
|
||||||
enableMoveEvents: undefined
|
onPlayerMove: undefined
|
||||||
|
onDataLayerChange: undefined
|
||||||
}
|
}
|
||||||
export interface IframeEvent<T extends keyof IframeEventMap> {
|
export interface IframeEvent<T extends keyof IframeEventMap> {
|
||||||
type: T;
|
type: T;
|
||||||
@ -47,7 +49,8 @@ export interface IframeResponseEventMap {
|
|||||||
leaveEvent: EnterLeaveEvent
|
leaveEvent: EnterLeaveEvent
|
||||||
buttonClickedEvent: ButtonClickedEvent
|
buttonClickedEvent: ButtonClickedEvent
|
||||||
gameState: GameStateEvent
|
gameState: GameStateEvent
|
||||||
hasMovedEvent: HasMovedEvent
|
hasPlayerMoved: HasPlayerMovedEvent
|
||||||
|
hasDataLayerChanged: HasDataLayerChangedEvent
|
||||||
}
|
}
|
||||||
export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
|
export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
|
||||||
type: T;
|
type: T;
|
||||||
|
@ -12,10 +12,11 @@ import { GoToPageEvent, isGoToPageEvent } from "./Events/GoToPageEvent";
|
|||||||
import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
|
import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
|
||||||
import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper, TypedMessageEvent } from "./Events/IframeEvent";
|
import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper, TypedMessageEvent } from "./Events/IframeEvent";
|
||||||
import { UserInputChatEvent } from "./Events/UserInputChatEvent";
|
import { UserInputChatEvent } from "./Events/UserInputChatEvent";
|
||||||
import { GameStateEvent } from './Events/ApiGameStateEvent';
|
import { GameStateEvent } from './Events/GameStateEvent';
|
||||||
import { deepFreezeClone as deepFreezeClone } from '../utility';
|
import { deepFreezeClone as deepFreezeClone } from '../utility';
|
||||||
import { HasMovedEvent } from './Events/HasMovedEvent';
|
import { HasPlayerMovedEvent } from './Events/HasPlayerMovedEvent';
|
||||||
import { Math } from 'phaser';
|
import { Math } from 'phaser';
|
||||||
|
import { HasDataLayerChangedEvent } from "./Events/HasDataLayerChangedEvent";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -58,14 +59,14 @@ class IframeListener {
|
|||||||
private readonly _removeBubbleStream: Subject<void> = new Subject();
|
private readonly _removeBubbleStream: Subject<void> = new Subject();
|
||||||
public readonly removeBubbleStream = this._removeBubbleStream.asObservable();
|
public readonly removeBubbleStream = this._removeBubbleStream.asObservable();
|
||||||
|
|
||||||
|
|
||||||
private readonly _gameStateStream: Subject<void> = new Subject();
|
private readonly _gameStateStream: Subject<void> = new Subject();
|
||||||
public readonly gameStateStream = this._gameStateStream.asObservable();
|
public readonly gameStateStream = this._gameStateStream.asObservable();
|
||||||
|
|
||||||
|
|
||||||
private readonly iframes = new Set<HTMLIFrameElement>();
|
private readonly iframes = new Set<HTMLIFrameElement>();
|
||||||
private readonly scripts = new Map<string, HTMLIFrameElement>();
|
private readonly scripts = new Map<string, HTMLIFrameElement>();
|
||||||
private sendMoveEvents: boolean = false;
|
private sendPlayerMove: boolean = false;
|
||||||
private lastMoveTimestamp: number = 0
|
private sendDataLayerChange: boolean = false;
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
window.addEventListener("message", (message: TypedMessageEvent<IframeEvent<keyof IframeEventMap>>) => {
|
window.addEventListener("message", (message: TypedMessageEvent<IframeEvent<keyof IframeEventMap>>) => {
|
||||||
@ -119,8 +120,10 @@ class IframeListener {
|
|||||||
this._removeBubbleStream.next();
|
this._removeBubbleStream.next();
|
||||||
} else if (payload.type == "getState") {
|
} else if (payload.type == "getState") {
|
||||||
this._gameStateStream.next();
|
this._gameStateStream.next();
|
||||||
} else if (payload.type == "enableMoveEvents") {
|
} else if (payload.type == "onPlayerMove") {
|
||||||
this.sendMoveEvents = true
|
this.sendPlayerMove = true
|
||||||
|
} else if (payload.type == "onDataLayerChange") {
|
||||||
|
this.sendDataLayerChange = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -133,7 +136,7 @@ class IframeListener {
|
|||||||
sendFrozenGameStateEvent(gameStateEvent: GameStateEvent) {
|
sendFrozenGameStateEvent(gameStateEvent: GameStateEvent) {
|
||||||
this.postMessage({
|
this.postMessage({
|
||||||
'type': 'gameState',
|
'type': 'gameState',
|
||||||
'data': deepFreezeClone(gameStateEvent)
|
'data': gameStateEvent //deepFreezeClone(gameStateEvent)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -240,16 +243,21 @@ class IframeListener {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
hasMovedEvent(event: HasMovedEvent) {
|
hasPlayerMoved(event: HasPlayerMovedEvent) {
|
||||||
if (this.sendMoveEvents) {
|
if (this.sendPlayerMove) {
|
||||||
if (this.lastMoveTimestamp < Date.now() - 100) {
|
this.postMessage({
|
||||||
this.lastMoveTimestamp = Date.now()
|
'type': 'hasPlayerMoved',
|
||||||
this.postMessage({
|
'data': event
|
||||||
'type': 'hasMovedEvent',
|
});
|
||||||
'data': event
|
}
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
hasDataLayerChanged(event: HasDataLayerChangedEvent) {
|
||||||
|
if (this.sendDataLayerChange) {
|
||||||
|
this.postMessage({
|
||||||
|
'type' : 'hasDataLayerChanged',
|
||||||
|
'data' : event
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,9 +90,9 @@ import { TextUtils } from "../Components/TextUtils";
|
|||||||
import { touchScreenManager } from "../../Touch/TouchScreenManager";
|
import { touchScreenManager } from "../../Touch/TouchScreenManager";
|
||||||
import { PinchManager } from "../UserInput/PinchManager";
|
import { PinchManager } from "../UserInput/PinchManager";
|
||||||
import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick";
|
import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick";
|
||||||
import { PlayerStateObject } from '../../Api/Events/ApiGameStateEvent';
|
//import { PlayerStateObject } from '../../Api/Events/GameStateEvent';
|
||||||
import { waScaleManager } from "../Services/WaScaleManager";
|
import { waScaleManager } from "../Services/WaScaleManager";
|
||||||
import { HasMovedEvent } from '../../Api/Events/HasMovedEvent';
|
import { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
|
||||||
|
|
||||||
export interface GameSceneInitInterface {
|
export interface GameSceneInitInterface {
|
||||||
initPosition: PointInterface | null,
|
initPosition: PointInterface | null,
|
||||||
@ -164,7 +164,7 @@ export class GameScene extends DirtyScene implements CenterListener {
|
|||||||
|
|
||||||
currentTick!: number;
|
currentTick!: number;
|
||||||
lastSentTick!: number; // The last tick at which a position was sent.
|
lastSentTick!: number; // The last tick at which a position was sent.
|
||||||
lastMoveEventSent: HasMovedEvent = {
|
lastMoveEventSent: HasPlayerMovedEvent = {
|
||||||
direction: '',
|
direction: '',
|
||||||
moving: false,
|
moving: false,
|
||||||
x: -1000,
|
x: -1000,
|
||||||
@ -632,11 +632,11 @@ export class GameScene extends DirtyScene implements CenterListener {
|
|||||||
|
|
||||||
//listen event to share position of user
|
//listen event to share position of user
|
||||||
this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this))
|
this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this))
|
||||||
this.CurrentPlayer.on(hasMovedEventName, (event: HasMovedEvent) => {
|
this.CurrentPlayer.on(hasMovedEventName, (event: HasPlayerMovedEvent) => {
|
||||||
iframeListener.hasMovedEvent(event)
|
//iframeListener.hasMovedEvent(event)
|
||||||
})
|
})
|
||||||
this.CurrentPlayer.on(hasMovedEventName, this.outlineItem.bind(this))
|
this.CurrentPlayer.on(hasMovedEventName, this.outlineItem.bind(this))
|
||||||
this.CurrentPlayer.on(hasMovedEventName, (event: HasMovedEvent) => {
|
this.CurrentPlayer.on(hasMovedEventName, (event: HasPlayerMovedEvent) => {
|
||||||
this.gameMap.setPosition(event.x, event.y);
|
this.gameMap.setPosition(event.x, event.y);
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -870,7 +870,7 @@ ${escapedMessage}
|
|||||||
this.userInputManager.restoreControls();
|
this.userInputManager.restoreControls();
|
||||||
}));
|
}));
|
||||||
this.iframeSubscriptionList.push(iframeListener.gameStateStream.subscribe(() => {
|
this.iframeSubscriptionList.push(iframeListener.gameStateStream.subscribe(() => {
|
||||||
const playerObject: PlayerStateObject = {
|
/*const playerObject: PlayerStateObject = {
|
||||||
[this.playerName]: {
|
[this.playerName]: {
|
||||||
position: {
|
position: {
|
||||||
x: this.CurrentPlayer.x,
|
x: this.CurrentPlayer.x,
|
||||||
@ -889,15 +889,12 @@ ${escapedMessage}
|
|||||||
pusherId: remotePlayer.userId
|
pusherId: remotePlayer.userId
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
iframeListener.sendFrozenGameStateEvent({
|
iframeListener.sendFrozenGameStateEvent({
|
||||||
mapUrl: this.MapUrlFile,
|
mapUrl: this.MapUrlFile,
|
||||||
nickName: this.playerName,
|
|
||||||
startLayerName: this.startLayerName,
|
startLayerName: this.startLayerName,
|
||||||
uuid: localUserStore.getLocalUser()?.uuid,
|
uuid: localUserStore.getLocalUser()?.uuid,
|
||||||
roomId: this.RoomId,
|
roomId: this.RoomId,
|
||||||
data: this.mapFile,
|
|
||||||
players: playerObject
|
|
||||||
})
|
})
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -1158,7 +1155,7 @@ ${escapedMessage}
|
|||||||
this.createCollisionWithPlayer();
|
this.createCollisionWithPlayer();
|
||||||
}
|
}
|
||||||
|
|
||||||
pushPlayerPosition(event: HasMovedEvent) {
|
pushPlayerPosition(event: HasPlayerMovedEvent) {
|
||||||
if (this.lastMoveEventSent === event) {
|
if (this.lastMoveEventSent === event) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -1188,7 +1185,7 @@ ${escapedMessage}
|
|||||||
* Finds the correct item to outline and outline it (if there is an item to be outlined)
|
* Finds the correct item to outline and outline it (if there is an item to be outlined)
|
||||||
* @param event
|
* @param event
|
||||||
*/
|
*/
|
||||||
private outlineItem(event: HasMovedEvent): void {
|
private outlineItem(event: HasPlayerMovedEvent): void {
|
||||||
let x = event.x;
|
let x = event.x;
|
||||||
let y = event.y;
|
let y = event.y;
|
||||||
switch (event.direction) {
|
switch (event.direction) {
|
||||||
@ -1227,7 +1224,7 @@ ${escapedMessage}
|
|||||||
this.outlinedItem?.selectable();
|
this.outlinedItem?.selectable();
|
||||||
}
|
}
|
||||||
|
|
||||||
private doPushPlayerPosition(event: HasMovedEvent): void {
|
private doPushPlayerPosition(event: HasPlayerMovedEvent): void {
|
||||||
this.lastMoveEventSent = event;
|
this.lastMoveEventSent = event;
|
||||||
this.lastSentTick = this.currentTick;
|
this.lastSentTick = this.currentTick;
|
||||||
const camera = this.cameras.main;
|
const camera = this.cameras.main;
|
||||||
@ -1237,6 +1234,7 @@ ${escapedMessage}
|
|||||||
right: camera.scrollX + camera.width,
|
right: camera.scrollX + camera.width,
|
||||||
bottom: camera.scrollY + camera.height,
|
bottom: camera.scrollY + camera.height,
|
||||||
});
|
});
|
||||||
|
iframeListener.hasPlayerMoved(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -1286,7 +1284,7 @@ ${escapedMessage}
|
|||||||
}
|
}
|
||||||
// Let's move all users
|
// Let's move all users
|
||||||
const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
|
const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
|
||||||
updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
|
updatedPlayersPositions.forEach((moveEvent: HasPlayerMovedEvent, userId: number) => {
|
||||||
this.dirty = true;
|
this.dirty = true;
|
||||||
const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
|
const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
|
||||||
if (player === undefined) {
|
if (player === undefined) {
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
|
|
||||||
import { MAX_EXTRAPOLATION_TIME } from "../../Enum/EnvironmentVariable";
|
import { MAX_EXTRAPOLATION_TIME } from "../../Enum/EnvironmentVariable";
|
||||||
import { PositionInterface } from "../../Connexion/ConnexionModels";
|
import { PositionInterface } from "../../Connexion/ConnexionModels";
|
||||||
import { HasMovedEvent } from '../../Api/Events/HasMovedEvent';
|
import { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
|
||||||
|
|
||||||
export class PlayerMovement {
|
export class PlayerMovement {
|
||||||
public constructor(private startPosition: PositionInterface, private startTick: number, private endPosition: HasMovedEvent, private endTick: number) {
|
public constructor(private startPosition: PositionInterface, private startTick: number, private endPosition: HasPlayerMovedEvent, private endTick: number) {
|
||||||
}
|
}
|
||||||
|
|
||||||
public isOutdated(tick: number): boolean {
|
public isOutdated(tick: number): boolean {
|
||||||
@ -18,7 +18,7 @@ export class PlayerMovement {
|
|||||||
return tick > this.endTick + MAX_EXTRAPOLATION_TIME;
|
return tick > this.endTick + MAX_EXTRAPOLATION_TIME;
|
||||||
}
|
}
|
||||||
|
|
||||||
public getPosition(tick: number): HasMovedEvent {
|
public getPosition(tick: number): HasPlayerMovedEvent {
|
||||||
// Special case: end position reached and end position is not moving
|
// Special case: end position reached and end position is not moving
|
||||||
if (tick >= this.endTick && this.endPosition.moving === false) {
|
if (tick >= this.endTick && this.endPosition.moving === false) {
|
||||||
//console.log('Movement finished ', this.endPosition)
|
//console.log('Movement finished ', this.endPosition)
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* This class is in charge of computing the position of all players.
|
* This class is in charge of computing the position of all players.
|
||||||
* Player movement is delayed by 200ms so position depends on ticks.
|
* Player movement is delayed by 200ms so position depends on ticks.
|
||||||
*/
|
*/
|
||||||
import { HasMovedEvent } from '../../Api/Events/HasMovedEvent';
|
import { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent';
|
||||||
import { PlayerMovement } from "./PlayerMovement";
|
import { PlayerMovement } from "./PlayerMovement";
|
||||||
|
|
||||||
export class PlayersPositionInterpolator {
|
export class PlayersPositionInterpolator {
|
||||||
@ -16,8 +16,8 @@ export class PlayersPositionInterpolator {
|
|||||||
this.playerMovements.delete(userId);
|
this.playerMovements.delete(userId);
|
||||||
}
|
}
|
||||||
|
|
||||||
getUpdatedPositions(tick: number): Map<number, HasMovedEvent> {
|
getUpdatedPositions(tick: number): Map<number, HasPlayerMovedEvent> {
|
||||||
const positions = new Map<number, HasMovedEvent>();
|
const positions = new Map<number, HasPlayerMovedEvent>();
|
||||||
this.playerMovements.forEach((playerMovement: PlayerMovement, userId: number) => {
|
this.playerMovements.forEach((playerMovement: PlayerMovement, userId: number) => {
|
||||||
if (playerMovement.isOutdated(tick)) {
|
if (playerMovement.isOutdated(tick)) {
|
||||||
//console.log("outdated")
|
//console.log("outdated")
|
||||||
|
@ -9,8 +9,9 @@ import { ClosePopupEvent } from "./Api/Events/ClosePopupEvent";
|
|||||||
import { OpenTabEvent } from "./Api/Events/OpenTabEvent";
|
import { OpenTabEvent } from "./Api/Events/OpenTabEvent";
|
||||||
import { GoToPageEvent } from "./Api/Events/GoToPageEvent";
|
import { GoToPageEvent } from "./Api/Events/GoToPageEvent";
|
||||||
import { OpenCoWebSiteEvent } from "./Api/Events/OpenCoWebSiteEvent";
|
import { OpenCoWebSiteEvent } from "./Api/Events/OpenCoWebSiteEvent";
|
||||||
import { GameStateEvent, isGameStateEvent } from './Api/Events/ApiGameStateEvent';
|
import { GameStateEvent, isGameStateEvent } from './Api/Events/GameStateEvent';
|
||||||
import { HasMovedEvent, HasMovedEventCallback, isHasMovedEvent } from './Api/Events/HasMovedEvent';
|
import { HasPlayerMovedEvent, HasPlayerMovedEventCallback, isHasPlayerMovedEvent } from './Api/Events/HasPlayerMovedEvent';
|
||||||
|
import { HasDataLayerChangedEvent, HasDataLayerChangedEventCallback, isHasDataLayerChangedEvent} from "./Api/Events/HasDataLayerChangedEvent";
|
||||||
|
|
||||||
interface WorkAdventureApi {
|
interface WorkAdventureApi {
|
||||||
sendChatMessage(message: string, author: string): void;
|
sendChatMessage(message: string, author: string): void;
|
||||||
@ -26,9 +27,14 @@ interface WorkAdventureApi {
|
|||||||
restorePlayerControls(): void;
|
restorePlayerControls(): void;
|
||||||
displayBubble(): void;
|
displayBubble(): void;
|
||||||
removeBubble(): void;
|
removeBubble(): void;
|
||||||
getGameState(): Promise<GameStateEvent>
|
getMapUrl(): Promise<string>;
|
||||||
|
getUuid(): Promise<string | undefined>;
|
||||||
|
getRoomId(): Promise<string>;
|
||||||
|
getStartLayerName(): Promise<string | null>;
|
||||||
|
|
||||||
onMoveEvent(callback: (moveEvent: HasMovedEvent) => void): void
|
|
||||||
|
onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void
|
||||||
|
onDataLayerChange(callback: (dataLayerChangedEvent: HasDataLayerChangedEvent) => void): void
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
@ -84,41 +90,75 @@ function uuidv4() {
|
|||||||
return v.toString(16);
|
return v.toString(16);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
function getGameState(): Promise<GameStateEvent> {
|
||||||
const stateResolvers: Array<(event: GameStateEvent) => void> = []
|
if (immutableData) {
|
||||||
|
return Promise.resolve(immutableData);
|
||||||
const callbacks: { [type: string]: HasMovedEventCallback | ((arg?: HasMovedEvent | never) => void) } = {}
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
function postToParent(content: IframeEvent<keyof IframeEventMap>) {
|
|
||||||
window.parent.postMessage(content, "*")
|
|
||||||
}
|
|
||||||
let moveEventUuid: string | undefined;
|
|
||||||
|
|
||||||
window.WA = {
|
|
||||||
|
|
||||||
onMoveEvent(callback: HasMovedEventCallback): void {
|
|
||||||
moveEventUuid = uuidv4();
|
|
||||||
callbacks[moveEventUuid] = callback;
|
|
||||||
postToParent({
|
|
||||||
type: "enableMoveEvents",
|
|
||||||
data: undefined
|
|
||||||
})
|
|
||||||
|
|
||||||
window.parent.postMessage({
|
|
||||||
type: "enable"
|
|
||||||
}, "*")
|
|
||||||
},
|
|
||||||
|
|
||||||
getGameState() {
|
|
||||||
return new Promise<GameStateEvent>((resolver, thrower) => {
|
return new Promise<GameStateEvent>((resolver, thrower) => {
|
||||||
stateResolvers.push(resolver);
|
stateResolvers.push(resolver);
|
||||||
window.parent.postMessage({
|
window.parent.postMessage({
|
||||||
type: "getState"
|
type: "getState"
|
||||||
}, "*")
|
}, "*")
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const stateResolvers: Array<(event: GameStateEvent) => void> = []
|
||||||
|
let immutableData: GameStateEvent;
|
||||||
|
|
||||||
|
const callbackPlayerMoved: { [type: string]: HasPlayerMovedEventCallback | ((arg?: HasPlayerMovedEvent | never) => void) } = {}
|
||||||
|
const callbackDataLayerChanged: { [type: string]: HasDataLayerChangedEventCallback | ((arg?: HasDataLayerChangedEvent | never) => void) } = {}
|
||||||
|
|
||||||
|
|
||||||
|
function postToParent(content: IframeEvent<keyof IframeEventMap>) {
|
||||||
|
window.parent.postMessage(content, "*")
|
||||||
|
}
|
||||||
|
let playerUuid: string | undefined;
|
||||||
|
|
||||||
|
window.WA = {
|
||||||
|
|
||||||
|
onPlayerMove(callback: HasPlayerMovedEventCallback): void {
|
||||||
|
playerUuid = uuidv4();
|
||||||
|
callbackPlayerMoved[playerUuid] = callback;
|
||||||
|
postToParent({
|
||||||
|
type: "onPlayerMove",
|
||||||
|
data: undefined
|
||||||
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onDataLayerChange(callback: HasDataLayerChangedEventCallback): void {
|
||||||
|
callbackDataLayerChanged['test'] = callback;
|
||||||
|
postToParent({
|
||||||
|
type : "onDataLayerChange",
|
||||||
|
data: undefined
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getMapUrl() {
|
||||||
|
return getGameState().then((res) => {
|
||||||
|
return res.mapUrl;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getUuid() {
|
||||||
|
return getGameState().then((res) => {
|
||||||
|
return res.uuid;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getRoomId() {
|
||||||
|
return getGameState().then((res) => {
|
||||||
|
return res.roomId;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getStartLayerName() {
|
||||||
|
return getGameState().then((res) => {
|
||||||
|
return res.startLayerName;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Send a message in the chat.
|
* Send a message in the chat.
|
||||||
@ -273,8 +313,11 @@ window.addEventListener('message', message => {
|
|||||||
stateResolvers.forEach(resolver => {
|
stateResolvers.forEach(resolver => {
|
||||||
resolver(payloadData);
|
resolver(payloadData);
|
||||||
})
|
})
|
||||||
} else if (payload.type == "hasMovedEvent" && isHasMovedEvent(payloadData) && moveEventUuid) {
|
immutableData = payloadData;
|
||||||
callbacks[moveEventUuid](payloadData)
|
} else if (payload.type == "hasPlayerMoved" && isHasPlayerMovedEvent(payloadData) && playerUuid) {
|
||||||
|
callbackPlayerMoved[playerUuid](payloadData)
|
||||||
|
} else if (payload.type == "hasDataLayerChanged" && isHasDataLayerChangedEvent(payloadData)) {
|
||||||
|
callbackDataLayerChanged['test'](payloadData)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
230
maps/tests/Metadata/map.json
Normal file
230
maps/tests/Metadata/map.json
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
{ "compressionlevel":-1,
|
||||||
|
"height":10,
|
||||||
|
"infinite":false,
|
||||||
|
"layers":[
|
||||||
|
{
|
||||||
|
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||||
|
"height":10,
|
||||||
|
"id":1,
|
||||||
|
"name":"start",
|
||||||
|
"opacity":1,
|
||||||
|
"type":"tilelayer",
|
||||||
|
"visible":true,
|
||||||
|
"width":10,
|
||||||
|
"x":0,
|
||||||
|
"y":0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data":[46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 33, 34, 34, 34, 34, 34, 34, 35, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 41, 42, 42, 42, 42, 42, 42, 43, 46, 46, 49, 50, 50, 50, 50, 50, 50, 51, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46, 46],
|
||||||
|
"height":10,
|
||||||
|
"id":2,
|
||||||
|
"name":"bottom",
|
||||||
|
"opacity":1,
|
||||||
|
"type":"tilelayer",
|
||||||
|
"visible":true,
|
||||||
|
"width":10,
|
||||||
|
"x":0,
|
||||||
|
"y":0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 52, 52, 0, 0, 0, 0, 0, 0, 0, 52, 52, 52, 0, 0, 0, 0, 0, 0, 0, 52, 52, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||||
|
"height":10,
|
||||||
|
"id":4,
|
||||||
|
"name":"metadata",
|
||||||
|
"opacity":1,
|
||||||
|
"type":"tilelayer",
|
||||||
|
"visible":true,
|
||||||
|
"width":10,
|
||||||
|
"x":0,
|
||||||
|
"y":0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"draworder":"topdown",
|
||||||
|
"id":5,
|
||||||
|
"name":"floorLayer",
|
||||||
|
"objects":[],
|
||||||
|
"opacity":1,
|
||||||
|
"type":"objectgroup",
|
||||||
|
"visible":true,
|
||||||
|
"x":0,
|
||||||
|
"y":0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data":[1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 9, 0, 0, 0, 0, 0, 0, 0, 0, 11, 17, 18, 18, 18, 18, 18, 18, 18, 18, 19],
|
||||||
|
"height":10,
|
||||||
|
"id":3,
|
||||||
|
"name":"wall",
|
||||||
|
"opacity":1,
|
||||||
|
"type":"tilelayer",
|
||||||
|
"visible":true,
|
||||||
|
"width":10,
|
||||||
|
"x":0,
|
||||||
|
"y":0
|
||||||
|
}],
|
||||||
|
"nextlayerid":6,
|
||||||
|
"nextobjectid":1,
|
||||||
|
"orientation":"orthogonal",
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"script",
|
||||||
|
"type":"string",
|
||||||
|
"value":"script.js"
|
||||||
|
}],
|
||||||
|
"renderorder":"right-down",
|
||||||
|
"tiledversion":"1.4.3",
|
||||||
|
"tileheight":32,
|
||||||
|
"tilesets":[
|
||||||
|
{
|
||||||
|
"columns":8,
|
||||||
|
"firstgid":1,
|
||||||
|
"image":"tileset_dungeon.png",
|
||||||
|
"imageheight":256,
|
||||||
|
"imagewidth":256,
|
||||||
|
"margin":0,
|
||||||
|
"name":"TDungeon",
|
||||||
|
"spacing":0,
|
||||||
|
"tilecount":64,
|
||||||
|
"tileheight":32,
|
||||||
|
"tiles":[
|
||||||
|
{
|
||||||
|
"id":0,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":1,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":2,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":3,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":4,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":8,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":9,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":10,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":11,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":12,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":16,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":17,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":18,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":19,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":20,
|
||||||
|
"properties":[
|
||||||
|
{
|
||||||
|
"name":"collides",
|
||||||
|
"type":"bool",
|
||||||
|
"value":true
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
"tilewidth":32
|
||||||
|
}],
|
||||||
|
"tilewidth":32,
|
||||||
|
"type":"map",
|
||||||
|
"version":1.4,
|
||||||
|
"width":10
|
||||||
|
}
|
9
maps/tests/Metadata/script.js
Normal file
9
maps/tests/Metadata/script.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
WA.getMapUrl().then((map) => {console.log('mapUrl : ', map)});
|
||||||
|
WA.getUuid().then((uuid) => {console.log('Uuid : ',uuid)});
|
||||||
|
WA.getRoomId().then((roomId) => console.log('roomID : ',roomId));
|
||||||
|
|
||||||
|
WA.listenPositionPlayer(console.log);
|
||||||
|
|
||||||
|
|
BIN
maps/tests/Metadata/tileset_dungeon.png
Normal file
BIN
maps/tests/Metadata/tileset_dungeon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.5 KiB |
Loading…
Reference in New Issue
Block a user