Fini quill box
This commit is contained in:
parent
9b955ebd20
commit
e0ae79eaf1
front
dist/resources/style
src
21
front/dist/resources/style/style.css
vendored
21
front/dist/resources/style/style.css
vendored
@ -463,3 +463,24 @@ 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);
|
||||||
|
}
|
@ -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%';
|
||||||
}
|
}
|
||||||
|
@ -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();
|
||||||
|
|
||||||
|
@ -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 => {
|
||||||
|
Loading…
Reference in New Issue
Block a user