From 509196785b49fa5be2d11400c2b49b9788eb661e Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 16 Sep 2020 18:38:50 +0200 Subject: [PATCH] Initialise global message - Create new class to manager global message. My idea is that this class permit to manage audio or text message. - Update html to have main content id and inject html in this. - Create front event to receive startMessage and stopMessage. - Delete impoted variable not used. --- front/.gitignore | 1 + front/dist/index.html | 2 +- front/dist/resources/style/style.css | 11 ++++++ front/src/Connection.ts | 18 ++++++++- front/src/Phaser/Game/GameScene.ts | 4 ++ front/src/Phaser/Login/EnableCameraScene.ts | 5 +-- front/src/WebRtc/GlobalMessageManager.ts | 43 +++++++++++++++++++++ front/src/WebRtc/HtmlUtils.ts | 10 +++++ front/src/WebRtc/SimplePeer.ts | 2 - 9 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 front/src/WebRtc/GlobalMessageManager.ts diff --git a/front/.gitignore b/front/.gitignore index a74d68d5..e207e30a 100644 --- a/front/.gitignore +++ b/front/.gitignore @@ -4,3 +4,4 @@ /dist/webpack.config.js /dist/webpack.config.js.map /dist/src +*.sh \ No newline at end of file diff --git a/front/dist/index.html b/front/dist/index.html index 5de00b3b..4fd514a8 100644 --- a/front/dist/index.html +++ b/front/dist/index.html @@ -39,7 +39,7 @@ WorkAdventure -
+
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 807544ad..bf495f90 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -403,3 +403,14 @@ body { .chat-mode > div:last-child { 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; +} diff --git a/front/src/Connection.ts b/front/src/Connection.ts index 5062ca7f..b930f198 100644 --- a/front/src/Connection.ts +++ b/front/src/Connection.ts @@ -1,6 +1,5 @@ import Axios from "axios"; import {API_URL} from "./Enum/EnvironmentVariable"; -import {MessageUI} from "./Logger/MessageUI"; import {SetPlayerDetailsMessage} from "./Messages/SetPlayerDetailsMessage"; const SocketIo = require('socket.io-client'); @@ -28,6 +27,9 @@ enum EventMessage{ 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", } export interface PointInterface { @@ -128,6 +130,12 @@ export interface RoomJoinedMessageInterface { items: { [itemId: number] : unknown } } +export interface GlobalMessageInterface { + id: number + type: string + message: string +} + export class Connection implements Connection { private readonly socket: Socket; private userId: string|null = null; @@ -275,6 +283,14 @@ 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') { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index ad378bc3..37e7c2ef 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -40,6 +40,7 @@ import {FourOFourSceneName} from "../Reconnecting/FourOFourScene"; import {ItemFactoryInterface} from "../Items/ItemFactoryInterface"; import {ActionableItem} from "../Items/ActionableItem"; import {UserInputManager} from "../UserInput/UserInputManager"; +import {GlobalMessageManager} from "../../WebRtc/GlobalMessageManager"; export enum Textures { @@ -100,6 +101,7 @@ export class GameScene extends Phaser.Scene implements CenterListener { private playersPositionInterpolator = new PlayersPositionInterpolator(); private connection!: Connection; private simplePeer!: SimplePeer; + private GlobalMessageManager!: GlobalMessageManager; private connectionPromise!: Promise private connectionAnswerPromise: Promise; private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike) => void; @@ -265,6 +267,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); + const self = this; this.simplePeer.registerPeerConnectionListener({ onConnect(user: UserSimplePeerInterface) { diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 6fc1cd54..b280dd1c 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -1,12 +1,9 @@ import {gameManager} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; -import {ClickButton} from "../Components/ClickButton"; import Image = Phaser.GameObjects.Image; -import Rectangle = Phaser.GameObjects.Rectangle; -import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {GameSceneInitInterface} from "../Game/GameScene"; import {StartMapInterface} from "../../Connection"; -import {mediaManager, MediaManager} from "../../WebRtc/MediaManager"; +import {mediaManager} from "../../WebRtc/MediaManager"; import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {SoundMeter} from "../Components/SoundMeter"; import {SoundMeterSprite} from "../Components/SoundMeterSprite"; diff --git a/front/src/WebRtc/GlobalMessageManager.ts b/front/src/WebRtc/GlobalMessageManager.ts new file mode 100644 index 00000000..91dc64c3 --- /dev/null +++ b/front/src/WebRtc/GlobalMessageManager.ts @@ -0,0 +1,43 @@ +import {HtmlUtils} from "./HtmlUtils"; +import {Connection, GlobalMessageInterface} from "../Connection"; + +export class GlobalMessageManager { + + private Connection: Connection; + + constructor(Connection: Connection) { + this.Connection = Connection; + this.initialise(); + } + + initialise(){ + //receive signal to show message + this.Connection.receivePlayGlobalMessage((message: GlobalMessageInterface) => { + this.playMessage(message.id, message.message); + }); + + //receive signal to close message + this.Connection.receiveStopGlobalMessage((message: GlobalMessageInterface) => { + this.stopMessage(message.id); + }); + } + + playMessage(messageId : number, htmlMessage: string){ + const div = document.createElement('div'); + div.innerHTML = htmlMessage; + div.id = this.getHtmlMessageId(messageId); + div.className = "message-container"; + + const mainSectionDiv = HtmlUtils.getElementByIdOrFail('main-container'); + mainSectionDiv.appendChild(div); + } + + stopMessage(messageId: number){ + HtmlUtils.removeElementByIdOrFail(this.getHtmlMessageId(messageId)); + } + + private getHtmlMessageId(messageId: number){ + return `message-${messageId}`; + } + +} diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts index c2e6ff6d..b7cb2124 100644 --- a/front/src/WebRtc/HtmlUtils.ts +++ b/front/src/WebRtc/HtmlUtils.ts @@ -7,4 +7,14 @@ export class HtmlUtils { // FIXME: does not check the type of the returned type return elem as T; } + + public static removeElementByIdOrFail(id: string): T { + const elem = document.getElementById(id); + if (elem === null) { + throw new Error("Cannot find HTML element with id '"+id+"'"); + } + // FIXME: does not check the type of the returned type + elem.remove(); + return elem as T; + } } diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index f388b2ec..f78e83e4 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -10,10 +10,8 @@ import { StopScreenSharingCallback, UpdatedLocalStreamCallback } from "./MediaManager"; -import * as SimplePeerNamespace from "simple-peer"; import {ScreenSharingPeer} from "./ScreenSharingPeer"; import {VideoPeer} from "./VideoPeer"; -const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer'); export interface UserSimplePeerInterface{ userId: string;