Merge pull request #1501 from thecodingmachine/fixEmoteMenu

FIX: fixes for the emnote menu

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>

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) {

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);

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);
         }

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();

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;