From 56fa2e49f6e13ad9555e2ad1c2b0cbb10c6e4621 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 9 Aug 2021 14:49:17 +0200
Subject: [PATCH] New menu svelte

---
 front/src/Components/App.svelte               |  16 +-
 .../ConsoleGlobalMessageManager.svelte        | 150 ----------------
 .../Components/Menu/AboutRoomSubMenu.svelte   | 123 +++++++++++++
 .../AudioGlobalMessage.svelte}                |  20 +--
 .../src/Components/Menu/ContactSubMenu.svelte |  83 +++++++++
 .../Components/Menu/CreateMapSubMenu.svelte   |  51 ++++++
 .../Components/Menu/GameQualityMenu.svelte    | 121 -------------
 .../Menu/GlobalMessagesSubMenu.svelte         | 105 +++++++++++
 front/src/Components/Menu/Menu.svelte         | 167 ++++++++++--------
 front/src/Components/Menu/MenuIcon.svelte     |  42 ++---
 ...ofileMenu.svelte => ProfileSubMenu.svelte} |  78 ++++----
 .../Components/Menu/SettingsSubMenu.svelte    | 127 +++++++++++++
 .../TextGlobalMessage.svelte}                 |  29 +--
 front/src/Components/images/discord_64x64.png | Bin 0 -> 666 bytes
 .../src/Components/images/facebook_64x64.png  | Bin 0 -> 507 bytes
 .../src/Components/images/instagram_64x64.png | Bin 0 -> 754 bytes
 .../src/Components/images/linkedin_64x64.png  | Bin 0 -> 506 bytes
 front/src/Components/images/twitter_64x64.png | Bin 0 -> 484 bytes
 front/src/Components/images/youtube_64x64.png | Bin 0 -> 463 bytes
 front/src/Connexion/LocalUserStore.ts         |   9 +
 front/src/Phaser/Game/GameManager.ts          |   4 +-
 front/src/Phaser/Menu/MenuScene.ts            |   6 +-
 front/src/Stores/MenuStore.ts                 |   5 +-
 front/src/Stores/UserInputStore.ts            |   8 +-
 front/src/WebRtc/MediaManager.ts              |   7 +-
 ...css => TextGlobalMessageSvelte-Style.scss} |   8 +-
 front/style/index.scss                        |   2 +-
 front/style/style.scss                        |   1 -
 28 files changed, 685 insertions(+), 477 deletions(-)
 delete mode 100644 front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte
 create mode 100644 front/src/Components/Menu/AboutRoomSubMenu.svelte
 rename front/src/Components/{ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte => Menu/AudioGlobalMessage.svelte} (85%)
 create mode 100644 front/src/Components/Menu/ContactSubMenu.svelte
 create mode 100644 front/src/Components/Menu/CreateMapSubMenu.svelte
 delete mode 100644 front/src/Components/Menu/GameQualityMenu.svelte
 create mode 100644 front/src/Components/Menu/GlobalMessagesSubMenu.svelte
 rename front/src/Components/Menu/{EditProfileMenu.svelte => ProfileSubMenu.svelte} (54%)
 create mode 100644 front/src/Components/Menu/SettingsSubMenu.svelte
 rename front/src/Components/{ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte => Menu/TextGlobalMessage.svelte} (75%)
 create mode 100644 front/src/Components/images/discord_64x64.png
 create mode 100644 front/src/Components/images/facebook_64x64.png
 create mode 100644 front/src/Components/images/instagram_64x64.png
 create mode 100644 front/src/Components/images/linkedin_64x64.png
 create mode 100644 front/src/Components/images/twitter_64x64.png
 create mode 100644 front/src/Components/images/youtube_64x64.png
 rename front/style/{inputTextGlobalMessageSvelte-Style.scss => TextGlobalMessageSvelte-Style.scss} (76%)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 64a3d083..be7afc3c 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
-    import {menuIconVisible, menuVisible} from "../Stores/MenuStore";
+    import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
     import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -28,8 +28,6 @@
     import Menu from "./Menu/Menu.svelte";
     import VideoOverlay from "./Video/VideoOverlay.svelte";
     import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
-    import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
-    import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte";
     import AdminMessage from "./TypeMessage/BanMessage.svelte";
     import TextMessage from "./TypeMessage/TextMessage.svelte";
     import {banMessageVisibleStore} from "../Stores/TypeMessageStore/BanMessageStore";
@@ -89,19 +87,16 @@
             <LayoutManager></LayoutManager>
         </div>
     {/if}
