From 148540dafef72a1c5d50c74fddcef1aeee2898b0 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Tue, 14 Sep 2021 08:56:37 +0200
Subject: [PATCH] emojimenu, audiomanager

---
 front/src/Components/App.svelte               |  3 +-
 .../AudioManager/AudioManager.svelte          | 74 ++++++++++---------
 .../src/Components/EmoteMenu/EmoteMenu.svelte |  2 +-
 front/src/Phaser/Game/GameManager.ts          |  4 +
 front/src/Phaser/Game/GameScene.ts            | 11 +++
 front/src/Stores/EmoteStore.ts                |  1 +
 6 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 06996ff9..1fbcf76a 100644
--- a/front/src/Components/App.svelte
+++ b/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>
diff --git a/front/src/Components/AudioManager/AudioManager.svelte b/front/src/Components/AudioManager/AudioManager.svelte
index 8ec93b52..a7f96f61 100644
--- a/front/src/Components/AudioManager/AudioManager.svelte
+++ b/front/src/Components/AudioManager/AudioManager.svelte
@@ -5,9 +5,9 @@
         audioManagerFileStore,
         audioManagerVolumeStore,
     } from "../../Stores/AudioManagerStore";
-    import {get} from "svelte/store";
-    import type {Unsubscriber} from "svelte/store";
-    import {onDestroy,onMount} from "svelte";
+    import { get } from "svelte/store";
+    import type { Unsubscriber } from "svelte/store";
+    import { onDestroy, onMount } from "svelte";
 
     let HTMLAudioPlayer: HTMLAudioElement;
     let audioPlayerVolumeIcon: HTMLElement;
@@ -15,51 +15,45 @@
     let unsubscriberFileStore: Unsubscriber | null = null;
     let unsubscriberVolumeStore: Unsubscriber | null = null;
 
-    let volume: number=1;
-    let decreaseWhileTalking: boolean=true;
+    let volume: number = 1;
+    let decreaseWhileTalking: boolean = true;
 
     onMount(() => {
         volume = localUserStore.getAudioPlayerVolume();
         audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
-        setVolume();
+        changeVolume();
 
-        unsubscriberFileStore = audioManagerFileStore.subscribe(() =>{
+        unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
             HTMLAudioPlayer.pause();
-            HTMLAudioPlayer.loop=get(audioManagerVolumeStore).loop;
-            HTMLAudioPlayer.volume=get(audioManagerVolumeStore).volume;
-            HTMLAudioPlayer.muted=get(audioManagerVolumeStore).muted;
+            HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
+            HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
+            HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
             HTMLAudioPlayer.play();
         });
-        unsubscriberVolumeStore=audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
-            const reduceVolume=audioManager.talking&&audioManager.decreaseWhileTalking;
-            if(reduceVolume&&!audioManager.volumeReduced) {
-                audioManager.volume*=0.5;
-            } else if(!reduceVolume&&audioManager.volumeReduced) {
-                audioManager.volume*=2.0;
+        unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
+            const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
+            if (reduceVolume && !audioManager.volumeReduced) {
+                audioManager.volume *= 0.5;
+            } else if (!reduceVolume && audioManager.volumeReduced) {
+                audioManager.volume *= 2.0;
             }
-            audioManager.volumeReduced=reduceVolume;
-            HTMLAudioPlayer.volume=audioManager.volume;
-            HTMLAudioPlayer.muted=audioManager.muted;
-            HTMLAudioPlayer.loop=audioManager.loop;
+            audioManager.volumeReduced = reduceVolume;
+            HTMLAudioPlayer.volume = audioManager.volume;
+            HTMLAudioPlayer.muted = audioManager.muted;
+            HTMLAudioPlayer.loop = audioManager.loop;
         })
     })
 
     onDestroy(() => {
-        if(unsubscriberFileStore) {
+        if (unsubscriberFileStore) {
             unsubscriberFileStore();
         }
-        if(unsubscriberVolumeStore) {
+        if (unsubscriberVolumeStore) {
             unsubscriberVolumeStore();
         }
     })
 
-    function onMute() {
-        audioManagerVolumeStore.setMuted(!get(audioManagerVolumeStore).muted);
-        localUserStore.setAudioPlayerMuted(get(audioManagerVolumeStore).muted);
-        setVolume();
-    }
-
-    function setVolume() {
+    function changeVolume() {
         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}
-            on:change={setVolume}>
+        <input type="range" min="0" max="1" step="0.025" bind:this={audioPlayerVol} on:change={setVolume}>
     </div>
     <div class="audio-manager-reduce-conversation">
         <label>
@@ -136,7 +142,7 @@
         margin-left: auto;
         margin-right: auto;
 
-        background-color: rgb(0,0,0,0.5);
+        background-color: rgb(0, 0, 0, 0.5);
         display: grid;
         grid-template-rows: 50% 50%;
         color: whitesmoke;
diff --git a/front/src/Components/EmoteMenu/EmoteMenu.svelte b/front/src/Components/EmoteMenu/EmoteMenu.svelte
index 1a973c1f..cf36c150 100644
--- a/front/src/Components/EmoteMenu/EmoteMenu.svelte
+++ b/front/src/Components/EmoteMenu/EmoteMenu.svelte
@@ -17,7 +17,7 @@
       styleProperties: {
         '--font': 'Press Start 2P'
       },
-      showSearch : false
+      autoFocusSearch : false
     });
 
     picker.on("emoji", (selection) => {
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index a3bbc0e4..0a73fd66 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/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);
         }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 1bd55426..e47cd7b2 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/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");
diff --git a/front/src/Stores/EmoteStore.ts b/front/src/Stores/EmoteStore.ts
index 56b06659..d41e92a8 100644
--- a/front/src/Stores/EmoteStore.ts
+++ b/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();