From 3080e1fdc7008117e8e22d384864abc0646482ac Mon Sep 17 00:00:00 2001
From: Lurkars <git@8lh.de>
Date: Sun, 12 Sep 2021 11:11:52 +0200
Subject: [PATCH] improvements on svelte store + handling

---
 front/src/Components/EmoteMenu/EmoteMenu.svelte | 10 ++++++----
 front/src/Phaser/Game/GameScene.ts              | 12 ++++++++----
 front/src/Phaser/Player/Player.ts               | 13 -------------
 front/src/Stores/EmoteStore.ts                  | 16 +++++++++++++++-
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/front/src/Components/EmoteMenu/EmoteMenu.svelte b/front/src/Components/EmoteMenu/EmoteMenu.svelte
index 1a1de281..f8625127 100644
--- a/front/src/Components/EmoteMenu/EmoteMenu.svelte
+++ b/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>
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 6a40423f..080576c0 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/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);
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index bd6c261a..3edcdcde 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/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);
-        }
-    }
 }
diff --git a/front/src/Stores/EmoteStore.ts b/front/src/Stores/EmoteStore.ts
index ddff3654..56b06659 100644
--- a/front/src/Stores/EmoteStore.ts
+++ b/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();