correction from code review

This commit is contained in:
GRL 2021-05-25 17:21:02 +02:00
parent d4bc999c54
commit a5cb93541a
10 changed files with 58 additions and 161 deletions

View File

@ -1,26 +1,13 @@
import * as tg from "generic-type-guard"; import * as tg from "generic-type-guard";
/*export const isPositionState = new tg.IsInterface().withProperties({
x: tg.isNumber,
y: tg.isNumber
}).get()
export const isPlayerState = new tg.IsInterface()
.withStringIndexSignature(
new tg.IsInterface().withProperties({
position: isPositionState,
pusherId: tg.isUnion(tg.isNumber, tg.isUndefined)
}).get()
).get()
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,
mapUrl: tg.isString, mapUrl: tg.isString,
nickname: tg.isUnion(tg.isString, tg.isNull), nickname: tg.isUnion(tg.isString, tg.isNull),
uuid: tg.isUnion(tg.isString, tg.isUndefined), uuid: tg.isUnion(tg.isString, tg.isUndefined),
startLayerName: tg.isUnion(tg.isString, tg.isNull) startLayerName: tg.isUnion(tg.isString, tg.isNull),
tags : tg.isArray(tg.isString),
}).get(); }).get();
/** /**
* A message sent from the game to the iFrame when the gameState is got by the script * A message sent from the game to the iFrame when the gameState is got by the script

View File

@ -4,7 +4,7 @@ import * as tg from "generic-type-guard";
export const isHasPlayerMovedEvent = export const isHasPlayerMovedEvent =
new tg.IsInterface().withProperties({ new tg.IsInterface().withProperties({
direction: tg.isString, direction: tg.isElementOf('right', 'left', 'up', 'down'),
moving: tg.isBoolean, moving: tg.isBoolean,
x: tg.isNumber, x: tg.isNumber,
y: tg.isNumber y: tg.isNumber

View File

@ -15,8 +15,6 @@ import type { UserInputChatEvent } from './UserInputChatEvent';
import type { DataLayerEvent } from "./DataLayerEvent"; import type { DataLayerEvent } from "./DataLayerEvent";
import type { LayerEvent } from './LayerEvent'; import type { LayerEvent } from './LayerEvent';
import type { SetPropertyEvent } from "./setPropertyEvent"; import type { SetPropertyEvent } from "./setPropertyEvent";
import type { TagEvent } from "./TagEvent";
import type { TilesetEvent } from "./TilesetEvent";
export interface TypedMessageEvent<T> extends MessageEvent { export interface TypedMessageEvent<T> extends MessageEvent {
data: T data: T
@ -24,7 +22,6 @@ export interface TypedMessageEvent<T> extends MessageEvent {
export type IframeEventMap = { export type IframeEventMap = {
getState: GameStateEvent, getState: GameStateEvent,
// updateTile: UpdateTileEvent
registerMenuCommand: MenuItemRegisterEvent registerMenuCommand: MenuItemRegisterEvent
chat: ChatEvent, chat: ChatEvent,
openPopup: OpenPopupEvent openPopup: OpenPopupEvent
@ -42,7 +39,6 @@ export type IframeEventMap = {
hideLayer: LayerEvent hideLayer: LayerEvent
setProperty: SetPropertyEvent setProperty: SetPropertyEvent
getDataLayer: undefined getDataLayer: undefined
getTag: undefined
//tilsetEvent: TilesetEvent //tilsetEvent: TilesetEvent
} }
export interface IframeEvent<T extends keyof IframeEventMap> { export interface IframeEvent<T extends keyof IframeEventMap> {
@ -63,7 +59,6 @@ export interface IframeResponseEventMap {
hasPlayerMoved: HasPlayerMovedEvent hasPlayerMoved: HasPlayerMovedEvent
dataLayer: DataLayerEvent dataLayer: DataLayerEvent
menuItemClicked: MenuItemClickedEvent menuItemClicked: MenuItemClickedEvent
tagList: TagEvent
} }
export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> { export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
type: T; type: T;

View File

@ -1,10 +0,0 @@
import * as tg from "generic-type-guard";
export const isTagEvent =
new tg.IsInterface().withProperties({
list: tg.isArray(tg.isString),
}).get();
/**
* A message sent from the iFrame to the game to show/hide a layer.
*/
export type TagEvent = tg.GuardedType<typeof isTagEvent>;

View File

@ -1,15 +0,0 @@
import * as tg from "generic-type-guard";
export const isTilesetEvent =
new tg.IsInterface().withProperties({
name : tg.isString,
imgUrl : tg.isString,
tilewidth : tg.isNumber,
tileheight : tg.isNumber,
margin : tg.isNumber,
spacing : tg.isNumber,
}).get();
/**
* A message sent from the iFrame to the game to show/hide a layer.
*/
export type TilesetEvent = tg.GuardedType<typeof isTilesetEvent>;

