create event and brodcast event in backend

back/src/Controller/IoSocketController.ts

@@ -24,6 +24,7 @@ import {isUserMovesInterface} from "../Model/Websocket/UserMovesMessage";
 import {isViewport} from "../Model/Websocket/ViewportMessage";
 import {GroupUpdateInterface} from "_Model/Websocket/GroupUpdateInterface";
 import {Movable} from "../Model/Movable";
+import {isUnknown} from "generic-type-guard";
 
 enum SockerIoEvent {
     CONNECTION = "connection",
@@ -44,6 +45,9 @@ enum SockerIoEvent {
     SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
     SET_VIEWPORT = "set-viewport",
     BATCH = "batch",
+
+    PLAY_GLOBAL_MESSAGE = "play-global-message",
+    STOP_GLOBAL_MESSAGE = "stop-global-message",
 }
 
 function emitInBatch(socket: ExSocketInterface, event: string | symbol, payload: unknown): void {
@@ -396,6 +400,10 @@ export class IoSocketController {
                     console.error(e);
                 }
             });
+
+            socket.on(SockerIoEvent.PLAY_GLOBAL_MESSAGE, (itemEvent: unknown) => {
+                socket.broadcast.emit(SockerIoEvent.PLAY_GLOBAL_MESSAGE, itemEvent);
+            });
         });
     }
 

front/dist/resources/style/style.css

@@ -404,31 +404,31 @@ body {
     flex-grow: 5;
 }
 
-.message-container{
-    top: 0;
-    left: 20%;
-    position: absolute;
-    width: 60%;
-    height: auto;
-    z-index: 200;
-    background-color: #00000096;
-    border-radius: 0 0 10px 10px;
-}
-
+.message-container,
 .main-console{
     position: absolute;
     width: 80%;
-    top: 0;
+    height: 80%;
+    top: -80%;
     left: 10%;
     background: #000000a6;
     z-index: 200;
-    height: auto;
     transition: all 0.1s ease-out;
 }
