From e43ea3aa5e832972be949d0054e78d5de53c1d57 Mon Sep 17 00:00:00 2001 From: GRL Date: Thu, 15 Jul 2021 15:09:35 +0200 Subject: [PATCH] Graphic upgrade of the global message console Fix: error if LoginScene doesn't exist --- .../ConsoleGlobalMessageManager.svelte | 28 ++--- .../InputTextGlobalMessage.svelte | 6 +- .../UploadAudioGlobalMessage.svelte | 40 +----- front/src/Phaser/Game/Game.ts | 37 +++--- front/style/svelte-style.scss | 119 +++++++++++++----- 5 files changed, 132 insertions(+), 98 deletions(-) diff --git a/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte b/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte index 83837f28..48e950da 100644 --- a/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte +++ b/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte @@ -1,8 +1,10 @@ -
- -
+
+

Global Message

-
-
- - + +
+
+ +
-
+
{#if inputSendTextActive} - + {/if} {#if uploadMusicActive} - + {/if}
diff --git a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte index c11b4b0e..6450d087 100644 --- a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte +++ b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte @@ -6,7 +6,6 @@ import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels"; import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService"; import type {Quill} from "quill"; - import {LoginSceneName} from "../../Phaser/Login/LoginScene"; //toolbar export const toolbarOptions = [ @@ -35,7 +34,7 @@ export let game: Game; export let gameManager: GameManager; - let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName)); + let gameScene = gameManager.getCurrentGameScene(game.findAnyScene()); let quill: Quill; let INPUT_CONSOLE_MESSAGE: HTMLDivElement; @@ -48,6 +47,7 @@ const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any quill = new Quill(INPUT_CONSOLE_MESSAGE, { + placeholder: 'Enter your message here...', theme: 'snow', modules: { toolbar: toolbarOptions @@ -88,7 +88,7 @@
-
+
diff --git a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte b/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte index 50954005..2dd68db2 100644 --- a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte +++ b/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte @@ -6,7 +6,6 @@ import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService"; import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels"; import uploadFile from "../images/music-file.svg"; - import {LoginSceneName} from "../../Phaser/Login/LoginScene"; interface EventTargetFiles extends EventTarget { files: Array; @@ -15,7 +14,7 @@ export let game: Game; export let gameManager: GameManager; - let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName)); + let gameScene = gameManager.getCurrentGameScene(game.findAnyScene()); let fileinput: HTMLInputElement; let filename: string; let filesize: string; @@ -85,46 +84,15 @@
-
Upload a file {fileinput.click();}}> - {#if filename != undefined} + {#if filename !== undefined} {/if} {#if errorfile}

No file selected. You need to upload a file before sending it.

{/if} {inputAudioFile(e)}}> -
-
+
-
- - \ No newline at end of file + \ No newline at end of file diff --git a/front/src/Phaser/Game/Game.ts b/front/src/Phaser/Game/Game.ts index e267e80a..865026f7 100644 --- a/front/src/Phaser/Game/Game.ts +++ b/front/src/Phaser/Game/Game.ts @@ -1,7 +1,7 @@ -import {SKIP_RENDER_OPTIMIZATIONS} from "../../Enum/EnvironmentVariable"; -import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; -import {waScaleManager} from "../Services/WaScaleManager"; -import {ResizableScene} from "../Login/ResizableScene"; +import { SKIP_RENDER_OPTIMIZATIONS } from "../../Enum/EnvironmentVariable"; +import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager"; +import { waScaleManager } from "../Services/WaScaleManager"; +import { ResizableScene } from "../Login/ResizableScene"; const Events = Phaser.Core.Events; @@ -14,10 +14,8 @@ const Events = Phaser.Core.Events; * It also automatically calls "onResize" on any scenes extending ResizableScene. */ export class Game extends Phaser.Game { - private _isDirty = false; - constructor(GameConfig: Phaser.Types.Core.GameConfig) { super(GameConfig); @@ -27,7 +25,7 @@ export class Game extends Phaser.Game { scene.onResize(); } } - }) + }); /*window.addEventListener('resize', (event) => { // Let's trigger the onResize method of any active scene that is a ResizableScene @@ -39,11 +37,9 @@ export class Game extends Phaser.Game { });*/ } - public step(time: number, delta: number) - { + public step(time: number, delta: number) { // @ts-ignore - if (this.pendingDestroy) - { + if (this.pendingDestroy) { // @ts-ignore return this.runDestroy(); } @@ -100,15 +96,17 @@ export class Game extends Phaser.Game { } // Loop through the scenes in forward order - for (let i = 0; i < this.scene.scenes.length; i++) - { + for (let i = 0; i < this.scene.scenes.length; i++) { const scene = this.scene.scenes[i]; const sys = scene.sys; - if (sys.settings.visible && sys.settings.status >= Phaser.Scenes.LOADING && sys.settings.status < Phaser.Scenes.SLEEPING) - { + if ( + sys.settings.visible && + sys.settings.status >= Phaser.Scenes.LOADING && + sys.settings.status < Phaser.Scenes.SLEEPING + ) { // @ts-ignore - if(typeof scene.isDirty === 'function') { + if (typeof scene.isDirty === "function") { // @ts-ignore const isDirty = scene.isDirty() || scene.tweens.getAllTweens().length > 0; if (isDirty) { @@ -129,4 +127,11 @@ export class Game extends Phaser.Game { public markDirty(): void { this._isDirty = true; } + + /** + * Return the first scene found in the game + */ + public findAnyScene(): Phaser.Scene { + return this.scene.getScenes()[0]; + } } diff --git a/front/style/svelte-style.scss b/front/style/svelte-style.scss index 7881dabb..69ecdad9 100644 --- a/front/style/svelte-style.scss +++ b/front/style/svelte-style.scss @@ -1,7 +1,7 @@ //Contains all styles not unique to a svelte component. //ConsoleGlobalMessage -div.main-console.nes-container { +div.console-global-message.nes-container { pointer-events: auto; margin-left: auto; margin-right: auto; @@ -11,50 +11,111 @@ div.main-console.nes-container { padding: 0; background-color: #333333; - .btn-action{ - margin: 10px; - text-align: center; - } - - .main-global-message { + .console-global-message-main { width: 100%; - max-height: 100%; + height: 100%; + + h2 { + margin-bottom: 20px; + text-align: center; + color: white; + } + + .console-global-message-close { + position: absolute; + right: 0; + top: 0; + } } - .main-global-message h2 { - text-align: center; - color: white; - } - - div.global-message { + div.console-global-message-content { display: flex; - max-height: 100%; + flex-flow: row; + height: calc(100% - (36px + 20px)); width: 100%; } - div.menu { - flex: auto; + div.console-global-message-menu { + flex: 0 1 auto; + + button { + margin: 7px; + } } - div.menu button { - margin: 7px; - } - - .main-input { + .console-global-message-main-input { + flex: 1 1 auto; + display: flex; + flex-direction: column; + height: 100%; width: 95%; + margin-left: 10px; + margin-right: 10px; + + .footer-btn-action { + width: 100%; + margin: 10px; + text-align: center; + } } + //InputTextGlobalMessage .section-input-send-text { - margin: 10px; + flex: 1 1 auto; + display: flex; + flex-flow: column; + height: 100%; + + .ql-toolbar{ + flex: 0 1 auto; + background: white; + } + + .input-send-text{ + flex: 1 1 auto; + max-height: calc(100% - 55px); + color: white; + font-size: 1rem; + + .ql-editor.ql-blank::before { + color: white; + font-size: 1rem; + } + } } - .section-input-send-text .input-send-text .ql-editor{ - color: white; - min-height: 200px; - } - .section-input-send-text .ql-toolbar{ - background: white; +//UploadAudioGlobalMessage + .section-input-send-audio { + flex: 1 1 auto; + display: flex; + flex-flow: column; + height: 100%; + + img { + flex: 1 1 auto; + height: 60%; + margin-bottom: 10px; + cursor: url('images/cursor_pointer.png'), pointer; + } + + label { + flex: 0 1 auto; + color: white; + font-size: 1rem; + text-align: center; + } + + p.err { + flex: 0 1 auto; + color: #ce372b; + font-size: 1rem; + text-align: center; + } + } + + #input-send-audio { + display: none; } }