Adding a ingame console message

Roughly inspired from the code used to notify the user when a website
can be opened.

Note: The CSS style used for the message could probably go somewhere
else, but I thought it could be interesting to be able to override it.

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);

front/src/WebRtc/LayoutManager.ts

@@ -47,6 +47,8 @@ class LayoutManager {
     private actionButtonTrigger: Map<string, Function> = new Map<string, Function>();
     private actionButtonInformation: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
 
+    private inGameConsoleMessage: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
+
     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<HTMLDivElement>('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();