Rework graphic of global message console

front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte

@@ -9,6 +9,19 @@
     export let game: Game;
     let inputSendTextActive = true;
     let uploadMusicActive = false;
+    let handleSendText: { sendTextMessage(): void };
+    let handleSendAudio: { sendAudioMessage(): void };
+    let broadcastToWorld = false;
+
+    function closeConsoleGlobalMessage() {
+        consoleGlobalMessageManagerVisibleStore.set(false)
+    }
+
+    function onKeyDown(e:KeyboardEvent) {
+        if (e.key === 'Escape') {
+            closeConsoleGlobalMessage();
+        }
+    }
 
     function inputSendTextActivate() {
         inputSendTextActive = true;
@@ -19,26 +32,122 @@
         uploadMusicActive = true;
         inputSendTextActive = false;
     }
+
+    function send() {
+        if (inputSendTextActive) {
+            handleSendText.sendTextMessage();
+            console.log(typeof handleSendText);
+        }
+        if (uploadMusicActive) {
+            handleSendAudio.sendAudioMessage();
+        }
+    }
 </script>
 
+<svelte:window on:keydown={onKeyDown}/>
 
-<div class="console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
+<div class="console-global-message">
-    <div class="console-global-message-main">
+    <div class="menu-console-global-message nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
-        <h2> Global Message </h2>
+        <button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
-        <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>
+        <button type="button" class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
-        <div class="console-global-message-content">
+    </div>
-            <div class="console-global-message-menu">
+    <div class="main-console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
-                <button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
+        <div class="title-console-global-message">
-                <button type="button" class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
+            <h2>Global Message</h2>
-            </div>
+            <button type="button" class="nes-btn is-error" on:click|preventDefault={closeConsoleGlobalMessage}><i class="nes-icon close is-small"></i></button>
-            <div class="console-global-message-main-input">
+        </div>
-                {#if inputSendTextActive}
+        <div class="content-console-global-message">
-                    <InputTextGlobalMessage game={game} gameManager={gameManager}/>
+            {#if inputSendTextActive}
-                {/if}
+                <InputTextGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendText}/>
-                {#if uploadMusicActive}
+            {/if}
-                    <UploadAudioGlobalMessage game={game} gameManager={gameManager}/>
+            {#if uploadMusicActive}
-                {/if}
+                <UploadAudioGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendAudio}/>
-            </div>
+            {/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>
+</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>

front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-    import {consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
+    import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
-    import {onMount} from "svelte";
+    import { onMount } from "svelte";
-    import type {Game} from "../../Phaser/Game/Game";
+    import type { Game } from "../../Phaser/Game/Game";
-    import type {GameManager} from "../../Phaser/Game/GameManager";
+    import type { GameManager } from "../../Phaser/Game/GameManager";
-    import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
+    import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
-    import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
+    import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
-    import type {Quill} from "quill";
+    import type { Quill } from "quill";
 
     //toolbar
-    export const toolbarOptions = [
+    const toolbarOptions = [
         ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
         ['blockquote', 'code-block'],
 
@@ -40,6 +40,25 @@
 
     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 () => {
 
@@ -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="footer-btn-action">
-        <button class="nes-btn is-primary" on:click|preventDefault={SendTextMessage}>Send</button>
-    </div>
 </section>
 
 

front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+    import { HtmlUtils } from "../../WebRtc/HtmlUtils";
-    import type {Game} from "../../Phaser/Game/Game";
+    import type { Game } from "../../Phaser/Game/Game";
-    import type {GameManager} from "../../Phaser/Game/GameManager";
+    import type { GameManager } from "../../Phaser/Game/GameManager";
-    import {consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore} from "../../Stores/ConsoleGlobalMessageManagerStore";
+    import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
-    import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
+    import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
-    import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
+    import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
     import uploadFile from "../images/music-file.svg";
 
     interface EventTargetFiles extends EventTarget {
@@ -15,37 +15,38 @@
     export let gameManager: GameManager;
 
     let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
-    let fileinput: HTMLInputElement;
+    let fileInput: HTMLInputElement;
-    let filename: string;
+    let fileName: string;
-    let filesize: string;
+    let fileSize: string;
-    let errorfile: boolean;
+    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() {
+            const fd = new FormData();
-        if (gameScene == undefined) {
+            fd.append('file', selectedFile);
-            return;
+            const res = await gameScene.connection?.uploadAudio(fd);
-        }
-        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();
+            const GlobalMessage: PlayGlobalMessageInterface = {
-        fd.append('file', selectedFile);
+                id: (res as { id: string }).id,
-        const res = await gameScene.connection?.uploadAudio(fd);
+                message: (res as { path: string }).path,
-
+                type: AUDIO_TYPE
-        const GlobalMessage: PlayGlobalMessageInterface = {
+            }
-            id: (res as { id: string }).id,
+            inputAudio.value = '';
-            message: (res as { path: string }).path,
+            gameScene.connection?.emitGlobalMessage(GlobalMessage);
-            type: AUDIO_TYPE
+            disableConsole();
         }
-        inputAudio.value = '';
-        gameScene.connection?.emitGlobalMessage(GlobalMessage);
-        disableConsole();
     }
 
     function inputAudioFile(event: Event) {
@@ -59,9 +60,9 @@
             return;
         }
 
-        filename = file.name;
+        fileName = file.name;
-        filesize = getFileSize(file.size);
+        fileSize = getFileSize(file.size);
-        errorfile = false;
+        errorFile = false;
     }
 
     function getFileSize(number: number) {
@@ -84,15 +85,46 @@
 
 
 <section class="section-input-send-audio">
-        <img src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileinput.click();}}>
+    <img class="nes-pointer" 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>
+        <p>{fileName} : {fileSize}</p>
-        {/if}
+    {/if}
-        {#if errorfile}
+    {#if errorFile}
-            <p class="err">No file selected. You need to upload a file before sending it.</p>
+        <p class="err">No file selected. You need to upload a file before sending it.</p>
-        {/if}
+    {/if}
-        <input type="file" id="input-send-audio" bind:this={fileinput} on:change={(e) => {inputAudioFile(e)}}>
+    <input type="file" id="input-send-audio" bind:this={fileInput} on:change={(e) => {inputAudioFile(e)}}>
-    <div class="footer-btn-action">
+</section>
-        <button class="nes-btn is-primary" on:click|preventDefault={SendAudioMessage}>Send</button>
+
-    </div>
+<style lang="scss">
-</section>
+  section.section-input-send-audio {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    text-align: center;
+
+    img {
+      flex: 1 1 auto;
+
+      max-height: 80%;
+      margin-bottom: 20px;
+    }
+
+    p {
+      flex: 1 1 auto;
+
+      margin-bottom: 5px;
+
+      color: whitesmoke;
+      font-size: 1rem;
+
+      &.err {
+        color: #ce372b;
+      }
+    }
+
+    input {
+      display: none;
+    }
+  }
+</style>

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";

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;
+    }
+  }
+}

front/style/svelte-style.scss

@@ -1,121 +0,0 @@
-//Contains all styles not unique to a svelte component.
-
-//ConsoleGlobalMessage
-div.console-global-message.nes-container {
-  pointer-events: auto;
-  margin-left: auto;
-  margin-right: auto;
-  top: 20vh;
-  width: 50vw;
-  height: 50vh;
-  padding: 0;
-  background-color: #333333;
-
-  .console-global-message-main {
-    width: 100%;
-    height: 100%;
-
-    h2 {
-      margin-bottom: 20px;
-      text-align: center;
-      color: white;
-    }
-
-    .console-global-message-close {
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  div.console-global-message-content {
-    display: flex;
-    flex-flow: row;
-    height: calc(100% - (36px + 20px));
-    width: 100%;
-  }
-
-  div.console-global-message-menu {
-    flex: 0 1 auto;
-
-      button {
-        margin: 7px;
-    }
-  }
-
-  .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 {
-    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;
-      }
-    }
-  }
-
-
-//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;
-  }
-}