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

Fini quill box

Browse Source
This commit is contained in:
Gregoire Parant 2020-09-21 00:34:25 +02:00
parent 9b955ebd20
commit e0ae79eaf1
4 changed files with 61 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -462,4 +462,25 @@ body {
.main-console .ql-toolbar{ .main-console .ql-toolbar{
background: white; background: white;
}
.main-console .btn-action{
margin: 10px;
text-align: center;
}
.main-console .btn-action .btn{
border: 1px solid black;
background-color: #00000000;
color: #ffda01;
border-radius: 10px;
padding: 10px 30px;
transition: all .2s ease;
}
.main-console .btn-action .btn:hover{
cursor: pointer;
background-color: #ffda01;
color: black;
border: 1px solid black;
transform: scale(1.1);
} }

18
front/src/Administration/ConsoleGlobalMessageManager.ts
View File

@ -1,7 +1,10 @@
import {GameScene} from "../Phaser/Game/GameScene";
const Quill = require("quill"); const Quill = require("quill");
import {HtmlUtils} from "../WebRtc/HtmlUtils"; import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {Connection, GlobalMessageInterface} from "../Connection"; import {Connection, GlobalMessageInterface} from "../Connection";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
export const CLASS_CONSOLE_MESSAGE = 'main-console'; export const CLASS_CONSOLE_MESSAGE = 'main-console';
export const INPUT_CONSOLE_MESSAGE = 'input-send-text'; export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
@ -18,12 +21,14 @@ export class ConsoleGlobalMessageManager {
private divMainConsole: HTMLDivElement; private divMainConsole: HTMLDivElement;
private buttonMainConsole: HTMLDivElement; private buttonMainConsole: HTMLDivElement;
private activeConsole: boolean = false; private activeConsole: boolean = false;
private userInputManager!: UserInputManager;
constructor(Connection: Connection) { constructor(Connection: Connection, userInputManager : UserInputManager) {
this.Connection = Connection; this.Connection = Connection;
this.buttonMainConsole = document.createElement('div'); this.buttonMainConsole = document.createElement('div');
this.buttonMainConsole.classList.add('console'); this.buttonMainConsole.classList.add('console');
this.divMainConsole = document.createElement('div'); this.divMainConsole = document.createElement('div');
this.userInputManager = userInputManager;
this.initialise(); this.initialise();
} }
@ -55,10 +60,14 @@ export class ConsoleGlobalMessageManager {
const buttonSend = document.createElement('button'); const buttonSend = document.createElement('button');
buttonSend.innerText = 'Envoyer'; buttonSend.innerText = 'Envoyer';
buttonSend.classList.add('btn');
buttonSend.addEventListener('click', (event: MouseEvent) => { buttonSend.addEventListener('click', (event: MouseEvent) => {
this.sendMessage(); this.sendMessage();
this.disabled(); this.disabled();
}); });
const buttonDiv = document.createElement('div');
buttonDiv.classList.add('btn-action');
buttonDiv.appendChild(buttonSend)
const typeConsole = document.createElement('input'); const typeConsole = document.createElement('input');
typeConsole.id = INPUT_TYPE_CONSOLE; typeConsole.id = INPUT_TYPE_CONSOLE;
@ -66,9 +75,9 @@ export class ConsoleGlobalMessageManager {
typeConsole.type = 'hidden'; typeConsole.type = 'hidden';
const section = document.createElement('section'); const section = document.createElement('section');
section.appendChild(buttonSend);
section.appendChild(typeConsole);
section.appendChild(div); section.appendChild(div);
section.appendChild(buttonDiv);
section.appendChild(typeConsole);
this.divMainConsole.appendChild(section); this.divMainConsole.appendChild(section);
//TODO refactor //TODO refactor
@ -102,6 +111,7 @@ export class ConsoleGlobalMessageManager {
toolbar: toolbarOptions toolbar: toolbarOptions
}, },
}); });
}, 1000); }, 1000);
} }
@ -149,11 +159,13 @@ export class ConsoleGlobalMessageManager {
active(){ active(){
this.userInputManager.clearAllInputKeyboard();
this.activeConsole = true; this.activeConsole = true;
this.divMainConsole.style.top = '0'; this.divMainConsole.style.top = '0';
} }
disabled(){ disabled(){
this.userInputManager.initKeyBoardEvent();
this.activeConsole = false; this.activeConsole = false;
this.divMainConsole.style.top = '-80%'; this.divMainConsole.style.top = '-80%';
} }

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

@ -270,8 +270,6 @@ 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); this.GlobalMessageManager = new GlobalMessageManager(this.connection);
//TODO check right of user
this.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection);
const self = this; const self = this;
this.simplePeer.registerPeerConnectionListener({ this.simplePeer.registerPeerConnectionListener({
@ -483,6 +481,9 @@ export class GameScene extends Phaser.Scene implements CenterListener {
//create input to move //create input to move
this.userInputManager = new UserInputManager(this); this.userInputManager = new UserInputManager(this);
//TODO check right of user
this.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection, this.userInputManager);
//notify game manager can to create currentUser in map //notify game manager can to create currentUser in map
this.createCurrentPlayer(); this.createCurrentPlayer();

35
front/src/Phaser/UserInput/UserInputManager.ts
View File

@ -29,29 +29,38 @@ export class ActiveEventList {
//this class is responsible for catching user inputs and listing all active user actions at every game tick events. //this class is responsible for catching user inputs and listing all active user actions at every game tick events.
export class UserInputManager { export class UserInputManager {
private KeysCode: UserInputManagerDatum[]; private KeysCode!: UserInputManagerDatum[];
private Scene: GameScene;
constructor(Scene : GameScene) { constructor(Scene : GameScene) {
this.Scene = Scene;
this.initKeyBoardEvent();
}
initKeyBoardEvent(){
this.KeysCode = [ this.KeysCode = [
{event: UserInputEvent.MoveUp, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Z) }, {event: UserInputEvent.MoveUp, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Z) },
{event: UserInputEvent.MoveLeft, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q) }, {event: UserInputEvent.MoveLeft, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q) },
{event: UserInputEvent.MoveDown, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S) }, {event: UserInputEvent.MoveDown, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S) },
{event: UserInputEvent.MoveRight, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D) }, {event: UserInputEvent.MoveRight, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D) },
{event: UserInputEvent.MoveUp, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP) }, {event: UserInputEvent.MoveUp, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP) },
{event: UserInputEvent.MoveLeft, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT) }, {event: UserInputEvent.MoveLeft, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT) },
{event: UserInputEvent.MoveDown, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN) }, {event: UserInputEvent.MoveDown, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN) },
{event: UserInputEvent.MoveRight, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT) }, {event: UserInputEvent.MoveRight, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT) },
{event: UserInputEvent.SpeedUp, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT) }, {event: UserInputEvent.SpeedUp, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT) },
{event: UserInputEvent.Interact, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E) }, {event: UserInputEvent.Interact, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E) },
{event: UserInputEvent.Interact, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE) }, {event: UserInputEvent.Interact, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE) },
{event: UserInputEvent.Shout, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F) }, {event: UserInputEvent.Shout, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F) },
]; ];
} }
clearAllInputKeyboard(){
this.Scene.input.keyboard.removeAllKeys();
}
getEventListForGameTick(): ActiveEventList { getEventListForGameTick(): ActiveEventList {
const eventsMap = new ActiveEventList(); const eventsMap = new ActiveEventList();
this.KeysCode.forEach(d => { this.KeysCode.forEach(d => {