Migrating ConsoleGlobalMessageManager in svelte

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -1,397 +0,0 @@
-import {HtmlUtils} from "../WebRtc/HtmlUtils";
-import type {UserInputManager} from "../Phaser/UserInput/UserInputManager";
-import type {RoomConnection} from "../Connexion/RoomConnection";
-import type {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
-import {AdminMessageEventTypes} from "../Connexion/AdminMessagesService";
-
-export const CLASS_CONSOLE_MESSAGE = 'main-console';
-export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
-export const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music';
-export const INPUT_TYPE_CONSOLE = 'input-type';
-export const VIDEO_QUALITY_SELECT = 'select-video-quality';
-
-export const AUDIO_TYPE = AdminMessageEventTypes.audio;
-export const MESSAGE_TYPE = AdminMessageEventTypes.admin;
-
-interface EventTargetFiles extends EventTarget {
-    files: Array<File>;
-}
-
-/**
- * @deprecated
- */
-export class ConsoleGlobalMessageManager {
-
-    private readonly divMainConsole: HTMLDivElement;
-    private readonly divMessageConsole: HTMLDivElement;
-    //private readonly divSettingConsole: HTMLDivElement;
-    private readonly buttonMainConsole: HTMLDivElement;
-    private readonly buttonSendMainConsole: HTMLImageElement;
-    //private readonly buttonAdminMainConsole: HTMLImageElement;
-    //private readonly buttonSettingsMainConsole: HTMLImageElement;
-    private activeConsole: boolean = false;
-    private activeMessage: boolean = false;
-    private activeSetting: boolean = false;
-    private userInputManager!: UserInputManager;
-    private static cssLoaded: boolean = false;
-
-    constructor(private Connection: RoomConnection, userInputManager : UserInputManager, private isAdmin: Boolean) {
-        this.buttonMainConsole = document.createElement('div');
-        this.buttonMainConsole.classList.add('console');
-        this.buttonMainConsole.hidden = true;
-        this.divMainConsole = document.createElement('div');
-        this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
-        this.divMessageConsole = document.createElement('div');
-        this.divMessageConsole.className = 'message';
-        //this.divSettingConsole = document.createElement('div');
-        //this.divSettingConsole.className = 'setting';
-        this.buttonSendMainConsole = document.createElement('img');
-        this.buttonSendMainConsole.id = 'btn-send-message';
-        //this.buttonSettingsMainConsole = document.createElement('img');
-        //this.buttonAdminMainConsole = document.createElement('img');
-        this.userInputManager = userInputManager;
-        this.initialise();
-
-    }
-
-    initialise() {
-        for (const elem of document.getElementsByClassName(CLASS_CONSOLE_MESSAGE)) {
-            elem.remove();
-        }
-
-        const typeConsole = document.createElement('input');
-        typeConsole.id = INPUT_TYPE_CONSOLE;
-        typeConsole.value = MESSAGE_TYPE;
-        typeConsole.type = 'hidden';
-
-        const menu = document.createElement('div');
-        menu.classList.add('menu')
-        const textMessage = document.createElement('span');
-        textMessage.innerText = "Message";
-        textMessage.classList.add('active');
-        textMessage.addEventListener('click', () => {
-            textMessage.classList.add('active');
-            const messageSection = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(this.getSectionId(INPUT_CONSOLE_MESSAGE));
-            messageSection.classList.add('active');
-
-            textAudio.classList.remove('active');
-            const audioSection = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(this.getSectionId(UPLOAD_CONSOLE_MESSAGE));
-            audioSection.classList.remove('active');
-
-            typeConsole.value = MESSAGE_TYPE;
-        });
-        menu.appendChild(textMessage);
-        const textAudio = document.createElement('span');
-        textAudio.innerText = "Audio";
-        textAudio.addEventListener('click', () => {
-            textAudio.classList.add('active');
-            const audioSection = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(this.getSectionId(UPLOAD_CONSOLE_MESSAGE));
-            audioSection.classList.add('active');
-
-            textMessage.classList.remove('active');
-            const messageSection = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(this.getSectionId(INPUT_CONSOLE_MESSAGE));
-            messageSection.classList.remove('active');
-
-            typeConsole.value = AUDIO_TYPE;
-        });
-        menu.appendChild(textMessage);
-        menu.appendChild(textAudio);
-        this.divMessageConsole.appendChild(menu);
-
-        this.buttonSendMainConsole.src = 'resources/logos/send-yellow.svg';
-        this.buttonSendMainConsole.addEventListener('click', () => {
-            if(this.activeMessage){
-                this.disabledMessageConsole();
-            }else{
-                this.activeMessageConsole();
-            }
-        });
-
-        /*this.buttonAdminMainConsole.src = 'resources/logos/setting-yellow.svg';
-        this.buttonAdminMainConsole.addEventListener('click', () => {
-            window.open(ADMIN_URL, '_blank');
-        });*/
-
-        /*this.buttonSettingsMainConsole.src = 'resources/logos/monitor-yellow.svg';
-        this.buttonSettingsMainConsole.addEventListener('click', () => {
-            if(this.activeSetting){
-                this.disabledSettingConsole();
-            }else{
-                this.activeSettingConsole();
-            }
-        });*/
-
-        this.divMessageConsole.appendChild(typeConsole);
-
-        /*if(this.isAdmin) {
-            this.buttonMainConsole.appendChild(this.buttonSendMainConsole);
-            //this.buttonMainConsole.appendChild(this.buttonAdminMainConsole);
-        }*/
-        this.createTextMessagePart();
-        this.createUploadAudioPart();
-        //this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole);
-
-        this.divMainConsole.appendChild(this.buttonMainConsole);
-        this.divMainConsole.appendChild(this.divMessageConsole);
-        //this.divMainConsole.appendChild(this.divSettingConsole);
-
-        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
-        mainSectionDiv.appendChild(this.divMainConsole);
-    }
-
-    createTextMessagePart(){
-        const div = document.createElement('div');
-        div.id = INPUT_CONSOLE_MESSAGE
-        const buttonSend = document.createElement('button');
-        buttonSend.innerText = 'Send';
-        buttonSend.classList.add('btn');
-        buttonSend.addEventListener('click', (event: MouseEvent) => {
-            this.sendMessage();
-            this.disabledMessageConsole();
-        });
-        const buttonDiv = document.createElement('div');
-        buttonDiv.classList.add('btn-action');
-        buttonDiv.appendChild(buttonSend)
-
-        const section = document.createElement('section');
-        section.id = this.getSectionId(INPUT_CONSOLE_MESSAGE);
-        section.classList.add('active');
-        section.appendChild(div);
-        section.appendChild(buttonDiv);
-        this.divMessageConsole.appendChild(section);
-
-        (async () => {
-            try{
-                // Start loading CSS
-                const cssPromise = ConsoleGlobalMessageManager.loadCss();
-                // Import quill
-                const {default: Quill}:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
-                // Wait for CSS to be loaded
-                await cssPromise;
-
-                const toolbarOptions = [
-                    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-                    ['blockquote', 'code-block'],
-
-                    [{'header': 1}, {'header': 2}],               // custom button values
-                    [{'list': 'ordered'}, {'list': 'bullet'}],
-                    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
-                    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
-                    [{'direction': 'rtl'}],                         // text direction
-
-                    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
-                    [{'header': [1, 2, 3, 4, 5, 6, false]}],
-
-                    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
-                    [{'font': []}],
-                    [{'align': []}],
-
-                    ['clean'],
-
-                    ['link', 'image', 'video']
-                    // remove formatting button
-                ];
-
-                new Quill(`#${INPUT_CONSOLE_MESSAGE}`, {
-                    theme: 'snow',
-                    modules: {
-                        toolbar: toolbarOptions
-                    },
-                });
-            }catch(err){
-                console.error(err);
-            }
-        })();
-    }
-
-    createUploadAudioPart(){
-        const div = document.createElement('div');
-        div.classList.add('upload');
-
-        const label = document.createElement('label');
-        label.setAttribute('for', UPLOAD_CONSOLE_MESSAGE);
-
-        const img = document.createElement('img');
-        img.setAttribute('for', UPLOAD_CONSOLE_MESSAGE);
-        img.src = 'resources/logos/music-file.svg';
-
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.id = UPLOAD_CONSOLE_MESSAGE
-        input.addEventListener('input', (e: Event) => {
-            if(!e.target){
-                return;
-            }
-            const eventTarget : EventTargetFiles = (e.target as EventTargetFiles);
-            if(!eventTarget || !eventTarget.files || eventTarget.files.length === 0){
-                return;
-            }
-            const file : File = eventTarget.files[0];
-
-            if(!file){
-                return;
-            }
-
-            try {
-                HtmlUtils.removeElementByIdOrFail('audi-message-filename');
-            }catch (err) {
-                console.error(err)
-            }
-
-            const p = document.createElement('p');
-            p.id = 'audi-message-filename';
-            p.innerText = `${file.name} : ${this.getFileSize(file.size)}`;
-            label.appendChild(p);
-        });
-
-        label.appendChild(img);
-        div.appendChild(label);
-        div.appendChild(input);
-
-        const buttonSend = document.createElement('button');
-        buttonSend.innerText = 'Send';
-        buttonSend.classList.add('btn');
-        buttonSend.addEventListener('click', (event: MouseEvent) => {
-            this.sendMessage();
-            this.disabledMessageConsole();
-        });
-        const buttonDiv = document.createElement('div');
-        buttonDiv.classList.add('btn-action');
-        buttonDiv.appendChild(buttonSend)
-
-        const section = document.createElement('section');
-        section.id = this.getSectionId(UPLOAD_CONSOLE_MESSAGE);
-        section.appendChild(div);
-        section.appendChild(buttonDiv);
-        this.divMessageConsole.appendChild(section);
-    }
-
-    private static loadCss(): Promise<void> {
-        return new Promise<void>((resolve, reject) => {
-            if (ConsoleGlobalMessageManager.cssLoaded) {
-                resolve();
-                return;
-            }
-            const fileref = document.createElement("link")
-            fileref.setAttribute("rel", "stylesheet")
-            fileref.setAttribute("type", "text/css")
-            fileref.setAttribute("href", "https://cdn.quilljs.com/1.3.7/quill.snow.css");
-            document.getElementsByTagName("head")[0].appendChild(fileref);
-            ConsoleGlobalMessageManager.cssLoaded = true;
-            fileref.onload = () => {
-                resolve();
-            }
-            fileref.onerror = () => {
-                reject();
-            }
-        });
-    }
-
-    sendMessage(){
-        const inputType = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(INPUT_TYPE_CONSOLE);
-        if(AUDIO_TYPE !== inputType.value && MESSAGE_TYPE !== inputType.value){
-            throw "Error event type";
-        }
-        if(AUDIO_TYPE === inputType.value){
-            return this.sendAudioMessage();
-        }
-        return this.sendTextMessage();
-    }
-
-    private sendTextMessage(){
-        const elements = document.getElementsByClassName('ql-editor');
-        const quillEditor = elements.item(0);
-        if(!quillEditor){
-            throw "Error get quill node";
-        }
-        const GlobalMessage : PlayGlobalMessageInterface = {
-            id: "1", // FIXME: use another ID?
-            message: quillEditor.innerHTML,
-            type: MESSAGE_TYPE
-        };
-        quillEditor.innerHTML = '';
-        this.Connection.emitGlobalMessage(GlobalMessage);
-    }
-
-    private async sendAudioMessage(){
-        const inputAudio = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(UPLOAD_CONSOLE_MESSAGE);
-        const selectedFile = inputAudio.files ? inputAudio.files[0] : null;
-        if(!selectedFile){
-            throw 'no file selected';
-        }
-
-        const fd = new FormData();
-        fd.append('file', selectedFile);
-        const res = await this.Connection.uploadAudio(fd);
-
-        const GlobalMessage : PlayGlobalMessageInterface = {
-            id: (res as {id: string}).id,
-            message: (res as {path: string}).path,
-            type: AUDIO_TYPE
-        };
-        inputAudio.value = '';
-        try {
-            HtmlUtils.removeElementByIdOrFail('audi-message-filename');
-        }catch (err) {
-            console.error(err);
-        }
-        this.Connection.emitGlobalMessage(GlobalMessage);
-    }
-
-    active(){
-        this.userInputManager.disableControls();
-        this.divMainConsole.style.top = '0';
-        this.activeConsole = true;
-    }
-
-    disabled(){
-        this.userInputManager.initKeyBoardEvent();
-        this.activeConsole = false;
-        this.divMainConsole.style.top = '-80%';
-    }
-
-    activeMessageConsole(){
-        if(!this.isAdmin){
-            throw "User is not admin";
-        }
-        if(this.activeMessage){
-            this.disabledMessageConsole();
-            return;
-        }
-        this.activeMessage = true;
-        this.active();
-        this.divMessageConsole.classList.add('active');
-        this.buttonMainConsole.hidden = false;
-        this.buttonSendMainConsole.classList.add('active');
-        //if button not
-        try{
-            HtmlUtils.getElementByIdOrFail('btn-send-message');
-        }catch (e) {
-            this.buttonMainConsole.appendChild(this.buttonSendMainConsole);
-        }
-    }
-
-    disabledMessageConsole(){
-        this.activeMessage = false;
-        this.disabled();
-        this.buttonMainConsole.hidden = true;
-        this.divMessageConsole.classList.remove('active');
-        this.buttonSendMainConsole.classList.remove('active');
-    }
-
-    private getSectionId(id: string) : string {
-        return `section-${id}`;
-    }
-
-    private getFileSize(number: number) :string {
-        if (number < 1024) {
-            return number + 'bytes';
-        } else if (number >= 1024 && number < 1048576) {
-            return (number / 1024).toFixed(1) + 'KB';
-        } else if (number >= 1048576) {
-            return (number / 1048576).toFixed(1) + 'MB';
-        }else{
-            return '';
-        }
-    }
-}

front/src/Administration/GlobalMessageManager.ts

@@ -1,10 +1,10 @@
 import {HtmlUtils} from "./../WebRtc/HtmlUtils";
-import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager";
 import {PUSHER_URL, UPLOADER_URL} from "../Enum/EnvironmentVariable";
 import type {RoomConnection} from "../Connexion/RoomConnection";
 import type {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
 import {soundPlayingStore} from "../Stores/SoundPlayingStore";
 import {soundManager} from "../Phaser/Game/SoundManager";
+import {AdminMessageEventTypes} from "../Connexion/AdminMessagesService";
 
 export class GlobalMessageManager {
 
@@ -36,11 +36,11 @@ export class GlobalMessageManager {
             previousMessage.remove();
         }
 
-        if(AUDIO_TYPE === message.type){
+        if(AdminMessageEventTypes.audio === message.type){
             this.playAudioMessage(message.id, message.message);
         }
 
-        if(MESSAGE_TYPE === message.type){
+        if(AdminMessageEventTypes.admin === message.type){
             this.playTextMessage(message.id, message.message);
         }
     }

front/src/Components/App.svelte

@@ -23,6 +23,8 @@
     import AudioPlaying from "./UI/AudioPlaying.svelte";
     import {soundPlayingStore} from "../Stores/SoundPlayingStore";
     import ErrorDialog from "./UI/ErrorDialog.svelte";
+    import {ConsoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
+    import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte";
 
     export let game: Game;
 </script>
@@ -72,6 +74,11 @@
             <CameraControls></CameraControls>
         </div>
     {/if}
+    {#if $ConsoleGlobalMessageManagerVisibleStore}
+        <div>
+            <ConsoleGlobalMessageManager game={game}></ConsoleGlobalMessageManager>
+        </div>
+    {/if}
     {#if $helpCameraSettingsVisibleStore}
         <div>
             <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>

front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte

@@ -0,0 +1,44 @@
+<script lang="typescript">
+    import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte";
+    import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte";
+    import {gameManager} from "../../Phaser/Game/GameManager";
+    import {Game} from "../../Phaser/Game/Game";
+
+    export let game: Game;
+    let inputSendTextActive = true;
+    let uploadMusicActive = false;
+
+    function inputSendTextActivate() {
+        inputSendTextActive = true;
+        uploadMusicActive = false;
+    }
+
+    function inputUploadMusicActivate() {
+        uploadMusicActive = true;
+        inputSendTextActive = false;
+    }
+</script>
+
+
+<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>
+    </div>
+</div>

front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import {ConsoleGlobalMessageManagerFocusStore, ConsoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
+    import {onMount} from "svelte";
+    import {Game} from "../../Phaser/Game/Game";
+    import {GameManager} from "../../Phaser/Game/GameManager";
+    import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
+    import {AdminMessageEventTypes} from "../../Connexion/AdminMessagesService";
+
+    //toolbar
+    export const toolbarOptions = [
+        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+        ['blockquote', 'code-block'],
+
+        [{'header': 1}, {'header': 2}],               // custom button values
+        [{'list': 'ordered'}, {'list': 'bullet'}],
+        [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
+        [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
+        [{'direction': 'rtl'}],                         // text direction
+
+        [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
+        [{'header': [1, 2, 3, 4, 5, 6, false]}],
+
+        [{'color': []}, {'background': []}],          // dropdown with defaults from theme
+        [{'font': []}],
+        [{'align': []}],
+
+        ['clean'],
+
+        ['link', 'image', 'video']
+        // remove formatting button
+    ];
+
+    export let game: Game;
+    export let gameManager: GameManager;
+
+
+    let gameScene = game.scene.getScene(gameManager.currentGameSceneName);
+    let quill;
+    let INPUT_CONSOLE_MESSAGE = 'quill';
+
+    const MESSAGE_TYPE = AdminMessageEventTypes.admin;
+
+    //Quill
+    onMount(async () => {
+
+        // Import quill
+        const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+        quill = new Quill(INPUT_CONSOLE_MESSAGE, {
+            theme: 'snow',
+            modules: {
+                toolbar: toolbarOptions
+            },
+        });
+
+        quill.on('selection-change', function (range, oldRange, source) {
+            if (range === null && oldRange !== null) {
+                ConsoleGlobalMessageManagerFocusStore.set(false);
+            } else if (range !== null && oldRange === null)
+                ConsoleGlobalMessageManagerFocusStore.set(true);
+        });
+    });
+
+    function disableConsole() {
+        ConsoleGlobalMessageManagerVisibleStore.set(false);
+        ConsoleGlobalMessageManagerFocusStore.set(false);
+    }
+
+    function SendTextMessage() {
+        const elements = document.getElementsByClassName('ql-editor');
+        const quillEditor = elements.item(0);
+        if (!quillEditor) {
+            throw "Error get quill node";
+        }
+        const GlobalMessage: PlayGlobalMessageInterface = {
+            id: "1", // FIXME: use another ID?
+            message: quillEditor.innerHTML,
+            type: MESSAGE_TYPE
+        };
+        quillEditor.innerHTML = '';
+        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>
+
+
+<style lang="scss">
+  @import 'https://cdn.quilljs.com/1.3.7/quill.snow.css';
+</style>

front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+    import {Game} from "../../Phaser/Game/Game";
+    import {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";
+
+    interface EventTargetFiles extends EventTarget {
+        files: Array<File>;
+    }
+
+    export let game: Game;
+    export let gameManager: GameManager;
+
+    let gameScene = game.scene.getScene(gameManager.currentGameSceneName);
+    let fileinput;
+    let filename: string;
+    let filesize: string;
+
+    const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music';
+    const AUDIO_TYPE = AdminMessageEventTypes.audio;
+
+
+    async function SendAudioMessage() {
+        const inputAudio = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(UPLOAD_CONSOLE_MESSAGE);
+            const selectedFile = inputAudio.files ? inputAudio.files[0] : null;
+            if (!selectedFile) {
+            throw 'no file selected';
+        }
+
+            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
+        }
+            inputAudio.value = '';
+            gameScene.connection.emitGlobalMessage(GlobalMessage);
+            disableConsole();
+    }
+
+    function inputAudioFile(event: Event) {
+        console.log('Input');
+        const eventTarget : EventTargetFiles = (event.target as EventTargetFiles);
+        if(!eventTarget || !eventTarget.files || eventTarget.files.length === 0){
+            return;
+        }
+
+        const file = eventTarget.files[0];
+        if(!file) {
+            return;
+        }
+
+        filename = file.name;
+        filesize = getFileSize(file.size);
+    }
+
+    function getFileSize(number: number) {
+        if (number < 1024) {
+            return number + 'bytes';
+        } else if (number >= 1024 && number < 1048576) {
+            return (number / 1024).toFixed(1) + 'KB';
+        } else if (number >= 1048576) {
+            return (number / 1048576).toFixed(1) + 'MB';
+        } else {
+            return '';
+        }
+    }
+
+    function disableConsole() {
+        ConsoleGlobalMessageManagerVisibleStore.set(false);
+        ConsoleGlobalMessageManagerFocusStore.set(false);
+    }
+</script>
+
+
+<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}
+        <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>
+</section>

front/src/Components/images/music-file.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 448 448" style="enable-background:new 0 0 448 448;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFDA01;}
+</style>
+<path class="st0" d="M348,288c-44.2,0-80,35.8-80,80s35.8,80,80,80s80-35.8,80-80C428,323.8,392.2,288,348,288z M387.6,359.6
+	c-3.1,3.1-8.2,3.1-11.3,0L356,339.3V416c0,4.4-3.6,8-8,8s-8-3.6-8-8v-76.7l-20.3,20.3c-3.1,3-8.1,3-11.2-0.1s-3.1-8.1-0.1-11.2
+	l33.9-33.9c0.7-0.7,1.6-1.3,2.6-1.7c2-0.8,4.2-0.8,6.1,0c1,0.4,1.9,1,2.6,1.7l33.9,33.9C390.7,351.4,390.7,356.5,387.6,359.6z"/>
+<path class="st0" d="M244,154.6L148,182v15.4l96-27.4V154.6z"/>
+<path class="st0" d="M244,280c0,8.8-7.2,16-16,16s-16-7.2-16-16s7.2-16,16-16S244,271.2,244,280z"/>
+<path class="st0" d="M132,312c0,8.8-7.2,16-16,16s-16-7.2-16-16s7.2-16,16-16S132,303.2,132,312z"/>
+<path class="st0" d="M31.3,80H100V11.3L31.3,80z"/>
+<path class="st0" d="M20,448h275c-0.1-0.1-0.2-0.1-0.3-0.2c-2.9-2-5.8-4.1-8.5-6.4c-0.7-0.6-1.4-1.3-2.1-1.9
+	c-1.9-1.7-3.8-3.5-5.6-5.4c-0.8-0.9-1.6-1.8-2.4-2.7c-1.6-1.8-3.2-3.8-4.7-5.7c-0.7-0.9-1.4-1.8-2-2.7c-1.8-2.6-3.5-5.2-5-8
+	c-0.2-0.4-0.4-0.7-0.6-1c-1.7-3.1-3.2-6.4-4.6-9.7c-0.4-1-0.7-2-1.1-3c-0.9-2.4-1.7-4.9-2.4-7.4c-0.3-1.2-0.6-2.4-0.9-3.6
+	c-0.6-2.5-1.1-5-1.5-7.6c-0.2-1.1-0.4-2.3-0.5-3.4c-0.9-6.9-1-13.9-0.2-20.8c0.1-1.1,0.3-2.1,0.5-3.1c0.3-2.1,0.5-4.1,0.9-6.2
+	c0.2-1.2,0.6-2.4,0.9-3.7c0.4-1.8,0.8-3.6,1.4-5.3c0.4-1.3,0.9-2.5,1.3-3.8c0.6-1.6,1.1-3.3,1.8-4.9c0.5-1.3,1.1-2.5,1.7-3.7
+	c0.7-1.5,1.4-3,2.2-4.5c0.6-1.2,1.4-2.4,2-3.6c0.8-1.4,1.7-2.8,2.6-4.2c0.8-1.2,1.6-2.3,2.4-3.4c0.9-1.3,1.9-2.6,2.9-3.9
+	c0.9-1.1,1.8-2.1,2.7-3.2c1.1-1.2,2.1-2.4,3.2-3.6c1-1,2-2,3-2.9c1.2-1.1,2.3-2.2,3.6-3.2c1.1-0.9,2.1-1.8,3.2-2.7
+	c1.3-1,2.6-2,3.9-2.9c1.1-0.8,2.3-1.6,3.5-2.4c1.4-0.9,2.8-1.7,4.2-2.5c1.2-0.7,2.4-1.4,3.6-2c1.5-0.8,2.9-1.5,4.4-2.1
+	c1.3-0.6,2.5-1.2,3.8-1.7c1.6-0.6,3.1-1.2,4.7-1.7c1.3-0.4,2.6-0.9,3.9-1.3c1.6-0.5,3.3-0.9,5-1.3c1.3-0.3,2.6-0.7,4-0.9
+	c1.8-0.3,3.5-0.6,5.3-0.8c1.3-0.2,2.6-0.4,4-0.5c0.3,0,0.6-0.1,1-0.1V0H116v88c0,4.4-3.6,8-8,8H20V448z M116,280
+	c5.6,0,11.2,1.6,16,4.4V176c0-3.6,2.4-6.7,5.8-7.7l112-32c2.4-0.7,5-0.2,7,1.3s3.2,3.9,3.2,6.4v136c0,17.7-14.3,32-32,32
+	s-32-14.3-32-32s14.3-32,32-32c5.6,0,11.2,1.6,16,4.4v-65.8L148,214v98c0,17.7-14.3,32-32,32s-32-14.3-32-32S98.3,280,116,280z"/>
+</svg>

front/src/Phaser/Game/GameScene.ts

@@ -58,7 +58,6 @@ import {connectionManager} from "../../Connexion/ConnectionManager";
 import type {RoomConnection} from "../../Connexion/RoomConnection";
 import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
 import {userMessageManager} from "../../Administration/UserMessageManager";
-import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
 import {ResizableScene} from "../Login/ResizableScene";
 import {Room} from "../../Connexion/Room";
 import {jitsiFactory} from "../../WebRtc/JitsiFactory";
@@ -152,7 +151,6 @@ export class GameScene extends DirtyScene implements CenterListener {
     public connection: RoomConnection|undefined;
     private simplePeer!: SimplePeer;
     private GlobalMessageManager!: GlobalMessageManager;
-    public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
     private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
     private connectionAnswerPromiseResolve!: (value: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
     // A promise that will resolve when the "create" method is called (signaling loading is ended)
@@ -676,7 +674,6 @@ export class GameScene extends DirtyScene implements CenterListener {
             //this.initUsersPosition(roomJoinedMessage.users);
             this.connectionAnswerPromiseResolve(onConnect.room);
             // Analyze tags to find if we are admin. If yes, show console.
-            this.ConsoleGlobalMessageManager = new ConsoleGlobalMessageManager(this.connection, this.userInputManager, this.connection.isAdmin());
 
 
             this.scene.wake();

front/src/Phaser/Menu/MenuScene.ts

@@ -11,6 +11,8 @@ import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Co
 import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
 import {menuIconVisible} from "../../Stores/MenuStore";
 import {videoConstraintStore} from "../../Stores/MediaStore";
+import {ConsoleGlobalMessageManagerVisibleStore} from "../../Stores/ConsoleGlobalMessageManagerStore";
+import {get} from "svelte/store";
 
 export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
@@ -159,7 +161,7 @@ export class MenuScene extends Phaser.Scene {
         this.sideMenuOpened = false;
         this.closeAll();
         this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
-        gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole();
+        ConsoleGlobalMessageManagerVisibleStore.set(false);
         this.tweens.add({
             targets: this.menuElement,
             x: closedSideMenuX,
@@ -304,7 +306,11 @@ export class MenuScene extends Phaser.Scene {
                 this.toggleFullscreen();
                 break;
             case 'adminConsoleButton':
-                gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
+                if (get(ConsoleGlobalMessageManagerVisibleStore)) {
+                    ConsoleGlobalMessageManagerVisibleStore.set(false);
+                } else {
+                    ConsoleGlobalMessageManagerVisibleStore.set(true);
+                }
                 break;
         }
     }

front/src/Phaser/UserInput/UserInputManager.ts

@@ -2,6 +2,7 @@ import type { Direction } from "../../types";
 import type {GameScene} from "../Game/GameScene";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {MobileJoystick} from "../Components/MobileJoystick";
+import {enableUserInputsStore} from "../../Stores/UserInputStore";
 
 interface UserInputManagerDatum {
     keyInstance: Phaser.Input.Keyboard.Key;
@@ -58,6 +59,10 @@ export class UserInputManager {
         if (touchScreenManager.supportTouchScreen) {
             this.initVirtualJoystick();
         }
+
+        enableUserInputsStore.subscribe((enable) => {
+            enable ? this.restoreControls() : this.disableControls()
+        })
     }
 
     initVirtualJoystick() {

front/src/Stores/ConsoleGlobalMessageManagerStore.ts

@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+
+export const ConsoleGlobalMessageManagerVisibleStore = writable(false);
+
+export const ConsoleGlobalMessageManagerFocusStore = writable(false);

front/src/Stores/UserInputStore.ts

@@ -0,0 +1,10 @@
+import {derived} from "svelte/store";
+import {ConsoleGlobalMessageManagerFocusStore,} from "./ConsoleGlobalMessageManagerStore";
+
+//derived from the focus on Menu, ConsoleGlobal, Chat and ...
+export const enableUserInputsStore = derived(
+    ConsoleGlobalMessageManagerFocusStore,
+    ($ConsoleGlobalMessageManagerFocusStore) => {
+        return !$ConsoleGlobalMessageManagerFocusStore;
+    }
+);

front/style/index.scss

@@ -3,3 +3,4 @@
 @import "style";
 @import "mobile-style.scss";
 @import "fonts.scss";
+@import "svelte-style.scss";

front/style/style.scss

@@ -627,17 +627,15 @@ input[type=range]:focus::-ms-fill-upper {
     grid-template-columns: repeat(4, 1fr);
 }
 
-/*CONSOLE*/
+/*GLOBAL MESSAGE*/
-
+.message-container {
-.message-container,
-.main-console{
     position: absolute;
     width: 80%;
     height: 80%;
     min-height: 200px;
     max-height: 80%;
     top: -80%;
-    /*left: 10%;*/
+    //left: 10%;
     left: 250px;
     background: #333333;
     z-index: 200;
@@ -660,7 +658,6 @@ input[type=range]:focus::-ms-fill-upper {
     max-height: 400px;
 }
 
-.main-console div.console,
 .message-container div.clear {
     position: absolute;
     color: white;
@@ -675,22 +672,11 @@ input[type=range]:focus::-ms-fill-upper {
     text-align: center;
 }
 
-.main-console div.message,
-.main-console div.setting{
-    display: none;
-}
-
-.main-console div.message.active,
-.main-console div.setting.active{
-    display: block;
-}
-
 .message-container div.clear{
     width: 100px;
     left: calc(50% - 50px);
 }
 
-.main-console div.console img,
 .message-container div.clear img{
     margin-top: 6px;
     width: 30px;
@@ -701,112 +687,26 @@ input[type=range]:focus::-ms-fill-upper {
     transform: rotateY(0);
     opacity: 0.5;
 }
-.main-console div.console img:hover,
+
 .message-container div.clear img:hover{
     opacity: 1;
 }
 
-.main-console div.console img.active,
 .message-container div.clear img{
     transform: rotateY(3.142rad);
     opacity: 1;
 }
 
-.main-console div.console p,
 .message-container div.clear p{
     margin-top: 12px;
 }
 
-.main-console div.console:hover,
 .message-container div.clear:hover {
     cursor: url('./images/cursor_pointer.png'), pointer;
     top: calc(100% + 5px);
     transform: scale(1.2) translateY(3px);
 }
 
-.main-console #input-send-text{
-    min-height: 200px;
-}
-
-.main-console #input-send-text .ql-editor{
-    color: white;
-    min-height: 200px;
-    max-height: 300px;
-}
-
-.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: 15px;
-    padding: 10px 30px;
-    transition: all .2s ease;
-}
-.main-console .btn-action .btn:hover{
-    cursor: url('./images/cursor_pointer.png'), pointer;
-    background-color: #ffda01;
-    color: black;
-    border: 1px solid black;
-    transform: scale(1.1);
-}
-
-.main-console .menu {
-    padding: 20px;
-    color: #ffffffa6;
-    text-align: center;
-}
-
-.main-console .menu span {
-    margin: 20px;
-    cursor: url('./images/cursor_pointer.png'), pointer;
-}
-
-.main-console .menu span.active {
-    color: white;
-    border-bottom: solid 1px white;
-}
-
-.main-console section{
-    text-align: center;
-    display: none;
-}
-
-.main-console section.active{
-    display: block;
-}
-
-.main-console section div.upload{
-    text-align: center;
-    border: solid 1px #ffda01;
-    height: 150px;
-    margin: 10px 200px;
-    padding: 20px;
-    min-height: 200px;
-}
-
-.main-console section div.upload label{
-    color: #ffda01;
-}
-.main-console section div.upload input{
-    display: none;
-}
-.main-console section div.upload label img{
-    height: 150px;
-    cursor: url('./images/cursor_pointer.png'), pointer;
-}
-.main-console section div.upload label img{
-    cursor: url('./images/cursor_pointer.png'), pointer;
-}
-
 
 /* VIDEO QUALITY */
 .main-console div.setting h1{

front/style/svelte-style.scss

@@ -0,0 +1,82 @@
+//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;
+  }
+
+//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 img{
+    height: 150px;
+    cursor: url('./images/cursor_pointer.png'), pointer;
+  }
+}