+
+.message-container{
+    height: auto;
+    border-radius: 0 0 10px 10px;
+    color: white;
+    padding: 10px;
+    top: 0;
+}
+
+.message-container div,
 .main-console div{
     position: absolute;
     background: none repeat scroll 0% 0% #ccc0;
-    border-color: #000000 #ffffff00 #ffffff00 #ffffff00;
+    border-color: #000000cf #ffffff00 #ffffff00 #ffffff00;
     border-style: solid;
     border-width: 20px 7px;
     height: auto;
@@ -437,16 +437,17 @@ body {
     z-index: 200;
     left: 45%;
     transition: all 0.1s ease-out;
-    display: none;
-}
-.main-console div.active{
-    display: block;
+    top: 100%;
 }
+
+.message-container div span,
 .main-console div span{
     position: absolute;
     top: -20px;
     left: 30%;
 }
+
+.message-container div:hover,
 .main-console div:hover{
     cursor: pointer;
     transform: scale(1.2) translateY(3px);

front/src/WebRtc/ConsoleGlobalMessageManager.ts

@@ -13,9 +13,14 @@ export const MESSAGE_TYPE = 'message';
 export class ConsoleGlobalMessageManager {
 
     private Connection: Connection;
+    private divMainConsole: HTMLDivElement;
+    private buttonMainConsole: HTMLDivElement;
+    private activeConsole: boolean = false;
 
     constructor(Connection: Connection) {
         this.Connection = Connection;
+        this.buttonMainConsole = document.createElement('div');
+        this.divMainConsole = document.createElement('div');
         this.initialise();
     }
 
@@ -23,29 +28,66 @@ export class ConsoleGlobalMessageManager {
         const buttonText = document.createElement('span');
         buttonText.innerText = 'Console';
 
-        const buttonMainConsole = document.createElement('div');
-        buttonMainConsole.classList.add('active');
-        buttonMainConsole.appendChild(buttonText)
+        this.buttonMainConsole.appendChild(buttonText);
+        this.buttonMainConsole.addEventListener('click', () => {
+            if(this.activeConsole){
+                this.disabled();
+            }else{
+                this.active();
+            }
+        });
 
-        const divMainConsole = document.createElement('div');
-        divMainConsole.className = CLASS_CONSOLE_MESSAGE;
-        divMainConsole.appendChild(buttonMainConsole)
+        this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
+        this.divMainConsole.appendChild(this.buttonMainConsole);
+
+        this.createTextMessagePart();
 
         const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
-        mainSectionDiv.appendChild(divMainConsole);
+        mainSectionDiv.appendChild(this.divMainConsole);
     }
 
-    sendMessage(html: string){
-        const inputText = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(INPUT_CONSOLE_MESSAGE);
-        const inputType = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(INPUT_TYPE_CONSOLE);
-        if(AUDIO_TYPE !== inputType.innerText && MESSAGE_TYPE !== inputType.innerText){
+    createTextMessagePart(){
+        const input = document.createElement('textarea');
+        this.divMainConsole.appendChild(input);
+        input.id = INPUT_CONSOLE_MESSAGE;
+        const buttonSend = document.createElement('button');
+
+        buttonSend.innerText = 'Envoyer';
+        buttonSend.addEventListener('click', (event: MouseEvent) => {
+            this.sendMessage();
+            this.disabled();
+        });
+        this.divMainConsole.appendChild(buttonSend);
+
+        const typeConsole = document.createElement('input');
+        typeConsole.id = INPUT_TYPE_CONSOLE;
+        typeConsole.value = MESSAGE_TYPE;
+        typeConsole.type = 'hidden';
+        this.divMainConsole.appendChild(typeConsole);
+    }
+
+    sendMessage(){
+        const inputText = HtmlUtils.getElementByIdOrFail<HTMLTextAreaElement>(INPUT_CONSOLE_MESSAGE);
+        const inputType = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(INPUT_TYPE_CONSOLE);
+        if(AUDIO_TYPE !== inputType.value && MESSAGE_TYPE !== inputType.value){
             throw "Error event type";
         }
         let GlobalMessage : GlobalMessageInterface = {
             id: 1,
-            message: inputText.innerText,
-            type: inputType.innerText
+            message: inputText.value,
+            type: inputType.value
         };
+        inputText.value = '';
         this.Connection.emitGlobalMessage(GlobalMessage);
     }
+
+    active(){
+        this.activeConsole = true;
+        this.divMainConsole.style.top = '0';
+    }
+
+    disabled(){
+        this.activeConsole = false;
+        this.divMainConsole.style.top = '-80%';
+    }
 }

front/src/WebRtc/GlobalMessageManager.ts

@@ -23,13 +23,35 @@ export class GlobalMessageManager {
     }
 
     private playMessage(messageId : number, htmlMessage: string){
-        const div = document.createElement('div');
-        div.innerHTML = htmlMessage;
-        div.id = this.getHtmlMessageId(messageId);
-        div.className = "message-container";
+        let previousMessage = document.getElementById(this.getHtmlMessageId(messageId));
+        if(previousMessage){
+            previousMessage.remove();
+        }
+
+        //add button to clear message
+        const buttonText = document.createElement('span');
+        buttonText.id = 'button-clear-message'
+        buttonText.innerText = 'Clear';
+
+        const buttonMainConsole = document.createElement('div');
+        buttonMainConsole.appendChild(buttonText);
+        buttonMainConsole.addEventListener('click', () => {
+            messageContainer.style.top = '-80%';
+            setTimeout(() => {
+                messageContainer.remove();
+                buttonMainConsole.remove();
+            });
+        });
+
+        //add message container
+        const messageContainer = document.createElement('div');
+        messageContainer.innerHTML = htmlMessage;
+        messageContainer.id = this.getHtmlMessageId(messageId);
+        messageContainer.className = "message-container";
+        messageContainer.appendChild(buttonMainConsole);
 
         const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
-        mainSectionDiv.appendChild(div);
+        mainSectionDiv.appendChild(messageContainer);
     }
 
     private stopMessage(messageId: number){