diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 6ad80d88..31fb8b51 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -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); } \ No newline at end of file diff --git a/front/src/Administration/ConsoleGlobalMessageManager.ts b/front/src/Administration/ConsoleGlobalMessageManager.ts index 7be459d4..2c576cba 100644 --- a/front/src/Administration/ConsoleGlobalMessageManager.ts +++ b/front/src/Administration/ConsoleGlobalMessageManager.ts @@ -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%'; } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 15b269ae..654b9d75 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -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(); diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index d40d149e..a7be41cf 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -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 => {