emojimenu, audiomanager

front/src/Components/App.svelte

@@ -1,6 +1,7 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
+    import {emoteMenuVisiblilityStore} from "../Stores/EmoteStore";
     import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -112,7 +113,7 @@
             <Menu></Menu>
         </div>
     {/if}
-    {#if $gameOverlayVisibilityStore}
+    {#if $emoteMenuVisiblilityStore}
         <div>
             <EmoteMenu></EmoteMenu>
         </div>

front/src/Components/AudioManager/AudioManager.svelte

@@ -21,7 +21,7 @@
     onMount(() => {
         volume = localUserStore.getAudioPlayerVolume();
         audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
-        setVolume();
+        changeVolume();
 
         unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
             HTMLAudioPlayer.pause();
@@ -53,13 +53,7 @@
         }
     })
 
-    function onMute() {
+    function changeVolume() {
-        audioManagerVolumeStore.setMuted(!get(audioManagerVolumeStore).muted);
-        localUserStore.setAudioPlayerMuted(get(audioManagerVolumeStore).muted);
-        setVolume();
-    }
-
-    function setVolume() {
         if (get(audioManagerVolumeStore).muted) {
             audioPlayerVolumeIcon.classList.add('muted');
             audioPlayerVol.value = "0";
@@ -76,9 +70,22 @@
                 audioPlayerVolumeIcon.classList.remove('mid');
             }
         }
-        audioManagerVolumeStore.setVolume(volume)
+    }
-        localUserStore.setAudioPlayerVolume(get(audioManagerVolumeStore).volume);
 
+    function onMute() {
+        const muted = !get(audioManagerVolumeStore).muted;
+        audioManagerVolumeStore.setMuted(muted);
+        localUserStore.setAudioPlayerMuted(muted);
+        changeVolume();
+    }
+
+    function setVolume() {
+        volume = parseFloat(audioPlayerVol.value);
+        audioManagerVolumeStore.setVolume(volume);
+        localUserStore.setAudioPlayerVolume(volume);
+        audioManagerVolumeStore.setMuted(false);
+        localUserStore.setAudioPlayerMuted(false);
+        changeVolume();
     }
 
     function setDecrease() {
@@ -109,8 +116,7 @@
                 </g>
             </svg>
         </span>
-        <input type="range" min="0" max="1" step="0.025" bind:value={volume} bind:this={audioPlayerVol}
+        <input type="range" min="0" max="1" step="0.025" bind:this={audioPlayerVol} on:change={setVolume}>
-            on:change={setVolume}>
     </div>
     <div class="audio-manager-reduce-conversation">
         <label>

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -17,7 +17,7 @@
       styleProperties: {
         '--font': 'Press Start 2P'
       },
-      showSearch : false
+      autoFocusSearch : false
     });
 
     picker.on("emoji", (selection) => {

front/src/Phaser/Game/GameManager.ts

@@ -10,6 +10,7 @@ import { requestedCameraState, requestedMicrophoneState } from "../../Stores/Med
 import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
 import Axios from "axios";
 import { menuIconVisiblilityStore } from "../../Stores/MenuStore";
+import { emoteMenuVisiblilityStore } from "../../Stores/EmoteStore";
 
 /**
  * This class should be responsible for any scene starting/stopping
@@ -117,6 +118,7 @@ export class GameManager {
     public gameSceneIsCreated(scene: GameScene) {
         this.currentGameSceneName = scene.scene.key;
         menuIconVisiblilityStore.set(true);
+        emoteMenuVisiblilityStore.set(true);
     }
 
     /**
@@ -129,6 +131,7 @@ 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);
         }
@@ -142,6 +145,7 @@ export class GameManager {
         if (this.currentGameSceneName) {
             this.scenePlugin.start(this.currentGameSceneName);
             menuIconVisiblilityStore.set(true);
+            emoteMenuVisiblilityStore.set(true);
         } else {
             this.scenePlugin.run(fallbackSceneName);
         }

front/src/Phaser/Game/GameScene.ts

@@ -174,6 +174,7 @@ export class GameScene extends DirtyScene {
     private peerStoreUnsubscribe!: () => void;
     private chatVisibilityUnsubscribe!: () => void;
     private emoteUnsubscribe!: () => void;
+    private emoteMenuUnsubscribe!: () => void;
     private biggestAvailableAreaStoreUnsubscribe!: () => void;
     MapUrlFile: string;
     roomUrl: string;
@@ -624,6 +625,15 @@ export class GameScene extends DirtyScene {
                 emoteStore.set(null);
             }
         });
+
+        this.emoteMenuUnsubscribe = emoteMenuStore.subscribe((emoteMenu) => {
+            if (emoteMenu) {
+                this.userInputManager.disableControls();
+            } else {
+                this.userInputManager.restoreControls();
+            }
+        })
+
         Promise.all([ this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises ]).then(() => {
             this.scene.wake();
         });
@@ -1349,6 +1359,7 @@ export class GameScene extends DirtyScene {
         this.peerStoreUnsubscribe();
         this.chatVisibilityUnsubscribe();
         this.emoteUnsubscribe();
+        this.emoteMenuUnsubscribe();
         this.biggestAvailableAreaStoreUnsubscribe();
         iframeListener.unregisterAnswerer("getState");
         iframeListener.unregisterAnswerer("loadTileset");

front/src/Stores/EmoteStore.ts

@@ -14,5 +14,6 @@ function createEmoteMenuStore() {
     };
 }
 
+export const emoteMenuVisiblilityStore = writable(false);
 export const emoteStore = writable<string | null>(null);
 export const emoteMenuStore = createEmoteMenuStore();