REVIEW : Migration Menu and Report Menu in Svelte (#1363)

* WIP: svelte menu

* temp

* temp

* New menu svelte

* Migration of report menu in svelte

* Migration of registerCustomMenu for Menu in Svelte
Refactor subMenuStore
Suppression of old MenuScene and ReportMenu

* Suppression of HTML files that aren't use anymore

* fix deeployer

* First pass on css

* First pass on css

* Second pass on css and reportMenu

* Second pass on css and reportMenu

* Second pass on css and reportMenu

* Third pass on css and reportMenu

* Correction following test

* Contact page only if environment variable exist

* Update service worker

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

* Change requested

* Change requested

Co-authored-by: kharhamel <oognic@gmail.com>
Co-authored-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Stores/MediaStore.ts

@@ -170,7 +170,7 @@ function createVideoConstraintStore() {
         setFrameRate: (frameRate: number) =>
             update((constraints) => {
                 constraints.frameRate = { ideal: frameRate };
-
+                localUserStore.setVideoQualityValue(frameRate);
                 return constraints;
             }),
     };

front/src/Stores/MenuStore.ts

@@ -1,7 +1,11 @@
-import { writable } from "svelte/store";
+import { get, writable } from "svelte/store";
 import Timeout = NodeJS.Timeout;
+import { userIsAdminStore } from "./GameStore";
+import { CONTACT_URL } from "../Enum/EnvironmentVariable";
 
-export const menuIconVisible = writable(false);
+export const menuIconVisiblilityStore = writable(false);
+export const menuVisiblilityStore = writable(false);
+export const menuInputFocusStore = writable(false);
 
 let warningContainerTimeout: Timeout | null = null;
 function createWarningContainerStore() {
@@ -21,3 +25,58 @@ function createWarningContainerStore() {
 }
 
 export const warningContainerStore = createWarningContainerStore();
+
+export enum SubMenusInterface {
+    settings = "Settings",
+    profile = "Profile",
+    createMap = "Create a Map",
+    aboutRoom = "About the Room",
+    globalMessages = "Global Messages",
+    contact = "Contact",
+}
+
+function createSubMenusStore() {
+    const { subscribe, update } = writable<string[]>([
+        SubMenusInterface.settings,
+        SubMenusInterface.profile,
+        SubMenusInterface.createMap,
+        SubMenusInterface.aboutRoom,
+        SubMenusInterface.globalMessages,
+        SubMenusInterface.contact,
+    ]);
+
+    return {
+        subscribe,
+        addMenu(menuCommand: string) {
+            update((menuList: string[]) => {
+                if (!menuList.find((menu) => menu === menuCommand)) {
+                    menuList.push(menuCommand);
+                }
+                return menuList;
+            });
+        },
+        removeMenu(menuCommand: string) {
+            update((menuList: string[]) => {
+                const index = menuList.findIndex((menu) => menu === menuCommand);
+                if (index !== -1) {
+                    menuList.splice(index, 1);
+                }
+                return menuList;
+            });
+        },
+    };
+}
+
+export const subMenusStore = createSubMenusStore();
+
+function checkSubMenuToShow() {
+    if (!get(userIsAdminStore)) {
+        subMenusStore.removeMenu(SubMenusInterface.globalMessages);
+    }
+
+    if (CONTACT_URL === undefined) {
+        subMenusStore.removeMenu(SubMenusInterface.contact);
+    }
+}
+
+checkSubMenuToShow();

front/src/Stores/ShowReportScreenStore.ts

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

front/src/Stores/UserInputStore.ts

@@ -1,11 +1,11 @@
 import { derived } from "svelte/store";
-import { consoleGlobalMessageManagerFocusStore } from "./ConsoleGlobalMessageManagerStore";
+import { menuInputFocusStore } from "./MenuStore";
 import { chatInputFocusStore } from "./ChatStore";
 
 //derived from the focus on Menu, ConsoleGlobal, Chat and ...
 export const enableUserInputsStore = derived(
-    [consoleGlobalMessageManagerFocusStore, chatInputFocusStore],
-    ([$consoleGlobalMessageManagerFocusStore, $chatInputFocusStore]) => {
-        return !$consoleGlobalMessageManagerFocusStore && !$chatInputFocusStore;
+    [menuInputFocusStore, chatInputFocusStore],
+    ([$menuInputFocusStore, $chatInputFocusStore]) => {
+        return !$menuInputFocusStore && !$chatInputFocusStore;
     }
 );