Improve game overlay UI

front/src/Components/Menu/AboutRoomSubMenu.svelte

@@ -100,6 +100,8 @@
 </div>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
     .string-HTML {
         white-space: pre-line;
     }
@@ -126,7 +128,7 @@
         }
     }
 
-    @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+    @include media-breakpoint-up(md) {
         div.about-room-main {
             section.container-overflow {
                 height: calc(100% - 120px);

front/src/Components/Menu/GlobalMessagesSubMenu.svelte

@@ -67,6 +67,8 @@
 </div>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
     div.global-message-main {
         height: calc(100% - 50px);
         display: grid;
@@ -109,7 +111,7 @@
         }
     }
 
-    @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+    @include media-breakpoint-up(md) {
         .global-message-content {
             height: calc(100% - 5px);
         }

front/src/Components/Menu/GuestSubMenu.svelte

@@ -36,6 +36,8 @@
 </div>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
     div.guest-main {
         height: calc(100% - 56px);
 
@@ -57,7 +59,7 @@
         }
     }
 
-    @media only screen and (max-width: 900px), only screen and (max-height: 600px) {
+    @include media-breakpoint-up(md) {
         div.guest-main {
             section.share-url.not-mobile {
                 display: none;

front/src/Components/Menu/Menu.svelte

@@ -125,6 +125,8 @@
 </div>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
     .nes-container {
         padding: 5px;
     }
@@ -136,11 +138,15 @@
         pointer-events: auto;
         height: 80%;
         width: 75%;
-        top: 10%;
+        top: 4%;
 
-        position: relative;
-        z-index: 80;
-        margin: auto;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+
+        position: absolute;
+        z-index: 900;
 
         display: grid;
         grid-template-columns: var(--size-first-columns-grid) calc(100% - var(--size-first-columns-grid));
@@ -173,12 +179,12 @@
         }
     }
 
-    @media only screen and (max-width: 800px) {
+    @include media-breakpoint-up(md) {
         div.menu-container-main {
             --size-first-columns-grid: 120px;
             height: 70%;
             top: 55px;
-            width: 100%;
+            width: 95%;
             font-size: 0.5em;
 
             div.menu-nav-sidebar {

front/src/Components/Menu/MenuIcon.svelte

@@ -14,6 +14,7 @@
     function showMenu() {
         menuVisiblilityStore.set(!get(menuVisiblilityStore));
     }
+
     function showChat() {
         chatVisibilityStore.set(true);
     }
@@ -21,72 +22,94 @@
     function register() {
         window.open(`${ADMIN_URL}/second-step-register`, "_self");
     }
+
     function showInvite() {
         showShareLinkMapModalStore.set(true);
     }
+
+    function noDrag() {
+        return false;
+    }
 </script>
 
 <svelte:window />
 
-<main class="menuIcon">
+<main class="menuIcon noselect">
     {#if $limitMapStore}
         <img
             src={logoInvite}
             alt={$LL.menu.icon.open.invite()}
             class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
             on:click|preventDefault={showInvite}
         />
         <img
             src={logoRegister}
             alt={$LL.menu.icon.open.register()}
             class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
             on:click|preventDefault={register}
         />
     {:else}
-        <img src={logoWA} alt={$LL.menu.icon.open.menu()} class="nes-pointer" on:click|preventDefault={showMenu} />
-        <img src={logoTalk} alt={$LL.menu.icon.open.chat()} class="nes-pointer" on:click|preventDefault={showChat} />
+        <img
+            src={logoWA}
+            alt={$LL.menu.icon.open.menu()}
+            class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
+            on:click|preventDefault={showMenu}
+        />
+        <img
+            src={logoTalk}
+            alt={$LL.menu.icon.open.chat()}
+            class="nes-pointer"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
+            on:click|preventDefault={showChat}
+        />
     {/if}
 </main>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
     .menuIcon {
-        display: inline-grid;
-        z-index: 90;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 20%;
+        z-index: 800;
         position: relative;
-        margin: 25px;
+
         img {
             pointer-events: auto;
             width: 60px;
             padding-top: 0;
-            margin: 3px;
-            image-rendering: pixelated;
+            margin: 5%;
         }
     }
     .menuIcon img:hover {
         transform: scale(1.2);
     }
-    @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+    @include media-breakpoint-up(sm) {
         .menuIcon {
-            display: inline-grid;
-            z-index: 90;
-            position: relative;
-            margin: 25px;
+            margin-top: 10%;
             img {
                 pointer-events: auto;
                 width: 60px;
                 padding-top: 0;
-                margin: 3px;
             }
         }
         .menuIcon img:hover {
             transform: scale(1.2);
         }
-        @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
-            .menuIcon {
-                margin: 3px;
-                img {
-                    width: 50px;
-                }
+    }
+
+    @include media-breakpoint-up(md) {
+        .menuIcon {
+            img {
+                width: 50px;
             }
         }
     }

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -102,6 +102,8 @@
 </div>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
     div.customize-main {
         width: 100%;
         display: inline-flex;
@@ -161,7 +163,7 @@
         }
     }
 
-    @media only screen and (max-width: 800px) {
+    @include media-breakpoint-up(md) {
         div.customize-main.content section button {
             width: 130px;
         }

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -2,11 +2,11 @@
     import { localUserStore } from "../../Connexion/LocalUserStore";
     import { videoConstraintStore } from "../../Stores/MediaStore";
     import { HtmlUtils } from "../../WebRtc/HtmlUtils";
-    import { isMobile } from "../../Enum/EnvironmentVariable";
     import { menuVisiblilityStore } from "../../Stores/MenuStore";
     import LL, { locale } from "../../i18n/i18n-svelte";
     import type { Locales } from "../../i18n/i18n-types";
     import { displayableLocales, setCurrentLocale } from "../../i18n/locales";
+    import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
 
     let fullscreen: boolean = localUserStore.getFullscreen();
     let notification: boolean = localUserStore.getNotification() === "granted";
@@ -85,6 +85,8 @@
     function closeMenu() {
         menuVisiblilityStore.set(false);
     }
+
+    const isMobile = isMediaBreakpointUp("md");
 </script>
 
 <div class="settings-main" on:submit|preventDefault={saveSetting}>
@@ -93,22 +95,22 @@
         <div class="nes-select is-dark">
             <select bind:value={valueGame}>
                 <option value={120}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.gameQuality.short.high()
                         : $LL.menu.settings.gameQuality.long.high()}</option
                 >
                 <option value={60}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.gameQuality.short.medium()
                         : $LL.menu.settings.gameQuality.long.medium()}</option
                 >
                 <option value={40}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.gameQuality.short.small()
                         : $LL.menu.settings.gameQuality.long.small()}</option
                 >
                 <option value={20}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.gameQuality.short.minimum()
                         : $LL.menu.settings.gameQuality.long.minimum()}</option
                 >
@@ -120,22 +122,22 @@
         <div class="nes-select is-dark">
             <select bind:value={valueVideo}>
                 <option value={30}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.videoQuality.short.high()
                         : $LL.menu.settings.videoQuality.long.high()}</option
                 >
                 <option value={20}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.videoQuality.short.medium()
                         : $LL.menu.settings.videoQuality.long.medium()}</option
                 >
                 <option value={10}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.videoQuality.short.small()
                         : $LL.menu.settings.videoQuality.long.small()}</option
                 >
                 <option value={5}
-                    >{isMobile()
+                    >{isMobile
                         ? $LL.menu.settings.videoQuality.short.minimum()
                         : $LL.menu.settings.videoQuality.long.minimum()}</option
                 >
@@ -199,6 +201,8 @@
 </div>
 
 <style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
     div.settings-main {
         height: calc(100% - 40px);
         overflow-y: auto;
@@ -236,7 +240,7 @@
         }
     }
 
-    @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+    @include media-breakpoint-up(md) {
         div.settings-main {
             section {
                 padding: 0;