From 902ce585e56f2fab4ceffcac4a85d405cceb098c Mon Sep 17 00:00:00 2001
From: gereon77 <gereon77@users.noreply.github.com>
Date: Thu, 8 Feb 2024 00:35:16 +0100
Subject: [PATCH] Add volume slider and rework audio handling

---
 .../src/client/EntireGameComponent.tsx        |  26 +-
 agot-bg-game-server/src/client/GameClient.ts  |  49 ++-
 .../src/client/IngameComponent.tsx            | 316 +++++++++---------
 .../src/client/chat-client/ChatComponent.tsx  |   7 +-
 .../game-state-panel/CombatComponent.tsx      |   6 +-
 .../game-state-panel/GameEndedComponent.tsx   |   6 +-
 .../ResolveSingleMarchOrderComponent.tsx      |   4 +-
 .../src/client/utils/SfxManager.ts            | 287 ++++++++++++++++
 .../client/utils/VolumeSliderComponent.tsx    |  67 ++++
 .../src/client/utils/sound-effects.ts         | 161 ---------
 agot-bg-game-server/src/common/EntireGame.ts  |   4 +-
 .../src/messages/ClientMessage.ts             |   4 +-
 agot-bg-game-server/src/server/User.ts        |  31 +-
 .../src/server/serializedGameMigrations.ts    |  14 +
 14 files changed, 621 insertions(+), 361 deletions(-)
 create mode 100644 agot-bg-game-server/src/client/utils/SfxManager.ts
 create mode 100644 agot-bg-game-server/src/client/utils/VolumeSliderComponent.tsx
 delete mode 100644 agot-bg-game-server/src/client/utils/sound-effects.ts

diff --git a/agot-bg-game-server/src/client/EntireGameComponent.tsx b/agot-bg-game-server/src/client/EntireGameComponent.tsx
index 49a7349ce..621fb3d48 100644
--- a/agot-bg-game-server/src/client/EntireGameComponent.tsx
+++ b/agot-bg-game-server/src/client/EntireGameComponent.tsx
@@ -10,7 +10,6 @@ import CancelledComponent from "./CancelledComponent";
 import CancelledGameState from "../common/cancelled-game-state/CancelledGameState";
 import Col from "react-bootstrap/Col";
 import Badge from "react-bootstrap/Badge";
-import notificationSound from "../../public/sounds/notification.ogg";
 import faviconNormal from "../../public/images/favicon.ico";
 import faviconAlert from "../../public/images/favicon-alert.ico";
 import rollingDicesImage from "../../public/images/icons/rolling-dices.svg";
@@ -25,7 +24,6 @@ import HouseIconComponent from "./game-state-panel/utils/HouseIconComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLock, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 import GameEndedGameState from "../common/ingame-game-state/game-ended-game-state/GameEndedGameState";
-import introSound from "../../public/sounds/game-of-thrones-intro.ogg";
 import CombatGameState from "../common/ingame-game-state/action-game-state/resolve-march-order-game-state/combat-game-state/CombatGameState";
 import { toast, ToastContainer } from "react-toastify";
 import { cssTransition } from "react-toastify";