View File

@ -19,7 +19,6 @@ import { Math } from 'phaser';
import type { DataLayerEvent } from "./Events/DataLayerEvent"; import type { DataLayerEvent } from "./Events/DataLayerEvent";
import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent'; import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent'; import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
import type { TagEvent } from "./Events/TagEvent";
//import { isTilesetEvent, TilesetEvent } from "./Events/TilesetEvent"; //import { isTilesetEvent, TilesetEvent } from "./Events/TilesetEvent";
@ -80,9 +79,6 @@ class IframeListener {
private readonly _registerMenuCommandStream: Subject<string> = new Subject(); private readonly _registerMenuCommandStream: Subject<string> = new Subject();
public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable(); public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
private readonly _tagListStream: Subject<void> = new Subject();
public readonly tagListStream = this._tagListStream.asObservable();
/* private readonly _tilesetLoaderStream: Subject<TilesetEvent> = new Subject(); /* private readonly _tilesetLoaderStream: Subject<TilesetEvent> = new Subject();
public readonly tilesetLoaderStream = this._tilesetLoaderStream.asObservable();*/ public readonly tilesetLoaderStream = this._tilesetLoaderStream.asObservable();*/
@ -154,8 +150,6 @@ class IframeListener {
this._dataLayerChangeStream.next(); this._dataLayerChangeStream.next();
} else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) { } else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) {
this._registerMenuCommandStream.next(payload.data.menutItem) this._registerMenuCommandStream.next(payload.data.menutItem)
} else if (payload.type == "getTag") {
this._tagListStream.next();
/* } else if (payload.type == "tilsetEvent" && isTilesetEvent(payload.data)) { /* } else if (payload.type == "tilsetEvent" && isTilesetEvent(payload.data)) {
this._tilesetLoaderStream.next(payload.data);*/ this._tilesetLoaderStream.next(payload.data);*/
} }
@ -164,13 +158,6 @@ class IframeListener {
} }
sendUserTagList(tagList: TagEvent){
this.postMessage({
'type' : 'tagList',
'data' : tagList
})
}
sendDataLayerEvent(dataLayerEvent: DataLayerEvent) { sendDataLayerEvent(dataLayerEvent: DataLayerEvent) {
this.postMessage({ this.postMessage({
'type' : 'dataLayer', 'type' : 'dataLayer',

View File

@ -169,9 +169,9 @@ export class RoomConnection implements RoomConnection {
} else if (message.hasWorldfullmessage()) { } else if (message.hasWorldfullmessage()) {
worldFullMessageStream.onMessage(); worldFullMessageStream.onMessage();
this.closed = true; this.closed = true;
// // } else if (message.hasWorldconnexionmessage()) { } else if (message.hasWorldconnexionmessage()) {
// worldFullMessageStream.onMessage(message.getWorldconnexionmessage()?.getMessage()); worldFullMessageStream.onMessage(message.getWorldconnexionmessage()?.getMessage());
// this.closed = true; this.closed = true;
} else if (message.hasWebrtcsignaltoclientmessage()) { } else if (message.hasWebrtcsignaltoclientmessage()) {
this.dispatch(EventMessage.WEBRTC_SIGNAL, message.getWebrtcsignaltoclientmessage()); this.dispatch(EventMessage.WEBRTC_SIGNAL, message.getWebrtcsignaltoclientmessage());
} else if (message.hasWebrtcscreensharingsignaltoclientmessage()) { } else if (message.hasWebrtcscreensharingsignaltoclientmessage()) {
@ -600,9 +600,6 @@ export class RoomConnection implements RoomConnection {
} }
public getAllTag() : string[] { public getAllTag() : string[] {
this.tags.push('TEST');
this.tags.push('TEST 2');
this.tags.push('TEST 3');
return this.tags; return this.tags;
} }
} }

View File

@ -864,15 +864,6 @@ ${escapedMessage}
this.iframeSubscriptionList.push(iframeListener.enablePlayerControlStream.subscribe(() => { this.iframeSubscriptionList.push(iframeListener.enablePlayerControlStream.subscribe(() => {
this.userInputManager.restoreControls(); this.userInputManager.restoreControls();
})); }));
this.iframeSubscriptionList.push(iframeListener.gameStateStream.subscribe(() => {
iframeListener.sendFrozenGameStateEvent({
mapUrl: this.MapUrlFile,
startLayerName: this.startLayerName,
uuid: localUserStore.getLocalUser()?.uuid,
nickname: localUserStore.getName(),
roomId: this.RoomId,
})
}));
let scriptedBubbleSprite: Sprite; let scriptedBubbleSprite: Sprite;
this.iframeSubscriptionList.push(iframeListener.displayBubbleStream.subscribe(() => { this.iframeSubscriptionList.push(iframeListener.displayBubbleStream.subscribe(() => {
@ -886,12 +877,10 @@ ${escapedMessage}
})); }));
this.iframeSubscriptionList.push(iframeListener.showLayerStream.subscribe((layerEvent)=>{ this.iframeSubscriptionList.push(iframeListener.showLayerStream.subscribe((layerEvent)=>{
console.log('show');
this.setLayerVisibility(layerEvent.name, true); this.setLayerVisibility(layerEvent.name, true);
})); }));
this.iframeSubscriptionList.push(iframeListener.hideLayerStream.subscribe((layerEvent)=>{ this.iframeSubscriptionList.push(iframeListener.hideLayerStream.subscribe((layerEvent)=>{
console.log('hide');
this.setLayerVisibility(layerEvent.name, false); this.setLayerVisibility(layerEvent.name, false);
})); }));
@ -903,12 +892,16 @@ ${escapedMessage}
iframeListener.sendDataLayerEvent({data: this.gameMap.getMap()}); iframeListener.sendDataLayerEvent({data: this.gameMap.getMap()});
})) }))
this.iframeSubscriptionList.push(iframeListener.tagListStream.subscribe(()=> { this.iframeSubscriptionList.push(iframeListener.gameStateStream.subscribe(() => {
if (this.connection === undefined) { iframeListener.sendFrozenGameStateEvent({
return; mapUrl: this.MapUrlFile,
} startLayerName: this.startLayerName,
iframeListener.sendUserTagList({list: this.connection.getAllTag()}); uuid: localUserStore.getLocalUser()?.uuid,
})) nickname: localUserStore.getName(),
roomId: this.RoomId,
tags: this.connection ? this.connection.getAllTag() : []
})
}));
/* this.iframeSubscriptionList.push(iframeListener.tilesetLoaderStream.subscribe((tileset) => { /* this.iframeSubscriptionList.push(iframeListener.tilesetLoaderStream.subscribe((tileset) => {
//this.load.tilemapTiledJSON('logo', tileset.imgUrl); //this.load.tilemapTiledJSON('logo', tileset.imgUrl);

View File

@ -17,8 +17,6 @@ import { DataLayerEvent, isDataLayerEvent } from "./Api/Events/DataLayerEvent";
import type { ITiledMap } from "./Phaser/Map/ITiledMap"; import type { ITiledMap } from "./Phaser/Map/ITiledMap";
import type { MenuItemRegisterEvent } from "./Api/Events/MenuItemRegisterEvent"; import type { MenuItemRegisterEvent } from "./Api/Events/MenuItemRegisterEvent";
import { isMenuItemClickedEvent } from "./Api/Events/MenuItemClickedEvent"; import { isMenuItemClickedEvent } from "./Api/Events/MenuItemClickedEvent";
import {TagEvent, isTagEvent} from "./Api/Events/TagEvent";
import type { TilesetEvent } from "./Api/Events/TilesetEvent";
interface WorkAdventureApi { interface WorkAdventureApi {
sendChatMessage(message: string, author: string): void; sendChatMessage(message: string, author: string): void;
@ -42,18 +40,26 @@ interface WorkAdventureApi {
displayBubble(): void; displayBubble(): void;
removeBubble(): void; removeBubble(): void;
registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void): void registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void): void
getMapUrl(): Promise<string>; getCurrentUser(): Promise<User>
getUuid(): Promise<string | undefined>; getCurrentRoom(): Promise<Room>
getRoomId(): Promise<string>;
getStartLayerName(): Promise<string | null>;
getNickName(): Promise<string | null>;
getTagUser(): Promise<string[]>;
getMap(): Promise<ITiledMap>
//loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void; //loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void;
onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void
} }
interface User {
id: string | undefined
nickName: string | null
tags: string[]
}
interface Room {
id: string
mapUrl: string
map: ITiledMap
startLayer: string | null
}
declare global { declare global {
// eslint-disable-next-line no-var // eslint-disable-next-line no-var
var WA: WorkAdventureApi var WA: WorkAdventureApi
@ -101,12 +107,14 @@ class Popup {
}, '*'); }, '*');
} }
} }
function uuidv4() {
/*function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8); const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16); return v.toString(16);
}); });
} }*/
function getGameState(): Promise<GameStateEvent> { function getGameState(): Promise<GameStateEvent> {
if (immutableData) { if (immutableData) {
return Promise.resolve(immutableData); return Promise.resolve(immutableData);
@ -131,34 +139,21 @@ function getDataLayer(): Promise<DataLayerEvent> {
}) })
} }
function getTag(): Promise<TagEvent> {
return new Promise<TagEvent>((resolver, thrower) => {
tagResolver.push((resolver));
postToParent({
type: "getTag",
data: undefined
})
})
}
const gameStateResolver: Array<(event: GameStateEvent) => void> = [] const gameStateResolver: Array<(event: GameStateEvent) => void> = []
const dataLayerResolver: Array<(event: DataLayerEvent) => void> = [] const dataLayerResolver: Array<(event: DataLayerEvent) => void> = []
const tagResolver: Array<(event : TagEvent) => void> = []
let immutableData: GameStateEvent; let immutableData: GameStateEvent;
const callbackPlayerMoved: { [type: string]: HasPlayerMovedEventCallback | ((arg?: HasPlayerMovedEvent | never) => void) } = {} //const callbackPlayerMoved: { [type: string]: HasPlayerMovedEventCallback | ((arg?: HasPlayerMovedEvent | never) => void) } = {}
const callbackPlayerMoved: Array<(event: HasPlayerMovedEvent) => void> = []
function postToParent(content: IframeEvent<keyof IframeEventMap>) { function postToParent(content: IframeEvent<keyof IframeEventMap>) {
window.parent.postMessage(content, "*") window.parent.postMessage(content, "*")
} }
let playerUuid: string | undefined;
window.WA = { window.WA = {
onPlayerMove(callback: HasPlayerMovedEventCallback): void { onPlayerMove(callback: HasPlayerMovedEventCallback): void {
playerUuid = uuidv4(); callbackPlayerMoved.push(callback);
callbackPlayerMoved[playerUuid] = callback;
postToParent({ postToParent({
type: "onPlayerMove", type: "onPlayerMove",
data: undefined data: undefined
@ -179,45 +174,17 @@ window.WA = {
}) })
},*/ },*/
getTagUser(): Promise<string[]> { getCurrentUser(): Promise<User> {
return getTag().then((res) => { return getGameState().then((gameState) => {
return res.list; return {id: gameState.uuid, nickName: gameState.nickname, tags: gameState.tags};
}) })
}, },
getMap(): Promise<ITiledMap> { getCurrentRoom(): Promise<Room> {
return getDataLayer().then((res) => { return getGameState().then((gameState) => {
return res.data as ITiledMap; return getDataLayer().then((mapJson) => {
return {id: gameState.roomId, map: mapJson.data as ITiledMap, mapUrl: gameState.mapUrl, startLayer: gameState.startLayerName};
}) })
},
getNickName(): Promise<string | null> {
return getGameState().then((res) => {
return res.nickname;
})
},
getMapUrl(): Promise<string> {
return getGameState().then((res) => {
return res.mapUrl;
})
},
getUuid(): Promise<string | undefined> {
return getGameState().then((res) => {
return res.uuid;
})
},
getRoomId(): Promise<string> {
return getGameState().then((res) => {
return res.roomId;
})
},
getStartLayerName(): Promise<string | null> {
return getGameState().then((res) => {
return res.startLayerName;
}) })
}, },
@ -411,22 +378,18 @@ window.addEventListener('message', message => {
resolver(payloadData); resolver(payloadData);
}) })
immutableData = payloadData; immutableData = payloadData;
} else if (payload.type == "hasPlayerMoved" && isHasPlayerMovedEvent(payloadData) && playerUuid) { } else if (payload.type == "hasPlayerMoved" && isHasPlayerMovedEvent(payloadData)) {
callbackPlayerMoved[playerUuid](payloadData) callbackPlayerMoved.forEach(callback => {
callback(payloadData);
})
} else if (payload.type == "dataLayer" && isDataLayerEvent(payloadData)) { } else if (payload.type == "dataLayer" && isDataLayerEvent(payloadData)) {
dataLayerResolver.forEach(resolver => { dataLayerResolver.forEach(resolver => {
resolver(payloadData); resolver(payloadData);
}) })
} else if (payload.type == "menuItemClicked" && isMenuItemClickedEvent(payload.data)) { } else if (payload.type == "menuItemClicked" && isMenuItemClickedEvent(payloadData)) {
const callback = menuCallbacks.get(payload.data.menuItem); const callback = menuCallbacks.get(payloadData.menuItem);
if (callback) { if (callback) {
callback(payload.data.menuItem) callback(payloadData.menuItem)
}
} else {
if (payload.type == "tagList" && isTagEvent(payloadData)) {
tagResolver.forEach(resolver => {
resolver(payloadData);
})
} }
} }
} }