diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts index 56168804..8033044f 100644 --- a/back/src/Controller/IoSocketController.ts +++ b/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); + }); }); } diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 39a7af02..90ca3826 100644 --- a/front/dist/resources/style/style.css +++ b/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); diff --git a/front/src/WebRtc/ConsoleGlobalMessageManager.ts b/front/src/WebRtc/ConsoleGlobalMessageManager.ts index fe7fa216..40f0587e 100644 --- a/front/src/WebRtc/ConsoleGlobalMessageManager.ts +++ b/front/src/WebRtc/ConsoleGlobalMessageManager.ts @@ -13,39 +13,81 @@ 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(); } - initialise(){ + initialise() { 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('main-container'); - mainSectionDiv.appendChild(divMainConsole); + mainSectionDiv.appendChild(this.divMainConsole); } - sendMessage(html: string){ - const inputText = HtmlUtils.getElementByIdOrFail(INPUT_CONSOLE_MESSAGE); - const inputType = HtmlUtils.getElementByIdOrFail(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(INPUT_CONSOLE_MESSAGE); + const inputType = HtmlUtils.getElementByIdOrFail(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%'; + } } \ No newline at end of file diff --git a/front/src/WebRtc/GlobalMessageManager.ts b/front/src/WebRtc/GlobalMessageManager.ts index 29868957..6a0ef7e4 100644 --- a/front/src/WebRtc/GlobalMessageManager.ts +++ b/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('main-container'); - mainSectionDiv.appendChild(div); + mainSectionDiv.appendChild(messageContainer); } private stopMessage(messageId: number){