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(); }) 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(null); -export const emoteMenuStore = writable(false); +export const emoteMenuStore = createEmoteMenuStore();