-
-
-    {#if $menuIconVisible}
+    {#if $menuIconVisiblilityStore}
         <div>
             <MenuIcon></MenuIcon>
         </div>
     {/if}
-    {#if $menuVisible}
+    {#if $menuVisiblilityStore}
         <div>
             <Menu></Menu>
         </div>
     {/if}
-
     {#if $gameOverlayVisibilityStore}
         <div>
             <VideoOverlay></VideoOverlay>
@@ -109,11 +104,6 @@
             <CameraControls></CameraControls>
         </div>
     {/if}
-    {#if $consoleGlobalMessageManagerVisibleStore}
-        <div>
-            <ConsoleGlobalMessageManager></ConsoleGlobalMessageManager>
-        </div>
-    {/if}
     {#if $helpCameraSettingsVisibleStore}
         <div>
             <HelpCameraSettingsPopup></HelpCameraSettingsPopup>
diff --git a/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte b/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte
deleted file mode 100644
index 7a70e173..00000000
--- a/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte
+++ /dev/null
@@ -1,150 +0,0 @@
-<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 { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
-
-    let inputSendTextActive = true;
-    let uploadMusicActive = false;
-    let handleSendText: { sendTextMessage(broadcast: boolean): void };
-    let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
-    let broadcastToWorld = false;
-
-    function closeConsoleGlobalMessage() {
-        consoleGlobalMessageManagerVisibleStore.set(false)
-    }
-
-    function onKeyDown(e:KeyboardEvent) {
-        if (e.key === 'Escape') {
-            closeConsoleGlobalMessage();
-        }
-    }
-
-    function inputSendTextActivate() {
-        inputSendTextActive = true;
-        uploadMusicActive = false;
-    }
-
-    function inputUploadMusicActivate() {
-        uploadMusicActive = true;
-        inputSendTextActive = false;
-    }
-
-    function send() {
-        if (inputSendTextActive) {
-            handleSendText.sendTextMessage(broadcastToWorld);
-        }
-        if (uploadMusicActive) {
-            handleSendAudio.sendAudioMessage(broadcastToWorld);
-        }
-    }
-</script>
-
-<svelte:window on:keydown={onKeyDown}/>
-
-<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 gameManager={gameManager} bind:handleSending={handleSendText}/>
-            {/if}
-            {#if uploadMusicActive}
-                <UploadAudioGlobalMessage 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>
diff --git a/front/src/Components/Menu/AboutRoomSubMenu.svelte b/front/src/Components/Menu/AboutRoomSubMenu.svelte
new file mode 100644
index 00000000..bd9ed80f
--- /dev/null
+++ b/front/src/Components/Menu/AboutRoomSubMenu.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+    import { gameManager } from "../../Phaser/Game/GameManager";
+    import {onMount} from "svelte";
+
+    let gameScene = gameManager.getCurrentGameScene();
+
+    let HTMLShareLink: HTMLInputElement;
+    let expandedMapCopyright = false;
+    let expandedTilesetCopyright = false;
+
+    let mapName: string = 'The map has not a name.';
+    let mapDescription: string = "The creator of the map didn't use the property to describe the map.";
+    let mapCopyright: string = "There is not copyright and this map.";
+    let tilesetCopyright: string[] = [];
+
+    onMount(() => {
+        if (gameScene.mapFile.properties !== undefined) {
+            const propertyName = gameScene.mapFile.properties.find((property) => property.name === 'mapName')
+            if ( propertyName !== undefined && typeof propertyName.value === 'string') {
+                mapName = propertyName.value;
+            }
+            const propertyDescription = gameScene.mapFile.properties.find((property) => property.name === 'mapDescription')
+            if (propertyDescription !== undefined && typeof propertyDescription.value === 'string') {
+                mapDescription = propertyDescription.value;
+            }
+            const propertyCopyright = gameScene.mapFile.properties.find((property) => property.name === 'mapCopyright')
+            if (propertyCopyright !== undefined && typeof propertyCopyright.value === 'string') {
+                mapCopyright = propertyCopyright.value;
+            }
+        }
+
+        for (const tileset of gameScene.mapFile.tilesets) {
+            if (tileset.properties !== undefined) {
+                const propertyTilesetCopyright = tileset.properties.find((property) => property.name === 'tilesetCopyright')
+                if (propertyTilesetCopyright !== undefined && typeof propertyTilesetCopyright.value === 'string') {
+                    tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value]; //Assignment needed to trigger Svelte's reactivity
+                }
+            }
+        }
+    })
+
+    function copyLink() {
+        HTMLShareLink.select();
+        document.execCommand('copy');
+    }
+</script>
+
+<div class="about-room-main">
+    <section class="share-url">
+        <h3>Share the link of the room !</h3>
+        <input type="text" readonly bind:this={HTMLShareLink} value={location.toString()}>
+        <button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
+    </section>
+    <section class="presentation-map">
+        <p>This room use this map : </p>
+        <h3>{mapName}</h3>
+        <p class="string-HTML">{mapDescription}</p>
+    </section>
+    <section class="copyright">
+        <h3 class="nes-pointer" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
+        <p class="string-HTML" hidden="{!expandedMapCopyright}">{mapCopyright}</p>
+        <h3 class="nes-pointer" on:click={() => expandedTilesetCopyright = !expandedTilesetCopyright}>Copyrights of the tilesets</h3>
+        <section hidden="{!expandedTilesetCopyright}">
+            {#each tilesetCopyright as copyright}
+                <p class="string-HTML">{copyright}</p>
+            {:else}
+                <p>None of the tilesets of this map have a property copyright. This doesn't mean that those tilesets have no license.</p>
+            {/each}
+        </section>
+    </section>
+</div>
+
+
+<style lang="scss">
+  .string-HTML{
+    white-space: pre-line;
+  }
+
+  div.about-room-main {
+    height: calc(100% - 56px);
+    display: grid;
+    grid-template-rows: 20% 40% 30%;
+
+    section.share-url {
+      text-align: center;
+
+      input {
+        width: 85%;
+        border-radius: 32px;
+        padding: 3px;
+      }
+      input::selection {
+        background-color: #209cee;
+      }
+    }
+    section.presentation-map {
+      h3 {
+        width: 100%;
+        text-align: center;
+      }
+      p {
+        max-height: calc(100% - 36px);
+        overflow: auto;
+      }
+    }
+    section.copyright {
+      text-align: center;
+
+      h3:hover {
+        background-color: #3c3e40;
+        border-radius: 32px;
+      }
+      p {
+        max-height: calc(100% - 36px);
+        overflow: auto;
+      }
+      section {
+        max-height: calc(100% - 36px);
+        overflow: auto;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte b/front/src/Components/Menu/AudioGlobalMessage.svelte
similarity index 85%
rename from front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte
rename to front/src/Components/Menu/AudioGlobalMessage.svelte
index 4718d246..1704e732 100644
--- a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte
+++ b/front/src/Components/Menu/AudioGlobalMessage.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
     import { HtmlUtils } from "../../WebRtc/HtmlUtils";
-    import type { GameManager } from "../../Phaser/Game/GameManager";
-    import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
+    import { gameManager } from "../../Phaser/Game/GameManager";
     import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
     import uploadFile from "../images/music-file.svg";
-    import type {PlayGlobalMessageInterface} from "../../Connexion/ConnexionModels";
+    import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
 
     interface EventTargetFiles extends EventTarget {
         files: Array<File>;
     }
 
-    export let gameManager: GameManager;
-
     let gameScene = gameManager.getCurrentGameScene();
     let fileInput: HTMLInputElement;
     let fileName: string;
@@ -43,7 +40,6 @@
             }
             inputAudio.value = '';
             gameScene.connection?.emitGlobalMessage(audioGlobalMessage);
-            disableConsole();
         }
     }
 
@@ -74,11 +70,6 @@
             return '';
         }
     }
-
-    function disableConsole() {
-        consoleGlobalMessageManagerVisibleStore.set(false);
-        consoleGlobalMessageManagerFocusStore.set(false);
-    }
 </script>
 
 
@@ -103,24 +94,17 @@
 
     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;
     }
diff --git a/front/src/Components/Menu/ContactSubMenu.svelte b/front/src/Components/Menu/ContactSubMenu.svelte
new file mode 100644
index 00000000..bf16e42d
--- /dev/null
+++ b/front/src/Components/Menu/ContactSubMenu.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+    import discordImg from '../images/discord_64x64.png'
+    import facebookImg from '../images/facebook_64x64.png'
+    import instagramImg from '../images/instagram_64x64.png'
+    import linkedinImg from '../images/linkedin_64x64.png'
+    import twitterImg from '../images/twitter_64x64.png'
+    import youtubeImg from '../images/youtube_64x64.png'
+
+</script>
+
+<div class="contact-main">
+    <section>
+        <p>
+            The WorkAdventure team is always available to help you.
+            If you have any questions, problems, new features or improvements ideas, or if you just want to give us your feedback,
+            do not hesitate to contact us.
+        </p>
+    </section>
+    <section>
+        <h3>Our Office</h3>
+        <p>
+            The WorkAdventure team has its own offices in ... WorkAdventure!
+            Do not hesitate to come see and talk to us.
+        </p>
+        <a href="https://play.staging.workadventu.re/@tcm/workadventure/wa-village" target="_blank">Visit us</a>
+    </section>
+    <section>
+        <h3>Our Mail</h3>
+        <p>Although we offer a solution to reduce their use, we have an email address that allows us to receive all your requests.</p>
+        <a href="mailto:hello@workadventu.re" target="_blank">hello@workadventu.re</a>
+    </section>
+    <section>
+        <h3>Our web site</h3>
+        <p>If you want to know more about us, follow the link to our web site.</p>
+        <a href="https://workadventu.re/about-us" target="_blank">About us</a>
+    </section>
+    <section>
+        <h3>Our social media</h3>
+        <a href="https://discord.gg/YGtngdh9gt" target="_blank">
+            <img src="{discordImg}" alt="{'Discord'}">
+        </a>
+        <a href="https://www.facebook.com/workadventure.WA" target="_blank">
+            <img src="{facebookImg}" alt="{'Facebook'}">
+        </a>
+        <a href="https://www.instagram.com/workadventure_/" target="_blank">
+            <img src="{instagramImg}" alt="{'Instagram'}">
+        </a>
+        <a href="https://www.linkedin.com/company/workadventure-by-tcm/" target="_blank">
+            <img src="{linkedinImg}" alt="{'LinkedIn'}">
+        </a>
+        <a href="https://twitter.com/Workadventure_" target="_blank">
+            <img src="{twitterImg}" alt="{'Twitter'}">
+        </a>
+        <a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank">
+            <img src="{youtubeImg}" alt="{'Youtube'}">
+        </a>
+    </section>
+</div>
+
+
+<style lang="scss">
+    div.contact-main {
+      height: calc(100% - 56px);
+      width: 100%;
+
+      display: grid;
+      grid-template-rows: 18% 21% 24% 21% 16%;
+
+      section {
+        text-align: center;
+        padding: 4px 5px;
+
+        p {
+          margin: 0;
+        }
+
+        img {
+          height: 50px;
+          width: 50px;
+        }
+      }
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/CreateMapSubMenu.svelte b/front/src/Components/Menu/CreateMapSubMenu.svelte
new file mode 100644
index 00000000..65e2e346
--- /dev/null
+++ b/front/src/Components/Menu/CreateMapSubMenu.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+
+    function goToCreateMapPage() {
+        //const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
+        //TODO fix me: this button can to send us on WorkAdventure BO.
+        //const sparkHost = ADMIN_URL + "/getting-started";
+
+        //The redirection must be only on workadventu.re domain
+        //To day the domain staging cannot be use by customer
+        //TODO: go to getting started ? or map-building ? or two different buttons ?
+        const sparkHost = "https://workadventu.re/getting-started";
+        window.open(sparkHost, "_blank");
+    }
+
+    function goToScriptingApiPage() {
+        //The redirection must be only on workadventu.re domain
+        //The scripting API function could change on other domain and that could break map created with the old function
+        const sparkHost = "https://workadventu.re/map-building/scripting";
+        window.open(sparkHost, "_blank");
+    }
+
+</script>
+
+<div class="create-map-main">
+    <section class="create-map-building">
+        <h3>Create your map</h3>
+        <p>
+            WorkAdventure allows you to create an online space to communicate spontaneously with others.
+            And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
+            Or create your own map from scratch.
+        </p>
+        <button type="button" class="nes-btn is-primary" on:click={goToCreateMapPage}>Create a map</button>
+    </section>
+    <section class="create-map-scripting">
+        <h3>Use the scripting API</h3>
+        <p>Make your map more interactive, more alive and totally unique with the scripting API.</p>
+        <p>(Programming skills are required to use the scripting API).</p>
+        <button type="button" class="nes-btn" on:click={goToScriptingApiPage}>Use a script</button>
+    </section>
+</div>
+
+<style lang="scss">
+    div.create-map-main {
+      height: calc(100% - 56px);
+
+      text-align: center;
+      display: grid;
+      grid-template-rows: 50% 50%;
+    }
+
+</style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/GameQualityMenu.svelte b/front/src/Components/Menu/GameQualityMenu.svelte
deleted file mode 100644
index e57d1336..00000000
--- a/front/src/Components/Menu/GameQualityMenu.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="typescript">
-
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {videoConstraintStore} from "../../Stores/MediaStore";
-
-let valueGame : number = localUserStore.getGameQualityValue();
-let valueVideo : number = localUserStore.getVideoQualityValue();
-let previewValueGame = valueGame;
-let previewValueVideo =  valueVideo;
-
-function saveSetting(){
-
-    if (valueGame !== previewValueGame) {
-        previewValueGame = valueGame;
-        localUserStore.setGameQualityValue(valueGame);
-        window.location.reload();// TODO edit that
-    }
-
-    if (valueVideo !== previewValueVideo) {
-        previewValueVideo = valueVideo;
-        videoConstraintStore.setFrameRate(valueVideo);
-    }
-}
-
-function toggleFullscreen() {
-    const body = document.querySelector('body')
-    if (body) {
-        if (document.fullscreenElement ?? document.fullscreen) {
-            document.exitFullscreen()
-        } else {
-            body.requestFullscreen();
-        }
-    }
-}
-
-</script>
-
-<form class="gameQuality" on:submit|preventDefault={saveSetting}>
-    <section>
-        <h5>Game quality</h5>
-            <p class="cautiousText">(Editing these settings will restart the game)</p>
-            <select bind:value={valueGame} class="select-game-quality">
-                <option value="120">High video quality (120 fps)</option>
-                <option value="60">Medium video quality (60 fps, recommended)</option>
-                <option value="40">Minimum video quality (40 fps)</option>
-                <option value="20">Small video quality (20 fps)</option>
-            </select>
-    </section>
-    <section>
-        <h5>Video quality</h5>
-            <select bind:value={valueVideo} class="select-video-quality">
-                <option value="30">High video quality (30 fps)</option>
-                <option value="20">Medium video quality (20 fps, recommended)</option>
-                <option value="10">Minimum video quality (10 fps)</option>
-                <option value="5">Small video quality (5 fps)</option>
-            </select>
-    </section>
-    <section class="action">
-        <button type="submit" class="gameQualityFormSubmit">Save</button>
-    </section>
-    <section>
-        <button class="toggleFullscreen" on:click|preventDefault={toggleFullscreen}>Toggle fullscreen</button>
-    </section>
-</form>
-
-<style lang="scss">
-    .gameQuality {
-        color: black;
-        background: #eceeee;
-        border: 1px solid #42464b;
-        border-radius: 6px;
-        margin: 20px auto 0;
-        width: 50vw;
-        max-width: 300px;
-    }
-    .gameQuality .cautiousText {
-        font-size: 50%;
-    }
-    .gameQuality h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    .gameQuality select {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-    }
-    .gameQuality section {
-        margin: 10px;
-    }
-    .gameQuality section.action{
-        text-align: center;
-    }
-    .gameQuality button {
-        margin: 10px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    .gameQuality button.gameQualityFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-</style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
new file mode 100644
index 00000000..19bed4e0
--- /dev/null
+++ b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import TextGlobalMessage from './TextGlobalMessage.svelte';
+    import AudioGlobalMessage from './AudioGlobalMessage.svelte';
+
+    let handleSendText: { sendTextMessage(broadcast: boolean): void };
+    let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
+
+    let inputSendTextActive = true;
+    let uploadAudioActive = !inputSendTextActive;
+    let broadcastToWorld = false;
+
+    function activateInputText() {
+        inputSendTextActive = true;
+        uploadAudioActive = false;
+    }
+
+    function activateUploadAudio() {
+        inputSendTextActive = false;
+        uploadAudioActive = true;
+    }
+
+    function send() {
+        if (inputSendTextActive) {
+            handleSendText.sendTextMessage(broadcastToWorld);
+        }
+        if (uploadAudioActive) {
+            handleSendAudio.sendAudioMessage(broadcastToWorld);
+        }
+    }
+</script>
+
+<div class="global-message-main">
+    <div class="global-message-subOptions">
+        <section>
+            <button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={activateInputText}>Text</button>
+        </section>
+        <section>
+            <button type="button" class="nes-btn {uploadAudioActive ? 'is-disabled' : ''}" on:click|preventDefault={activateUploadAudio}>Audio</button>
+        </section>
+    </div>
+    <div class="global-message-content">
+        {#if inputSendTextActive}
+            <TextGlobalMessage bind:handleSending={handleSendText}/>
+        {/if}
+        {#if uploadAudioActive}
+            <AudioGlobalMessage bind:handleSending={handleSendAudio}/>
+        {/if}
+    </div>
+    <div class="global-message-footer">
+        <label>
+            <input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
+            <span>Broadcast to all rooms of the world</span>
+        </label>
+        <section>
+            <button class="nes-btn is-primary" on:click|preventDefault={send}>Send</button>
+        </section>
+    </div>
+</div>
+
+
+
+
+<style lang="scss">
+    div.global-message-main {
+      height: calc(100% - 56px);
+      display: grid;
+      grid-template-rows: 15% 65% 20%;
+
+      div.global-message-subOptions {
+        display: grid;
+        grid-template-columns: 50% 50%;
+        margin-bottom: 20px;
+
+        section {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+
+      div.global-message-footer {
+        margin-bottom: 10px;
+
+        display: grid;
+        grid-template-rows: 50% 50%;
+
+        section {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        label {
+          margin: 10px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          span {
+            font-family: "Press Start 2P";
+          }
+        }
+      }
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte
index 20568621..3ac1f781 100644
--- a/front/src/Components/Menu/Menu.svelte
+++ b/front/src/Components/Menu/Menu.svelte
@@ -1,80 +1,103 @@
 <script lang="typescript">
-    import GameQualityMenu from "./GameQualityMenu.svelte";
-    import EditProfileMenu from "./EditProfileMenu.svelte";
+    import {fly} from "svelte/transition";
+    import type { SvelteComponent } from "svelte";
+    import SettingsSubMenu from "./SettingsSubMenu.svelte";
+    import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
+    import ProfileSubMenu from "./ProfileSubMenu.svelte";
+    import ContactSubMenu from "./ContactSubMenu.svelte";
+    import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
+    import GlobalMessagesSubMenu from "./GlobalMessagesSubMenu.svelte";
+    import {menuVisiblilityStore} from "../../Stores/MenuStore";
 
-    enum SubMenus {
-        settings = 1,
-        editProfile,
-        shareUrl,
-    }
+    //TODO: When we register a new custom menu we need to add it here
+    const SubMenus = new Map<string, typeof SvelteComponent>([
+        ['Settings', SettingsSubMenu],
+        ['Profile', ProfileSubMenu],
+        ['Create a Map', CreateMapSubMenu],
+        ['About the room', AboutRoomSubMenu],
+        ['Global Messages', GlobalMessagesSubMenu], //Remove if player has not the admin tag
+        ['Contact', ContactSubMenu] //Always last (except custom)
+    ]);
 
-    let activeSubMenu: SubMenus = 2;
+    let activeSubMenu = 'Settings';
+    let activeComponent = SubMenus.get(activeSubMenu);
 
-    function switchMenu(menu: SubMenus) {
-        activeSubMenu = menu;
-    }
-
-    function gotToCreateMapPage() {
-        //const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
-        //TODO fix me: this button can to send us on WorkAdventure BO.
-        const sparkHost = "https://workadventu.re/getting-started";
-        window.open(sparkHost, "_blank");
-    }
-</script>
-
-
-<aside class="menuContainer">
-    <section class="menuNav">
-        <nav>
-            <ul>
-                <li class:active={activeSubMenu === SubMenus.settings } on:click={() => switchMenu(SubMenus.settings)}>Settings</li>
-                <li class:active={activeSubMenu === SubMenus.shareUrl } on:click={() => switchMenu(SubMenus.shareUrl)}>Share Url</li>
-                <li class:active={activeSubMenu === SubMenus.editProfile } on:click={() => switchMenu(SubMenus.editProfile)}>Edit Profile</li>
-                <li on:click={() => gotToCreateMapPage()}>Create Map</li>
-                <li>Go to Menu</li>
-            </ul>
-        </nav>
-    </section>
-
-    <section class="subMenuContainer">
-        {#if activeSubMenu === SubMenus.settings}
-            <GameQualityMenu></GameQualityMenu>
-        {:else if activeSubMenu === SubMenus.editProfile}
-            <EditProfileMenu></EditProfileMenu>
-        {/if}
-    </section>
-
-</aside>
-
-<style lang="scss">
-    aside.menuContainer{
-        pointer-events: auto;
-        background: #7a7a7a;
-        position: absolute;
-        width: 30vw;
-        height: 70vh;
-        border-radius: 8px;
-        display: flex;
-        padding:5px;
-        color: white;
-
-    }
-
-    section.menuNav{
-        width:30%;
-        border-right:white solid 4px;
-        nav{
-          ul{
-            padding: 10px;
-            list-style: none;
-            li{
-              cursor: pointer;
-            }
-            li.active{
-                background: #6f6f6f ;
-            }
-          }
+    function switchMenu(menu: string) {
+        if (SubMenus.has(menu)) {
+            activeSubMenu = menu
+            activeComponent = SubMenus.get(activeSubMenu);
         }
     }
 
+    function closeMenu() {
+        menuVisiblilityStore.set(false);
+    }
+    function onKeyDown(e:KeyboardEvent) {
+        if (e.key === 'Escape') {
+            closeMenu();
+        }
+    }
+</script>
+
+<svelte:window on:keydown={onKeyDown}/>
+
+
+<div class="menu-container-main">
+    <div class="menu-nav-sidebar nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
+        <h2>Menu</h2>
+        <nav>
+            {#each [...SubMenus] as [submenuKey, submenuComponent]}
+                <button type="button" class="nes-btn {activeComponent === submenuComponent ? 'is-disabled' : ''}" on:click|preventDefault={() => switchMenu(submenuKey)}>{submenuKey}</button>
+            {/each}
+        </nav>
+    </div>
+    <div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
+        <h2>{activeSubMenu}</h2>
+        {#if activeComponent}
+            <svelte:component this="{activeComponent}"/>
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+  .nes-container {
+    padding: 5px;
+  }
+
+  div.menu-container-main {
+    --size-first-columns-grid: 15%; //TODO: clamp value
+
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    height: 70vh;
+    width: 75vw;
+    top: 10vh;
+
+    position: relative;
+    margin: auto;
+
+    display: grid;
+    grid-template-columns: var(--size-first-columns-grid) calc(100% - var(--size-first-columns-grid));
+    grid-template-rows: 100%;
+
+    h2 {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    div.menu-nav-sidebar {
+      background-color: #333333;
+      color: whitesmoke;
+
+      nav button {
+        width: calc(100% - 10px);
+        margin-bottom: 10px;
+      }
+    }
+
+    div.menu-submenu-container {
+      background-color: #333333;
+      color: whitesmoke;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte
index 831a2700..738e20a5 100644
--- a/front/src/Components/Menu/MenuIcon.svelte
+++ b/front/src/Components/Menu/MenuIcon.svelte
@@ -1,39 +1,29 @@
 <script lang="typescript">
-    import {menuVisible} from "../../Stores/MenuStore";
-
-    let isOpen : Boolean = false;
+    import {menuVisiblilityStore} from "../../Stores/MenuStore";
+    import {get} from "svelte/store";
 
     function openMenu(){
-        isOpen = !isOpen; //Devrait être dans le store/menuVisible.set(isOPen);/
-        if(isOpen) menuVisible.set(true);
-        else menuVisible.set(false);
+        menuVisiblilityStore.set(!get(menuVisiblilityStore))
     }
 </script>
 
 <main class="menuIcon">
-    <section>
-        <button on:click|preventDefault={openMenu}>
-             <img src="/static/images/logo-WA-min.png" alt="open menu">
-        </button>
-    </section>
+    <img src="/static/images/logo-WA-min.png" alt="open menu" on:click|preventDefault={openMenu}>
 </main>
 
 <style lang="scss">
-    .menuIcon button {
-        pointer-events: auto;
-        border-radius: 200px;
-        img {
-            width: 60px;
-            padding-top: 0;
-            cursor: url('/resources/logos/cursor_pointer.png'), pointer;
-        }
+  .menuIcon {
+    pointer-events: auto;
+    margin: 25px;
+    img {
+      width: 60px;
+      padding-top: 0;
+      //cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
-    .menuIcon section {
-        margin: 25px;
-    }
-    @media only screen and (max-height: 700px) {
-        .menuIcon section {
-            margin: 100px;
-        }
+  }
+  @media only screen and (max-height: 700px) {
+    .menuIcon {
+      margin: 100px;
     }
+  }
 </style>
diff --git a/front/src/Components/Menu/EditProfileMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte
similarity index 54%
rename from front/src/Components/Menu/EditProfileMenu.svelte
rename to front/src/Components/Menu/ProfileSubMenu.svelte
index 94dd4308..1f28bb8b 100644
--- a/front/src/Components/Menu/EditProfileMenu.svelte
+++ b/front/src/Components/Menu/ProfileSubMenu.svelte
@@ -1,27 +1,20 @@
 <script lang="typescript">
-
     import {gameManager} from "../../Phaser/Game/GameManager";
     import {SelectCompanionScene, SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
-    import {menuIconVisible, menuVisible} from "../../Stores/MenuStore";
+    import {menuIconVisiblilityStore, menuVisiblilityStore} from "../../Stores/MenuStore";
     import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
     import {LoginScene, LoginSceneName} from "../../Phaser/Login/LoginScene";
     import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore";
     import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
     import {SelectCharacterScene, SelectCharacterSceneName} from "../../Phaser/Login/SelectCharacterScene";
-
-    enum EditState {
-        name = 1,
-        skin,
-        companion,
-    }
-
-    let currentEditState: EditState = 2;
+    import {connectionManager} from "../../Connexion/ConnectionManager";
 
 
     function disableMenuStores(){
-        menuVisible.set(false);
-        menuIconVisible.set(false);
+        menuVisiblilityStore.set(false);
+        menuIconVisiblilityStore.set(false);
     }
+
     function openEditCompanionScene(){
         disableMenuStores();
         selectCompanionSceneVisibleStore.set(true);
@@ -40,34 +33,41 @@
         gameManager.leaveGame(SelectCharacterSceneName,new SelectCharacterScene());
     }
 
-</script>
-
-<form class="EditProfile">
-    <section>
-        <h5>Edit your profile</h5>
-    </section>
-    <section>
-        <button type="submit" class="EditName"  on:click|preventDefault={openEditNameScene}>Edit Name</button>
-    </section>
-    <section class="action">
-        <button type="submit" class="EditSkin"  on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
-    </section>
-    <section>
-        <button class="EditCompanion"  on:click|preventDefault={openEditCompanionScene} >Edit Companion</button>
-    </section>
-</form>
-
-<style lang="scss">
-
-    .EditProfile {
-        color: black;
-        background: #eceeee;
-        border: 1px solid #42464b;
-        border-radius: 6px;
-        margin: 20px auto 0;
-        width: 50vw;
-        max-width: 300px;
+    function clickLogin() {
+        connectionManager.loadOpenIDScreen();
     }
 
+</script>
 
+<div class="customize-main">
+    <section>
+        <button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>Edit Name</button>
+    </section>
+    <section>
+        <button type="button" class="nes-btn is-rounded" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
+    </section>
+    <section>
+        <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
+    </section>
+    <section>
+        <button type="button" class="nes-btn is-primary" on:click|preventDefault={clickLogin}>Login</button>
+    </section>
+</div>
+
+<style lang="scss">
+    div.customize-main{
+      display: grid;
+      grid-template-rows: 33% 33% 33%; //TODO: clamp values
+
+      section {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        button {
+          height: 50px; //TODO: clamp value
+          width: 250px; //TODO: clamp value
+        }
+      }
+    }
 </style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte
new file mode 100644
index 00000000..820dc24b
--- /dev/null
+++ b/front/src/Components/Menu/SettingsSubMenu.svelte
@@ -0,0 +1,127 @@
+<script lang="typescript">
+import {localUserStore} from "../../Connexion/LocalUserStore";
+import {videoConstraintStore} from "../../Stores/MediaStore";
+import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+
+let fullscreen : boolean = localUserStore.getFullscreen();
+let notification : boolean = localUserStore.getNotification() === 'granted';
+let valueGame : number = localUserStore.getGameQualityValue();
+let valueVideo : number = localUserStore.getVideoQualityValue();
+let previewValueGame = valueGame;
+let previewValueVideo =  valueVideo;
+
+function saveSetting(){
+    if (valueGame !== previewValueGame) {
+        previewValueGame = valueGame;
+        localUserStore.setGameQualityValue(valueGame);
+        window.location.reload();// TODO edit that
+    }
+
+    if (valueVideo !== previewValueVideo) {
+        previewValueVideo = valueVideo;
+        videoConstraintStore.setFrameRate(valueVideo);
+    }
+}
+
+function changeFullscreen() {
+    const body = HtmlUtils.querySelectorOrFail('body');
+    if (body) {
+        if (document.fullscreenElement !== null && !fullscreen) {
+            document.exitFullscreen()
+        } else {
+            body.requestFullscreen();
+        }
+        localUserStore.setFullscreen(fullscreen);
+    }
+}
+
+function changeNotification() {
+    if (Notification.permission === 'granted') {
+        localUserStore.setNotification(notification ? 'granted' : 'denied');
+    } else {
+        Notification.requestPermission().then((response) => {
+            if (response === 'granted') {
+                localUserStore.setNotification(notification ? 'granted' : 'denied');
+            } else {
+                localUserStore.setNotification('denied');
+                notification = false;
+            }
+        })
+    }
+}
+</script>
+
+<div class="settings-main" on:submit|preventDefault={saveSetting}>
+    <section>
+        <h3>Game quality</h3>
+            <select bind:value={valueGame}>
+                <option value="{120}">High video quality (120 fps)</option>
+                <option value="{60}">Medium video quality (60 fps, recommended)</option>
+                <option value="{40}">Minimum video quality (40 fps)</option>
+                <option value="{20}">Small video quality (20 fps)</option>
+            </select>
+    </section>
+    <section>
+        <h3>Video quality</h3>
+            <select bind:value={valueVideo}>
+                <option value="{30}">High video quality (30 fps)</option>
+                <option value="{20}">Medium video quality (20 fps, recommended)</option>
+                <option value="{10}">Minimum video quality (10 fps)</option>
+                <option value="{5}">Small video quality (5 fps)</option>
+            </select>
+    </section>
+    <section class="settings-section-save">
+        <p>(Saving these settings will restart the game)</p>
+        <button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}>Save</button>
+    </section>
+    <section class="settings-section-noSaveOption">
+        <label>
+            <input type="checkbox" class="nes-checkbox is-dark" bind:checked={fullscreen} on:change={changeFullscreen}/>
+            <span>Fullscreen</span>
+        </label>
+        <label>
+            <input type="checkbox" class="nes-checkbox is-dark" bind:checked={notification} on:change={changeNotification}>
+            <span>Notifications</span>
+        </label>
+    </section>
+</div>
+
+<style lang="scss">
+  div.settings-main {
+    height: calc(100% - 56px);
+    display: grid;
+    grid-template-rows: 25% 25% 25% 20%;
+
+    section {
+      width: 100%; //TODO clamp value
+      padding: 20px 20px 0;
+      text-align: center;
+
+      select {
+        border-radius: 16px;
+        padding: 10px;
+        margin: 5px;
+      }
+      select:focus {
+        outline: none;
+      }
+    }
+    section.settings-section-save {
+      text-align: center;
+      p {
+        margin: 16px 0;
+      }
+    }
+    section.settings-section-noSaveOption {
+      --nb-noSaveOptions: 2; //number of sub-element in the section
+      display: grid;
+      grid-template-columns: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element
+
+      label {
+        text-align: center;
+        width: 100%;
+        margin: 0;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte b/front/src/Components/Menu/TextGlobalMessage.svelte
similarity index 75%
rename from front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
rename to front/src/Components/Menu/TextGlobalMessage.svelte
index a9817a98..6661b51c 100644
--- a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
+++ b/front/src/Components/Menu/TextGlobalMessage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
-    import {onDestroy, onMount} from "svelte";
-    import type { GameManager } from "../../Phaser/Game/GameManager";
+    import { menuInputFocusStore } from "../../Stores/MenuStore";
+    import { onDestroy, onMount } from "svelte";
+    import { gameManager } from "../../Phaser/Game/GameManager";
     import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
     import type { Quill } from "quill";
     import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
@@ -30,13 +30,10 @@
         // remove formatting button
     ];
 
-    export let gameManager: GameManager;
-
     const gameScene = gameManager.getCurrentGameScene();
-    let quill: Quill;
-    let INPUT_CONSOLE_MESSAGE: HTMLDivElement;
-
     const MESSAGE_TYPE = AdminMessageEventTypes.admin;
+    let quill: Quill;
+    let QUILL_EDITOR: HTMLDivElement;
 
     export const handleSending = {
         sendTextMessage(broadcastToWorld: boolean) {
@@ -53,39 +50,31 @@
 
             quill.deleteText(0, quill.getLength());
             gameScene.connection?.emitGlobalMessage(textGlobalMessage);
-            disableConsole();
         }
     }
 
     //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, {
+        quill = new Quill(QUILL_EDITOR, {
             placeholder: 'Enter your message here...',
             theme: 'snow',
             modules: {
                 toolbar: toolbarOptions
             },
         });
-
-        consoleGlobalMessageManagerFocusStore.set(true);
+        menuInputFocusStore.set(true);
     });
 
     onDestroy(() => {
-        consoleGlobalMessageManagerFocusStore.set(false);
+        menuInputFocusStore.set(false);
     })
-
-    function disableConsole() {
-        consoleGlobalMessageManagerVisibleStore.set(false);
-        consoleGlobalMessageManagerFocusStore.set(false);
-    }
 </script>
 
 <section class="section-input-send-text">
-    <div class="input-send-text" bind:this={INPUT_CONSOLE_MESSAGE}></div>
+    <div class="input-send-text" bind:this={QUILL_EDITOR}></div>
 </section>
 
 
diff --git a/front/src/Components/images/discord_64x64.png b/front/src/Components/images/discord_64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..89c7de1bcd5090bb7a3517b8c070d698e75b3920
GIT binary patch
literal 666
zcmV;L0%iS)P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px%R7pfZRCt{2o6k!EK@`WoBkCeT;w>l;BKrsWC%Sa=-l?--P=7-~Lg!B2yLIW-
zrK{&4MGy+QiGhd-+93zqhr6>sW_McWeNMYOJF{=!`_7vms{$UhJ41Q6^tvY_2molE
z)ixI9QZ?ltBIH5q`ps2PF8%tZS}9~&0i*F;0KjCra9wX-9RXkkAiv?-5?Fg|GM%Mq
zPZCfCi@zt<D?rF>KN`;g0F&t=(|uk=xs($CP^}aIumX_Bs*gyIY(by*g^p_0D}Wtf
z+5pqA156uWnoTpoNZel5eajooE&!mmx8r-?@Z$>r@NjqRd*8)PFNAg8Sg!!l?hIYy
z;`?W~d4MYN6jkJOw@2CEbzJAHfT#+fk&=B}MbI3eg64>zN?-*LVvhn|**$DuRzV{y
zpQ{=zRImc#HV`)gLD8)!iS-I#2bea%G@)}qQhhNl(yp*GL+cg54lr$iX%crpquC9-
zPS8;=EY>R^@M<t@_NQxvpgTQL>ruQ$16~ahwCxE}=;~0l4-mIrR9FE?HB4t_L32pd
zdQo8oB>jM>5lm~%VZ8#_0j3QwO>76GHD^!ixz;Nn^p_#8>`bGfd$%}f`>GuwUJDSk
zeH)bMR)Vg`OIQJf#C{*3dt`_kc?m0k5L*FRgB3u?Kfk=XF4PYX44IM+^nI;Y06W06
z0j9}g^&c9?DFOg`{ef##$a+rb^#`tV$0-T`n9aTcumaZqpgKK&l80NZ0Ic5m@%{t=
zD`4ZUuy0Pt8nn+-tXF{WD)7n)8N}7+Db_3C2i~LAOr>!eMgRZ+07*qoM6N<$f=G=a
A9smFU

literal 0
HcmV?d00001

diff --git a/front/src/Components/images/facebook_64x64.png b/front/src/Components/images/facebook_64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..915801491a0e4ccc6107648da94b8b383605c4e9
GIT binary patch
literal 507
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=Ea{HEjtmSN`)Ym%PG(?W+~n!v
z7*a9k?QBE8!v+$q^MluiBz6Q?A99=_Xx_k?*LbAkh;BlYv_cx2L{+=dwpB(ZS>X$K
z);7*qGI8pu_3QrUcfH+GRav_~+r86?ce%O#vx2~KKLrhjid}Z=WPJ8`-E^8_X<@Tl
zn|Dd3IKze4>5l3NHm5`xM2@bx^8a52r-Kkf?8WU2b+Vi1atl}=e3h^Ki$%lucE7tN
z!vc*o$Llr1nYThg`WRFgFGO7JC`@6`s?+_pKk5so0P_u|8zF0%SMbQ|Mb-X$@#o&l
zKQDw8*fy|kSa_Z>H+!G%MRf<B1nvZ7kdPoq^@Zz<>vpXBI=jP;F^M6XLE5lEx1m?!
zfY^a!x2+O_fB#$deqwb~Uk76jW6lwVZ474UisBaJ^}gHXKB2lv+6~p@7YAQQuT0MW
z-=K1o|Jzr$`3zvAkG+zewPf=hu`|mjU;6xI;d#!_FPB{Lvx;IoaQ*r5O>g5bl`Z`I
zT${n6tjK%XBlgdyXTP4t67ps3T;UrxOz*bDe*S;#wl~-8`7ASL8N4|)C*k@Y-!Gg$
Z*gijvUf5P(ejgZ{44$rjF6*2UngDvP+bjS8

literal 0
HcmV?d00001

diff --git a/front/src/Components/images/instagram_64x64.png b/front/src/Components/images/instagram_64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe968f3385fed0b1549522c5a3457ab39b812ca2
GIT binary patch
literal 754
zcmV<O0uB9%P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px%tVu*cRCt{2n?Gn2K@`Tn(IuxbNKR2OM=VlEOoHMWD+>!n5NxzCHYo!lrqMQ?
zrC<>R3+>W~g(-prlvGxN9x7%JB&b0WC2-`5{PB{ISj551^KR!hv+MIR@7LVU&YPLX
z+wZ;I*}GGy!O-xWKHR8fQx9FQf4B^{(zzPiOcVg*pI)!pxhr9R8V;ooF5f5`9S2)8
z0D$(kmWEcq;>^4PfXe)masEPh2Y@I5L6vhG08lDdu=TSRV-Gu{R~S6BEywC*qWh)I
zgeq8VZHNMNwf{D|0Kk658=XwH830hY_5^?^00DmINPAlg0Qa1~clJdr2lC~QM!V43
z6WM=$@^)l<qWga2di!!&qb7K-00{uM1Kg;g;W;BG-i0N@AnlxYh1LKHtqBKuaz@*G
z1xNt69pEOQyS4paz7rF(2K;rOCHHMgQaP`4ovu&Ywwgc@1#ml1FSaMV?IH?roxqmk
zadVQA)|J<IuK)=Ew*%Y+^sVaQ@(eM#7;D0~`}2Q2AH{nGNC3DU;6?(#?Ep6t0B#4k
z`R{gv*`uFRov-=Gy3zJt0TKXi2e=7N-F#!5SSw8t6Z2X8+}&4}DNXydbJ`W}6(9lN
zc7U72p99vOT`}7E@lmJw3YTs<jkn>w0we(34setDUVzpF8y_C!>_!RVy#gcv+zxOP
zy9NYT&HH-X9Jg^|!2DjqRul5$51iKXUI7vSZU?wg;YhFXJHcbePeu;defn`^f6_I9
zLTeDkws)AC{%W+nSAYb7+W~G=IMNFM$n4n*0I2+2PP8VZP28N%G&ODhi)>{DfG7Y#
zSO4Z)VXcInj=u7J#peJ-0af<`3iwkKJ{8|b|8ul>#>s)nw~J2W*QYxo`)SToL;?Ch
k*8<H>sR=aaDc&pK7o`Kb4YB)v=l}o!07*qoM6N<$f_Su7MgRZ+

literal 0
HcmV?d00001

diff --git a/front/src/Components/images/linkedin_64x64.png b/front/src/Components/images/linkedin_64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fd3b1af8cd105b845a91c9c8994535b776e58c4
GIT binary patch
literal 506
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=Ea{HEjtmSN`)Ym%PG(?W-011z
z7*a9k?QC1W!ww=X=@WyObYF6{V{~oV!8pBR!SW@IR;H#VQ(ij8D492$VC7vadeP;j
zhKAF|oGGz4?<KfeN520p^}b)USN-!mUDdD^$=eJT`@Xd-T)@C^J$>qIb;YSN%30RC
zYPXfQG1s1PFH~O;^C~-L?c1-%wHYQcq=;t!k~Z(#dG2WY?1Zh>o_35`x8I&#YParM
z;q^WJ4;|DM<QXThC^WB}Xzy+n@cFDo`PL`G3Tzu#HwZG{V7d`v%lYo;vxl1s<L~a>
z^7q98mH7;Y4Z01z5(mT%Ec+U(Fir2h@=uly#vI0+CR<LqUw=L?w`6$m_w(wHHu5Lc
z9e5JB6E5#!mywD;yL->wn268Y&Z|O&i%o0~gdhI@R`B<v8m1!*+ZfD}7@`@Z;ikKR
z^eV$00=7aVjr;fhgGbpty%dfuzZN3YaPo?ugPocur%PnSWvH`HCfr;2^6OWx$dc9S
z7N-4i@$v7^n=^PGI42!4d8K5jHRH2c@$VTun6&DpbKY@oe0XJ#_b1MPt=6Tsigs&e
dl>-B4|JxIO5w;)B#{nag!PC{xWt~$(699<p(m4PC

literal 0
HcmV?d00001

diff --git a/front/src/Components/images/twitter_64x64.png b/front/src/Components/images/twitter_64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..281bd594738ce55017070a7f610cff837bf10bf0
GIT binary patch
literal 484
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=Ea{HEjtmSN`)Ym%PG(?WobBo2
z7*a9k?QDC$!v+#Z@3$|~JInBe<xS62fp86P{zHNimQMVaT4NSEojP$(m__1H(}Y70
zq&7^o7n-rh>R;XD<nXtjUw@u%;l(0*$KLjK+U2h^Jp>qb?6%35wUG=xC8!j?wp~0u
zVdiZ6y1gCNjJHpn*|_GY><&xj1)L7oE?sB1-#7K^jG}+6_6Pk$Ciyqq$lAZw$34>f
zN_JgG>OBsIHR8`KezK%ktPy;Dg5_F`{=Z1wpDZgFa~N}Otz-V@vf1jb?DXT#6Ia?f
z{r|Gw!;UeFA(}zjv_ZF_SL%S+0XN<R?u5l`8(24R?h}_-wDVMRjsFT;*H4@Q%r}^B
zfQ`Aru#LfNaXkAA+k?u^aOHuh@>Tu@4bxVD1zFZJ2JNvr?tGqSqbJn5gUbr$^X=cE
z<|*0v_nf5<M07UKH`!S??|gYvet8w=y;;X|@}B+v$L1jX;W6(j-^A$4ehqU!zvXIB
zTTrThAznD?aP()plj;su?z^&_YAmwvssCiDVLIjM!x@~}0*XBbPgg&ebxsLQ0Ig8P
A!2kdN

literal 0
HcmV?d00001

diff --git a/front/src/Components/images/youtube_64x64.png b/front/src/Components/images/youtube_64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c2d19f0011a7860cb3df6da08ff1745d06aaa29
GIT binary patch
literal 463
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D%zJ3U<-Ln`LH
zo$cFo$U&fWb$f%s>5qJJi3;BSN-uVb?CG>l?3-YHMu#>0+_KyAk1Y|~_*pfqmfQD|
zWBmR-buNmIQ9q*BUV66l?VL^l7ngnCelKs9Z}yT@483(i|MSlZ5y6SUvHUBaKdm`d
z`Q$VA$GbI5lLWu>`PQDzZh75Z!KAWen}2rdHIw|g4WE+)UGnax*)dK%Vme=DrYY~r
z<rd3#)p_jr$+ClS3xkw-gP6l(whK%dT7N}ayNe!6IDNP1fymAJC%eG#Q=h?n29ToQ
zeat2gV4TC{4Q>x%9I*B~3{ebcU%Y3on|Au#$M^H*=i4#nG3Yk1y=N%xmFIKaf4_za
zq{R0l--7Eq+7K4}QNR8@Zm-ER;Rhf`95So6OYqf{?1<e4HDKAKA3x66$lcf*ss1Fp
zPVV_{>F>6Tvv+KCP33Xl^(ph-yax5-R@RAGPqOWf*DyuZpSoLmXo;{wVc+a&j-NSy
ZurFC)6<^-ra}gLr44$rjF6*2UngAe6#<&0g

literal 0
HcmV?d00001

diff --git a/front/src/Connexion/LocalUserStore.ts b/front/src/Connexion/LocalUserStore.ts
index 07c2487e..ac7d159a 100644
--- a/front/src/Connexion/LocalUserStore.ts
+++ b/front/src/Connexion/LocalUserStore.ts
@@ -16,6 +16,7 @@ const lastRoomUrl = "lastRoomUrl";
 const authToken = "authToken";
 const state = "state";
 const nonce = "nonce";
+const notification = "notificationPermission";
 
 class LocalUserStore {
     saveUser(localUser: LocalUser) {
@@ -128,6 +129,14 @@ class LocalUserStore {
         return localStorage.getItem(authToken);
     }
 
+    setNotification(value: string): void {
+        localStorage.setItem(notification, value);
+    }
+
+    getNotification(): string | null {
+        return localStorage.getItem(notification);
+    }
+
     generateState(): string {
         const newState = uuidv4();
         localStorage.setItem(state, newState);
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 153877e1..c0a63193 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -9,7 +9,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import { get } from "svelte/store";
 import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
 import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
-import { menuIconVisible } from "../../Stores/MenuStore";
+import { menuIconVisiblilityStore } from "../../Stores/MenuStore";
 
 /**
  * This class should be responsible for any scene starting/stopping
@@ -100,7 +100,7 @@ export class GameManager {
         this.currentGameSceneName = scene.scene.key;
         const menuScene: MenuScene = scene.scene.get(MenuSceneName) as MenuScene;
         menuScene.revealMenuIcon();
-        menuIconVisible.set(true);
+        menuIconVisiblilityStore.set(true);
     }
 
     /**
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index 640b5ff5..e0c31068 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@@ -6,7 +6,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import { gameReportKey, gameReportRessource, ReportMenu } from "./ReportMenu";
 import { connectionManager } from "../../Connexion/ConnectionManager";
 import { GameConnexionTypes } from "../../Url/UrlManager";
-import { menuIconVisible, menuVisible } from "../../Stores/MenuStore";
+import { menuIconVisiblilityStore, menuVisiblilityStore } from "../../Stores/MenuStore";
 import { videoConstraintStore } from "../../Stores/MediaStore";
 import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
 import { HtmlUtils } from "../../WebRtc/HtmlUtils";
@@ -163,7 +163,7 @@ export class MenuScene extends Phaser.Scene {
     }
 
     openSideMenu() {
-        menuVisible.set(true);
+        menuVisiblilityStore.set(true);
         if (this.sideMenuOpened) return;
 
         /*this.closeAll();
@@ -188,7 +188,7 @@ export class MenuScene extends Phaser.Scene {
     }
 
     private closeSideMenu(): void {
-        menuVisible.set(false);
+        menuVisiblilityStore.set(false);
         /* if (!this.sideMenuOpened) return;
         this.sideMenuOpened = false;
         this.closeAll();
diff --git a/front/src/Stores/MenuStore.ts b/front/src/Stores/MenuStore.ts
index 3ed4c1b9..34de65b9 100644
--- a/front/src/Stores/MenuStore.ts
+++ b/front/src/Stores/MenuStore.ts
@@ -1,8 +1,9 @@
 import { writable } from "svelte/store";
 import Timeout = NodeJS.Timeout;
 
-export const menuIconVisible = writable(false);
-export const menuVisible = writable(false);
+export const menuIconVisiblilityStore = writable(false);
+export const menuVisiblilityStore = writable(false);
+export const menuInputFocusStore = writable(false);
 
 let warningContainerTimeout: Timeout | null = null;
 function createWarningContainerStore() {
diff --git a/front/src/Stores/UserInputStore.ts b/front/src/Stores/UserInputStore.ts
index 993d8795..e24b3afe 100644
--- a/front/src/Stores/UserInputStore.ts
+++ b/front/src/Stores/UserInputStore.ts
@@ -1,11 +1,11 @@
 import { derived } from "svelte/store";
-import { consoleGlobalMessageManagerFocusStore } from "./ConsoleGlobalMessageManagerStore";
+import { menuInputFocusStore } from "./MenuStore";
 import { chatInputFocusStore } from "./ChatStore";
 
 //derived from the focus on Menu, ConsoleGlobal, Chat and ...
 export const enableUserInputsStore = derived(
-    [consoleGlobalMessageManagerFocusStore, chatInputFocusStore],
-    ([$consoleGlobalMessageManagerFocusStore, $chatInputFocusStore]) => {
-        return !$consoleGlobalMessageManagerFocusStore && !$chatInputFocusStore;
+    [menuInputFocusStore, chatInputFocusStore],
+    ([$menuInputFocusStore, $chatInputFocusStore]) => {
+        return !$menuInputFocusStore && !$chatInputFocusStore;
     }
 );
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 2f8c637a..6cb699b6 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -11,6 +11,7 @@ import { cowebsiteCloseButtonId } from "./CoWebsiteManager";
 import { gameOverlayVisibilityStore } from "../Stores/GameOverlayStoreVisibility";
 import { layoutManagerActionStore, layoutManagerVisibilityStore } from "../Stores/LayoutManagerStore";
 import { get } from "svelte/store";
+import { localUserStore } from "../Connexion/LocalUserStore";
 
 export class MediaManager {
     startScreenSharingCallBacks: Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
@@ -181,7 +182,11 @@ export class MediaManager {
     }
 
     public hasNotification(): boolean {
-        return Notification.permission === "granted";
+        if (Notification.permission === "granted") {
+            return localUserStore.getNotification() === "granted";
+        } else {
+            return false;
+        }
     }
 
     public requestNotification() {
diff --git a/front/style/inputTextGlobalMessageSvelte-Style.scss b/front/style/TextGlobalMessageSvelte-Style.scss
similarity index 76%
rename from front/style/inputTextGlobalMessageSvelte-Style.scss
rename to front/style/TextGlobalMessageSvelte-Style.scss
index 46b54e2c..d09c94ad 100644
--- a/front/style/inputTextGlobalMessageSvelte-Style.scss
+++ b/front/style/TextGlobalMessageSvelte-Style.scss
@@ -1,15 +1,15 @@
-//InputTextGlobalMessage
+//TextGlobalMessage
 section.section-input-send-text {
+  --height-toolbar: 15%;
   height: 100%;
 
   .ql-toolbar{
-    max-height: 100px;
-
+    height: var(--height-toolbar);
     background: whitesmoke;
   }
 
   div.input-send-text{
-    height: calc(100% - 100px);
+    height: calc(100% - var(--height-toolbar));
     overflow: auto;
 
     color: whitesmoke;
diff --git a/front/style/index.scss b/front/style/index.scss
index e69517fb..7fea8696 100644
--- a/front/style/index.scss
+++ b/front/style/index.scss
@@ -3,4 +3,4 @@
 @import "style";
 @import "mobile-style.scss";
 @import "fonts.scss";
-@import "inputTextGlobalMessageSvelte-Style.scss";
+@import "TextGlobalMessageSvelte-Style";
diff --git a/front/style/style.scss b/front/style/style.scss
index 24da5a96..765379aa 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -1,5 +1,4 @@
 *{
-    font-family: Lato;
     cursor: url('./images/cursor_normal.png'), auto;
 }
 * a, button, select{