Graphic upgrade of the global message console

Fix: error if LoginScene doesn't exist

front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte

@@ -1,8 +1,10 @@
 <script lang="typescript">
+    import { fly } from 'svelte/transition';
     import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte";
     import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte";
-    import {gameManager} from "../../Phaser/Game/GameManager";
+    import { gameManager } from "../../Phaser/Game/GameManager";
-    import type {Game} from "../../Phaser/Game/Game";
+    import type { Game } from "../../Phaser/Game/Game";
+    import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
 
     export let game: Game;
     let inputSendTextActive = true;
@@ -20,23 +22,21 @@
 </script>
 
 
-<div class="main-console nes-container is-rounded">
+<div class="console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
-<!--    <div class="console nes-container is-rounded">
+    <div class="console-global-message-main">
-       <img class="btn-close" src="resources/logos/send-yellow.svg" alt="Close">
-    </div>-->
-    <div class="main-global-message">
         <h2> Global Message </h2>
-        <div class="global-message">
+        <button type="button" class="console-global-message-close nes-btn is-error" on:click|preventDefault={() => consoleGlobalMessageManagerVisibleStore.set(false)}><i class="nes-icon close is-small"></i></button>
-            <div class="menu">
+        <div class="console-global-message-content">
-                <button class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
+            <div class="console-global-message-menu">
-                <button class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
+                <button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
+                <button type="button" class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
             </div>
-            <div class="main-input">
+            <div class="console-global-message-main-input">
                 {#if inputSendTextActive}
-                    <InputTextGlobalMessage game={game} gameManager={gameManager}></InputTextGlobalMessage>
+                    <InputTextGlobalMessage game={game} gameManager={gameManager}/>
                 {/if}
                 {#if uploadMusicActive}
-                    <UploadAudioGlobalMessage game={game} gameManager={gameManager}></UploadAudioGlobalMessage>
+                    <UploadAudioGlobalMessage game={game} gameManager={gameManager}/>
                 {/if}
             </div>
         </div>

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 @@
 
 <section class="section-input-send-text">
     <div class="input-send-text" bind:this={INPUT_CONSOLE_MESSAGE}></div>
-    <div class="btn-action">
+    <div class="footer-btn-action">
         <button class="nes-btn is-primary" on:click|preventDefault={SendTextMessage}>Send</button>
     </div>
 </section>

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<File>;
@@ -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 @@
 
 
 <section class="section-input-send-audio">
-    <div class="input-send-audio">
         <img src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileinput.click();}}>
-        {#if filename != undefined}
+        {#if filename !== undefined}
             <label for="input-send-audio">{filename} : {filesize}</label>
         {/if}
         {#if errorfile}
             <p class="err">No file selected. You need to upload a file before sending it.</p>
         {/if}
         <input type="file" id="input-send-audio" bind:this={fileinput} on:change={(e) => {inputAudioFile(e)}}>
-    </div>
+    <div class="footer-btn-action">
-    <div class="btn-action">
         <button class="nes-btn is-primary" on:click|preventDefault={SendAudioMessage}>Send</button>
     </div>
 </section>
-
-<style lang="scss">
-  //UploadAudioGlobalMessage
-  .section-input-send-audio {
-    margin: 10px;
-  }
-
-  .section-input-send-audio .input-send-audio {
-    text-align: center;
-  }
-
-  .section-input-send-audio #input-send-audio{
-    display: none;
-  }
-
-  .section-input-send-audio div.input-send-audio label{
-    color: white;
-  }
-
-  .section-input-send-audio div.input-send-audio p.err {
-    color: #ce372b;
-    text-align: center;
-  }
-
-  .section-input-send-audio div.input-send-audio img{
-    height: 150px;
-    cursor: url('../../../style/images/cursor_pointer.png'), pointer;
-  }
-</style>

front/src/Phaser/Game/Game.ts

@@ -1,7 +1,7 @@
-import {SKIP_RENDER_OPTIMIZATIONS} from "../../Enum/EnvironmentVariable";
+import { SKIP_RENDER_OPTIMIZATIONS } from "../../Enum/EnvironmentVariable";
-import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
+import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
-import {waScaleManager} from "../Services/WaScaleManager";
+import { waScaleManager } from "../Services/WaScaleManager";
-import {ResizableScene} from "../Login/ResizableScene";
+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];
+    }
 }

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{
+  .console-global-message-main {
-    margin: 10px;
-    text-align: center;
-  }
-
-  .main-global-message {
     width: 100%;
-    max-height: 100%;
+    height: 100%;
-  }
 
-  .main-global-message h2 {
+    h2 {
+      margin-bottom: 20px;
       text-align: center;
       color: white;
     }
 
-  div.global-message {
+    .console-global-message-close {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  div.console-global-message-content {
     display: flex;
-    max-height: 100%;
+    flex-flow: row;
+    height: calc(100% - (36px + 20px));
     width: 100%;
   }
 
-  div.menu {
+  div.console-global-message-menu {
-    flex: auto;
+    flex: 0 1 auto;
-  }
 
-  div.menu button {
+      button {
         margin: 7px;
     }
-
-  .main-input {
-    width: 95%;
   }
 
+  .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%;
 
-  .section-input-send-text .input-send-text .ql-editor{
+    .ql-toolbar{
-    color: white;
+      flex: 0 1 auto;
-    min-height: 200px;
-  }
-
-  .section-input-send-text .ql-toolbar{
       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;
+      }
+    }
+  }
+
+
+//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;
+  }
 }