diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 875109a6..5ed44e46 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -766,6 +766,13 @@ export class GameScene extends DirtyScene implements CenterListener { } } }); + this.gameMap.onPropertyChange('inGameConsoleMessage', (newValue, oldValue, allProps) => { + if (newValue !== undefined) { + layoutManager.addInGameConsoleMessage('inGameConsoleMessage', newValue.toString(), "font-size: 30px;max-width: 100%; margin-left: auto;"); + } else { + layoutManager.removeInGameConsoleMessage('inGameConsoleMessage'); + } + }); this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => { if (newValue === undefined) { layoutManager.removeActionButton('jitsiRoom', this.userInputManager); diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index 7d75e5fe..454875d6 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -47,6 +47,8 @@ class LayoutManager { private actionButtonTrigger: Map = new Map(); private actionButtonInformation: Map = new Map(); + private inGameConsoleMessage: Map = new Map(); + public setListener(centerListener: CenterListener|null) { this.listener = centerListener; } @@ -392,6 +394,35 @@ class LayoutManager { this.removeActionButton(id, userInputManager); }, 10000) } + + public addInGameConsoleMessage(id: string, text: string, customStyle: string){ + //delete previous element + this.removeInGameConsoleMessage(id); + + //create div and text html component + const p = document.createElement('p'); + p.classList.add('action-body'); + p.innerText = text; + p.setAttribute("style", customStyle); + const div = document.createElement('div'); + div.classList.add('action'); + div.id = id; + div.appendChild(p); + + this.inGameConsoleMessage.set(id, div); + + const mainContainer = HtmlUtils.getElementByIdOrFail('main-container'); + mainContainer.appendChild(div); + + } + public removeInGameConsoleMessage(id: string) { + //delete previous element + const previousDiv = this.inGameConsoleMessage.get(id); + if(previousDiv){ + previousDiv.remove(); + this.inGameConsoleMessage.delete(id); + } + } } const layoutManager = new LayoutManager();