Second pass on css and reportMenu

2021-08-18 11:15:46 +02:00 · 2021-08-18 11:15:46 +02:00 · 4c3097155b
commit 4c3097155b
parent 9e5cc3b9a7
11 changed files with 116 additions and 73 deletions
--- a/front/src/Components/Menu/AboutRoomSubMenu.svelte
+++ b/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);
      }
--- a/front/src/Components/Menu/CreateMapSubMenu.svelte
+++ b/front/src/Components/Menu/CreateMapSubMenu.svelte
@ -1,21 +1,16 @@
 <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";
-
+    function goToGettingStarted() {
        //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>
-            <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>
+            <h3>Create your map</h3>
+            <p>You can also create your own custom map by following the step of the documentation.</p>
+            <button type="button" class="nes-btn" on:click={goToBuildingMap}>Create your map</button>
        </section>
    </section>
 </div>
--- a/front/src/Components/Menu/CustomSubMenu.svelte
+++ b/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>
--- a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
+++ b/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>
--- a/front/src/Components/Menu/Menu.svelte
+++ b/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 | typeof CustomSubMenu = SettingsSubMenu;
+    let activeComponent: typeof SettingsSubMenu = 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;
-      height: 85vh;
+      bottom: 55px;
      width: 100vw;
      font-size: 0.5em;
    }
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/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;
--- a/front/src/Components/Menu/SettingsSubMenu.svelte
+++ b/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 {
-        border-radius: 16px;
-        padding: 10px;
-        margin: 5px;
-      }
-      select:focus {
+      div.nes-select select:focus {
        outline: none;
      }
    }
--- a/front/src/Components/Menu/TextGlobalMessage.svelte
+++ b/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();
--- a/front/src/Components/ReportMenu/ReportMenu.svelte
+++ b/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%;
-      text-align: center;
+      grid-template-columns: calc(100% - 45px) 40px;
+      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>
--- a/front/src/Components/ReportMenu/ReportSubMenu.svelte
+++ b/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
-            showReportScreenStore.set(null) //close the report menu
+            gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage);
+            showReportScreenStore.set(null)
        }
    }
 </script>
@ -38,7 +39,7 @@
      text-align: center;

      textarea {
-        height: 200px;
+        height: clamp(100px, 20vh, 20vh);
      }
    }
 </style>
--- a/front/style/TextGlobalMessageSvelte-Style.scss
+++ b/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;
+    }
+  }
+}