Create console global message

- Add style
- Create zone and button to show the admin console

front/dist/resources/style/style.css

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

front/src/Connection.ts

@@ -283,14 +283,6 @@ export class Connection implements Connection {
         return this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback);
     }
 
-    public receivePlayGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
-        return this.socket.on(EventMessage.PLAY_GLOBAL_MESSAGE, callback);
-    }
-
-    public receiveStopGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
-        return this.socket.on(EventMessage.STOP_GLOBAL_MESSAGE, callback);
-    }
-
     public onServerDisconnected(callback: (reason: string) => void): void {
         this.socket.on('disconnect', (reason: string) => {
             if (reason === 'io client disconnect') {
@@ -322,4 +314,16 @@ export class Connection implements Connection {
     onActionableEvent(callback: (message: ItemEventMessageInterface) => void): void {
         this.socket.on(EventMessage.ITEM_EVENT, callback);
     }
+
+    public receivePlayGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
+        return this.socket.on(EventMessage.PLAY_GLOBAL_MESSAGE, callback);
+    }
+
+    public receiveStopGlobalMessage(callback: (message: GlobalMessageInterface) => void) {
+        return this.socket.on(EventMessage.STOP_GLOBAL_MESSAGE, callback);
+    }
+
+    public emitGlobalMessage(message: GlobalMessageInterface){
+        return this.socket.emit(EventMessage.PLAY_GLOBAL_MESSAGE, message);
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -41,6 +41,7 @@ import {ItemFactoryInterface} from "../Items/ItemFactoryInterface";
 import {ActionableItem} from "../Items/ActionableItem";
 import {UserInputManager} from "../UserInput/UserInputManager";
 import {GlobalMessageManager} from "../../WebRtc/GlobalMessageManager";
+import {ConsoleGlobalMessageManager} from "../../WebRtc/ConsoleGlobalMessageManager";
 
 
 export enum Textures {
@@ -102,6 +103,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
     private connection!: Connection;
     private simplePeer!: SimplePeer;
     private GlobalMessageManager!: GlobalMessageManager;
+    private ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
     private connectionPromise!: Promise<Connection>
     private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
     private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
@@ -268,6 +270,8 @@ export class GameScene extends Phaser.Scene implements CenterListener {
             // When connection is performed, let's connect SimplePeer
             this.simplePeer = new SimplePeer(this.connection);
             this.GlobalMessageManager = new GlobalMessageManager(this.connection);
+            //TODO check right of user
+            this.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection);
 
             const self = this;
             this.simplePeer.registerPeerConnectionListener({

front/src/WebRtc/ConsoleGlobalMessageManager.ts

@@ -0,0 +1,51 @@
+import {HtmlUtils} from "./HtmlUtils";
+import {Connection, GlobalMessageInterface} from "../Connection";
+
+export const CLASS_CONSOLE_MESSAGE = 'main-console';
+export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
+export const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music';
+export const BUTTON_CONSOLE_SEND = 'button-send';
+export const INPUT_TYPE_CONSOLE = 'input-type';
+
+export const AUDIO_TYPE = 'audio';
+export const MESSAGE_TYPE = 'message';
+
+export class ConsoleGlobalMessageManager {
+
+    private Connection: Connection;
+
+    constructor(Connection: Connection) {
+        this.Connection = Connection;
+        this.initialise();
+    }
+
+    initialise(){
+        const buttonText = document.createElement('span');
+        buttonText.innerText = 'Console';
+
+        const buttonMainConsole = document.createElement('div');
+        buttonMainConsole.classList.add('active');
+        buttonMainConsole.appendChild(buttonText)
+
+        const divMainConsole = document.createElement('div');
+        divMainConsole.className = CLASS_CONSOLE_MESSAGE;
+        divMainConsole.appendChild(buttonMainConsole)
+
+        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
+        mainSectionDiv.appendChild(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){
+            throw "Error event type";
+        }
+        let GlobalMessage : GlobalMessageInterface = {
+            id: 1,
+            message: inputText.innerText,
+            type: inputType.innerText
+        };
+        this.Connection.emitGlobalMessage(GlobalMessage);
+    }
+}

front/src/WebRtc/GlobalMessageManager.ts

@@ -22,7 +22,7 @@ export class GlobalMessageManager {
         });
     }
 
-    playMessage(messageId : number, htmlMessage: string){
+    private playMessage(messageId : number, htmlMessage: string){
         const div = document.createElement('div');
         div.innerHTML = htmlMessage;
         div.id = this.getHtmlMessageId(messageId);
@@ -32,11 +32,11 @@ export class GlobalMessageManager {
         mainSectionDiv.appendChild(div);
     }
 
-    stopMessage(messageId: number){
+    private stopMessage(messageId: number){
         HtmlUtils.removeElementByIdOrFail<HTMLDivElement>(this.getHtmlMessageId(messageId));
     }
 
-    private getHtmlMessageId(messageId: number){
+    private getHtmlMessageId(messageId: number) : string{
         return `message-${messageId}`;
     }