lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases 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{
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");
import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {Connection, GlobalMessageInterface} from "../Connection";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
export const CLASS_CONSOLE_MESSAGE = 'main-console';
export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
@ -18,12 +21,14 @@ export class ConsoleGlobalMessageManager {
private divMainConsole: HTMLDivElement;
private buttonMainConsole: HTMLDivElement;
private activeConsole: boolean = false;
private userInputManager!: UserInputManager;
constructor(Connection: Connection) {
constructor(Connection: Connection, userInputManager : UserInputManager) {
this.Connection = Connection;
this.buttonMainConsole = document.createElement('div');
this.buttonMainConsole.classList.add('console');
this.divMainConsole = document.createElement('div');
this.userInputManager = userInputManager;
this.initialise();
}
@ -55,10 +60,14 @@ export class ConsoleGlobalMessageManager {
const buttonSend = document.createElement('button');
buttonSend.innerText = 'Envoyer';
buttonSend.classList.add('btn');
buttonSend.addEventListener('click', (event: MouseEvent) => {
this.sendMessage();
this.disabled();
});
const buttonDiv = document.createElement('div');
buttonDiv.classList.add('btn-action');
buttonDiv.appendChild(buttonSend)
const typeConsole = document.createElement('input');
typeConsole.id = INPUT_TYPE_CONSOLE;
@ -66,9 +75,9 @@ export class ConsoleGlobalMessageManager {
typeConsole.type = 'hidden';
const section = document.createElement('section');
section.appendChild(buttonSend);
section.appendChild(typeConsole);
section.appendChild(div);
section.appendChild(buttonDiv);
section.appendChild(typeConsole);
this.divMainConsole.appendChild(section);
//TODO refactor
@ -102,6 +111,7 @@ export class ConsoleGlobalMessageManager {
toolbar: toolbarOptions
},
});
}, 1000);
}
@ -149,11 +159,13 @@ export class ConsoleGlobalMessageManager {
active(){
this.userInputManager.clearAllInputKeyboard();
this.activeConsole = true;
this.divMainConsole.style.top = '0';
}
disabled(){
this.userInputManager.initKeyBoardEvent();
this.activeConsole = false;
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
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({
@ -483,6 +481,9 @@ export class GameScene extends Phaser.Scene implements CenterListener {
//create input to move
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
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.
export class UserInputManager {
private KeysCode: UserInputManagerDatum[];
private KeysCode!: UserInputManagerDatum[];
private Scene: GameScene;
constructor(Scene : GameScene) {
this.Scene = Scene;
this.initKeyBoardEvent();
}
initKeyBoardEvent(){
this.KeysCode = [
{event: UserInputEvent.MoveUp, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Z) },
{event: UserInputEvent.MoveLeft, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q) },
{event: UserInputEvent.MoveDown, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S) },
{event: UserInputEvent.MoveRight, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D) },
{event: UserInputEvent.MoveUp, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Z) },
{event: UserInputEvent.MoveLeft, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q) },
{event: UserInputEvent.MoveDown, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S) },
{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.MoveLeft, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT) },
{event: UserInputEvent.MoveDown, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN) },
{event: UserInputEvent.MoveRight, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT) },
{event: UserInputEvent.MoveUp, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP) },
{event: UserInputEvent.MoveLeft, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT) },
{event: UserInputEvent.MoveDown, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN) },
{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: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE) },
{event: UserInputEvent.Shout, keyInstance: Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F) },
{event: UserInputEvent.Interact, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E) },
{event: UserInputEvent.Interact, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE) },
{event: UserInputEvent.Shout, keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F) },
];
}
clearAllInputKeyboard(){
this.Scene.input.keyboard.removeAllKeys();
}
getEventListForGameTick(): ActiveEventList {
const eventsMap = new ActiveEventList();
this.KeysCode.forEach(d => {