Second pass on css and reportMenu

front/src/Components/Menu/AboutRoomSubMenu.svelte

@@ -43,15 +43,29 @@
         HTMLShareLink.select();
         document.execCommand('copy');
     }
+
+    async function shareLink() {
+        const shareData = {url: location.toString()};
+
+        try {
+            await navigator.share(shareData);
+        } catch (err) {
+            console.error('Error: ' + err);
+        }
+    }
 </script>
 
 <div class="about-room-main">
-    <section class="share-url">
+    <section class="share-url not-mobile">
         <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>
-    <h2>Informations on the map</h2>
+    <section class="is-mobile">
+        <h3>Share the link of the room !</h3>
+        <button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
+    </section>
+    <h2>Information on the map</h2>
     <section class="container-overflow">
         <h3>{mapName}</h3>
         <p class="string-HTML">{mapDescription}</p>
@@ -91,6 +105,10 @@
       }
     }
 
+    section.is-mobile {
+      display: none;
+    }
+
     h2, h3 {
       width: 100%;
       text-align: center;
@@ -111,10 +129,16 @@
 
   @media only screen and (max-height: 900px) {
     div.about-room-main {
-      section.share-url input {
+      section.share-url.not-mobile {
         display: none;
       }
 
+      section.is-mobile {
+        display: block;
+        text-align: center;
+        margin-bottom: 20px;
+      }
+
       section.container-overflow {
         height: calc(100% - 120px);
       }

front/src/Components/Menu/CreateMapSubMenu.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
 
-    function goToCreateMapPage() {
+    function goToGettingStarted() {
-        //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() {
+    function goToBuildingMap() {
         //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";
+        const sparkHost = "https://workadventu.re/map-building";
         window.open(sparkHost, "_blank");
     }
 
@@ -24,19 +19,17 @@
 <div class="create-map-main">
     <section class="container-overflow">
         <section>
-            <h3>Create your map</h3>
+            <h3>Getting started</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>
+            <button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}>Getting started</button>
         </section>
         <section>
-            <h3>Use the scripting API</h3>
+            <h3>Create your map</h3>
-            <p>Make your map more interactive, more alive and totally unique with the scripting API.</p>
+            <p>You can also create your own custom map by following the step of the documentation.</p>
-            <p>(Programming skills are required to use the scripting API).</p>
+            <button type="button" class="nes-btn" on:click={goToBuildingMap}>Create your map</button>
-            <button type="button" class="nes-btn" on:click={goToScriptingApiPage}>Use a script</button>
         </section>
     </section>
 </div>

front/src/Components/Menu/CustomSubMenu.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-    import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
-
-    export let menuCommand: string;
-
-    function menuItemClicked() {
-        sendMenuClickedEvent(menuCommand);
-    }
-</script>
-
-<div>
-    <button type="button" class="nes-btn is-primary" on:click|preventDefault={menuItemClicked}>{menuCommand}</button>
-</div>

front/src/Components/Menu/GlobalMessagesSubMenu.svelte

@@ -62,7 +62,7 @@
 
 <style lang="scss">
     div.global-message-main {
-      height: calc(100% - 56px);
+      height: calc(100% - 50px);
       display: grid;
       grid-template-rows: 15% 65% 20%;
 
@@ -102,4 +102,17 @@
         }
       }
     }
+
+    @media only screen and (max-height: 900px) {
+      .global-message-content {
+        height: calc(100% - 5px);
+      }
+      .global-message-footer {
+        margin-bottom: 0;
+
+        label {
+          width: calc(100% - 10px);
+        }
+      }
+    }
 </style>

front/src/Components/Menu/Menu.svelte

@@ -6,15 +6,14 @@
     import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
     import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
     import ContactSubMenu from "./ContactSubMenu.svelte";
-    import CustomSubMenu from "./CustomSubMenu.svelte";
     import {menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
     //import {userIsAdminStore} from "../../Stores/GameStore";
     import {onMount} from "svelte";
     import {get} from "svelte/store";
+    import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
 
     let activeSubMenu: string = SubMenusInterface.settings;
-    let props: { menuCommand: string } = { menuCommand: SubMenusInterface.settings};
+    let activeComponent: typeof SettingsSubMenu = SettingsSubMenu;
-    let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
 
     onMount(() => {
         //TODO: Uncomment before final push to merge
@@ -28,7 +27,6 @@
     function switchMenu(menu: string) {
         if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
             activeSubMenu = menu;
-            props = {menuCommand: menu};
             switch (menu) {
                 case SubMenusInterface.settings:
                     activeComponent = SettingsSubMenu;
@@ -49,7 +47,8 @@
                     activeComponent = ContactSubMenu;
                     break;
                 default:
-                    activeComponent = CustomSubMenu;
+                    sendMenuClickedEvent(menu);
+                    menuVisiblilityStore.set(false);
                     break;
             }
         } else throw ("There is no menu called " + menu);
@@ -81,7 +80,7 @@
     </div>
     <div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
         <h2>{activeSubMenu}</h2>
-        <svelte:component this={activeComponent} {...props}/>
+        <svelte:component this={activeComponent}/>
     </div>
 </div>
 
@@ -97,7 +96,7 @@
     pointer-events: auto;
     height: 80vh;
     width: 75vw;
-    top: 10vh;
+    top: clamp(55px, 10vh, 10vh);
 
     position: relative;
     margin: auto;
@@ -129,8 +128,7 @@
 
   @media only screen and (max-height: 900px) {
     div.menu-container-main {
-      top: 5vh;
+      bottom: 55px;
-      height: 85vh;
       width: 100vw;
       font-size: 0.5em;
     }

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -33,9 +33,10 @@
         gameManager.leaveGame(SelectCharacterSceneName,new SelectCharacterScene());
     }
 
-    function clickLogin() {
+    //TODO: Uncomment when login will be completely developed
+    /*function clickLogin() {
         connectionManager.loadOpenIDScreen();
-    }
+    }*/
 
 </script>
 
@@ -49,20 +50,18 @@
     <section>
         <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
     </section>
-    <section>
+<!--    <section>
         <button type="button" class="nes-btn is-primary" on:click|preventDefault={clickLogin}>Login</button>
-    </section>
+    </section>-->
 </div>
 
 <style lang="scss">
     div.customize-main{
-      display: grid;
-      grid-template-rows: 33% 33% 33%;
-
       section {
         display: flex;
         justify-content: center;
         align-items: center;
+        margin-bottom: 20px;
 
         button {
           height: 50px;

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -15,7 +15,7 @@ function saveSetting(){
     if (valueGame !== previewValueGame) {
         previewValueGame = valueGame;
         localUserStore.setGameQualityValue(valueGame);
-        window.location.reload();// TODO edit that
+        window.location.reload();
     }
 
     if (valueVideo !== previewValueVideo) {
@@ -55,21 +55,25 @@ function changeNotification() {
 <div class="settings-main" on:submit|preventDefault={saveSetting}>
     <section>
         <h3>Game quality</h3>
-            <select class="nes-pointer" bind:value={valueGame}>
+        <div class="nes-select is-dark">
+            <select bind:value={valueGame}>
                 <option value="{120}">{isMobile() ? 'High (120 fps)' : 'High video quality (120 fps)'}</option>
                 <option value="{60}">{isMobile() ? 'Medium (60 fps)' : 'Medium video quality (60 fps, recommended)'}</option>
                 <option value="{40}">{isMobile() ? 'Minimum (40 fps)' : 'Minimum video quality (40 fps)'}</option>
                 <option value="{20}">{isMobile() ? 'Small (20 fps)' : 'Small video quality (20 fps)'}</option>
             </select>
+        </div>
     </section>
     <section>
         <h3>Video quality</h3>
-            <select class="nes-pointer" bind:value={valueVideo}>
+        <div class="nes-select is-dark">
+            <select bind:value={valueVideo}>
                 <option value="{30}">{isMobile() ? 'High (30 fps)' : 'High video quality (30 fps)'}</option>
                 <option value="{20}">{isMobile() ? 'Medium (20 fps)' : 'Medium video quality (20 fps, recommended)'}</option>
                 <option value="{10}">{isMobile() ? 'Minimum (10 fps)' : 'Minimum video quality (10 fps)'}</option>
                 <option value="{5}">{isMobile() ? 'Small (5 fps)' : 'Small video quality (5 fps)'}</option>
             </select>
+        </div>
     </section>
     <section class="settings-section-save">
         <p>(Saving these settings will restart the game)</p>
@@ -98,12 +102,7 @@ function changeNotification() {
       padding: 20px 20px 0;
       text-align: center;
 
-      select {
+      div.nes-select select:focus {
-        border-radius: 16px;
-        padding: 10px;
-        margin: 5px;
-      }
-      select:focus {
         outline: none;
       }
     }

front/src/Components/Menu/TextGlobalMessage.svelte

@@ -24,10 +24,9 @@
         [{'font': []}],
         [{'align': []}],
 
-        ['clean'],
+        ['clean'],                                // remove formatting button
 
         ['link', 'image', 'video']
-        // remove formatting button
     ];
 
     const gameScene = gameManager.getCurrentGameScene();

front/src/Components/ReportMenu/ReportMenu.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-    import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
+    import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
     import BlockSubMenu from "./BlockSubMenu.svelte";
     import ReportSubMenu from "./ReportSubMenu.svelte";
     import {onDestroy, onMount} from "svelte";
     import type {Unsubscriber} from "svelte/store";
     import {playersStore} from "../../Stores/PlayersStore";
+    import {connectionManager} from "../../Connexion/ConnectionManager";
+    import {GameConnexionTypes} from "../../Url/UrlManager";
 
     let blockActive =  true;
     let reportActive = !blockActive;
-    let userUUID: string | undefined;
+    let anonymous: boolean;
+    let userUUID: string | undefined = '';
     let userName = "No name";
     let unsubscriber: Unsubscriber
 
@@ -22,6 +25,7 @@
                 }
             }
         })
+        anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous;
     })
 
     onDestroy(() => {
@@ -53,7 +57,7 @@
             <button type="button" class="nes-btn" on:click|preventDefault={close}>X</button>
         </section>
     </section>
-    <section class="report-menu-action">
+    <section class="report-menu-action {anonymous ? 'hidden' : ''}">
         <section class="justify-center">
             <button type="button" class="nes-btn {blockActive ? 'is-disabled' : ''}" on:click|preventDefault={activateBlock}>Block</button>
         </section>
@@ -65,7 +69,7 @@
         {#if blockActive}
             <BlockSubMenu userUUID="{userUUID}"/>
         {:else if reportActive}
-            <ReportSubMenu/>
+            <ReportSubMenu userUUID="{userUUID}"/>
         {:else }
             <p>ERROR : There is no action selected.</p>
         {/if}
@@ -92,21 +96,37 @@
     position: relative;
     height: 70vh;
     width: 50vw;
-    top: 10vh;
+    top: clamp(55px, 10vh, 10vh);
-
     margin: auto;
-    display: grid;
-    grid-template-rows: 10% 15% 75%;
 
     section.report-menu-title {
       display: grid;
-      grid-template-columns: 90% 10%;
+      grid-template-columns: calc(100% - 45px) 40px;
-      text-align: center;
+      margin-bottom: 20px;
+
+      h2 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
 
     section.report-menu-action {
       display: grid;
       grid-template-columns: 50% 50%;
+      margin-bottom: 20px;
+    }
+
+    section.report-menu-action.hidden {
+      display: none;
+    }
+  }
+
+  @media only screen and (max-height: 900px) {
+    div.report-menu-main {
+      bottom: 55px;
+      width: 100vw;
+      font-size: 0.5em;
     }
   }
 </style>

front/src/Components/ReportMenu/ReportSubMenu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
+    import {gameManager} from "../../Phaser/Game/GameManager";
 
-    //export let userUUID: string;
+    export let userUUID: string;
     let reportMessage: string;
     let hiddenError = true;
 
@@ -10,8 +11,8 @@
             hiddenError = true;
         } else {
             hiddenError = false;
-            //gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage); //TODO: Use when merge with MenuSvelte
+            gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage);
-            showReportScreenStore.set(null) //close the report menu
+            showReportScreenStore.set(null)
         }
     }
 </script>
@@ -38,7 +39,7 @@
       text-align: center;
 
       textarea {
-        height: 200px;
+        height: clamp(100px, 20vh, 20vh);
       }
     }
 </style>

front/style/TextGlobalMessageSvelte-Style.scss

@@ -29,3 +29,13 @@ section.section-input-send-text {
     }
   }
 }
+
+@media only screen and (max-height: 900px) {
+  section.section-input-send-text {
+    --height-toolbar: 30%;
+
+    .ql-toolbar {
+      overflow: auto;
+    }
+  }
+}