_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

re-adding popup-input, video container fix

Browse Source
This commit is contained in:
_Bastler 2021-06-25 11:34:27 +02:00
parent 0bb39a6a5d
commit 07b6fce877
10 changed files with 208 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/Api/Events/ButtonClickedEvent.ts
View File

@ -4,6 +4,8 @@ export const isButtonClickedEvent =
new tg.IsInterface().withProperties({ new tg.IsInterface().withProperties({
popupId: tg.isNumber, popupId: tg.isNumber,
buttonId: tg.isNumber, buttonId: tg.isNumber,
input : tg.isBoolean,
inputValue : tg.isString,
}).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 a user enters or leaves a zone marked with the "zone" property.

1
front/src/Api/Events/ClosePopupEvent.ts
View File

@ -3,6 +3,7 @@ import * as tg from "generic-type-guard";
export const isClosePopupEvent = export const isClosePopupEvent =
new tg.IsInterface().withProperties({ new tg.IsInterface().withProperties({
popupId: tg.isNumber, popupId: tg.isNumber,
inputValue : tg.isString,
}).get(); }).get();
/** /**

3
front/src/Api/Events/OpenPopupEvent.ts
View File

@ -11,7 +11,8 @@ export const isOpenPopupEvent =
popupId: tg.isNumber, popupId: tg.isNumber,
targetObject: tg.isString, targetObject: tg.isString,
message: tg.isString, message: tg.isString,
buttons: tg.isArray(isButtonDescriptor) buttons: tg.isArray(isButtonDescriptor),
input: tg.isBoolean
}).get(); }).get();
/** /**

6
front/src/Api/IframeListener.ts
View File

@ -331,12 +331,14 @@ class IframeListener {
} }
} }
sendButtonClickedEvent(popupId: number, buttonId: number): void { sendButtonClickedEvent(popupId: number, buttonId: number, input : boolean, inputValue : string | null): void {
this.postMessage({ this.postMessage({
'type': 'buttonClickedEvent', 'type': 'buttonClickedEvent',
'data': { 'data': {
popupId, popupId,
buttonId buttonId,
input,
inputValue,
} as ButtonClickedEvent } as ButtonClickedEvent
}); });
} }

5
front/src/Api/iframe/Ui/Popup.ts
View File

@ -2,7 +2,11 @@ import {sendToWorkadventure} from "../IframeApiContribution";
import type {ClosePopupEvent} from "../../Events/ClosePopupEvent"; import type {ClosePopupEvent} from "../../Events/ClosePopupEvent";
export class Popup { export class Popup {
inputValue: string;
constructor(private id: number) { constructor(private id: number) {
this.inputValue = '';
} }
/** /**
@ -13,6 +17,7 @@ export class Popup {
'type': 'closePopup', 'type': 'closePopup',
'data': { 'data': {
'popupId': this.id, 'popupId': this.id,
'inputValue': this.inputValue,
} as ClosePopupEvent } as ClosePopupEvent
}); });
} }

6
front/src/Api/iframe/ui.ts
View File

@ -33,6 +33,7 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
throw new Error('Could not find popup with ID "' + payloadData.popupId + '"'); throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
} }
if (callback) { if (callback) {
popup.inputValue = payloadData.inputValue;
callback(popup); callback(popup);
} }
} }
@ -49,7 +50,7 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
})]; })];
openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup { openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input: boolean = false): Popup {
popupId++; popupId++;
const popup = new Popup(popupId); const popup = new Popup(popupId);
const btnMap = new Map<number, () => void>(); const btnMap = new Map<number, () => void>();
@ -76,7 +77,8 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
label: button.label, label: button.label,
className: button.className className: button.className
}; };
}) }),
input
} }
}); });

4
front/src/Components/Video/VideoMediaBox.svelte
View File

@ -20,7 +20,7 @@
</script> </script>
<div class="video-container"> <div class="video-container nes-container is-rounded is-dark">
{#if $statusStore === 'connecting'} {#if $statusStore === 'connecting'}
<div class="connecting-spinner"></div> <div class="connecting-spinner"></div>
{/if} {/if}
@ -33,7 +33,7 @@
{#if $constraintStore && $constraintStore.audio === false} {#if $constraintStore && $constraintStore.audio === false}
<img src={microphoneCloseImg} alt="Muted"> <img src={microphoneCloseImg} alt="Muted">
{/if} {/if}
<button class="report" on:click={() => openReport(peer)}> <button class="report nes-button is-dark" on:click={() => openReport(peer)}>
<img alt="Report this user" src={reportImg}> <img alt="Report this user" src={reportImg}>
<span>Report/Block</span> <span>Report/Block</span>
</button> </button>

353
front/src/Phaser/Game/GameScene.ts
View File

@ -1,9 +1,9 @@
import { Queue } from 'queue-typescript'; import {Queue} from 'queue-typescript';
import type { Subscription } from "rxjs"; import type {Subscription} from "rxjs";
import { GlobalMessageManager } from "../../Administration/GlobalMessageManager"; import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
import { userMessageManager } from "../../Administration/UserMessageManager"; import {userMessageManager} from "../../Administration/UserMessageManager";
import { iframeListener } from "../../Api/IframeListener"; import {iframeListener} from "../../Api/IframeListener";
import { connectionManager } from "../../Connexion/ConnectionManager"; import {connectionManager} from "../../Connexion/ConnectionManager";
import type { import type {
GroupCreatedUpdatedMessageInterface, GroupCreatedUpdatedMessageInterface,
MessageUserJoined, MessageUserJoined,
@ -14,25 +14,25 @@ import type {
PositionInterface, PositionInterface,
RoomJoinedMessageInterface RoomJoinedMessageInterface
} from "../../Connexion/ConnexionModels"; } from "../../Connexion/ConnexionModels";
import { localUserStore } from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import { Room } from "../../Connexion/Room"; import {Room} from "../../Connexion/Room";
import type { RoomConnection } from "../../Connexion/RoomConnection"; import type {RoomConnection} from "../../Connexion/RoomConnection";
import { worldFullMessageStream } from "../../Connexion/WorldFullMessageStream"; import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
import { import {
DEBUG_MODE, DEBUG_MODE,
JITSI_PRIVATE_MODE, JITSI_PRIVATE_MODE,
MAX_PER_GROUP, MAX_PER_GROUP,
POSITION_DELAY POSITION_DELAY
} from "../../Enum/EnvironmentVariable"; } from "../../Enum/EnvironmentVariable";
import { TextureError } from "../../Exception/TextureError"; import {TextureError} from "../../Exception/TextureError";
import type { UserMovedMessage } from "../../Messages/generated/messages_pb"; import type {UserMovedMessage} from "../../Messages/generated/messages_pb";
import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils"; import {ProtobufClientUtils} from "../../Network/ProtobufClientUtils";
import { touchScreenManager } from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import { urlManager } from "../../Url/UrlManager"; import {urlManager} from "../../Url/UrlManager";
import { audioManager } from "../../WebRtc/AudioManager"; import {audioManager} from "../../WebRtc/AudioManager";
import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager"; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
import { HtmlUtils } from "../../WebRtc/HtmlUtils"; import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import { jitsiFactory } from "../../WebRtc/JitsiFactory"; import {jitsiFactory} from "../../WebRtc/JitsiFactory";
import { import {
AUDIO_LOOP_PROPERTY, AUDIO_VOLUME_PROPERTY, AUDIO_LOOP_PROPERTY, AUDIO_VOLUME_PROPERTY,
Box, Box,
@ -43,43 +43,44 @@ import {
TRIGGER_WEBSITE_PROPERTIES, TRIGGER_WEBSITE_PROPERTIES,
WEBSITE_MESSAGE_PROPERTIES WEBSITE_MESSAGE_PROPERTIES
} from "../../WebRtc/LayoutManager"; } from "../../WebRtc/LayoutManager";
import { mediaManager } from "../../WebRtc/MediaManager"; import {mediaManager} from "../../WebRtc/MediaManager";
import { SimplePeer, UserSimplePeerInterface } from "../../WebRtc/SimplePeer"; import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager"; import {lazyLoadCompanionResource} from "../Companion/CompanionTexturesLoadingManager";
import { ChatModeIcon } from "../Components/ChatModeIcon"; import {ChatModeIcon} from "../Components/ChatModeIcon";
import { addLoader } from "../Components/Loader"; import {addLoader} from "../Components/Loader";
import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick"; import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
import { OpenChatIcon, openChatIconName } from "../Components/OpenChatIcon"; import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
import { PresentationModeIcon } from "../Components/PresentationModeIcon"; import {PresentationModeIcon} from "../Components/PresentationModeIcon";
import { TextUtils } from "../Components/TextUtils"; import {TextUtils} from "../Components/TextUtils";
import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager"; import {lazyLoadPlayerCharacterTextures, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
import { RemotePlayer } from "../Entity/RemotePlayer"; import {RemotePlayer} from "../Entity/RemotePlayer";
import type { ActionableItem } from "../Items/ActionableItem"; import type {ActionableItem} from "../Items/ActionableItem";
import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface"; import type {ItemFactoryInterface} from "../Items/ItemFactoryInterface";
import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene"; import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
import type { import type {
ITiledMap, ITiledMap,
ITiledMapLayer, ITiledMapLayer,
ITiledMapLayerProperty, ITiledMapLayerProperty,
ITiledMapObject, ITiledMapObject,
ITiledMapTileLayer, ITiledMapTileLayer,
ITiledTileSet } from "../Map/ITiledMap"; ITiledTileSet
import { MenuScene, MenuSceneName } from '../Menu/MenuScene'; } from "../Map/ITiledMap";
import { PlayerAnimationDirections } from "../Player/Animation"; import {MenuScene, MenuSceneName} from '../Menu/MenuScene';
import { hasMovedEventName, Player, requestEmoteEventName } from "../Player/Player"; import {PlayerAnimationDirections} from "../Player/Animation";
import { ErrorSceneName } from "../Reconnecting/ErrorScene"; import {hasMovedEventName, Player, requestEmoteEventName} from "../Player/Player";
import { ReconnectingSceneName } from "../Reconnecting/ReconnectingScene"; import {ErrorSceneName} from "../Reconnecting/ErrorScene";
import { waScaleManager } from "../Services/WaScaleManager"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
import { PinchManager } from "../UserInput/PinchManager"; import {waScaleManager} from "../Services/WaScaleManager";
import { UserInputManager } from "../UserInput/UserInputManager"; import {PinchManager} from "../UserInput/PinchManager";
import type { AddPlayerInterface } from "./AddPlayerInterface"; import {UserInputManager} from "../UserInput/UserInputManager";
import { DEPTH_OVERLAY_INDEX } from "./DepthIndexes"; import type {AddPlayerInterface} from "./AddPlayerInterface";
import { DirtyScene } from "./DirtyScene"; import {DEPTH_OVERLAY_INDEX} from "./DepthIndexes";
import { EmoteManager } from "./EmoteManager"; import {DirtyScene} from "./DirtyScene";
import { gameManager } from "./GameManager"; import {EmoteManager} from "./EmoteManager";
import { GameMap } from "./GameMap"; import {gameManager} from "./GameManager";
import { PlayerMovement } from "./PlayerMovement"; import {GameMap} from "./GameMap";
import { PlayersPositionInterpolator } from "./PlayersPositionInterpolator"; import {PlayerMovement} from "./PlayerMovement";
import {PlayersPositionInterpolator} from "./PlayersPositionInterpolator";
import Texture = Phaser.Textures.Texture; import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import CanvasTexture = Phaser.Textures.CanvasTexture; import CanvasTexture = Phaser.Textures.CanvasTexture;
@ -89,7 +90,7 @@ import DOMElement = Phaser.GameObjects.DOMElement;
import EVENT_TYPE = Phaser.Scenes.Events import EVENT_TYPE = Phaser.Scenes.Events
import RenderTexture = Phaser.GameObjects.RenderTexture; import RenderTexture = Phaser.GameObjects.RenderTexture;
import Tilemap = Phaser.Tilemaps.Tilemap; import Tilemap = Phaser.Tilemaps.Tilemap;
import type { HasPlayerMovedEvent } from '../../Api/Events/HasPlayerMovedEvent'; import type {HasPlayerMovedEvent} from '../../Api/Events/HasPlayerMovedEvent';
import AnimatedTiles from "phaser-animated-tiles"; import AnimatedTiles from "phaser-animated-tiles";
import {soundManager} from "./SoundManager"; import {soundManager} from "./SoundManager";
@ -217,14 +218,14 @@ export class GameScene extends DirtyScene {
preload(): void { preload(): void {
const localUser = localUserStore.getLocalUser(); const localUser = localUserStore.getLocalUser();
const textures = localUser?.textures; const textures = localUser?.textures;
if (textures) { if(textures) {
for (const texture of textures) { for(const texture of textures) {
loadCustomTexture(this.load, texture); loadCustomTexture(this.load, texture);
} }
} }
this.load.image(openChatIconName, 'resources/objects/talk.png'); this.load.image(openChatIconName, 'resources/objects/talk.png');
if (touchScreenManager.supportTouchScreen) { if(touchScreenManager.supportTouchScreen) {
this.load.image(joystickBaseKey, joystickBaseImg); this.load.image(joystickBaseKey, joystickBaseImg);
this.load.image(joystickThumbKey, joystickThumbImg); this.load.image(joystickThumbKey, joystickThumbImg);
} }
@ -233,9 +234,9 @@ export class GameScene extends DirtyScene {
//this.load.audio('audio-report-message', '/resources/objects/report-message.mp3'); //this.load.audio('audio-report-message', '/resources/objects/report-message.mp3');
this.sound.pauseOnBlur = false; this.sound.pauseOnBlur = false;
this.load.on(FILE_LOAD_ERROR, (file: { src: string }) => { this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
// If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments) // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) { if(window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
this.originalMapUrl = this.MapUrlFile; this.originalMapUrl = this.MapUrlFile;
this.MapUrlFile = this.MapUrlFile.replace('http://', 'https://'); this.MapUrlFile = this.MapUrlFile.replace('http://', 'https://');
this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile); this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
@ -249,7 +250,7 @@ export class GameScene extends DirtyScene {
// See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#when_is_a_context_considered_secure // See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#when_is_a_context_considered_secure
const url = new URL(file.src); const url = new URL(file.src);
const host = url.host.split(':')[0]; const host = url.host.split(':')[0];
if (window.location.protocol === 'https:' && file.src === this.MapUrlFile && (host === '127.0.0.1' || host === 'localhost' || host.endsWith('.localhost')) && this.originalMapUrl === undefined) { if(window.location.protocol === 'https:' && file.src === this.MapUrlFile && (host === '127.0.0.1' || host === 'localhost' || host.endsWith('.localhost')) && this.originalMapUrl === undefined) {
this.originalMapUrl = this.MapUrlFile; this.originalMapUrl = this.MapUrlFile;
this.MapUrlFile = this.MapUrlFile.replace('https://', 'http://'); this.MapUrlFile = this.MapUrlFile.replace('https://', 'http://');
this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile); this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
@ -273,7 +274,7 @@ export class GameScene extends DirtyScene {
this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile); this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
// If the map has already been loaded as part of another GameScene, the "on load" event will not be triggered. // If the map has already been loaded as part of another GameScene, the "on load" event will not be triggered.
// In this case, we check in the cache to see if the map is here and trigger the event manually. // In this case, we check in the cache to see if the map is here and trigger the event manually.
if (this.cache.tilemap.exists(this.MapUrlFile)) { if(this.cache.tilemap.exists(this.MapUrlFile)) {
const data = this.cache.tilemap.get(this.MapUrlFile); const data = this.cache.tilemap.get(this.MapUrlFile);
this.onMapLoad(data); this.onMapLoad(data);
} }
@ -300,7 +301,7 @@ export class GameScene extends DirtyScene {
this.mapFile = data.data; this.mapFile = data.data;
const url = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/')); const url = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/'));
this.mapFile.tilesets.forEach((tileset) => { this.mapFile.tilesets.forEach((tileset) => {
if (typeof tileset.name === 'undefined' || typeof tileset.image === 'undefined') { if(typeof tileset.name === 'undefined' || typeof tileset.image === 'undefined') {
console.warn("Don't know how to handle tileset ", tileset) console.warn("Don't know how to handle tileset ", tileset)
return; return;
} }
@ -311,15 +312,15 @@ export class GameScene extends DirtyScene {
// Scan the object layers for objects to load and load them. // Scan the object layers for objects to load and load them.
const objects = new Map<string, ITiledMapObject[]>(); const objects = new Map<string, ITiledMapObject[]>();
for (const layer of this.mapFile.layers) { for(const layer of this.mapFile.layers) {
if (layer.type === 'objectgroup') { if(layer.type === 'objectgroup') {
for (const object of layer.objects) { for(const object of layer.objects) {
let objectsOfType: ITiledMapObject[] | undefined; let objectsOfType: ITiledMapObject[] | undefined;
if (!objects.has(object.type)) { if(!objects.has(object.type)) {
objectsOfType = new Array<ITiledMapObject>(); objectsOfType = new Array<ITiledMapObject>();
} else { } else {
objectsOfType = objects.get(object.type); objectsOfType = objects.get(object.type);
if (objectsOfType === undefined) { if(objectsOfType === undefined) {
throw new Error('Unexpected object type not found'); throw new Error('Unexpected object type not found');
} }
} }
@ -329,12 +330,12 @@ export class GameScene extends DirtyScene {
} }
} }
for (const [itemType, objectsOfType] of objects) { for(const [itemType, objectsOfType] of objects) {
// FIXME: we would ideally need for the loader to WAIT for the import to be performed, which means writing our own loader plugin. // FIXME: we would ideally need for the loader to WAIT for the import to be performed, which means writing our own loader plugin.
let itemFactory: ItemFactoryInterface; let itemFactory: ItemFactoryInterface;
switch (itemType) { switch(itemType) {
case 'computer': { case 'computer': {
const module = await import('../Items/Computer/computer'); const module = await import('../Items/Computer/computer');
itemFactory = module.default; itemFactory = module.default;
@ -356,7 +357,7 @@ export class GameScene extends DirtyScene {
const roomJoinedAnswer = await this.connectionAnswerPromise; const roomJoinedAnswer = await this.connectionAnswerPromise;
for (const object of objectsOfType) { for(const object of objectsOfType) {
// TODO: we should pass here a factory to create sprites (maybe?) // TODO: we should pass here a factory to create sprites (maybe?)
// Do we have a state for this object? // Do we have a state for this object?
@ -371,17 +372,17 @@ export class GameScene extends DirtyScene {
// Now, let's load the script, if any // Now, let's load the script, if any
const scripts = this.getScriptUrls(this.mapFile); const scripts = this.getScriptUrls(this.mapFile);
for (const script of scripts) { for(const script of scripts) {
iframeListener.registerScript(script); iframeListener.registerScript(script);
} }
} }
//hook initialisation //hook initialisation
init(initData: GameSceneInitInterface) { init(initData: GameSceneInitInterface) {
if (initData.initPosition !== undefined) { if(initData.initPosition !== undefined) {
this.initPosition = initData.initPosition; //todo: still used? this.initPosition = initData.initPosition; //todo: still used?
} }
if (initData.initPosition !== undefined) { if(initData.initPosition !== undefined) {
this.isReconnecting = initData.reconnecting; this.isReconnecting = initData.reconnecting;
} }
} }
@ -394,14 +395,14 @@ export class GameScene extends DirtyScene {
urlManager.pushRoomIdToUrl(this.room); urlManager.pushRoomIdToUrl(this.room);
this.startLayerName = urlManager.getStartLayerNameFromUrl(); this.startLayerName = urlManager.getStartLayerNameFromUrl();
if (touchScreenManager.supportTouchScreen) { if(touchScreenManager.supportTouchScreen) {
this.pinchManager = new PinchManager(this); this.pinchManager = new PinchManager(this);
} }
this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError(message)) this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError(message))
const playerName = gameManager.getPlayerName(); const playerName = gameManager.getPlayerName();
if (!playerName) { if(!playerName) {
throw 'playerName is not set'; throw 'playerName is not set';
} }
this.playerName = playerName; this.playerName = playerName;
@ -420,21 +421,21 @@ export class GameScene extends DirtyScene {
//add layer on map //add layer on map
this.gameMap = new GameMap(this.mapFile, this.Map, this.Terrains); this.gameMap = new GameMap(this.mapFile, this.Map, this.Terrains);
for (const layer of this.gameMap.flatLayers) { for(const layer of this.gameMap.flatLayers) {
if (layer.type === 'tilelayer') { if(layer.type === 'tilelayer') {
const exitSceneUrl = this.getExitSceneUrl(layer); const exitSceneUrl = this.getExitSceneUrl(layer);
if (exitSceneUrl !== undefined) { if(exitSceneUrl !== undefined) {
this.loadNextGame(exitSceneUrl); this.loadNextGame(exitSceneUrl);
} }
const exitUrl = this.getExitUrl(layer); const exitUrl = this.getExitUrl(layer);
if (exitUrl !== undefined) { if(exitUrl !== undefined) {
this.loadNextGame(exitUrl); this.loadNextGame(exitUrl);
} }
} }
if (layer.type === 'objectgroup') { if(layer.type === 'objectgroup') {
for (const object of layer.objects) { for(const object of layer.objects) {
if (object.text) { if(object.text) {
TextUtils.createTextFromITiledMapObject(this, object); TextUtils.createTextFromITiledMapObject(this, object);
} }
} }
@ -451,14 +452,14 @@ export class GameScene extends DirtyScene {
this.Objects = new Array<Phaser.Physics.Arcade.Sprite>(); this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();
//initialise list of other player //initialise list of other player
this.MapPlayers = this.physics.add.group({ immovable: true }); this.MapPlayers = this.physics.add.group({immovable: true});
//create input to move //create input to move
this.userInputManager = new UserInputManager(this); this.userInputManager = new UserInputManager(this);
mediaManager.setUserInputManager(this.userInputManager); mediaManager.setUserInputManager(this.userInputManager);
if (localUserStore.getFullscreen()) { if(localUserStore.getFullscreen()) {
document.querySelector('body')?.requestFullscreen(); document.querySelector('body')?.requestFullscreen();
} }
@ -474,16 +475,16 @@ export class GameScene extends DirtyScene {
this.initCirclesCanvas(); this.initCirclesCanvas();
// Let's pause the scene if the connection is not established yet // Let's pause the scene if the connection is not established yet
if (!this.room.isDisconnected()) { if(!this.room.isDisconnected()) {
if (this.isReconnecting) { if(this.isReconnecting) {
setTimeout(() => { setTimeout(() => {
this.scene.sleep(); this.scene.sleep();
this.scene.launch(ReconnectingSceneName); this.scene.launch(ReconnectingSceneName);
}, 0); }, 0);
} else if (this.connection === undefined) { } else if(this.connection === undefined) {
// Let's wait 1 second before printing the "connecting" screen to avoid blinking // Let's wait 1 second before printing the "connecting" screen to avoid blinking
setTimeout(() => { setTimeout(() => {
if (this.connection === undefined) { if(this.connection === undefined) {
this.scene.sleep(); this.scene.sleep();
this.scene.launch(ReconnectingSceneName); this.scene.launch(ReconnectingSceneName);
} }
@ -508,7 +509,7 @@ export class GameScene extends DirtyScene {
this.listenToIframeEvents(); this.listenToIframeEvents();
if (!this.room.isDisconnected()) { if(!this.room.isDisconnected()) {
this.connect(); this.connect();
} }
@ -517,11 +518,11 @@ export class GameScene extends DirtyScene {
let oldPeerNumber = 0; let oldPeerNumber = 0;
this.peerStoreUnsubscribe = peerStore.subscribe((peers) => { this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
const newPeerNumber = peers.size; const newPeerNumber = peers.size;
if (newPeerNumber > oldPeerNumber) { if(newPeerNumber > oldPeerNumber) {
this.sound.play('audio-webrtc-in', { this.sound.play('audio-webrtc-in', {
volume: 0.2 volume: 0.2
}); });
} else if (newPeerNumber < oldPeerNumber) { } else if(newPeerNumber < oldPeerNumber) {
this.sound.play('audio-webrtc-out', { this.sound.play('audio-webrtc-out', {
volume: 0.2 volume: 0.2
}); });
@ -568,7 +569,7 @@ export class GameScene extends DirtyScene {
this.connection.onUserMoved((message: UserMovedMessage) => { this.connection.onUserMoved((message: UserMovedMessage) => {
const position = message.getPosition(); const position = message.getPosition();
if (position === undefined) { if(position === undefined) {
throw new Error('Position missing from UserMovedMessage'); throw new Error('Position missing from UserMovedMessage');
} }
@ -591,7 +592,7 @@ export class GameScene extends DirtyScene {
this.connection.onGroupDeleted((groupId: number) => { this.connection.onGroupDeleted((groupId: number) => {
try { try {
this.deleteGroup(groupId); this.deleteGroup(groupId);
} catch (e) { } catch(e) {
console.error(e); console.error(e);
} }
}) })
@ -617,7 +618,7 @@ export class GameScene extends DirtyScene {
this.connection.onActionableEvent((message => { this.connection.onActionableEvent((message => {
const item = this.actionableItems.get(message.itemId); const item = this.actionableItems.get(message.itemId);
if (item === undefined) { if(item === undefined) {
console.warn('Received an event about object "' + message.itemId + '" but cannot find this item on the map.'); console.warn('Received an event about object "' + message.itemId + '" but cannot find this item on the map.');
return; return;
} }
@ -646,7 +647,7 @@ export class GameScene extends DirtyScene {
audioManager.decreaseVolume(); audioManager.decreaseVolume();
}, },
onDisconnect(userId: number) { onDisconnect(userId: number) {
if (self.simplePeer.getNbConnections() === 0) { if(self.simplePeer.getNbConnections() === 0) {
self.openChatIcon.setVisible(false); self.openChatIcon.setVisible(false);
audioManager.restoreVolume(); audioManager.restoreVolume();
} }
@ -677,12 +678,12 @@ export class GameScene extends DirtyScene {
private initCirclesCanvas(): void { private initCirclesCanvas(): void {
// Let's generate the circle for the group delimiter // Let's generate the circle for the group delimiter
let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white'); let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
if (circleElement) { if(circleElement) {
this.textures.remove('circleSprite-white'); this.textures.remove('circleSprite-white');
} }
circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red'); circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
if (circleElement) { if(circleElement) {
this.textures.remove('circleSprite-red'); this.textures.remove('circleSprite-red');
} }
@ -711,7 +712,7 @@ export class GameScene extends DirtyScene {
private safeParseJSONstring(jsonString: string | undefined, propertyName: string) { private safeParseJSONstring(jsonString: string | undefined, propertyName: string) {
try { try {
return jsonString ? JSON.parse(jsonString) : {}; return jsonString ? JSON.parse(jsonString) : {};
} catch (e) { } catch(e) {
console.warn('Invalid JSON found in property "' + propertyName + '" of the map:' + jsonString, e); console.warn('Invalid JSON found in property "' + propertyName + '" of the map:' + jsonString, e);
return {} return {}
} }
@ -719,13 +720,13 @@ export class GameScene extends DirtyScene {
private triggerOnMapLayerPropertyChange() { private triggerOnMapLayerPropertyChange() {
this.gameMap.onPropertyChange('exitSceneUrl', (newValue, oldValue) => { this.gameMap.onPropertyChange('exitSceneUrl', (newValue, oldValue) => {
if (newValue) this.onMapExit(newValue as string); if(newValue) this.onMapExit(newValue as string);
}); });
this.gameMap.onPropertyChange('exitUrl', (newValue, oldValue) => { this.gameMap.onPropertyChange('exitUrl', (newValue, oldValue) => {
if (newValue) this.onMapExit(newValue as string); if(newValue) this.onMapExit(newValue as string);
}); });
this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue, allProps) => { this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue, allProps) => {
if (newValue === undefined) { if(newValue === undefined) {
layoutManager.removeActionButton('openWebsite', this.userInputManager); layoutManager.removeActionButton('openWebsite', this.userInputManager);
coWebsiteManager.closeCoWebsite(); coWebsiteManager.closeCoWebsite();
} else { } else {
@ -735,9 +736,9 @@ export class GameScene extends DirtyScene {
}; };
const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES); const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES);
if (openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) { if(openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES); let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
if (message === undefined) { if(message === undefined) {
message = 'Press SPACE or touch here to open web site'; message = 'Press SPACE or touch here to open web site';
} }
layoutManager.addActionButton('openWebsite', message.toString(), () => { layoutManager.addActionButton('openWebsite', message.toString(), () => {
@ -749,14 +750,14 @@ export class GameScene extends DirtyScene {
} }
}); });
this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => { this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => {
if (newValue === undefined) { if(newValue === undefined) {
layoutManager.removeActionButton('jitsiRoom', this.userInputManager); layoutManager.removeActionButton('jitsiRoom', this.userInputManager);
this.stopJitsi(); this.stopJitsi();
} else { } else {
const openJitsiRoomFunction = () => { const openJitsiRoomFunction = () => {
const roomName = jitsiFactory.getRoomName(newValue.toString(), this.instance); const roomName = jitsiFactory.getRoomName(newValue.toString(), this.instance);
const jitsiUrl = allProps.get("jitsiUrl") as string | undefined; const jitsiUrl = allProps.get("jitsiUrl") as string | undefined;
if (JITSI_PRIVATE_MODE && !jitsiUrl) { if(JITSI_PRIVATE_MODE && !jitsiUrl) {
const adminTag = allProps.get("jitsiRoomAdminTag") as string | undefined; const adminTag = allProps.get("jitsiRoomAdminTag") as string | undefined;
this.connection?.emitQueryJitsiJwtMessage(roomName, adminTag); this.connection?.emitQueryJitsiJwtMessage(roomName, adminTag);
@ -767,9 +768,9 @@ export class GameScene extends DirtyScene {
} }
const jitsiTriggerValue = allProps.get(TRIGGER_JITSI_PROPERTIES); const jitsiTriggerValue = allProps.get(TRIGGER_JITSI_PROPERTIES);
if (jitsiTriggerValue && jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) { if(jitsiTriggerValue && jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
let message = allProps.get(JITSI_MESSAGE_PROPERTIES); let message = allProps.get(JITSI_MESSAGE_PROPERTIES);
if (message === undefined) { if(message === undefined) {
message = 'Press SPACE or touch here to enter Jitsi Meet room'; message = 'Press SPACE or touch here to enter Jitsi Meet room';
} }
layoutManager.addActionButton('jitsiRoom', message.toString(), () => { layoutManager.addActionButton('jitsiRoom', message.toString(), () => {
@ -781,7 +782,7 @@ export class GameScene extends DirtyScene {
} }
}); });
this.gameMap.onPropertyChange('silent', (newValue, oldValue) => { this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
if (newValue === undefined || newValue === false || newValue === '') { if(newValue === undefined || newValue === false || newValue === '') {
this.connection?.setSilent(false); this.connection?.setSilent(false);
} else { } else {
this.connection?.setSilent(true); this.connection?.setSilent(true);
@ -798,7 +799,7 @@ export class GameScene extends DirtyScene {
}); });
this.gameMap.onPropertyChange('zone', (newValue, oldValue) => { this.gameMap.onPropertyChange('zone', (newValue, oldValue) => {
if (newValue === undefined || newValue === false || newValue === '') { if(newValue === undefined || newValue === false || newValue === '') {
iframeListener.sendLeaveEvent(oldValue as string); iframeListener.sendLeaveEvent(oldValue as string);
} else { } else {
@ -813,20 +814,23 @@ export class GameScene extends DirtyScene {
let objectLayerSquare: ITiledMapObject; let objectLayerSquare: ITiledMapObject;
const targetObjectData = this.getObjectLayerData(openPopupEvent.targetObject); const targetObjectData = this.getObjectLayerData(openPopupEvent.targetObject);
if (targetObjectData !== undefined) { if(targetObjectData !== undefined) {
objectLayerSquare = targetObjectData; objectLayerSquare = targetObjectData;
} else { } else {
console.error("Error while opening a popup. Cannot find an object on the map with name '" + openPopupEvent.targetObject + "'. The first parameter of WA.openPopup() must be the name of a rectangle object in your map."); console.error("Error while opening a popup. Cannot find an object on the map with name '" + openPopupEvent.targetObject + "'. The first parameter of WA.openPopup() must be the name of a rectangle object in your map.");
return; return;
} }
const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message); const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
let html = `<div id="container" hidden><div class="nes-container with-title is-centered"> let html = `<div id="container" hidden><div class="nes-container with-title is-centered">`;
${escapedMessage} html += escapedMessage;
</div> `; if(openPopupEvent.input) {
html += `<input id="popupinput-${openPopupEvent.popupId}" class="nes-input" />`
}
html += `</div>`;
const buttonContainer = `<div class="buttonContainer"</div>`; const buttonContainer = `<div class="buttonContainer"</div>`;
html += buttonContainer; html += buttonContainer;
let id = 0; let id = 0;
for (const button of openPopupEvent.buttons) { for(const button of openPopupEvent.buttons) {
html += `<button type="button" class="nes-btn is-${HtmlUtils.escapeHtml(button.className ?? '')}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(button.label)}</button>`; html += `<button type="button" class="nes-btn is-${HtmlUtils.escapeHtml(button.className ?? '')}" id="popup-${openPopupEvent.popupId}-${id}">${HtmlUtils.escapeHtml(button.label)}</button>`;
id++; id++;
} }
@ -844,12 +848,15 @@ ${escapedMessage}
}, 100); }, 100);
id = 0; id = 0;
for (const button of openPopupEvent.buttons) { for(const button of openPopupEvent.buttons) {
const button = HtmlUtils.getElementByIdOrFail<HTMLButtonElement>(`popup-${openPopupEvent.popupId}-${id}`); const button = HtmlUtils.getElementByIdOrFail<HTMLButtonElement>(`popup-${openPopupEvent.popupId}-${id}`);
const btnId = id; const btnId = id;
button.onclick = () => { button.onclick = () => {
iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId); let inputValue = '';
button.disabled = true; if(openPopupEvent.input) {
inputValue = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(`popupinput-${openPopupEvent.popupId}`).value;
}
iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId, openPopupEvent.input, inputValue);
} }
id++; id++;
} }
@ -865,7 +872,7 @@ ${escapedMessage}
this.iframeSubscriptionList.push(iframeListener.closePopupStream.subscribe((closePopupEvent) => { this.iframeSubscriptionList.push(iframeListener.closePopupStream.subscribe((closePopupEvent) => {
const popUpElement = this.popUpElements.get(closePopupEvent.popupId); const popUpElement = this.popUpElements.get(closePopupEvent.popupId);
if (popUpElement === undefined) { if(popUpElement === undefined) {
console.error('Could not close popup with ID ', closePopupEvent.popupId, '. Maybe it has already been closed?'); console.error('Could not close popup with ID ', closePopupEvent.popupId, '. Maybe it has already been closed?');
} }
@ -940,11 +947,11 @@ ${escapedMessage}
}, this.userInputManager); }, this.userInputManager);
} }
})); }));
this.iframeSubscriptionList.push(iframeListener.showLayerStream.subscribe((layerEvent)=>{ this.iframeSubscriptionList.push(iframeListener.showLayerStream.subscribe((layerEvent) => {
this.setLayerVisibility(layerEvent.name, true); this.setLayerVisibility(layerEvent.name, true);
})); }));
this.iframeSubscriptionList.push(iframeListener.hideLayerStream.subscribe((layerEvent)=>{ this.iframeSubscriptionList.push(iframeListener.hideLayerStream.subscribe((layerEvent) => {
this.setLayerVisibility(layerEvent.name, false); this.setLayerVisibility(layerEvent.name, false);
})); }));
@ -971,14 +978,14 @@ ${escapedMessage}
private setPropertyLayer(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void { private setPropertyLayer(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {
const layer = this.gameMap.findLayer(layerName); const layer = this.gameMap.findLayer(layerName);
if (layer === undefined) { if(layer === undefined) {
console.warn('Could not find layer "' + layerName + '" when calling setProperty'); console.warn('Could not find layer "' + layerName + '" when calling setProperty');
return; return;
} }
const property = (layer.properties as ITiledMapLayerProperty[])?.find((property) => property.name === propertyName); const property = (layer.properties as ITiledMapLayerProperty[])?.find((property) => property.name === propertyName);
if (property === undefined) { if(property === undefined) {
layer.properties = []; layer.properties = [];
layer.properties.push({name : propertyName, type : typeof propertyValue, value : propertyValue}); layer.properties.push({name: propertyName, type: typeof propertyValue, value: propertyValue});
return; return;
} }
property.value = propertyValue; property.value = propertyValue;
@ -986,7 +993,7 @@ ${escapedMessage}
private setLayerVisibility(layerName: string, visible: boolean): void { private setLayerVisibility(layerName: string, visible: boolean): void {
const phaserLayer = this.gameMap.findPhaserLayer(layerName); const phaserLayer = this.gameMap.findPhaserLayer(layerName);
if (phaserLayer === undefined) { if(phaserLayer === undefined) {
console.warn('Could not find layer "' + layerName + '" when calling WA.hideLayer / WA.showLayer'); console.warn('Could not find layer "' + layerName + '" when calling WA.hideLayer / WA.showLayer');
return; return;
} }
@ -1000,15 +1007,15 @@ ${escapedMessage}
} }
private onMapExit(exitKey: string) { private onMapExit(exitKey: string) {
if (this.mapTransitioning) return; if(this.mapTransitioning) return;
this.mapTransitioning = true; this.mapTransitioning = true;
const { roomId, hash } = Room.getIdFromIdentifier(exitKey, this.MapUrlFile, this.instance); const {roomId, hash} = Room.getIdFromIdentifier(exitKey, this.MapUrlFile, this.instance);
if (!roomId) throw new Error('Could not find the room from its exit key: ' + exitKey); if(!roomId) throw new Error('Could not find the room from its exit key: ' + exitKey);
urlManager.pushStartLayerNameToUrl(hash); urlManager.pushStartLayerNameToUrl(hash);
const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene
menuScene.reset() menuScene.reset()
if (roomId !== this.scene.key) { if(roomId !== this.scene.key) {
if (this.scene.get(roomId) === null) { if(this.scene.get(roomId) === null) {
console.error("next room not loaded", exitKey); console.error("next room not loaded", exitKey);
return; return;
} }
@ -1030,7 +1037,7 @@ ${escapedMessage}
coWebsiteManager.closeCoWebsite(); coWebsiteManager.closeCoWebsite();
// Stop the script, if any // Stop the script, if any
const scripts = this.getScriptUrls(this.mapFile); const scripts = this.getScriptUrls(this.mapFile);
for (const script of scripts) { for(const script of scripts) {
iframeListener.unregisterScript(script); iframeListener.unregisterScript(script);
} }
@ -1049,7 +1056,7 @@ ${escapedMessage}
mediaManager.hideGameOverlay(); mediaManager.hideGameOverlay();
for (const iframeEvents of this.iframeSubscriptionList) { for(const iframeEvents of this.iframeSubscriptionList) {
iframeEvents.unsubscribe(); iframeEvents.unsubscribe();
} }
} }
@ -1058,7 +1065,7 @@ ${escapedMessage}
this.MapPlayersByKey.forEach((player: RemotePlayer) => { this.MapPlayersByKey.forEach((player: RemotePlayer) => {
player.destroy(); player.destroy();
if (player.companion) { if(player.companion) {
player.companion.destroy(); player.companion.destroy();
} }
@ -1069,21 +1076,21 @@ ${escapedMessage}
private initStartXAndStartY() { private initStartXAndStartY() {
// If there is an init position passed // If there is an init position passed
if (this.initPosition !== null) { if(this.initPosition !== null) {
this.startX = this.initPosition.x; this.startX = this.initPosition.x;
this.startY = this.initPosition.y; this.startY = this.initPosition.y;
} else { } else {
// Now, let's find the start layer // Now, let's find the start layer
if (this.startLayerName) { if(this.startLayerName) {
this.initPositionFromLayerName(this.startLayerName); this.initPositionFromLayerName(this.startLayerName);
} }
if (this.startX === undefined) { if(this.startX === undefined) {
// If we have no start layer specified or if the hash passed does not exist, let's go with the default start position. // If we have no start layer specified or if the hash passed does not exist, let's go with the default start position.
this.initPositionFromLayerName(defaultStartLayerName); this.initPositionFromLayerName(defaultStartLayerName);
} }
} }
// Still no start position? Something is wrong with the map, we need a "start" layer. // Still no start position? Something is wrong with the map, we need a "start" layer.
if (this.startX === undefined) { if(this.startX === undefined) {
console.warn('This map is missing a layer named "start" that contains the available default start positions.'); console.warn('This map is missing a layer named "start" that contains the available default start positions.');
// Let's start in the middle of the map // Let's start in the middle of the map
this.startX = this.mapFile.width * 16; this.startX = this.mapFile.width * 16;
@ -1092,8 +1099,8 @@ ${escapedMessage}
} }
private initPositionFromLayerName(layerName: string) { private initPositionFromLayerName(layerName: string) {
for (const layer of this.gameMap.flatLayers) { for(const layer of this.gameMap.flatLayers) {
if ((layerName === layer.name || layer.name.endsWith('/' + layerName)) && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) { if((layerName === layer.name || layer.name.endsWith('/' + layerName)) && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) {
const startPosition = this.startUser(layer); const startPosition = this.startUser(layer);
this.startX = startPosition.x + this.mapFile.tilewidth / 2; this.startX = startPosition.x + this.mapFile.tilewidth / 2;
this.startY = startPosition.y + this.mapFile.tileheight / 2; this.startY = startPosition.y + this.mapFile.tileheight / 2;
@ -1123,11 +1130,11 @@ ${escapedMessage}
private getProperty(layer: ITiledMapLayer | ITiledMap, name: string): string | boolean | number | undefined { private getProperty(layer: ITiledMapLayer | ITiledMap, name: string): string | boolean | number | undefined {
const properties: ITiledMapLayerProperty[] | undefined = layer.properties; const properties: ITiledMapLayerProperty[] | undefined = layer.properties;
if (!properties) { if(!properties) {
return undefined; return undefined;
} }
const obj = properties.find((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()); const obj = properties.find((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase());
if (obj === undefined) { if(obj === undefined) {
return undefined; return undefined;
} }
return obj.value; return obj.value;
@ -1135,36 +1142,36 @@ ${escapedMessage}
private getProperties(layer: ITiledMapLayer | ITiledMap, name: string): (string | number | boolean | undefined)[] { private getProperties(layer: ITiledMapLayer | ITiledMap, name: string): (string | number | boolean | undefined)[] {
const properties: ITiledMapLayerProperty[] | undefined = layer.properties; const properties: ITiledMapLayerProperty[] | undefined = layer.properties;
if (!properties) { if(!properties) {
return []; return [];
} }
return properties.filter((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()).map((property) => property.value); return properties.filter((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()).map((property) => property.value);
} }
//todo: push that into the gameManager //todo: push that into the gameManager
private loadNextGame(exitSceneIdentifier: string) : Promise<void>{ private loadNextGame(exitSceneIdentifier: string): Promise<void> {
const { roomId, hash } = Room.getIdFromIdentifier(exitSceneIdentifier, this.MapUrlFile, this.instance); const {roomId, hash} = Room.getIdFromIdentifier(exitSceneIdentifier, this.MapUrlFile, this.instance);
const room = new Room(roomId); const room = new Room(roomId);
return gameManager.loadMap(room, this.scene).catch(() => { }); return gameManager.loadMap(room, this.scene).catch(() => {});
} }
private startUser(layer: ITiledMapTileLayer): PositionInterface { private startUser(layer: ITiledMapTileLayer): PositionInterface {
const tiles = layer.data; const tiles = layer.data;
if (typeof (tiles) === 'string') { if(typeof (tiles) === 'string') {
throw new Error('The content of a JSON map must be filled as a JSON array, not as a string'); throw new Error('The content of a JSON map must be filled as a JSON array, not as a string');
} }
const possibleStartPositions: PositionInterface[] = []; const possibleStartPositions: PositionInterface[] = [];
tiles.forEach((objectKey: number, key: number) => { tiles.forEach((objectKey: number, key: number) => {
if (objectKey === 0) { if(objectKey === 0) {
return; return;
} }
const y = Math.floor(key / layer.width); const y = Math.floor(key / layer.width);
const x = key % layer.width; const x = key % layer.width;
possibleStartPositions.push({ x: x * this.mapFile.tilewidth, y: y * this.mapFile.tilewidth }); possibleStartPositions.push({x: x * this.mapFile.tilewidth, y: y * this.mapFile.tilewidth});
}); });
// Get a value at random amongst allowed values // Get a value at random amongst allowed values
if (possibleStartPositions.length === 0) { if(possibleStartPositions.length === 0) {
console.warn('The start layer "' + layer.name + '" for this map is empty.'); console.warn('The start layer "' + layer.name + '" for this map is empty.');
return { return {
x: 0, x: 0,
@ -1184,12 +1191,12 @@ ${escapedMessage}
createCollisionWithPlayer() { createCollisionWithPlayer() {
//add collision layer //add collision layer
for (const phaserLayer of this.gameMap.phaserLayers) { for(const phaserLayer of this.gameMap.phaserLayers) {
this.physics.add.collider(this.CurrentPlayer, phaserLayer, (object1: GameObject, object2: GameObject) => { this.physics.add.collider(this.CurrentPlayer, phaserLayer, (object1: GameObject, object2: GameObject) => {
//this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name) //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
}); });
phaserLayer.setCollisionByProperty({collides: true}); phaserLayer.setCollisionByProperty({collides: true});
if (DEBUG_MODE) { if(DEBUG_MODE) {
//debug code to see the collision hitbox of the object in the top layer //debug code to see the collision hitbox of the object in the top layer
phaserLayer.renderDebug(this.add.graphics(), { phaserLayer.renderDebug(this.add.graphics(), {
tileColor: null, //non-colliding tiles tileColor: null, //non-colliding tiles
@ -1218,7 +1225,7 @@ ${escapedMessage}
this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
); );
this.CurrentPlayer.on('pointerdown', (pointer: Phaser.Input.Pointer) => { this.CurrentPlayer.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) { if(pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
return; //we don't want the menu to open when pinching on a touch screen. return; //we don't want the menu to open when pinching on a touch screen.
} }
this.emoteManager.getMenuImages().then((emoteMenuElements) => this.CurrentPlayer.openOrCloseEmoteMenu(emoteMenuElements)) this.emoteManager.getMenuImages().then((emoteMenuElements) => this.CurrentPlayer.openOrCloseEmoteMenu(emoteMenuElements))
@ -1226,8 +1233,8 @@ ${escapedMessage}
this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => { this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
this.connection?.emitEmoteEvent(emoteKey); this.connection?.emitEmoteEvent(emoteKey);
}) })
} catch (err) { } catch(err) {
if (err instanceof TextureError) { if(err instanceof TextureError) {
gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene()); gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());
} }
throw err; throw err;
@ -1238,24 +1245,24 @@ ${escapedMessage}
} }
pushPlayerPosition(event: HasPlayerMovedEvent) { pushPlayerPosition(event: HasPlayerMovedEvent) {
if (this.lastMoveEventSent === event) { if(this.lastMoveEventSent === event) {
return; return;
} }
// If the player is not moving, let's send the info right now. // If the player is not moving, let's send the info right now.
if (event.moving === false) { if(event.moving === false) {
this.doPushPlayerPosition(event); this.doPushPlayerPosition(event);
return; return;
} }
// If the player is moving, and if it changed direction, let's send an event // If the player is moving, and if it changed direction, let's send an event
if (event.direction !== this.lastMoveEventSent.direction) { if(event.direction !== this.lastMoveEventSent.direction) {
this.doPushPlayerPosition(event); this.doPushPlayerPosition(event);
return; return;
} }
// If more than 200ms happened since last event sent // If more than 200ms happened since last event sent
if (this.currentTick - this.lastSentTick >= POSITION_DELAY) { if(this.currentTick - this.lastSentTick >= POSITION_DELAY) {
this.doPushPlayerPosition(event); this.doPushPlayerPosition(event);
return; return;
} }
@ -1270,7 +1277,7 @@ ${escapedMessage}
private outlineItem(event: HasPlayerMovedEvent): 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) {
case PlayerAnimationDirections.Up: case PlayerAnimationDirections.Up:
y -= 32; y -= 32;
break; break;
@ -1289,15 +1296,15 @@ ${escapedMessage}
let shortestDistance: number = Infinity; let shortestDistance: number = Infinity;
let selectedItem: ActionableItem | null = null; let selectedItem: ActionableItem | null = null;
for (const item of this.actionableItems.values()) { for(const item of this.actionableItems.values()) {
const distance = item.actionableDistance(x, y); const distance = item.actionableDistance(x, y);
if (distance !== null && distance < shortestDistance) { if(distance !== null && distance < shortestDistance) {
shortestDistance = distance; shortestDistance = distance;
selectedItem = item; selectedItem = item;
} }
} }
if (this.outlinedItem === selectedItem) { if(this.outlinedItem === selectedItem) {
return; return;
} }
@ -1329,10 +1336,10 @@ ${escapedMessage}
this.CurrentPlayer.moveUser(delta); this.CurrentPlayer.moveUser(delta);
// Let's handle all events // Let's handle all events
while (this.pendingEvents.length !== 0) { while(this.pendingEvents.length !== 0) {
this.dirty = true; this.dirty = true;
const event = this.pendingEvents.dequeue(); const event = this.pendingEvents.dequeue();
switch (event.type) { switch(event.type) {
case "InitUserPositionEvent": case "InitUserPositionEvent":
this.doInitUsersPosition(event.event); this.doInitUsersPosition(event.event);
break; break;
@ -1358,7 +1365,7 @@ ${escapedMessage}
updatedPlayersPositions.forEach((moveEvent: HasPlayerMovedEvent, 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) {
throw new Error('Cannot find player with ID "' + userId + '"'); throw new Error('Cannot find player with ID "' + userId + '"');
} }
player.updatePosition(moveEvent); player.updatePosition(moveEvent);
@ -1383,7 +1390,7 @@ ${escapedMessage}
this.removeAllRemotePlayers(); this.removeAllRemotePlayers();
// load map // load map
usersPosition.forEach((userPosition: MessageUserPositionInterface) => { usersPosition.forEach((userPosition: MessageUserPositionInterface) => {
if (userPosition.userId === currentPlayerId) { if(userPosition.userId === currentPlayerId) {
return; return;
} }
this.addPlayer(userPosition); this.addPlayer(userPosition);
@ -1402,7 +1409,7 @@ ${escapedMessage}
private doAddPlayer(addPlayerData: AddPlayerInterface): void { private doAddPlayer(addPlayerData: AddPlayerInterface): void {
//check if exist player, if exist, move position //check if exist player, if exist, move position
if (this.MapPlayersByKey.has(addPlayerData.userId)) { if(this.MapPlayersByKey.has(addPlayerData.userId)) {
this.updatePlayerPosition({ this.updatePlayerPosition({
userId: addPlayerData.userId, userId: addPlayerData.userId,
position: addPlayerData.position position: addPlayerData.position
@ -1441,12 +1448,12 @@ ${escapedMessage}
private doRemovePlayer(userId: number) { private doRemovePlayer(userId: number) {
const player = this.MapPlayersByKey.get(userId); const player = this.MapPlayersByKey.get(userId);
if (player === undefined) { if(player === undefined) {
console.error('Cannot find user with id ', userId); console.error('Cannot find user with id ', userId);
} else { } else {
player.destroy(); player.destroy();
if (player.companion) { if(player.companion) {
player.companion.destroy(); player.companion.destroy();
} }
@ -1465,7 +1472,7 @@ ${escapedMessage}
private doUpdatePlayerPosition(message: MessageUserMovedInterface): void { private doUpdatePlayerPosition(message: MessageUserMovedInterface): void {
const player: RemotePlayer | undefined = this.MapPlayersByKey.get(message.userId); const player: RemotePlayer | undefined = this.MapPlayersByKey.get(message.userId);
if (player === undefined) { if(player === undefined) {
//throw new Error('Cannot find player with ID "' + message.userId +'"'); //throw new Error('Cannot find player with ID "' + message.userId +'"');
console.error('Cannot update position of player with ID "' + message.userId + '": player not found'); console.error('Cannot update position of player with ID "' + message.userId + '": player not found');
return; return;
@ -1473,7 +1480,7 @@ ${escapedMessage}
// We do not update the player position directly (because it is sent only every 200ms). // We do not update the player position directly (because it is sent only every 200ms).
// Instead we use the PlayersPositionInterpolator that will do a smooth animation over the next 200ms. // Instead we use the PlayersPositionInterpolator that will do a smooth animation over the next 200ms.
const playerMovement = new PlayerMovement({ x: player.x, y: player.y }, this.currentTick, message.position, this.currentTick + POSITION_DELAY); const playerMovement = new PlayerMovement({x: player.x, y: player.y}, this.currentTick, message.position, this.currentTick + POSITION_DELAY);
this.playersPositionInterpolator.updatePlayerPosition(player.userId, playerMovement); this.playersPositionInterpolator.updatePlayerPosition(player.userId, playerMovement);
} }
@ -1511,7 +1518,7 @@ ${escapedMessage}
doDeleteGroup(groupId: number): void { doDeleteGroup(groupId: number): void {
const group = this.groups.get(groupId); const group = this.groups.get(groupId);
if (!group) { if(!group) {
return; return;
} }
group.destroy(); group.destroy();
@ -1541,10 +1548,10 @@ ${escapedMessage}
}); });
} }
private getObjectLayerData(objectName: string): ITiledMapObject | undefined { private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
for (const layer of this.mapFile.layers) { for(const layer of this.mapFile.layers) {
if (layer.type === 'objectgroup' && layer.name === 'floorLayer') { if(layer.type === 'objectgroup' && layer.name === 'floorLayer') {
for (const object of layer.objects) { for(const object of layer.objects) {
if (object.name === objectName) { if(object.name === objectName) {
return object; return object;
} }
} }
@ -1643,7 +1650,7 @@ ${escapedMessage}
this.scene.remove(ReconnectingSceneName); this.scene.remove(ReconnectingSceneName);
this.userInputManager.disableControls(); this.userInputManager.disableControls();
//FIX ME to use status code //FIX ME to use status code
if (message == undefined) { if(message == undefined) {
this.scene.start(ErrorSceneName, { this.scene.start(ErrorSceneName, {
title: 'Connection rejected', title: 'Connection rejected',
subTitle: 'The world you are trying to join is full. Try again later.', subTitle: 'The world you are trying to join is full. Try again later.',

4
front/src/iframe_api.ts
View File

@ -119,9 +119,9 @@ const wa = {
/** /**
* @deprecated Use WA.controls.restorePlayerControls instead * @deprecated Use WA.controls.restorePlayerControls instead
*/ */
openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup { openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input : boolean): Popup {
console.warn('Method WA.openPopup is deprecated. Please use WA.ui.openPopup instead'); console.warn('Method WA.openPopup is deprecated. Please use WA.ui.openPopup instead');
return ui.openPopup(targetObject, message, buttons); return ui.openPopup(targetObject, message, buttons, input);
}, },
/** /**
* @deprecated Use WA.chat.onChatMessage instead * @deprecated Use WA.chat.onChatMessage instead

1
front/style/style.scss
View File

@ -40,6 +40,7 @@ body .message-info.warning {
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
background-color: #00000099; background-color: #00000099;
height: 100%;
video { video {
width: 100%; width: 100%;