Enabling back the open report feature

front/src/Components/Video/VideoMedia.svelte

@@ -6,6 +6,9 @@
     import blockSignImg from "./images/blockSign.svg";
     import {DivImportance} from "../../WebRtc/LayoutManager";
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
+    import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
+    import {MenuScene, MenuSceneName} from "../../Phaser/Menu/MenuScene";
+    import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -43,6 +46,11 @@
         }
     }
 
+    function openReport(peer: VideoPeer): void {
+        console.log('OPENING REPORT');
+        showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
+    }
+
 </script>
 
 <div class="video-container">
@@ -58,12 +66,12 @@
     {#if $constraintStore && $constraintStore.audio === false}
         <img src={microphoneCloseImg} alt="Muted">
     {/if}
-    <button class="report">
+    <button class="report" on:click={() => openReport(peer)}>
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
     <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
-    <img src={blockSignImg} class="block-logo" alt="Block">
+    <img src={blockSignImg} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>
     {/if}

front/src/Phaser/Menu/MenuScene.ts

@@ -11,6 +11,7 @@ import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Co
 import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
 import {menuIconVisible} from "../../Stores/MenuStore";
 import {videoConstraintStore} from "../../Stores/MediaStore";
+import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
 
 export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
@@ -82,6 +83,12 @@ export class MenuScene extends Phaser.Scene {
             this.closeAll();
             this.gameReportElement.open(parseInt(userId), userName);
         });
+        showReportScreenStore.subscribe((user) => {
+            this.closeAll();
+            if (user !== null) {
+                this.gameReportElement.open(user.userId, user.userName);
+            }
+        });
 
         this.input.keyboard.on('keyup-TAB', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
@@ -98,6 +105,10 @@ export class MenuScene extends Phaser.Scene {
         worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
     }
 
+    public openReport(userId: number, userName: string): void {
+        this.gameReportElement.open(userId, userName);
+    }
+
     //todo put this method in a parent menuElement class
     static revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
         //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.

front/src/Stores/ShowReportScreenStore.ts

@@ -0,0 +1,3 @@
+import {writable} from "svelte/store";
+
+export const showReportScreenStore = writable<{userId: number, userName: string}|null>(null);