move twemoji menu to svelte

front/src/Components/App.svelte

@@ -26,6 +26,7 @@
     import {soundPlayingStore} from "../Stores/SoundPlayingStore";
     import ErrorDialog from "./UI/ErrorDialog.svelte";
     import Menu from "./Menu/Menu.svelte";
+    import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
     import VideoOverlay from "./Video/VideoOverlay.svelte";
     import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
     import AdminMessage from "./TypeMessage/BanMessage.svelte";
@@ -111,6 +112,11 @@
             <Menu></Menu>
         </div>
     {/if}
+    {#if $gameOverlayVisibilityStore}
+        <div>
+            <EmoteMenu></EmoteMenu>
+        </div>
+    {/if}
     {#if $gameOverlayVisibilityStore}
         <div>
             <VideoOverlay></VideoOverlay>

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -0,0 +1,65 @@
+<script lang="typescript">
+
+  import { get } from "svelte/store";
+  import type { Unsubscriber } from "svelte/store";
+  import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
+  import { onDestroy, onMount } from "svelte";
+  import { EmojiButton } from '@joeattardi/emoji-button';
+
+  let emojiContainer: HTMLElement;
+  let picker: EmojiButton;
+
+  let unsubscriber: Unsubscriber | null = null;
+
+  onMount(() => {
+    picker = new EmojiButton({
+      rootElement: emojiContainer,
+      style : 'twemoji',
+      styleProperties: {
+        '--font': 'Press Start 2P'
+      },
+      showSearch : false
+    });
+
+    picker.on("emoji", (selection) => {
+      emoteStore.set(selection.emoji);
+    });
+
+    picker.on("hidden", () => {
+      emoteMenuStore.set(false);
+    });
+
+    unsubscriber = emoteMenuStore.subscribe(() => {
+      if (get(emoteMenuStore)) {
+        picker.showPicker(emojiContainer);
+      } else {
+        picker.hidePicker();
+      }
+    })
+  })
+
+  onDestroy(() => {
+    if (unsubscriber) {
+      unsubscriber();
+    }
+  })
+
+</script>
+
+<div class="emote-menu-container">
+  <div class="emote-menu" bind:this={emojiContainer}></div>
+</div>
+
+<style lang="scss">
+  .emote-menu-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .emote-menu {
+    pointer-events: all;
+  }
+</style>