From e59cbcfaa7cb3890a3d7ea03fb40262e2e769ccb Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 16 Sep 2020 21:50:04 +0200 Subject: [PATCH] Create console global message - Add style - Create zone and button to show the admin console --- front/dist/resources/style/style.css | 37 ++++++++++++++ front/src/Connection.ts | 20 +++++--- front/src/Phaser/Game/GameScene.ts | 4 ++ .../src/WebRtc/ConsoleGlobalMessageManager.ts | 51 +++++++++++++++++++ front/src/WebRtc/GlobalMessageManager.ts | 6 +-- 5 files changed, 107 insertions(+), 11 deletions(-) create mode 100644 front/src/WebRtc/ConsoleGlobalMessageManager.ts diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index bf495f90..39a7af02 100644 --- a/front/dist/resources/style/style.css +++ b/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); +} \ No newline at end of file diff --git a/front/src/Connection.ts b/front/src/Connection.ts index b930f198..1341347b 100644 --- a/front/src/Connection.ts +++ b/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); + } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 37e7c2ef..332c3bcd 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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 private connectionAnswerPromise: Promise; private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike) => 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({ diff --git a/front/src/WebRtc/ConsoleGlobalMessageManager.ts b/front/src/WebRtc/ConsoleGlobalMessageManager.ts new file mode 100644 index 00000000..fe7fa216 --- /dev/null +++ b/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('main-container'); + mainSectionDiv.appendChild(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){ + throw "Error event type"; + } + let GlobalMessage : GlobalMessageInterface = { + id: 1, + message: inputText.innerText, + type: inputType.innerText + }; + this.Connection.emitGlobalMessage(GlobalMessage); + } +} \ No newline at end of file diff --git a/front/src/WebRtc/GlobalMessageManager.ts b/front/src/WebRtc/GlobalMessageManager.ts index 91dc64c3..29868957 100644 --- a/front/src/WebRtc/GlobalMessageManager.ts +++ b/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(this.getHtmlMessageId(messageId)); } - private getHtmlMessageId(messageId: number){ + private getHtmlMessageId(messageId: number) : string{ return `message-${messageId}`; }