@@ -48,7 +46,6 @@ interface EntireGameComponentProps {
 @observer
 export default class EntireGameComponent extends Component<EntireGameComponentProps> {
     @observable showMapWhenDrafting = false;
-    @observable playWelcomeSound = false;
     setIntervalId = -1;
 
     get entireGame(): EntireGame {
@@ -121,9 +118,6 @@ export default class EntireGameComponent extends Component<EntireGameComponentPr
                             ? <IngameComponent gameClient={this.props.gameClient} gameState={this.entireGame.childGameState} />
                             : this.entireGame.childGameState instanceof CancelledGameState && <CancelledComponent gameClient={this.props.gameClient} gameState={this.entireGame.childGameState} />
             }
-            {this.playWelcomeSound && !this.props.gameClient.musicMuted &&
-                <audio id="welcome-sound" src={introSound} autoPlay onEnded={() => this.playWelcomeSound = false} />
-            }
             <ToastContainer
                 autoClose={7500}
                 position="top-center"
@@ -350,24 +344,12 @@ export default class EntireGameComponent extends Component<EntireGameComponentPr
     }
 
     onGameStarted(): void {
-        const audio = document.getElementById("welcome-sound") as HTMLAudioElement;
-        // Make sure it's not playing right now
-        if (audio && !audio.paused) {
-            return;
-        }
-
-        if (!this.props.gameClient.musicMuted) {
-            const intro = new Audio(introSound);
-            intro.play();
-        }
+        this.props.gameClient.sfxManager.playGotTheme();
     }
 
     onClientGameStateChange(): void {
         if (this.props.gameClient.isOwnTurn()) {
-            if (!this.props.gameClient.muted) {
-                const audio = new Audio(notificationSound);
-                audio.play();
-            }
+            this.props.gameClient.sfxManager.playNotificationSound();
 
             const player = this.props.gameClient.authenticatedPlayer;
             if (player) {
@@ -411,10 +393,6 @@ export default class EntireGameComponent extends Component<EntireGameComponentPr
         }
 
         this.setIntervalId = window.setInterval(() => this.setNow(), 1000);
-
-        /* if (!this.isInCombat) {
-            this.playWelcomeSound = true;
-        } */
     }
 
     componentWillUnmount(): void {
diff --git a/agot-bg-game-server/src/client/GameClient.ts b/agot-bg-game-server/src/client/GameClient.ts
index 988dad1e3..1ad1ed5c5 100644
--- a/agot-bg-game-server/src/client/GameClient.ts
+++ b/agot-bg-game-server/src/client/GameClient.ts
@@ -9,7 +9,7 @@ import House from "../common/ingame-game-state/game-data-structure/House";
 import ChatClient from "./chat-client/ChatClient";
 import BetterMap from "../utils/BetterMap";
 import { compress, decompress } from "./utils/compression";
-import { playSoundWhenClickingMarchOrder, playSoundForLogEvent, stopRunningSoundEffect } from "./utils/sound-effects";
+import SfxManager from "./utils/SfxManager";
 
 export interface AuthData {
     userId: string;
@@ -40,6 +40,7 @@ export default class GameClient {
     @observable isReconnecting = false;
 
     chatClient: ChatClient = new ChatClient(this);
+    sfxManager: SfxManager = new SfxManager(this);
 
     get muted(): boolean {
         if (!this.authenticatedUser) {
@@ -55,6 +56,9 @@ export default class GameClient {
         }
 
         this.authenticatedUser.settings.muted = value;
+        if (value == true) {
+            this.authenticatedUser.settings.notificationsVolume = 0;
+        }
         this.authenticatedUser.syncSettings();
     }
 
@@ -72,6 +76,45 @@ export default class GameClient {
         }
 
         this.authenticatedUser.settings.musicMuted = value;
+        if (value == true) {
+            this.authenticatedUser.settings.musicVolume = 0;
+        }
+        this.authenticatedUser.syncSettings();
+    }
+
+    get notificationsVolume(): number {
+        if (!this.authenticatedUser) {
+            throw new Error("Game client must have an authenticated user");
+        }
+
+        return this.authenticatedUser.settings.notificationsVolume;
+    }
+
+    set notificationsVolume(value: number) {
+        if (!this.authenticatedUser) {
+            throw new Error("Game client must have an authenticated user");
+        }
+
+        this.authenticatedUser.settings.notificationsVolume = value;
+        this.authenticatedUser.settings.muted = value == 0;
+        this.authenticatedUser.syncSettings();
+    }
+
+    get musicVolume(): number {
+        if (!this.authenticatedUser) {
+            throw new Error("Game client must have an authenticated user");
+        }
+
+        return this.authenticatedUser.settings.musicVolume;
+    }
+
+    set musicVolume(value: number) {
+        if (!this.authenticatedUser) {
+            throw new Error("Game client must have an authenticated user");
+        }
+
+        this.authenticatedUser.settings.musicVolume = value;
+        this.authenticatedUser.settings.musicMuted = value == 0;
         this.authenticatedUser.syncSettings();
     }
 
@@ -300,8 +343,4 @@ export default class GameClient {
         this.authenticatedUser = null;
         this.isReconnecting = false;
     }
-
-    public playSoundWhenClickingMarchOrder = playSoundWhenClickingMarchOrder;
-    public playSoundForLogEvent = playSoundForLogEvent;
-    public stopRunningSoundEffect = stopRunningSoundEffect;
 }
diff --git a/agot-bg-game-server/src/client/IngameComponent.tsx b/agot-bg-game-server/src/client/IngameComponent.tsx
index 9e5ff444d..6f9a8fcaf 100644
--- a/agot-bg-game-server/src/client/IngameComponent.tsx
+++ b/agot-bg-game-server/src/client/IngameComponent.tsx
@@ -109,10 +109,10 @@ import HouseNumberResultsComponent from "./HouseNumberResultsComponent";
 import houseIconImages from "./houseIconImages";
 import { preemptiveRaid } from "../common/ingame-game-state/game-data-structure/wildling-card/wildlingCardTypes";
 import VotesListComponent from "./VotesListComponent";
-import voteSound from "../../public/sounds/vote-started.ogg";
 import { houseColorFilters } from "./houseColorFilters";
 import LocalStorageService from "./utils/localStorageService";
 import SimpleInfluenceIconComponent from "./game-state-panel/utils/SimpleInfluenceIconComponent";
+import VolumeSliderComponent from "./utils/VolumeSliderComponent";
 
 interface ColumnOrders {
     gameStateColumn: number;
@@ -265,7 +265,7 @@ export default class IngameComponent extends Component<IngameComponentProps> {
                               "d-none d-xxl-block": !isMobile && this.gameSettings.playerCount >= 8 }
                         )}
                     >
-                        {this.renderHousesColumn(true, tracks)}
+                        {this.renderHousesColumn(isMobile, tracks)}
                     </Col>
                 </Row>
                 {this.renderScrollbarModal()}
@@ -280,20 +280,18 @@ export default class IngameComponent extends Component<IngameComponentProps> {
         }
 
         return <OverlayTrigger
-            overlay={<Popover id="game-controls-popover" style={{maxWidth: "100%"}}>
-                <Col>
-                    {this.renderGameControlsRow(false)}
-                </Col>
-            </Popover>}
+            overlay={this.renderGameControlsPopover()}
             placement="auto"
             trigger="click"
             rootClose
         >
-            <div className={classNames("clickable btn btn-sm btn-secondary p-1", {
-                "d-xl-none d-xxl-none": !isMobile && this.gameSettings.playerCount < 8,
-                "d-xxl-none": !isMobile && this.gameSettings.playerCount >= 8
-            })}
-                style={{ position: "fixed", right: this.user?.settings.responsiveLayout ? "auto" : "4px", left: this.user?.settings.responsiveLayout ? "4px" : "auto", top: "45px", padding: "4px", borderStyle: "none" }}
+            <div className="clickable btn btn-sm btn-secondary p-1" style={{
+                position: "fixed",
+                right: this.user?.settings.responsiveLayout ? "auto" : "4px",
+                left: this.user?.settings.responsiveLayout ? "4px" : "auto",
+                top: "45px",
+                padding: "4px",
+                borderStyle: "none" }}
             >
                 <img src={settingsKnobsImage} width={24} />
             </div>
@@ -450,7 +448,7 @@ export default class IngameComponent extends Component<IngameComponentProps> {
                         <FontAwesomeIcon icon={faRightLeft} style={{color: "white"}} size="2xs"/>
                     </button>
                 </Card>
-                <Card className={this.mapScrollbarEnabled ? "flex-fill-remaining mb-2" : "mb-2"}>
+                <Card className={this.mapScrollbarEnabled ? "flex-fill-remaining" : ""}>
                     <Card.Body id="houses-panel" className="no-space-around">
                         <ListGroup variant="flush">
                             <ListGroupItem className="d-flex justify-content-center p-2">
@@ -560,13 +558,19 @@ export default class IngameComponent extends Component<IngameComponentProps> {
     }
 
     private renderGameControlsRow(applyFlexFooter: boolean): React.ReactNode {
-        const {result: canLaunchCancelGameVote, reason: canLaunchCancelGameVoteReason} = this.ingame.canLaunchCancelGameVote(this.authenticatedPlayer);
-        const {result: canLaunchEndGameVote, reason: canLaunchEndGameVoteReason} = this.ingame.canLaunchEndGameVote(this.authenticatedPlayer);
-        const {result: canLaunchPauseGameVote, reason: canLaunchPauseGameVoteReason} = this.ingame.canLaunchPauseGameVote(this.authenticatedPlayer);
-        const {result: canLaunchResumeGameVote, reason: canLaunchResumeGameVoteReason} = this.ingame.canLaunchResumeGameVote(this.authenticatedPlayer);
-        const {result: canLaunchExtendPlayerClocksVote, reason: canLaunchExtendPlayerClocksVoteReason} = this.ingame.canLaunchExtendPlayerClocksVote(this.authenticatedPlayer);
-
         return <Row className={applyFlexFooter && this.mapScrollbarEnabled ? "flex-footer" : ""} id="game-controls">
+            <Col xs="auto">
+                <div className="btn btn-outline-light btn-sm">
+                <OverlayTrigger
+                    overlay={this.renderGameControlsPopover()}
+                    placement="top"
+                    trigger="click"
+                    rootClose
+                >
+                    <img src={settingsKnobsImage} width={32} />
+                </OverlayTrigger>
+                </div>
+            </Col>
             <Col xs="auto">
                 <button type="button" className="btn btn-outline-light btn-sm" onClick={() => this.gameClient.muted = !this.gameClient.muted}>
                     <OverlayTrigger
@@ -595,160 +599,175 @@ export default class IngameComponent extends Component<IngameComponentProps> {
                     </OverlayTrigger>
                 </button>
             </Col>
-            {this.authenticatedPlayer && <>
-                <Col xs="auto">
-                    <button type="button"
-                        className="btn btn-outline-light btn-sm"
-                        onClick={() => this.ingame.launchCancelGameVote()}
-                        disabled={!canLaunchCancelGameVote}
-                    >
-                        <OverlayTrigger
-                            placement="auto"
-                            overlay={<Tooltip id="cancel-game-vote-tooltip">
-                                {canLaunchCancelGameVote ? (
-                                    "Launch a vote to cancel the game"
-                                ) : canLaunchCancelGameVoteReason == "only-players-can-vote" ? (
-                                    "Only participating players can vote"
-                                ) : canLaunchCancelGameVoteReason == "already-existing" ? (
-                                    "A vote to cancel the game is already ongoing"
-                                ) : canLaunchCancelGameVoteReason == "already-cancelled" ? (
-                                    "Game has already been cancelled"
-                                ) : canLaunchCancelGameVoteReason == "already-ended" ? (
-                                    "Game has already ended"
-                                ) : canLaunchCancelGameVoteReason == "forbidden-in-tournament-mode" ? (
-                                    "Canceling games is not allowed in tournaments"
-                                ) : "Vote not possible"}
-                            </Tooltip>}
-                        >
-                            <img src={cancelImage} width={32} />
-                        </OverlayTrigger>
-                    </button>
-                </Col>
-                <Col xs="auto">
-                    <button type="button"
-                        className="btn btn-outline-light btn-sm"
-                        onClick={() => this.ingame.launchEndGameVote()}
-                        disabled={!canLaunchEndGameVote}
-                    >
-                        <OverlayTrigger
-                            placement="auto"
-                            overlay={<Tooltip id="end-game-vote-tooltip">
-                                {canLaunchEndGameVote ? (
-                                    "Launch a vote to end the game after the current round"
-                                ) : canLaunchEndGameVoteReason == "game-paused" ? (
-                                    "The game must be resumed first"
-                                ) : canLaunchEndGameVoteReason == "only-players-can-vote" ? (
-                                    "Only participating players can vote"
-                                ) : canLaunchEndGameVoteReason == "already-last-turn" ? (
-                                    "It is already the last round"
-                                ) : canLaunchEndGameVoteReason == "already-existing" ? (
-                                    "A vote to end the game is already ongoing"
-                                ) : canLaunchEndGameVoteReason == "already-cancelled" ? (
-                                    "Game has already been cancelled"
-                                ) : canLaunchEndGameVoteReason == "already-ended" ? (
-                                    "Game has already ended"
-                                ) : canLaunchEndGameVoteReason == "forbidden-in-tournament-mode" ? (
-                                    "Early end is not allowed in tournaments"
-                                ) : "Vote not possible"}
-                            </Tooltip>}
-                        >
-                            <img src={truceImage} width={32} />
-                        </OverlayTrigger>
-                    </button>
-                </Col>
-                {this.gameSettings.onlyLive && !this.ingame.paused &&
-                    <Col xs="auto">
-                        <button type="button"
-                            className="btn btn-outline-light btn-sm"
-                            onClick={() => this.ingame.launchPauseGameVote()}
-                            disabled={!canLaunchPauseGameVote}
-                        >
-                            <OverlayTrigger
-                                placement="auto"
-                                overlay={<Tooltip id="pause-game-vote-tooltip">
-                                    {canLaunchPauseGameVote ? (
-                                        "Launch a vote to pause the game"
-                                    ) : canLaunchPauseGameVoteReason == "only-players-can-vote" ? (
-                                        "Only participating players can vote"
-                                    ) : canLaunchPauseGameVoteReason == "already-existing" ? (
-                                        "A vote to pause the game is already ongoing"
-                                    ) : canLaunchPauseGameVoteReason == "already-cancelled" ? (
-                                        "Game has already been cancelled"
-                                    ) : canLaunchPauseGameVoteReason == "already-ended" ? (
-                                        "Game has already ended"
-                                    ) : "Vote not possible"}
-                                </Tooltip>}
-                            >
-                                <img src={pauseImage} width={32} />
-                            </OverlayTrigger>
-                        </button>
-                    </Col>}
-                {this.gameSettings.onlyLive && this.ingame.paused &&
+        </Row>;
+    }
+
+    private renderGameControlsPopover(): OverlayChildren {
+        const {result: canLaunchCancelGameVote, reason: canLaunchCancelGameVoteReason} = this.ingame.canLaunchCancelGameVote(this.authenticatedPlayer);
+        const {result: canLaunchEndGameVote, reason: canLaunchEndGameVoteReason} = this.ingame.canLaunchEndGameVote(this.authenticatedPlayer);
+        const {result: canLaunchPauseGameVote, reason: canLaunchPauseGameVoteReason} = this.ingame.canLaunchPauseGameVote(this.authenticatedPlayer);
+        const {result: canLaunchResumeGameVote, reason: canLaunchResumeGameVoteReason} = this.ingame.canLaunchResumeGameVote(this.authenticatedPlayer);
+        const {result: canLaunchExtendPlayerClocksVote, reason: canLaunchExtendPlayerClocksVoteReason} = this.ingame.canLaunchExtendPlayerClocksVote(this.authenticatedPlayer);
+
+        return <Popover id="game-controls-popover" style={{ maxWidth: "100%", borderColor: "white"}}>
+            <Col className="m-2 p-2">
+                <VolumeSliderComponent volume={this.gameClient.notificationsVolume * 100} name="Notifications" onVolumeChange={(val) => this.gameClient.sfxManager.notificationVolumeChanged(val / 100)}/>
+                <VolumeSliderComponent volume={this.gameClient.musicVolume * 100} name="Music and Sfx" onVolumeChange={(val) => this.gameClient.sfxManager.musicVolumeChanged(val / 100)}/>
+                {this.authenticatedPlayer && <Row className="justify-content-center mt-3">
                     <Col xs="auto">
                         <button type="button"
                             className="btn btn-outline-light btn-sm"
-                            onClick={() => this.ingame.launchResumeGameVote()}
-                            disabled={!canLaunchResumeGameVote}
+                            onClick={() => this.ingame.launchCancelGameVote()}
+                            disabled={!canLaunchCancelGameVote}
                         >
                             <OverlayTrigger
                                 placement="auto"
-                                overlay={<Tooltip id="resume-game-vote-tooltip">
-                                    {canLaunchResumeGameVote ? (
-                                        "Launch a vote to resume the game"
-                                    ) : canLaunchResumeGameVoteReason == "only-players-can-vote" ? (
+                                overlay={<Tooltip id="cancel-game-vote-tooltip">
+                                    {canLaunchCancelGameVote ? (
+                                        "Launch a vote to cancel the game"
+                                    ) : canLaunchCancelGameVoteReason == "only-players-can-vote" ? (
                                         "Only participating players can vote"
-                                    ) : canLaunchResumeGameVoteReason == "already-existing" ? (
-                                        "A vote to resume the game is already ongoing"
-                                    ) : canLaunchResumeGameVoteReason == "already-cancelled" ? (
+                                    ) : canLaunchCancelGameVoteReason == "already-existing" ? (
+                                        "A vote to cancel the game is already ongoing"
+                                    ) : canLaunchCancelGameVoteReason == "already-cancelled" ? (
                                         "Game has already been cancelled"
-                                    ) : canLaunchResumeGameVoteReason == "already-ended" ? (
+                                    ) : canLaunchCancelGameVoteReason == "already-ended" ? (
                                         "Game has already ended"
+                                    ) : canLaunchCancelGameVoteReason == "forbidden-in-tournament-mode" ? (
+                                        "Canceling games is not allowed in tournaments"
                                     ) : "Vote not possible"}
                                 </Tooltip>}
                             >
-                                <img src={playImage} width={32} />
+                                <img src={cancelImage} width={32} />
                             </OverlayTrigger>
                         </button>
-                    </Col>}
-                {this.gameSettings.onlyLive &&
+                    </Col>
                     <Col xs="auto">
                         <button type="button"
                             className="btn btn-outline-light btn-sm"
-                            onClick={() => this.ingame.launchExtendPlayerClocksVote()}
-                            disabled={!canLaunchExtendPlayerClocksVote}
+                            onClick={() => this.ingame.launchEndGameVote()}
+                            disabled={!canLaunchEndGameVote}
                         >
                             <OverlayTrigger
                                 placement="auto"
-                                overlay={<Tooltip id="extend-clocks-vote-tooltip">
-                                    {canLaunchExtendPlayerClocksVote ? (
-                                        "Launch a vote to extend all player clocks by 15 minutes"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "game-paused" ? (
+                                overlay={<Tooltip id="end-game-vote-tooltip">
+                                    {canLaunchEndGameVote ? (
+                                        "Launch a vote to end the game after the current round"
+                                    ) : canLaunchEndGameVoteReason == "game-paused" ? (
                                         "The game must be resumed first"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "only-players-can-vote" ? (
+                                    ) : canLaunchEndGameVoteReason == "only-players-can-vote" ? (
                                         "Only participating players can vote"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "already-existing" ? (
-                                        "A vote to extend all clocks is already ongoing"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "already-extended" ? (
-                                        "Player clocks have already been extended"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "max-vote-count-reached" ? (
-                                        "The maximum amount of votes was reached"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "already-cancelled" ? (
+                                    ) : canLaunchEndGameVoteReason == "already-last-turn" ? (
+                                        "It is already the last round"
+                                    ) : canLaunchEndGameVoteReason == "already-existing" ? (
+                                        "A vote to end the game is already ongoing"
+                                    ) : canLaunchEndGameVoteReason == "already-cancelled" ? (
                                         "Game has already been cancelled"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "already-ended" ? (
+                                    ) : canLaunchEndGameVoteReason == "already-ended" ? (
                                         "Game has already ended"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "forbidden-in-tournament-mode" ? (
-                                        "Extending player clocks is not allowed in tournaments"
-                                    ) : canLaunchExtendPlayerClocksVoteReason == "forbidden-by-host" ? (
-                                        "Extension of player clocks was deactivated by the game host"
+                                    ) : canLaunchEndGameVoteReason == "forbidden-in-tournament-mode" ? (
+                                        "Early end is not allowed in tournaments"
                                     ) : "Vote not possible"}
                                 </Tooltip>}
                             >
-                                <img src={stopwatchPlus15Image} width={32} />
+                                <img src={truceImage} width={32} />
                             </OverlayTrigger>
                         </button>
-                    </Col>}
-            </>}
-        </Row>;
+                    </Col>
+                    {this.gameSettings.onlyLive && !this.ingame.paused &&
+                        <Col xs="auto">
+                            <button type="button"
+                                className="btn btn-outline-light btn-sm"
+                                onClick={() => this.ingame.launchPauseGameVote()}
+                                disabled={!canLaunchPauseGameVote}
+                            >
+                                <OverlayTrigger
+                                    placement="auto"
+                                    overlay={<Tooltip id="pause-game-vote-tooltip">
+                                        {canLaunchPauseGameVote ? (
+                                            "Launch a vote to pause the game"
+                                        ) : canLaunchPauseGameVoteReason == "only-players-can-vote" ? (
+                                            "Only participating players can vote"
+                                        ) : canLaunchPauseGameVoteReason == "already-existing" ? (
+                                            "A vote to pause the game is already ongoing"
+                                        ) : canLaunchPauseGameVoteReason == "already-cancelled" ? (
+                                            "Game has already been cancelled"
+                                        ) : canLaunchPauseGameVoteReason == "already-ended" ? (
+                                            "Game has already ended"
+                                        ) : "Vote not possible"}
+                                    </Tooltip>}
+                                >
+                                    <img src={pauseImage} width={32} />
+                                </OverlayTrigger>
+                            </button>
+                        </Col>}
+                    {this.gameSettings.onlyLive && this.ingame.paused &&
+                        <Col xs="auto">
+                            <button type="button"
+                                className="btn btn-outline-light btn-sm"
+                                onClick={() => this.ingame.launchResumeGameVote()}
+                                disabled={!canLaunchResumeGameVote}
+                            >
+                                <OverlayTrigger
+                                    placement="auto"
+                                    overlay={<Tooltip id="resume-game-vote-tooltip">
+                                        {canLaunchResumeGameVote ? (
+                                            "Launch a vote to resume the game"
+                                        ) : canLaunchResumeGameVoteReason == "only-players-can-vote" ? (
+                                            "Only participating players can vote"
+                                        ) : canLaunchResumeGameVoteReason == "already-existing" ? (
+                                            "A vote to resume the game is already ongoing"
+                                        ) : canLaunchResumeGameVoteReason == "already-cancelled" ? (
+                                            "Game has already been cancelled"
+                                        ) : canLaunchResumeGameVoteReason == "already-ended" ? (
+                                            "Game has already ended"
+                                        ) : "Vote not possible"}
+                                    </Tooltip>}
+                                >
+                                    <img src={playImage} width={32} />
+                                </OverlayTrigger>
+                            </button>
+                        </Col>}
+                    {this.gameSettings.onlyLive &&
+                        <Col xs="auto">
+                            <button type="button"
+                                className="btn btn-outline-light btn-sm"
+                                onClick={() => this.ingame.launchExtendPlayerClocksVote()}
+                                disabled={!canLaunchExtendPlayerClocksVote}
+                            >
+                                <OverlayTrigger
+                                    placement="auto"
+                                    overlay={<Tooltip id="extend-clocks-vote-tooltip">
+                                        {canLaunchExtendPlayerClocksVote ? (
+                                            "Launch a vote to extend all player clocks by 15 minutes"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "game-paused" ? (
+                                            "The game must be resumed first"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "only-players-can-vote" ? (
+                                            "Only participating players can vote"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "already-existing" ? (
+                                            "A vote to extend all clocks is already ongoing"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "already-extended" ? (
+                                            "Player clocks have already been extended"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "max-vote-count-reached" ? (
+                                            "The maximum amount of votes was reached"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "already-cancelled" ? (
+                                            "Game has already been cancelled"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "already-ended" ? (
+                                            "Game has already ended"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "forbidden-in-tournament-mode" ? (
+                                            "Extending player clocks is not allowed in tournaments"
+                                        ) : canLaunchExtendPlayerClocksVoteReason == "forbidden-by-host" ? (
+                                            "Extension of player clocks was deactivated by the game host"
+                                        ) : "Vote not possible"}
+                                    </Tooltip>}
+                                >
+                                    <img src={stopwatchPlus15Image} width={32} />
+                                </OverlayTrigger>
+                            </button>
+                        </Col>}
+                </Row>}
+            </Col>
+        </Popover>;
     }
 
     private renderInfluenceTracks(tracks: InfluenceTrackDetails[]): React.ReactNode {
@@ -1556,15 +1575,10 @@ export default class IngameComponent extends Component<IngameComponentProps> {
             toast(this.getWildlingsAttackFastTrackedComponent(preemptiveRaid, biddings, highestBidder, null));
         }
 
-        this.ingame.onVoteStarted = () => {
-            if (!this.gameClient.muted) {
-                const audio = new Audio(voteSound);
-                audio.play();
-            }
-        }
+        this.ingame.onVoteStarted = () => this.gameClient.sfxManager.playVoteNotificationSound();
 
         this.ingame.onLogReceived = log => {
-            this.gameClient.playSoundForLogEvent(log);
+            this.gameClient.sfxManager.playSoundForLogEvent(log);
         }
 
         if (this.gameClient.authenticatedUser?.note.length ?? 0 > 0) {
diff --git a/agot-bg-game-server/src/client/chat-client/ChatComponent.tsx b/agot-bg-game-server/src/client/chat-client/ChatComponent.tsx
index 4707877fa..ee2c0f145 100644
--- a/agot-bg-game-server/src/client/chat-client/ChatComponent.tsx
+++ b/agot-bg-game-server/src/client/chat-client/ChatComponent.tsx
@@ -16,7 +16,6 @@ import User from "../../server/User";
 import { preventOverflow } from "@popperjs/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFaceSmile, faSyncAlt } from "@fortawesome/free-solid-svg-icons";
-import notificationSound from "../../../public/sounds/raven_call.ogg";
 import EmojiPicker, { EmojiStyle, SuggestionMode, Theme } from 'emoji-picker-react';
 import { isMobile } from "react-device-detect";
 import classNames from "classnames";
@@ -346,10 +345,8 @@ export default class ChatComponent extends Component<ChatComponentProps> {
         if (this.props.currentlyViewed) {
             this.chatClient.markAsViewed(this.channel);
             this.audioPlayed = false;
-        } else if (singleMessageRetrieved && !this.audioPlayed && !this.props.gameClient.muted) {
-            const audio = new Audio(notificationSound);
-            audio.play();
-            this.audioPlayed = true;
+        } else if (singleMessageRetrieved && !this.audioPlayed) {
+            this.props.gameClient.sfxManager.playNewMessageReceivedSound();
         }
 
         if (noMoreMessages) {
diff --git a/agot-bg-game-server/src/client/game-state-panel/CombatComponent.tsx b/agot-bg-game-server/src/client/game-state-panel/CombatComponent.tsx
index c23c00d86..febd52699 100644
--- a/agot-bg-game-server/src/client/game-state-panel/CombatComponent.tsx
+++ b/agot-bg-game-server/src/client/game-state-panel/CombatComponent.tsx
@@ -39,7 +39,6 @@ import { tidesOfBattleCards } from "../../common/ingame-game-state/game-data-str
 import unitTypes from "../../common/ingame-game-state/game-data-structure/unitTypes";
 import SelectUnitsGameState from "../../common/ingame-game-state/select-units-game-state/SelectUnitsGameState";
 import AfterCombatHouseCardAbilitiesGameState from "../../common/ingame-game-state/action-game-state/resolve-march-order-game-state/combat-game-state/post-combat-game-state/after-combat-house-card-abilities-game-state/AfterCombatHouseCardAbilitiesGameState";
-import combatSound from "../../../public/sounds/combat.ogg";
 
 @observer
 export default class CombatComponent extends Component<GameStateComponentProps<CombatGameState>> {
@@ -146,7 +145,6 @@ export default class CombatComponent extends Component<GameStateComponentProps<C
                     [CancelHouseCardAbilitiesGameState, CancelHouseCardAbilitiesComponent],
                     [BeforeCombatHouseCardAbilitiesGameState, BeforeCombatHouseCardAbilitiesComponent]
                 ])}
-                {!this.props.gameClient.musicMuted && <audio id="combat-sound" src={combatSound} autoPlay />}
             </>
         );
     }
@@ -205,11 +203,15 @@ export default class CombatComponent extends Component<GameStateComponentProps<C
         this.props.mapControls.modifyRegionsOnMap.push(this.modifyRegionsOnMapCallback = () => this.modifyRegionsOnMap());
         this.props.mapControls.modifyUnitsOnMap.push(this.modifyUnitsOnMapCallback = () => this.modifyUnitsOnMap());
         this.props.mapControls.modifyOrdersOnMap.push(this.modifyOrdersOnMapCallback = () => this.modifyOrdersOnMap());
+
+        this.props.gameClient.sfxManager.playCombatSound();
     }
 
     componentWillUnmount(): void {
         _.pull(this.props.mapControls.modifyRegionsOnMap, this.modifyRegionsOnMapCallback);
         _.pull(this.props.mapControls.modifyUnitsOnMap, this.modifyUnitsOnMapCallback);
         _.pull(this.props.mapControls.modifyOrdersOnMap, this.modifyOrdersOnMapCallback);
+
+        this.props.gameClient.sfxManager.fadeOutCurrentMusic();
     }
 }
diff --git a/agot-bg-game-server/src/client/game-state-panel/GameEndedComponent.tsx b/agot-bg-game-server/src/client/game-state-panel/GameEndedComponent.tsx
index 2211e617d..880ef36f5 100644
--- a/agot-bg-game-server/src/client/game-state-panel/GameEndedComponent.tsx
+++ b/agot-bg-game-server/src/client/game-state-panel/GameEndedComponent.tsx
@@ -6,7 +6,6 @@ import GameEndedGameState from "../../common/ingame-game-state/game-ended-game-s
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 import crownImage from "../../../public/images/icons/crown.svg";
-import introSound from "../../../public/sounds/game-of-thrones-intro.ogg";
 import HouseIconComponent from "./utils/HouseIconComponent";
 import { houseColorFilters } from "../houseColorFilters";
 
@@ -62,8 +61,11 @@ export default class GameEndedComponent extends Component<GameStateComponentProp
                             </Col>
                     </Row>
                 </Col>
-                {!this.props.gameClient.musicMuted && <audio id="game-ended-sound" src={introSound} autoPlay />}
             </>
         );
     }
+
+    componentDidMount(): void {
+        this.props.gameClient.sfxManager.playGotTheme();
+    }
 }
diff --git a/agot-bg-game-server/src/client/game-state-panel/ResolveSingleMarchOrderComponent.tsx b/agot-bg-game-server/src/client/game-state-panel/ResolveSingleMarchOrderComponent.tsx
index 90c8d3520..840cd4b25 100644
--- a/agot-bg-game-server/src/client/game-state-panel/ResolveSingleMarchOrderComponent.tsx
+++ b/agot-bg-game-server/src/client/game-state-panel/ResolveSingleMarchOrderComponent.tsx
@@ -42,11 +42,11 @@ export default class ResolveSingleMarchOrderComponent extends Component<GameStat
 
     set selectedMarchOrderRegion(val: Region | null) {
         if (val && this._selectedMarchOrderRegion == null) {
-            this.props.gameClient.playSoundWhenClickingMarchOrder(val);
+            this.props.gameClient.sfxManager.playSoundWhenClickingMarchOrder(val);
         }
 
         if (val == null) {
-            this.props.gameClient.stopRunningSoundEffect();
+            this.props.gameClient.sfxManager.fadeOutCurrentSfx();
         }
 
         this._selectedMarchOrderRegion = val;
diff --git a/agot-bg-game-server/src/client/utils/SfxManager.ts b/agot-bg-game-server/src/client/utils/SfxManager.ts
new file mode 100644
index 000000000..2b41b97d2
--- /dev/null
+++ b/agot-bg-game-server/src/client/utils/SfxManager.ts
@@ -0,0 +1,287 @@
+
+import footmanYesMyLordSound from "../../../public/sounds/footman-yes-my-lord.ogg";
+import intenseHorseStallionNeighSound from "../../../public/sounds/intense-horse-stallion-neigh.ogg";
+import horseWhinnySound from "../../../public/sounds/horse-whinny.ogg";
+import horseGallopSound from "../../../public/sounds/horse-gallop.ogg";
+import ayeAyeCaptainSound from "../../../public/sounds/aye-aye-captain.ogg";
+import siegeTowerMovementSound from "../../../public/sounds/siege-tower-movement.ogg";
+import catapultRetractSound from "../../../public/sounds/catapult-retract.ogg";
+import dragonRoarSound from "../../../public/sounds/dragon-roar.ogg";
+import dragonGruntSound from "../../../public/sounds/dragon-grunt.ogg";
+import dragonRoaringAndBreatheFireSound from "../../../public/sounds/dragon-roaring-and-breathe-fire.ogg";
+import dragonHowlingRoarSound from "../../../public/sounds/dragon-howling-roar.ogg";
+
+import roarSound from "../../../public/sounds/roar.ogg";
+import attackyYellSound from "../../../public/sounds/attacky-yell.ogg";
+import longYellSound from "../../../public/sounds/long-yell.ogg";
+import angryGruntSound from "../../../public/sounds/angry-grunt.ogg";
+
+import hystericalLaughSound from "../../../public/sounds/hysterical-laugh.ogg";
+import swordCuttingAndKillingSound from "../../../public/sounds/sword-cutting-and-killing.ogg";
+import goreSwordStabSound from "../../../public/sounds/gore-sword-stab.ogg";
+
+import notificationSound from "../../../public/sounds/notification.ogg";
+import ravenCallSound from "../../../public/sounds/raven_call.ogg";
+import voteSound from "../../../public/sounds/vote-started.ogg";
+import introSound from "../../../public/sounds/game-of-thrones-intro.ogg";
+import combatSound from "../../../public/sounds/combat.ogg";
+
+const soundsForKnights = [
+    intenseHorseStallionNeighSound,
+    footmanYesMyLordSound,
+    horseWhinnySound,
+    horseGallopSound
+];
+
+const soundsForShips = [
+    ayeAyeCaptainSound,
+    footmanYesMyLordSound
+];
+
+const soundsForSiegeEngines = [
+    siegeTowerMovementSound,
+    catapultRetractSound
+];
+
+const soundsForBigDragons = [
+    dragonRoarSound,
+    dragonRoaringAndBreatheFireSound
+];
+
+const soundsForSmallDragons = [
+    dragonGruntSound
+];
+
+const soundsForFootmenOnly = [
+    roarSound,
+    footmanYesMyLordSound,
+    attackyYellSound,
+    longYellSound,
+    angryGruntSound
+];
+
+const soundsWhenUnitsAreDestroyedBySwords = [
+    swordCuttingAndKillingSound,
+    goreSwordStabSound
+];
+
+const soundsWhenDragonsAreDestroyed = [
+    dragonHowlingRoarSound
+];
+
+
+import _ from "lodash";
+import { pickRandom } from "../../utils/popRandom";
+import { GameLogData } from "../../common/ingame-game-state/game-data-structure/GameLog";
+import GameClient from "../GameClient";
+import Region from "../../common/ingame-game-state/game-data-structure/Region";
+import unitTypes, { dragon, knight, ship, siegeEngine } from "../../common/ingame-game-state/game-data-structure/unitTypes";
+
+class SfxManager {
+    currentlyPlayingMusic: HTMLAudioElement[] = [];
+    currentlyPlayingNotifications: HTMLAudioElement[] = [];
+
+    constructor(private gameClient: GameClient) {}
+
+    notificationVolumeChanged(newVal: number): void {
+        this.currentlyPlayingNotifications.forEach(cpn => {
+            cpn.volume = newVal;
+        });
+
+        this.gameClient.notificationsVolume = newVal;
+    }
+
+    musicVolumeChanged(newVal: number): void {
+        this.currentlyPlayingMusic.forEach(cpm => {
+            cpm.volume = newVal;
+        });
+
+        this.gameClient.musicVolume = newVal;
+    }
+
+    stopCurrentMusicAndSfx(): void {
+        this.currentlyPlayingMusic.forEach(currentlyPlayingAudio => {
+            currentlyPlayingAudio.pause();
+            currentlyPlayingAudio.currentTime = 0;
+        });
+
+        while (this.currentlyPlayingMusic.length > 0) {
+            const cpa = this.currentlyPlayingMusic.shift();
+            if (cpa) {
+                cpa.pause();
+                cpa.currentTime = 0;
+            }
+        }
+    }
+
+    fadeOutCurrentSfx(): void {
+        this.fadeOut(1000, 10);
+    }
+
+    fadeOutCurrentMusic(): void {
+        this.fadeOut(4000, 40);
+    }
+
+    private fadeOut(fadeOutDuration: number, fadeOutSteps: number): void {
+        if (this.currentlyPlayingMusic.length === 0) {
+            return;
+        }
+
+        const fadeOutInterval = fadeOutDuration / fadeOutSteps;
+        const volumeStep = this.gameClient.musicVolume / fadeOutSteps;
+
+        let interval = window.setInterval(() => {
+            if (this.currentlyPlayingMusic.length === 0 && interval > 0) {
+                clearInterval(interval);
+                interval = 0;
+                return;
+            }
+
+            this.currentlyPlayingMusic.forEach(audio => {
+                if (audio.volume - volumeStep > 0) {
+                    audio.volume -= volumeStep;
+                } else {
+                    audio.volume = 0;
+                    if (!audio.paused) {
+                        audio.pause();
+                        audio.currentTime = 0;
+                    }
+                    audio.dispatchEvent(new Event('ended'));
+                }
+            });
+        }, fadeOutInterval);
+    }
+
+    playNotificationSound(): void {
+        if (this.gameClient.muted) {
+            return;
+        }
+
+        this.playNotification(notificationSound, this.gameClient.notificationsVolume);
+    }
+
+    playVoteNotificationSound(): void {
+        if (this.gameClient.muted) {
+            return;
+        }
+
+        this.playNotification(voteSound, this.gameClient.notificationsVolume);
+    }
+
+    playNewMessageReceivedSound(): void {
+        if (this.gameClient.muted) {
+            return;
+        }
+
+        this.playNotification(ravenCallSound, this.gameClient.notificationsVolume);
+    }
+
+    playGotTheme(): void {
+        if (this.gameClient.musicMuted) {
+            return;
+        }
+
+        this.playMusic(introSound, this.gameClient.musicVolume, false);
+    }
+
+    playCombatSound(): void {
+        if (this.gameClient.musicMuted) {
+            return;
+        }
+
+        this.playMusic(combatSound, this.gameClient.musicVolume, false);
+    }
+
+    playSoundWhenClickingMarchOrder(region: Region): void {
+        if (this.gameClient.musicMuted) {
+            return;
+        }
+
+        const army = region.units.values;
+
+        const hasKnights = army.some(u => u.type == knight);
+        const hasShips = army.some(u => u.type == ship);
+        const hasSiegeEngines = army.some(u => u.type == siegeEngine);
+        const hasDragons = army.some(u => u.type == dragon);
+
+        const files = hasDragons && (this.gameClient.entireGame?.ingameGameState?.game.currentDragonStrength ?? -1) <= 2
+            ? soundsForSmallDragons
+            : hasDragons
+                ? soundsForBigDragons
+                : hasSiegeEngines
+                    ? soundsForSiegeEngines
+                    : hasKnights
+                        ? soundsForKnights
+                        : hasShips
+                            ? soundsForShips
+                            : soundsForFootmenOnly;
+
+        this.playRandomMusic(files, this.gameClient.musicVolume, true);
+    }
+
+    playSoundForLogEvent(log: GameLogData): void {
+        if (this.gameClient.musicMuted) {
+            return;
+        }
+
+        switch(log.type) {
+            case "doran-martell-asos-used":
+            case "doran-used":
+                this.playMusic(hystericalLaughSound, this.gameClient.musicVolume, false);
+                break;
+            case "killed-after-combat": {
+                const units = log.killed.map(ut => unitTypes.get(ut));
+                if (units.includes(dragon)) {
+                    this.playRandomMusic(soundsWhenDragonsAreDestroyed, this.gameClient.musicVolume, false);
+                } else {
+                    this.playRandomMusic(soundsWhenUnitsAreDestroyedBySwords, this.gameClient.musicVolume, false);
+                }
+                break;
+            }
+            case "immediatly-killed-after-combat": {
+                const killed = _.concat(log.killedBecauseCantRetreat, log.killedBecauseWounded);
+                const units = killed.map(ut => unitTypes.get(ut));
+                if (units.includes(dragon)) {
+                    this.playRandomMusic(soundsWhenDragonsAreDestroyed, this.gameClient.musicVolume, false);
+                }
+                break;
+            }
+            case "retreat-casualties-suffered": {
+                const units = log.units.map(ut => unitTypes.get(ut));
+                if (units.includes(dragon)) {
+                    this.playRandomMusic(soundsWhenDragonsAreDestroyed, this.gameClient.musicVolume, false);
+                }
+                break;
+            }
+        }
+    }
+
+    private playRandomMusic(files: string[], volume: number, withCurrentPlayingCheck: boolean): void {
+        const randomFile = pickRandom(files);
+        if (!randomFile) {
+            return;
+        }
+        this.playMusic(randomFile, volume, withCurrentPlayingCheck);
+    }
+
+    private playMusic(file: string, volume: number, withCurrentPlayingCheck: boolean): void {
+        if (withCurrentPlayingCheck && this.currentlyPlayingMusic.length > 0) {
+            return;
+        }
+        const audio = new Audio(file);
+        this.currentlyPlayingMusic.push(audio);
+        audio.onended = () => _.pull(this.currentlyPlayingMusic, audio);
+        audio.volume = volume;
+        audio.play();
+    }
+
+    private playNotification(file: string, volume: number): void {
+        const audio = new Audio(file);
+        this.currentlyPlayingNotifications.push(audio);
+        audio.onended = () => _.pull(this.currentlyPlayingNotifications, audio);
+        audio.volume = volume;
+        audio.play();
+    }
+}
+
+export default SfxManager;
diff --git a/agot-bg-game-server/src/client/utils/VolumeSliderComponent.tsx b/agot-bg-game-server/src/client/utils/VolumeSliderComponent.tsx
new file mode 100644
index 000000000..9c522ea86
--- /dev/null
+++ b/agot-bg-game-server/src/client/utils/VolumeSliderComponent.tsx
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import Form from 'react-bootstrap/Form';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import { observable } from 'mobx';
+import { faVolumeLow, faVolumeUp, faVolumeXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+interface VolumeSliderComponentProps {
+    volume: number;
+    name?: string | React.ReactNode;
+    onVolumeChange?: (newValue: number) => void;
+}
+
+@observer
+class VolumeSliderComponent extends Component<VolumeSliderComponentProps> {
+    @observable volume = Math.floor(this.props.volume);
+
+    handleVolumeChange = (e: any): void => {
+        const newVolume = typeof e === 'number' ? e : parseInt(e.target.value);
+        this.volume = newVolume;
+        if(this.props.onVolumeChange) {
+            this.props.onVolumeChange(newVolume);
+        }
+    };
+
+    render(): React.ReactNode {
+        return (
+            <Col>
+                {this.props.name && <Row>
+                    {this.props.name}: {this.volume}
+                </Row>}
+                <Row>
+                    <Col style={{width: "32px"}}>
+                        {this.volume === 0
+                            ? <FontAwesomeIcon icon={faVolumeXmark} style={{color: "white"}} size="1x"/>
+                            : <FontAwesomeIcon className="clickable" icon={faVolumeLow} style={{color: "white"}} size="1x" onClick={() => this.handleVolumeChange(0)}/>
+                        }
+                    </Col>
+                    <Col xs="auto">
+                        <Form.Control
+                            type="range"
+                            value={this.volume}
+                            onChange={this.handleVolumeChange}
+                            min={0}
+                            max={100}
+                            step={1}
+                            style={{width: "200px", marginTop: "2px"}}
+                        />
+                    </Col>
+                    <Col>
+                        <FontAwesomeIcon className={this.volume != 100 ? "clickable" : ""} icon={faVolumeUp} style={{color: "white"}} size="1x"
+                            onClick={() => {
+                                if (this.volume != 100) {
+                                    this.handleVolumeChange(100);
+                                }
+                            }}
+                        />
+                    </Col>
+                </Row>
+            </Col>
+        );
+    }
+}
+
+export default VolumeSliderComponent;
diff --git a/agot-bg-game-server/src/client/utils/sound-effects.ts b/agot-bg-game-server/src/client/utils/sound-effects.ts
deleted file mode 100644
index 0a9d09ca2..000000000
--- a/agot-bg-game-server/src/client/utils/sound-effects.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import GameClient from "../GameClient";
-import Region from "../../common/ingame-game-state/game-data-structure/Region";
-import { GameLogData } from "../../common/ingame-game-state/game-data-structure/GameLog";
-import unitTypes from "../../common/ingame-game-state/game-data-structure/unitTypes";
-import { dragon, knight, ship, siegeEngine } from "../../common/ingame-game-state/game-data-structure/unitTypes";
-import { pickRandom } from "../../utils/popRandom";
-
-import footmanYesMyLordSound from "../../../public/sounds/footman-yes-my-lord.ogg";
-import intenseHorseStallionNeighSound from "../../../public/sounds/intense-horse-stallion-neigh.ogg";
-import horseWhinnySound from "../../../public/sounds/horse-whinny.ogg";
-import horseGallopSound from "../../../public/sounds/horse-gallop.ogg";
-import ayeAyeCaptainSound from "../../../public/sounds/aye-aye-captain.ogg";
-import siegeTowerMovementSound from "../../../public/sounds/siege-tower-movement.ogg";
-import catapultRetractSound from "../../../public/sounds/catapult-retract.ogg";
-import dragonRoarSound from "../../../public/sounds/dragon-roar.ogg";
-import dragonGruntSound from "../../../public/sounds/dragon-grunt.ogg";
-import dragonRoaringAndBreatheFireSound from "../../../public/sounds/dragon-roaring-and-breathe-fire.ogg";
-import dragonHowlingRoarSound from "../../../public/sounds/dragon-howling-roar.ogg";
-
-import roarSound from "../../../public/sounds/roar.ogg";
-import attackyYellSound from "../../../public/sounds/attacky-yell.ogg";
-import longYellSound from "../../../public/sounds/long-yell.ogg";
-import angryGruntSound from "../../../public/sounds/angry-grunt.ogg";
-
-import hystericalLaughSound from "../../../public/sounds/hysterical-laugh.ogg";
-import swordCuttingAndKillingSound from "../../../public/sounds/sword-cutting-and-killing.ogg";
-import goreSwordStabSound from "../../../public/sounds/gore-sword-stab.ogg";
-
-import _ from "lodash";
-
-const soundsForKnights = [
-    intenseHorseStallionNeighSound,
-    footmanYesMyLordSound,
-    horseWhinnySound,
-    horseGallopSound
-];
-
-const soundsForShips = [
-    ayeAyeCaptainSound,
-    footmanYesMyLordSound
-];
-
-const soundsForSiegeEngines = [
-    siegeTowerMovementSound,
-    catapultRetractSound
-];
-
-const soundsForBigDragons = [
-    dragonRoarSound,
-    dragonRoaringAndBreatheFireSound
-];
-
-const soundsForSmallDragons = [
-    dragonGruntSound
-];
-
-const soundsForFootmenOnly = [
-    roarSound,
-    footmanYesMyLordSound,
-    attackyYellSound,
-    longYellSound,
-    angryGruntSound
-];
-
-const soundsWhenUnitsAreDestroyedBySwords = [
-    swordCuttingAndKillingSound,
-    goreSwordStabSound
-];
-
-const soundsWhenDragonsAreDestroyed = [
-    dragonHowlingRoarSound
-];
-
-let currentlyPlayingAudio: HTMLAudioElement | null = null;
-
-export function playSoundWhenClickingMarchOrder(this: GameClient, region: Region): void {
-    if (this.musicMuted) {
-        return;
-    }
-
-    const army = region.units.values;
-
-    const hasKnights = army.some(u => u.type == knight);
-    const hasShips = army.some(u => u.type == ship);
-    const hasSiegeEngines = army.some(u => u.type == siegeEngine);
-    const hasDragons = army.some(u => u.type == dragon);
-
-    const files = hasDragons && (this.entireGame?.ingameGameState?.game.currentDragonStrength ?? -1) <= 2
-        ? soundsForSmallDragons
-        : hasDragons
-            ? soundsForBigDragons
-            : hasSiegeEngines
-                ? soundsForSiegeEngines
-                : hasKnights
-                    ? soundsForKnights
-                    : hasShips
-                        ? soundsForShips
-                        : soundsForFootmenOnly;
-
-    playRandomAudio(files);
-}
-
-export function playSoundForLogEvent(this: GameClient, log: GameLogData): void {
-    if (this.musicMuted) {
-        return;
-    }
-
-    switch(log.type) {
-        case "doran-martell-asos-used":
-        case "doran-used":
-            const audio = new Audio(hystericalLaughSound);
-            audio.play();
-            break;
-        case "killed-after-combat": {
-            const units = log.killed.map(ut => unitTypes.get(ut));
-            if (units.includes(dragon)) {
-                playRandomAudio(soundsWhenDragonsAreDestroyed);
-            } else {
-                playRandomAudio(soundsWhenUnitsAreDestroyedBySwords);
-            }
-            break;
-        }
-        case "immediatly-killed-after-combat": {
-            const killed = _.concat(log.killedBecauseCantRetreat, log.killedBecauseWounded);
-            const units = killed.map(ut => unitTypes.get(ut));
-            if (units.includes(dragon)) {
-                playRandomAudio(soundsWhenDragonsAreDestroyed);
-            }
-            break;
-        }
-        case "retreat-casualties-suffered": {
-            const units = log.units.map(ut => unitTypes.get(ut));
-            if (units.includes(dragon)) {
-                playRandomAudio(soundsWhenDragonsAreDestroyed);
-            }
-            break;
-        }
-    }
-}
-
-export function stopRunningSoundEffect(this: GameClient): void {
-    if (currentlyPlayingAudio != null) {
-        currentlyPlayingAudio.pause();
-        currentlyPlayingAudio.currentTime = 0;
-        currentlyPlayingAudio = null;
-    }
-}
-
-function playRandomAudio(files: string[]): void {
-    if (currentlyPlayingAudio != null) {
-        return;
-    }
-    const randomFile = pickRandom(files);
-    if (!randomFile) {
-        return;
-    }
-    const audio = new Audio(randomFile);
-    currentlyPlayingAudio = audio;
-    audio.onended = () => currentlyPlayingAudio = null;
-    audio.play();
-}
diff --git a/agot-bg-game-server/src/common/EntireGame.ts b/agot-bg-game-server/src/common/EntireGame.ts
index 2c855d533..4698181d3 100644
--- a/agot-bg-game-server/src/common/EntireGame.ts
+++ b/agot-bg-game-server/src/common/EntireGame.ts
@@ -317,7 +317,9 @@ export default class EntireGame extends GameState<null, LobbyGameState | IngameG
             lastOpenedTab: null,
             tracksColumnCollapsed: false,
             showMapWhenDrafting: false,
-            musicMuted: profileSettings.muted
+            musicMuted: profileSettings.muted,
+            musicVolume: profileSettings.muted ? 0 : 1,
+            notificationsVolume: profileSettings.muted ? 0 : 1
         });
         this.users.set(user.id, user);
 
diff --git a/agot-bg-game-server/src/messages/ClientMessage.ts b/agot-bg-game-server/src/messages/ClientMessage.ts
index 2b0867068..15c940fbf 100644
--- a/agot-bg-game-server/src/messages/ClientMessage.ts
+++ b/agot-bg-game-server/src/messages/ClientMessage.ts
@@ -182,10 +182,12 @@ export interface UserSettings {
     lastOpenedTab: string | null;
     chatHouseNames: boolean;
     responsiveLayout: boolean;
-    muted: boolean;
     tracksColumnCollapsed: boolean;
     showMapWhenDrafting: boolean;
+    muted: boolean;
     musicMuted: boolean;
+    notificationsVolume: number;
+    musicVolume: number;
 }
 
 export interface ChangeGameSettings {
diff --git a/agot-bg-game-server/src/server/User.ts b/agot-bg-game-server/src/server/User.ts
index 15455be4f..7b7ec1bba 100644
--- a/agot-bg-game-server/src/server/User.ts
+++ b/agot-bg-game-server/src/server/User.ts
@@ -3,6 +3,7 @@ import * as WebSocket from "ws";
 import EntireGame from "../common/EntireGame";
 import {UserSettings} from "../messages/ClientMessage";
 import {observable} from "mobx";
+import _ from "lodash";
 
 export default class User {
     id: string;
@@ -16,6 +17,13 @@ export default class User {
     @observable note = "";
     onConnectionStateChanged: ((user: User) => void) | null = null;
 
+    debouncedSyncSettings = _.debounce(() => {
+        this.entireGame.sendMessageToServer({
+            type: "change-settings",
+            settings: this.settings
+        });
+    }, 500, { trailing: true });
+
     constructor(id: string, name: string, facelessName: string, game: EntireGame, settings: UserSettings, connected = false, otherUsersFromSameNetwork: string[] = []) {
         this.id = id;
         this.name = name;
@@ -31,10 +39,7 @@ export default class User {
     }
 
     syncSettings(): void {
-        this.entireGame.sendMessageToServer({
-            type: "change-settings",
-            settings: this.settings
-        });
+        this.debouncedSyncSettings();   
     }
 
     updateConnectionStatus(): void {
@@ -60,7 +65,7 @@ export default class User {
             id: this.id,
             name: admin ? this.name : hideUserName ? this.facelessName : this.name,
             facelessName: this.facelessName,
-            settings: this.settings,
+            settings:  admin || user == this ? this.settings : undefined,
             connected: this.connected,
             otherUsersFromSameNetwork: this.otherUsersFromSameNetwork,
             note: admin || user == this ? this.note : ""
@@ -68,7 +73,19 @@ export default class User {
     }
 
     static deserializeFromServer(game: EntireGame, data: SerializedUser): User {
-        const user = new User(data.id, data.name, data.facelessName, game, data.settings, data.connected, data.otherUsersFromSameNetwork);
+        const emptySettings: UserSettings = {
+            chatHouseNames: false,
+            lastOpenedTab: '',
+            mapScrollbar: false,
+            musicMuted: false,
+            muted: false,
+            responsiveLayout: false,
+            showMapWhenDrafting: false,
+            tracksColumnCollapsed: false,
+            musicVolume: 0,
+            notificationsVolume: 0
+        };
+        const user = new User(data.id, data.name, data.facelessName, game, data.settings ?? emptySettings, data.connected, data.otherUsersFromSameNetwork);
         user.note = data.note;
         return user;
     }
@@ -78,7 +95,7 @@ export interface SerializedUser {
     id: string;
     name: string;
     facelessName: string;
-    settings: UserSettings;
+    settings?: UserSettings;
     connected: boolean;
     otherUsersFromSameNetwork: string[];
     note: string;
diff --git a/agot-bg-game-server/src/server/serializedGameMigrations.ts b/agot-bg-game-server/src/server/serializedGameMigrations.ts
index b4b05e743..a2ff85348 100644
--- a/agot-bg-game-server/src/server/serializedGameMigrations.ts
+++ b/agot-bg-game-server/src/server/serializedGameMigrations.ts
@@ -2176,6 +2176,20 @@ const serializedGameMigrations: {version: string; migrate: (serializeGamed: any)
             serializedGame.gameSettings.blindDraft = false;
             return serializedGame;
         }
+    },
+    {
+        version: "112",
+        migrate: (serializedGame: any) => {
+            serializedGame.users.forEach((u: any) => {
+                if (!u.settings) {
+                    return;
+                }
+
+                u.settings.notificationsVolume = u.settings.muted ? 0 : 1;
+                u.settings.musicVolume = u.settings.muted ? 0 : 1;
+            });
+            return serializedGame;
+        }
     }
 ];