From 02108ce977a44fac50e05d052fbebc4a9e76a8e1 Mon Sep 17 00:00:00 2001
From: Kharhamel <oognic@gmail.com>
Date: Mon, 4 Oct 2021 11:23:30 +0200
Subject: [PATCH] FIX: fixes for the emnote menu

---
 front/src/Components/App.svelte                 | 4 ++--
 front/src/Components/EmoteMenu/EmoteMenu.svelte | 9 ++-------
 front/src/Phaser/Entity/Character.ts            | 2 +-
 front/src/Phaser/Game/GameManager.ts            | 4 ----
 front/src/Stores/EmoteStore.ts                  | 1 -
 front/style/style.scss                          | 4 ----
 6 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 1fbcf76a..ab8b6d3f 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
-    import {emoteMenuVisiblilityStore} from "../Stores/EmoteStore";
+    import {emoteMenuStore} from "../Stores/EmoteStore";
     import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -113,7 +113,7 @@
             <Menu></Menu>
         </div>
     {/if}
-    {#if $emoteMenuVisiblilityStore}
+    {#if $emoteMenuStore}
         <div>
             <EmoteMenu></EmoteMenu>
         </div>
diff --git a/front/src/Components/EmoteMenu/EmoteMenu.svelte b/front/src/Components/EmoteMenu/EmoteMenu.svelte
index d69eded5..70aeb4cc 100644
--- a/front/src/Components/EmoteMenu/EmoteMenu.svelte
+++ b/front/src/Components/EmoteMenu/EmoteMenu.svelte
@@ -20,6 +20,8 @@
       emojisPerRow: isMobile() ? 6 : 8,
       autoFocusSearch: false
     });
+    //the timeout is here to prevent the menu from flashing
+    setTimeout(() => picker.showPicker(emojiContainer), 100);
 
     picker.on("emoji", (selection) => {
       emoteStore.set(selection.emoji);
@@ -29,13 +31,6 @@
       emoteMenuStore.closeEmoteMenu();
     });
 
-    unsubscriber = emoteMenuStore.subscribe((isEmoteMenuVisible) => {
-      if (isEmoteMenuVisible && !picker.isPickerVisible()) {
-        picker.showPicker(emojiContainer);
-      } else {
-        picker.hidePicker();
-      }
-    })
   })
 
   function onKeyDown(e:KeyboardEvent) {
diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index dd802540..3cdc60dc 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -301,7 +301,7 @@ export abstract class Character extends Container {
         this.cancelPreviousEmote();
         const emoteY = -45;
         this.playerName.setVisible(false);
-        this.emote = new Text(this.scene, -10, 0, emote, { fontFamily: '"Twemoji Mozilla"', fontSize: "20px" });
+        this.emote = new Text(this.scene, -10, 0, emote, { fontSize: "20px" });
         this.emote.setAlpha(0);
         this.add(this.emote);
         this.createStartTransition(emoteY);
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 2539a368..1bf18d8d 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -9,7 +9,6 @@ import { get } from "svelte/store";
 import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
 import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
 import { menuIconVisiblilityStore } from "../../Stores/MenuStore";
-import { emoteMenuVisiblilityStore } from "../../Stores/EmoteStore";
 
 /**
  * This class should be responsible for any scene starting/stopping
@@ -112,7 +111,6 @@ export class GameManager {
     public gameSceneIsCreated(scene: GameScene) {
         this.currentGameSceneName = scene.scene.key;
         menuIconVisiblilityStore.set(true);
-        emoteMenuVisiblilityStore.set(true);
     }
 
     /**
@@ -125,7 +123,6 @@ export class GameManager {
         gameScene.cleanupClosingScene();
         gameScene.createSuccessorGameScene(false, false);
         menuIconVisiblilityStore.set(false);
-        emoteMenuVisiblilityStore.set(false);
         if (!this.scenePlugin.get(targetSceneName)) {
             this.scenePlugin.add(targetSceneName, sceneClass, false);
         }
@@ -139,7 +136,6 @@ export class GameManager {
         if (this.currentGameSceneName) {
             this.scenePlugin.start(this.currentGameSceneName);
             menuIconVisiblilityStore.set(true);
-            emoteMenuVisiblilityStore.set(true);
         } else {
             this.scenePlugin.run(fallbackSceneName);
         }
diff --git a/front/src/Stores/EmoteStore.ts b/front/src/Stores/EmoteStore.ts
index d41e92a8..56b06659 100644
--- a/front/src/Stores/EmoteStore.ts
+++ b/front/src/Stores/EmoteStore.ts
@@ -14,6 +14,5 @@ function createEmoteMenuStore() {
     };
 }
 
-export const emoteMenuVisiblilityStore = writable(false);
 export const emoteStore = writable<string | null>(null);
 export const emoteMenuStore = createEmoteMenuStore();
diff --git a/front/style/style.scss b/front/style/style.scss
index 7584a4b5..553b63c8 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -1103,10 +1103,6 @@ div.is-silent.hide {
     right: 15px;
 }
 
-.emote-menu .emoji-picker .emoji-picker__emoji {
-    font-family: "Twemoji Mozilla" !important;
-}
-
 div.emoji-picker {
     background-color: #333;
     border-radius: 1em;