Migration of report menu in svelte

front/src/Components/App.svelte

@@ -37,6 +37,8 @@
     import LayoutManager from "./LayoutManager/LayoutManager.svelte";
     import {audioManagerVisibilityStore} from "../Stores/AudioManagerStore";
     import AudioManager from "./AudioManager/AudioManager.svelte"
+    import { showReportScreenStore } from "../Stores/ShowReportScreenStore";
+    import ReportMenu from "./ReportMenu/ReportMenu.svelte";
 
     export let game: Game;
 
@@ -93,6 +95,11 @@
             <LayoutManager></LayoutManager>
         </div>
     {/if}
+    {#if $showReportScreenStore}
+        <div>
+            <ReportMenu></ReportMenu>
+        </div>
+    {/if}
     {#if $gameOverlayVisibilityStore}
         <div>
             <VideoOverlay></VideoOverlay>

front/src/Components/ReportMenu/BlockSubMenu.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import {blackListManager} from "../../WebRtc/BlackListManager";
+    import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
+    import {onMount} from "svelte";
+
+    export let userUUID: string | undefined;
+    let userIsBlocked = false;
+
+    onMount(() => {
+        if (userUUID === undefined) {
+            userIsBlocked = false;
+            throw new Error("There is no user to block");
+        } else {
+            userIsBlocked = blackListManager.isBlackListed(userUUID);
+        }
+    })
+
+    function blockUser(): void {
+        if (userUUID === undefined) {
+            throw new Error("There is no user to block");
+        }
+        blackListManager.isBlackListed(userUUID)
+            ? blackListManager.cancelBlackList(userUUID)
+            : blackListManager.blackList(userUUID);
+        showReportScreenStore.set(null); //close the report menu
+    }
+</script>
+
+<div class="block-container">
+    <h3>Block</h3>
+    <p>Block any communication from and to this user. This can be reverted.</p>
+    <button type="button" class="nes-btn is-error" on:click|preventDefault={blockUser}>
+        {userIsBlocked ? 'Unblock this user' : 'Block this user'}
+    </button>
+</div>
+
+
+<style lang="scss">
+    div.block-container {
+      text-align: center;
+    }
+</style>

front/src/Components/ReportMenu/ReportMenu.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    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";
+
+    let blockActive =  true;
+    let reportActive = !blockActive;
+    let userUUID: string | undefined;
+    let userName = "No name";
+    let unsubscriber: Unsubscriber
+
+    onMount(() => {
+        unsubscriber = showReportScreenStore.subscribe((reportSreenStore) => {
+            if (reportSreenStore != null) {
+                userName = reportSreenStore.userName;
+                userUUID = playersStore.getPlayerById(reportSreenStore.userId)?.userUuid;
+                if (userUUID === undefined) {
+                    throw new Error("Could not find UUID for user with ID " + reportSreenStore.userId);
+                }
+            }
+        })
+    })
+
+    onDestroy(() => {
+        if (unsubscriber) {
+            unsubscriber();
+        }
+    })
+
+    function close() {
+        showReportScreenStore.set(null);
+    }
+
+    function activateBlock() {
+        blockActive = true;
+        reportActive = false;
+    }
+
+    function activateReport() {
+        blockActive = false;
+        reportActive = true;
+    }
+
+</script>
+
+<div class="report-menu-main nes-container is-rounded">
+    <section class="report-menu-title">
+        <h2>Moderate {userName}</h2>
+        <section class="justify-center">
+            <button type="button" class="nes-btn" on:click|preventDefault={close}>X</button>
+        </section>
+    </section>
+    <section class="report-menu-action">
+        <section class="justify-center">
+            <button type="button" class="nes-btn {blockActive ? 'is-disabled' : ''}" on:click|preventDefault={activateBlock}>Block</button>
+        </section>
+        <section class="justify-center">
+            <button type="button" class="nes-btn {reportActive ? 'is-disabled' : ''}" on:click|preventDefault={activateReport}>Report</button>
+        </section>
+    </section>
+    <section class="report-menu-content">
+        {#if blockActive}
+            <BlockSubMenu userUUID="{userUUID}"/>
+        {:else if reportActive}
+            <ReportSubMenu/>
+        {:else }
+            <p>ERROR : There is no action selected.</p>
+        {/if}
+    </section>
+</div>
+
+<style lang="scss">
+  .nes-container {
+    padding: 5px;
+  }
+
+  section.justify-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  div.report-menu-main {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    background-color: #333333;
+    color: whitesmoke;
+
+    position: relative;
+    height: 70vh;
+    width: 50vw;
+    top: 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;
+    }
+
+    section.report-menu-action {
+      display: grid;
+      grid-template-columns: 50% 50%;
+    }
+  }
+</style>

front/src/Components/ReportMenu/ReportSubMenu.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
+
+    //export let userUUID: string;
+    let reportMessage: string;
+    let hiddenError = true;
+
+    function submitReport() {
+        if (reportMessage === '') {
+            hiddenError = true;
+        } else {
+            hiddenError = false;
+            //gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage); //TODO: Use when merge with MenuSvelte
+            showReportScreenStore.set(null) //close the report menu
+        }
+    }
+</script>
+
+<div class="report-container-main">
+    <h3>Report</h3>
+    <p>Send a report message to the administrators of this room. They may later ban this user.</p>
+    <form>
+        <section>
+            <label>
+                <span>Your message: </span>
+                <textarea type="text" class="nes-textarea" bind:value={reportMessage}></textarea>
+            </label>
+            <p hidden="{hiddenError}">Report message cannot to be empty.</p>
+        </section>
+        <section>
+            <button type="submit" class="nes-btn is-error" on:click={submitReport}>Report this user</button>
+        </section>
+    </form>
+</div>
+
+<style lang="scss">
+    div.report-container-main {
+      text-align: center;
+
+      textarea {
+        height: 200px;
+      }
+    }
+</style>

front/src/Phaser/Menu/MenuScene.ts

@@ -127,7 +127,7 @@ export class MenuScene extends Phaser.Scene {
                 if (uuid === undefined) {
                     throw new Error("Could not find UUID for user with ID " + user.userId);
                 }
-                this.gameReportElement.open(uuid, user.userName);
+                //this.gameReportElement.open(uuid, user.userName);
             }
         });
 

front/style/style.scss

@@ -1,5 +1,4 @@
 *{
-    font-family: Lato;
     cursor: url('./images/cursor_normal.png'), auto;
 }
 * a, button, select{