_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initialise global message

Browse Source 
- 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.
This commit is contained in:
Gregoire Parant 2020-09-16 18:38:50 +02:00
parent 1ccbea30e4
commit 509196785b
9 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/.gitignore vendored
View File

@ -4,3 +4,4 @@
/dist/webpack.config.js /dist/webpack.config.js
/dist/webpack.config.js.map /dist/webpack.config.js.map
/dist/src /dist/src
*.sh

2
front/dist/index.html vendored
View File

@ -39,7 +39,7 @@
<title>WorkAdventure</title> <title>WorkAdventure</title>
</head> </head>
<body id="body" style="margin: 0"> <body id="body" style="margin: 0">
<div class="main-container"> <div class="main-container" id="main-container">
<div id="game" class="game" style="/*background: red;*/"> <div id="game" class="game" style="/*background: red;*/">
<div id="game-overlay" class="game-overlay" style="/*background: violet*/;"> <div id="game-overlay" class="game-overlay" style="/*background: violet*/;">
<div id="main-section" class="main-section"> <div id="main-section" class="main-section">

11
front/dist/resources/style/style.css vendored
View File

@ -403,3 +403,14 @@ body {
.chat-mode > div:last-child { .chat-mode > div:last-child {
flex-grow: 5; 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;
}

18
front/src/Connection.ts
View File

@ -1,6 +1,5 @@
import Axios from "axios"; import Axios from "axios";
import {API_URL} from "./Enum/EnvironmentVariable"; import {API_URL} from "./Enum/EnvironmentVariable";
import {MessageUI} from "./Logger/MessageUI";
import {SetPlayerDetailsMessage} from "./Messages/SetPlayerDetailsMessage"; import {SetPlayerDetailsMessage} from "./Messages/SetPlayerDetailsMessage";
const SocketIo = require('socket.io-client'); 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_SILENT = "set_silent", // Set or unset the silent mode for this user.
SET_VIEWPORT = "set-viewport", SET_VIEWPORT = "set-viewport",
BATCH = "batch", BATCH = "batch",
PLAY_GLOBAL_MESSAGE = "play-global-message",
STOP_GLOBAL_MESSAGE = "stop-global-message",
} }
export interface PointInterface { export interface PointInterface {
@ -128,6 +130,12 @@ export interface RoomJoinedMessageInterface {
items: { [itemId: number] : unknown } items: { [itemId: number] : unknown }
} }
export interface GlobalMessageInterface {
id: number
type: string
message: string
}
export class Connection implements Connection { export class Connection implements Connection {
private readonly socket: Socket; private readonly socket: Socket;
private userId: string|null = null; private userId: string|null = null;
@ -275,6 +283,14 @@ export class Connection implements Connection {
return this.socket.on(EventMessage.WEBRTC_SCREEN_SHARING_SIGNAL, callback); 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 { public onServerDisconnected(callback: (reason: string) => void): void {
this.socket.on('disconnect', (reason: string) => { this.socket.on('disconnect', (reason: string) => {
if (reason === 'io client disconnect') { if (reason === 'io client disconnect') {

4
front/src/Phaser/Game/GameScene.ts
View File

@ -40,6 +40,7 @@ import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
import {ItemFactoryInterface} from "../Items/ItemFactoryInterface"; import {ItemFactoryInterface} from "../Items/ItemFactoryInterface";
import {ActionableItem} from "../Items/ActionableItem"; import {ActionableItem} from "../Items/ActionableItem";
import {UserInputManager} from "../UserInput/UserInputManager"; import {UserInputManager} from "../UserInput/UserInputManager";
import {GlobalMessageManager} from "../../WebRtc/GlobalMessageManager";
export enum Textures { export enum Textures {
@ -100,6 +101,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
private playersPositionInterpolator = new PlayersPositionInterpolator(); private playersPositionInterpolator = new PlayersPositionInterpolator();
private connection!: Connection; private connection!: Connection;
private simplePeer!: SimplePeer; private simplePeer!: SimplePeer;
private GlobalMessageManager!: GlobalMessageManager;
private connectionPromise!: Promise<Connection> private connectionPromise!: Promise<Connection>
private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>; private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void; private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
@ -265,6 +267,8 @@ export class GameScene extends Phaser.Scene implements CenterListener {
// When connection is performed, let's connect SimplePeer // When connection is performed, let's connect SimplePeer
this.simplePeer = new SimplePeer(this.connection); this.simplePeer = new SimplePeer(this.connection);
this.GlobalMessageManager = new GlobalMessageManager(this.connection);
const self = this; const self = this;
this.simplePeer.registerPeerConnectionListener({ this.simplePeer.registerPeerConnectionListener({
onConnect(user: UserSimplePeerInterface) { onConnect(user: UserSimplePeerInterface) {

5
front/src/Phaser/Login/EnableCameraScene.ts
View File

@ -1,12 +1,9 @@
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField"; import {TextField} from "../Components/TextField";
import {ClickButton} from "../Components/ClickButton";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {GameSceneInitInterface} from "../Game/GameScene"; import {GameSceneInitInterface} from "../Game/GameScene";
import {StartMapInterface} from "../../Connection"; import {StartMapInterface} from "../../Connection";
import {mediaManager, MediaManager} from "../../WebRtc/MediaManager"; import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter"; import {SoundMeter} from "../Components/SoundMeter";
import {SoundMeterSprite} from "../Components/SoundMeterSprite"; import {SoundMeterSprite} from "../Components/SoundMeterSprite";

43
front/src/WebRtc/GlobalMessageManager.ts Normal file
View File

@ -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<HTMLDivElement>('main-container');
mainSectionDiv.appendChild(div);
}
stopMessage(messageId: number){
HtmlUtils.removeElementByIdOrFail<HTMLDivElement>(this.getHtmlMessageId(messageId));
}
private getHtmlMessageId(messageId: number){
return `message-${messageId}`;
}
}

10
front/src/WebRtc/HtmlUtils.ts
View File

@ -7,4 +7,14 @@ export class HtmlUtils {
// FIXME: does not check the type of the returned type // FIXME: does not check the type of the returned type
return elem as T; return elem as T;
} }
public static removeElementByIdOrFail<T extends HTMLElement>(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;
}
} }

2
front/src/WebRtc/SimplePeer.ts
View File

@ -10,10 +10,8 @@ import {
StopScreenSharingCallback, StopScreenSharingCallback,
UpdatedLocalStreamCallback UpdatedLocalStreamCallback
} from "./MediaManager"; } from "./MediaManager";
import * as SimplePeerNamespace from "simple-peer";
import {ScreenSharingPeer} from "./ScreenSharingPeer"; import {ScreenSharingPeer} from "./ScreenSharingPeer";
import {VideoPeer} from "./VideoPeer"; import {VideoPeer} from "./VideoPeer";
const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
export interface UserSimplePeerInterface{ export interface UserSimplePeerInterface{
userId: string; userId: string;