Graphic upgrade of the global message console (#1287)

* Graphic upgrade of the global message console Fix: error if LoginScene doesn't exist * Rework graphic of global message console * Rework graphic of global message console * Remove console.log
2021-07-29 17:42:16 +02:00 · 2021-07-29 17:42:16 +02:00 · 7ffe564e8e
commit 7ffe564e8e
parent 2a1af2a131
7 changed files with 273 additions and 198 deletions
--- a/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte
+++ b/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte
@ -1,12 +1,27 @@
 <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 type {Game} from "../../Phaser/Game/Game";
+    import { gameManager } from "../../Phaser/Game/GameManager";
+    import type { Game } from "../../Phaser/Game/Game";
+    import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";

    export let game: Game;
    let inputSendTextActive = true;
    let uploadMusicActive = false;
+    let handleSendText: { sendTextMessage(): void };
+    let handleSendAudio: { sendAudioMessage(): Promise<void> };
+    let broadcastToWorld = false;
+
+    function closeConsoleGlobalMessage() {
+        consoleGlobalMessageManagerVisibleStore.set(false)
+    }
+
+    function onKeyDown(e:KeyboardEvent) {
+        if (e.key === 'Escape') {
+            closeConsoleGlobalMessage();
+        }
+    }

    function inputSendTextActivate() {
        inputSendTextActive = true;
@ -17,28 +32,121 @@
        uploadMusicActive = true;
        inputSendTextActive = false;
    }
+
+    function send() {
+        if (inputSendTextActive) {
+            handleSendText.sendTextMessage();
+        }
+        if (uploadMusicActive) {
+            handleSendAudio.sendAudioMessage();
+        }
+    }
 </script>

+<svelte:window on:keydown={onKeyDown}/>

-<div class="main-console nes-container is-rounded">
-<!--    <div class="console nes-container is-rounded">
-       <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">
-            <div class="menu">
-                <button class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
-                <button class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
-            </div>
-            <div class="main-input">
-                {#if inputSendTextActive}
-                    <InputTextGlobalMessage game={game} gameManager={gameManager}></InputTextGlobalMessage>
-                {/if}
-                {#if uploadMusicActive}
-                    <UploadAudioGlobalMessage game={game} gameManager={gameManager}></UploadAudioGlobalMessage>
-                {/if}
-            </div>
+<div class="console-global-message">
+    <div class="menu-console-global-message nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
+        <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-console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
+        <div class="title-console-global-message">
+            <h2>Global Message</h2>
+            <button type="button" class="nes-btn is-error" on:click|preventDefault={closeConsoleGlobalMessage}><i class="nes-icon close is-small"></i></button>
+        </div>
+        <div class="content-console-global-message">
+            {#if inputSendTextActive}
+                <InputTextGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendText}/>
+            {/if}
+            {#if uploadMusicActive}
+                <UploadAudioGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendAudio}/>
+            {/if}
+        </div>
+        <div class="footer-console-global-message">
+            <label>
+                <input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
+                <span>Broadcast to all rooms of the world</span>
+            </label>
+            <button class="nes-btn is-primary" on:click|preventDefault={send}>Send</button>
        </div>
    </div>
 </div>
+
+
+
+<style lang="scss">
+
+  .nes-container {
+    padding: 0 5px;
+  }
+
+  div.console-global-message {
+    top: 20vh;
+    width: 50vw;
+    height: 50vh;
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+
+    pointer-events: auto;
+
+    div.menu-console-global-message {
+      flex: 1 1 auto;
+      max-width: 180px;
+
+      text-align: center;
+      background-color: #333333;
+
+      button {
+        width: 136px;
+        margin-bottom: 10px;
+      }
+    }
+
+    div.main-console-global-message {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+
+      background-color: #333333;
+
+      div.title-console-global-message {
+        flex: 0 0 auto;
+        height: 50px;
+        margin-bottom: 10px;
+
+        text-align: center;
+        color: whitesmoke;
+
+        .nes-btn {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+
+      div.content-console-global-message {
+        flex: 1 1 auto;
+        max-height: calc(100% - 120px);
+      }
+
+      div.footer-console-global-message {
+        height: 50px;
+        margin-top: 10px;
+        text-align: center;
+
+        label {
+          margin: 0;
+          position: absolute;
+          left: 0;
+          max-width: 30%;
+        }
+      }
+    }
+  }
+</style>
--- a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
+++ b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
@ -1,15 +1,14 @@
 <script lang="ts">
-    import {consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
-    import {onMount} from "svelte";
-    import type {Game} from "../../Phaser/Game/Game";
-    import type {GameManager} from "../../Phaser/Game/GameManager";
-    import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
-    import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
-    import type {Quill} from "quill";
-    import {LoginSceneName} from "../../Phaser/Login/LoginScene";
+    import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
+    import { onMount } from "svelte";
+    import type { Game } from "../../Phaser/Game/Game";
+    import type { GameManager } from "../../Phaser/Game/GameManager";
+    import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
+    import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
+    import type { Quill } from "quill";

    //toolbar
-    export const toolbarOptions = [
+    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

@ -35,12 +34,31 @@
    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;

    const MESSAGE_TYPE = AdminMessageEventTypes.admin;

+    export const handleSending = {
+        sendTextMessage() {
+            if (gameScene == undefined) {
+                return;
+            }
+            const text = quill.getText(0, quill.getLength());
+
+            const GlobalMessage: PlayGlobalMessageInterface = {
+                id: "1", // FIXME: use another ID?
+                message: text,
+                type: MESSAGE_TYPE
+            };
+
+            quill.deleteText(0, quill.getLength());
+            gameScene.connection?.emitGlobalMessage(GlobalMessage);
+            disableConsole();
+        }
+    }
+
    //Quill
    onMount(async () => {

@ -48,6 +66,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
@ -66,31 +85,10 @@
        consoleGlobalMessageManagerVisibleStore.set(false);
        consoleGlobalMessageManagerFocusStore.set(false);
    }
-
-    function SendTextMessage() {
-        if (gameScene == undefined) {
-            return;
-        }
-        const text = quill.getText(0, quill.getLength());
-
-        const GlobalMessage: PlayGlobalMessageInterface = {
-            id: "1", // FIXME: use another ID?
-            message: text,
-            type: MESSAGE_TYPE
-        };
-
-        quill.deleteText(0, quill.getLength());
-        gameScene.connection?.emitGlobalMessage(GlobalMessage);
-        disableConsole();
-    }
 </script>

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


--- a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte
+++ b/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte
@ -1,12 +1,11 @@
 <script lang="ts">
-    import {HtmlUtils} from "../../WebRtc/HtmlUtils";
-    import type {Game} from "../../Phaser/Game/Game";
-    import type {GameManager} from "../../Phaser/Game/GameManager";
-    import {consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore} from "../../Stores/ConsoleGlobalMessageManagerStore";
-    import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
-    import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
+    import { HtmlUtils } from "../../WebRtc/HtmlUtils";
+    import type { Game } from "../../Phaser/Game/Game";
+    import type { GameManager } from "../../Phaser/Game/GameManager";
+    import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
+    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,38 +14,39 @@
    export let game: Game;
    export let gameManager: GameManager;

-    let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName));
-    let fileinput: HTMLInputElement;
-    let filename: string;
-    let filesize: string;
-    let errorfile: boolean;
+    let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
+    let fileInput: HTMLInputElement;
+    let fileName: string;
+    let fileSize: string;
+    let errorFile: boolean;

    const AUDIO_TYPE = AdminMessageEventTypes.audio;

+    export const handleSending = {
+        async sendAudioMessage() {
+            if (gameScene == undefined) {
+                return;
+            }
+            const inputAudio = HtmlUtils.getElementByIdOrFail<HTMLInputElement>("input-send-audio");
+            const selectedFile = inputAudio.files ? inputAudio.files[0] : null;
+            if (!selectedFile) {
+                errorFile = true;
+                throw 'no file selected';
+            }

-    async function SendAudioMessage() {
-        if (gameScene == undefined) {
-            return;
-        }
-        const inputAudio = HtmlUtils.getElementByIdOrFail<HTMLInputElement>("input-send-audio");
-        const selectedFile = inputAudio.files ? inputAudio.files[0] : null;
-        if (!selectedFile) {
-            errorfile = true;
-            throw 'no file selected';
-        }
+            const fd = new FormData();
+            fd.append('file', selectedFile);
+            const res = await gameScene.connection?.uploadAudio(fd);

-        const fd = new FormData();
-        fd.append('file', selectedFile);
-        const res = await gameScene.connection?.uploadAudio(fd);
-
-        const GlobalMessage: PlayGlobalMessageInterface = {
-            id: (res as { id: string }).id,
-            message: (res as { path: string }).path,
-            type: AUDIO_TYPE
+            const GlobalMessage: PlayGlobalMessageInterface = {
+                id: (res as { id: string }).id,
+                message: (res as { path: string }).path,
+                type: AUDIO_TYPE
+            }
+            inputAudio.value = '';
+            gameScene.connection?.emitGlobalMessage(GlobalMessage);
+            disableConsole();
        }
-        inputAudio.value = '';
-        gameScene.connection?.emitGlobalMessage(GlobalMessage);
-        disableConsole();
    }

    function inputAudioFile(event: Event) {
@ -60,9 +60,9 @@
            return;
        }

-        filename = file.name;
-        filesize = getFileSize(file.size);
-        errorfile = false;
+        fileName = file.name;
+        fileSize = getFileSize(file.size);
+        errorFile = false;
    }

    function getFileSize(number: number) {
@ -85,46 +85,46 @@


 <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}
-            <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="btn-action">
-        <button class="nes-btn is-primary" on:click|preventDefault={SendAudioMessage}>Send</button>
-    </div>
+    <img class="nes-pointer" src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileInput.click();}}>
+    {#if fileName !== undefined}
+        <p>{fileName} : {fileSize}</p>
+    {/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)}}>
 </section>

 <style lang="scss">
-  //UploadAudioGlobalMessage
-  .section-input-send-audio {
-    margin: 10px;
-  }
+  section.section-input-send-audio {
+    display: flex;
+    flex-direction: column;

-  .section-input-send-audio .input-send-audio {
+    height: 100%;
    text-align: center;
-  }

-  .section-input-send-audio #input-send-audio{
-    display: none;
-  }
+    img {
+      flex: 1 1 auto;

-  .section-input-send-audio div.input-send-audio label{
-    color: white;
-  }
+      max-height: 80%;
+      margin-bottom: 20px;
+    }

-  .section-input-send-audio div.input-send-audio p.err {
-    color: #ce372b;
-    text-align: center;
-  }
+    p {
+      flex: 1 1 auto;

-  .section-input-send-audio div.input-send-audio img{
-    height: 150px;
-    cursor: url('../../../style/images/cursor_pointer.png'), pointer;
+      margin-bottom: 5px;
+
+      color: whitesmoke;
+      font-size: 1rem;
+
+      &.err {
+        color: #ce372b;
+      }
+    }
+
+    input {
+      display: none;
+    }
  }
 </style>
--- 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];
+    }
 }
--- a/front/style/index.scss
+++ b/front/style/index.scss
@ -3,4 +3,4 @@
@import "style";
@import "mobile-style.scss";
@import "fonts.scss";
-@import "svelte-style.scss";
+@import "inputTextGlobalMessageSvelte-Style.scss";
--- a/front/style/inputTextGlobalMessageSvelte-Style.scss
+++ b/front/style/inputTextGlobalMessageSvelte-Style.scss
@ -0,0 +1,24 @@
+//InputTextGlobalMessage
+section.section-input-send-text {
+  height: 100%;
+
+  .ql-toolbar{
+    max-height: 100px;
+
+    background: whitesmoke;
+  }
+
+  div.input-send-text{
+    height: auto;
+    max-height: calc(100% - 100px);
+    overflow: auto;
+
+    color: whitesmoke;
+    font-size: 1rem;
+
+    .ql-editor.ql-blank::before {
+      color: whitesmoke;
+      font-size: 1rem;
+    }
+  }
+}
--- a/front/style/svelte-style.scss
+++ b/front/style/svelte-style.scss
@ -1,60 +0,0 @@
-//Contains all styles not unique to a svelte component.
-
-//ConsoleGlobalMessage
-div.main-console.nes-container {
-  pointer-events: auto;
-  margin-left: auto;
-  margin-right: auto;
-  top: 20vh;
-  width: 50vw;
-  height: 50vh;
-  padding: 0;
-  background-color: #333333;
-
-  .btn-action{
-    margin: 10px;
-    text-align: center;
-  }
-
-  .main-global-message {
-    width: 100%;
-    max-height: 100%;
-  }
-
-  .main-global-message h2 {
-    text-align: center;
-    color: white;
-  }
-
-  div.global-message {
-    display: flex;
-    max-height: 100%;
-    width: 100%;
-  }
-
-  div.menu {
-    flex: auto;
-  }
-
-  div.menu button {
-    margin: 7px;
-  }
-
-  .main-input {
-    width: 95%;
-  }
-
-//InputTextGlobalMessage
-  .section-input-send-text {
-    margin: 10px;
-  }
-
-  .section-input-send-text .input-send-text .ql-editor{
-    color: white;
-    min-height: 200px;
-  }
-
-  .section-input-send-text .ql-toolbar{
-    background: white;
-  }
-}