Create console global message

- Add style
- Create zone and button to show the admin console
This commit is contained in:
Gregoire Parant 2020-09-16 21:50:04 +02:00
parent 509196785b
commit e59cbcfaa7
5 changed files with 107 additions and 11 deletions

View File

@ -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);
}

View File

@ -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);
}
}

View File

@ -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<Connection>
private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => 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({

View File

@ -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<HTMLDivElement>('main-container');
mainSectionDiv.appendChild(divMainConsole);
}
sendMessage(html: string){
const inputText = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(INPUT_CONSOLE_MESSAGE);
const inputType = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(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);
}
}

View File

@ -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<HTMLDivElement>(this.getHtmlMessageId(messageId));
}
private getHtmlMessageId(messageId: number){
private getHtmlMessageId(messageId: number) : string{
return `message-${messageId}`;
}