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;