improvements on svelte store + handling

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -5,7 +5,7 @@
   import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
   import { onDestroy, onMount } from "svelte";
   import { EmojiButton } from '@joeattardi/emoji-button';
-
+ 
   let emojiContainer: HTMLElement;
   let picker: EmojiButton;
 
@@ -26,11 +26,11 @@
     });
 
     picker.on("hidden", () => {
-      emoteMenuStore.set(false);
+      emoteMenuStore.closeEmoteMenu();
     });
 
-    unsubscriber = emoteMenuStore.subscribe(() => {
-      if (get(emoteMenuStore)) {
+    unsubscriber = emoteMenuStore.subscribe((isEmoteMenuVisible) => {
+      if (isEmoteMenuVisible && !picker.isPickerVisible()) {
         picker.showPicker(emojiContainer);
       } else {
         picker.hidePicker();
@@ -42,6 +42,8 @@
     if (unsubscriber) {
       unsubscriber();
     }
+
+    picker.destroyPicker();
   })
 
 </script>

front/src/Phaser/Game/GameScene.ts

@@ -82,7 +82,7 @@ import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStor
 import { SharedVariablesManager } from "./SharedVariablesManager";
 import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
-import { emoteStore } from "../../Stores/EmoteStore";
+import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
 import {
     audioManagerFileStore,
     audioManagerVisibilityStore,
@@ -616,8 +616,7 @@ export class GameScene extends DirtyScene {
             this.openChatIcon.setVisible(!v);
         });
 
-        this.emoteUnsubscribe = emoteStore.subscribe(() => {
-            const emoteKey = get(emoteStore);
+        this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => {
             if (emoteKey) {
                 this.CurrentPlayer?.playEmote(emoteKey);
                 this.connection?.emitEmoteEvent(emoteKey);
@@ -1445,7 +1444,12 @@ ${escapedMessage}
                     return; //we don't want the menu to open when pinching on a touch screen.
                 }
 
-                this.CurrentPlayer.openOrCloseEmoteMenu();
+                // toggle EmoteMenu
+                if (get(emoteMenuStore)) {
+                    emoteMenuStore.closeEmoteMenu();
+                } else {
+                    emoteMenuStore.openEmoteMenu();
+                }
             });
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);

front/src/Phaser/Player/Player.ts

@@ -84,17 +84,4 @@ export class Player extends Character {
     public isMoving(): boolean {
         return this.wasMoving;
     }
-
-    playEmote(emote: string) {
-        super.playEmote(emote);
-        emoteMenuStore.set(false);
-    }
-
-    openOrCloseEmoteMenu() {
-        if (get(emoteMenuStore)) {
-            emoteMenuStore.set(false);
-        } else {
-            emoteMenuStore.set(true);
-        }
-    }
 }

front/src/Stores/EmoteStore.ts

@@ -1,4 +1,18 @@
 import { writable } from "svelte/store";
 
+function createEmoteMenuStore() {
+    const { subscribe, set } = writable(false);
+
+    return {
+        subscribe,
+        openEmoteMenu() {
+            set(true);
+        },
+        closeEmoteMenu() {
+            set(false);
+        },
+    };
+}
+
 export const emoteStore = writable<string | null>(null);
-export const emoteMenuStore = writable(false);
+export const emoteMenuStore = createEmoteMenuStore();