Save volume settings to local storage

Author: gereon77

agot-bg-game-server/package.json

@@ -29,7 +29,7 @@
     "classnames": "^2.3.1",
     "css-loader": "^6.7.3",
     "dotenv": "^14.2.0",
-    "emoji-picker-react": "^4.0.6",
+    "emoji-picker-react": "^4.10.0",
     "eslint": "^8.7.0",
     "eslint-plugin-react": "^7.28.0",
     "express": "^4.17.2",

agot-bg-game-server/src/client/GameClient.ts

@@ -42,107 +42,120 @@ export default class GameClient {
     chatClient: ChatClient = new ChatClient(this);
     sfxManager: SfxManager = new SfxManager(this);
 
+    get currentVolumeSettings(): { notifications: number, music: number, sfx: number} {
+        if (!this.authenticatedUser) {
+            throw new Error("Authenticated user required");
+        }
+        return {
+            notifications: this.authenticatedUser.settings.notificationsVolume,
+            music: this.authenticatedUser.settings.musicVolume,
+            sfx: this.authenticatedUser.settings.sfxVolume
+        };
+    }
+
+    private set currentVolumeSettings(value: { notifications: number, music: number, sfx: number}) {
+        if (!this.authenticatedUser) {
+            throw new Error("Authenticated user required");
+        }
+        this.authenticatedUser.settings.notificationsVolume = value.notifications ?? 1;
+        this.authenticatedUser.settings.musicVolume = value.music ?? 1;
+        this.authenticatedUser.settings.sfxVolume = value.sfx ?? 1;
+    }
+
     get muted(): boolean {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         return this.authenticatedUser.settings.muted;
     }
 
     set muted(value: boolean) {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         this.authenticatedUser.settings.muted = value;
         if (value == true) {
-            const oldVolumes = {
-                notificationsVolume: this.authenticatedUser.settings.notificationsVolume,
-                musicVolume: this.authenticatedUser.settings.musicVolume,
-                sfxVolume: this.authenticatedUser.settings.sfxVolume
-            };
-            localStorage.setItem('oldVolumes', JSON.stringify(oldVolumes));
+            sessionStorage.setItem('oldVolumes', JSON.stringify(this.currentVolumeSettings));
 
-            this.authenticatedUser.settings.notificationsVolume = 0;
-            this.authenticatedUser.settings.musicVolume = 0;
-            this.authenticatedUser.settings.sfxVolume = 0;
+            this.currentVolumeSettings = {notifications: 0, music: 0, sfx: 0};
 
             this.sfxManager.muteAll();
         } else {
-            const oldVolumesFromStorage = JSON.parse(localStorage.getItem('oldVolumes') || '{}');
-            this.authenticatedUser.settings.notificationsVolume = oldVolumesFromStorage.notificationsVolume ?? 1;
-            this.authenticatedUser.settings.musicVolume = oldVolumesFromStorage.musicVolume ?? 1;
-            this.authenticatedUser.settings.sfxVolume = oldVolumesFromStorage.sfxVolume ?? 1;
+            const oldVolumesFromStorage = JSON.parse(sessionStorage.getItem('oldVolumes') || '{}');
+            this.currentVolumeSettings = oldVolumesFromStorage;
 
-            localStorage.removeItem('oldVolumes');
+            localStorage.removeItem('oldVolumes'); // Todo: Remove this some day
+            sessionStorage.removeItem('oldVolumes');
 
             this.sfxManager.unmuteAll();
         }
 
+        localStorage.setItem('volumeSettings', JSON.stringify(this.currentVolumeSettings));
         this.authenticatedUser.syncSettings();
     }
 
     get notificationsVolume(): number {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         return this.authenticatedUser.settings.notificationsVolume;
     }
 
     set notificationsVolume(value: number) {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         this.authenticatedUser.settings.notificationsVolume = value;
-        this.setCurrentMutedState(value);
+        this.setCurrentMutedStateAndSaveVolumeSettingsToLocalStorage();
 
         this.authenticatedUser.syncSettings();
     }
 
     get musicVolume(): number {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         return this.authenticatedUser.settings.musicVolume;
     }
 
     set musicVolume(value: number) {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         this.authenticatedUser.settings.musicVolume = value;
-        this.setCurrentMutedState(value);
+        this.setCurrentMutedStateAndSaveVolumeSettingsToLocalStorage();
 
         this.authenticatedUser.syncSettings();
     }
 
     get sfxVolume(): number {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         return this.authenticatedUser.settings.sfxVolume;
     }
 
     set sfxVolume(value: number) {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         this.authenticatedUser.settings.sfxVolume = value;
-        this.setCurrentMutedState(value);
+        this.setCurrentMutedStateAndSaveVolumeSettingsToLocalStorage();
 
         this.authenticatedUser.syncSettings();
     }
 
     get authenticatedPlayer(): Player | null {
         if (!this.authenticatedUser) {
-            throw new Error("Game client must have an authenticated user");
+            throw new Error("Authenticated user required");
         }
 
         if (!this.entireGame || !(this.entireGame.childGameState instanceof IngameGameState)) {
@@ -156,16 +169,18 @@ export default class GameClient {
         }
     }
 
-    private setCurrentMutedState(value: number): void {
+    private setCurrentMutedStateAndSaveVolumeSettingsToLocalStorage(): void {
         if (!this.authenticatedUser) {
             return;
         }
 
-        if (value > 0) {
-            this.authenticatedUser.settings.muted = false;
-        } else if (this.musicVolume == 0 && this.notificationsVolume == 0 && this.sfxVolume == 0) {
+        if (this.musicVolume == 0 && this.notificationsVolume == 0 && this.sfxVolume == 0) {
             this.authenticatedUser.settings.muted = true;
+        } else {
+            this.authenticatedUser.settings.muted = false;
         }
+
+        localStorage.setItem('volumeSettings', JSON.stringify(this.currentVolumeSettings));
     }
 
     constructor(authData: AuthData) {
@@ -307,6 +322,7 @@ export default class GameClient {
 
             this.connectionState = ConnectionState.SYNCED;
             this.isReconnecting = false;
+            this.loadVolumeSettingsFromLocalStorage();
         } else if (message.type == "new-private-chat-room") {
             if (this.entireGame == null) {
                 return;
@@ -377,4 +393,15 @@ export default class GameClient {
         this.authenticatedUser = null;
         this.isReconnecting = false;
     }
+
+    private loadVolumeSettingsFromLocalStorage(): void {
+        const item = localStorage.getItem('volumeSettings');
+        if (!item) {
+            return;
+        }
+
+        const volumeSettings = JSON.parse(item);
+        this.currentVolumeSettings = volumeSettings;
+        this.setCurrentMutedStateAndSaveVolumeSettingsToLocalStorage();
+    }
 }

agot-bg-game-server/src/client/chat-client/ChatComponent.tsx

@@ -174,7 +174,7 @@ export default class ChatComponent extends Component<ChatComponentProps> {
                                             theme={Theme.DARK}
                                             autoFocusSearch={!isMobile}
                                             emojiStyle={isMobile ? EmojiStyle.NATIVE : EmojiStyle.APPLE}
-                                            suggestedEmojisMode={SuggestionMode.FREQUENT}
+                                            suggestedEmojisMode={SuggestionMode.RECENT}
                                             lazyLoadEmojis={true}
                                             onEmojiClick={(emoji) => {
                                                 const input = document.getElementById(`chat-client-input-${this.channel.id}`) as HTMLInputElement;