diff --git a/proprietary/sounds/music/iron-horizon.mp3 b/proprietary/sounds/music/iron-horizon.mp3 new file mode 100644 index 0000000000..f0529ae085 Binary files /dev/null and b/proprietary/sounds/music/iron-horizon.mp3 differ diff --git a/proprietary/sounds/music/prelude-to-war.mp3 b/proprietary/sounds/music/prelude-to-war.mp3 new file mode 100644 index 0000000000..52b542931e Binary files /dev/null and b/proprietary/sounds/music/prelude-to-war.mp3 differ diff --git a/proprietary/sounds/music/world-divided.mp3 b/proprietary/sounds/music/world-divided.mp3 new file mode 100644 index 0000000000..cdc9ab83c1 Binary files /dev/null and b/proprietary/sounds/music/world-divided.mp3 differ diff --git a/resources/lang/en.json b/resources/lang/en.json index cd7c69a016..0e2c3ba3df 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -416,7 +416,9 @@ "toggle_terrain": "Toggle Terrain", "exit_game_label": "Exit Game", "exit_game_info": "Return to main menu", - "background_music_volume": "Background Music Volume", + "main_menu_music_volume": "Main Menu Music", + "main_menu_music_volume_desc": "Adjust the volume of the main menu music.", + "background_music_volume": "In-Game Music Volume", "sound_effects_volume": "Sound Effects Volume" }, "chat": { diff --git a/src/client/Main.ts b/src/client/Main.ts index ade4758385..8952f8a897 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -42,6 +42,7 @@ import { import "./components/baseComponents/Button"; import "./components/baseComponents/Modal"; import { getUserMe, isLoggedIn } from "./jwt"; +import MenuSoundManager from "./sound/MenuSoundManager"; import "./styles.css"; declare global { @@ -367,6 +368,10 @@ class Client { }); this.initializeFuseTag(); + MenuSoundManager.setBackgroundMusicVolume( + this.userSettings.mainMenuMusicVolume(), + ); + MenuSoundManager.playBackgroundMusic(); } private handleHash() { @@ -491,6 +496,7 @@ class Client { gameRecord: lobby.gameRecord, }, () => { + MenuSoundManager.stopBackgroundMusic(); console.log("Closing modals"); document.getElementById("settings-button")?.classList.add("hidden"); document diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts index cde017aeb7..18e9938808 100644 --- a/src/client/UserSettingModal.ts +++ b/src/client/UserSettingModal.ts @@ -7,6 +7,7 @@ import { SettingKeybind } from "./components/baseComponents/setting/SettingKeybi import "./components/baseComponents/setting/SettingNumber"; import "./components/baseComponents/setting/SettingSlider"; import "./components/baseComponents/setting/SettingToggle"; +import MenuSoundManager from "./sound/MenuSoundManager"; @customElement("user-setting") export class UserSettingModal extends LitElement { @@ -206,6 +207,17 @@ export class UserSettingModal extends LitElement { this.userSettings.set("settings.performanceOverlay", enabled); } + private onMenuVolumeChange(e: CustomEvent<{ value: number }>) { + const value = e.detail?.value; + if (typeof value === "number") { + const volume = value / 100; + this.userSettings.setMainMenuMusicVolume(volume); + MenuSoundManager.setBackgroundMusicVolume(volume); + } else { + console.warn("Slider event missing detail.value", e); + } + } + private handleKeybindChange( e: CustomEvent<{ action: string; value: string; key: string }>, ) { @@ -273,6 +285,18 @@ export class UserSettingModal extends LitElement { private renderBasicSettings() { return html` + + + 0 && + !this.backgroundMusic[this.currentTrack].playing() + ) { + this.backgroundMusic[this.currentTrack].play(); + } + } + + public stopBackgroundMusic(): void { + if (this.backgroundMusic.length > 0) { + this.backgroundMusic[this.currentTrack].stop(); + } + } + + public setBackgroundMusicVolume(volume: number): void { + this.backgroundMusicVolume = Math.max(0, Math.min(1, volume)); + this.backgroundMusic.forEach((track) => { + track.volume(this.backgroundMusicVolume); + }); + } + + private playNext(): void { + this.currentTrack = (this.currentTrack + 1) % this.backgroundMusic.length; + this.playBackgroundMusic(); + } +} + +export default new MenuSoundManager(); diff --git a/src/client/sound/SoundManager.ts b/src/client/sound/SoundManager.ts index 053b84c344..32364de67c 100644 --- a/src/client/sound/SoundManager.ts +++ b/src/client/sound/SoundManager.ts @@ -1,4 +1,6 @@ import { Howl } from "howler"; +import evan from "../../../proprietary/sounds/music/evan.mp3"; +import of2 from "../../../proprietary/sounds/music/of2.mp3"; import of4 from "../../../proprietary/sounds/music/of4.mp3"; import openfront from "../../../proprietary/sounds/music/openfront.mp3"; import war from "../../../proprietary/sounds/music/war.mp3"; @@ -29,6 +31,18 @@ class SoundManager { onend: this.playNext.bind(this), volume: 0, }), + new Howl({ + src: [evan], + loop: false, + onend: this.playNext.bind(this), + volume: 0, + }), + new Howl({ + src: [of2], + loop: false, + onend: this.playNext.bind(this), + volume: 0, + }), new Howl({ src: [war], loop: false, diff --git a/src/core/game/UserSettings.ts b/src/core/game/UserSettings.ts index fd5ac12a5f..93f7111b4b 100644 --- a/src/core/game/UserSettings.ts +++ b/src/core/game/UserSettings.ts @@ -187,6 +187,14 @@ export class UserSettings { return this.getFloat("settings.backgroundMusicVolume", 0); } + setMainMenuMusicVolume(volume: number): void { + this.setFloat("settings.mainMenuMusicVolume", volume); + } + + mainMenuMusicVolume(): number { + return this.getFloat("settings.mainMenuMusicVolume", 0.2); + } + setBackgroundMusicVolume(volume: number): void { this.setFloat("settings.backgroundMusicVolume", volume); }