Add music to main menu + moving backround on main menu

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": {

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

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`
+      <!-- Main Menu Music -->
+      <setting-slider
+        label="${translateText("user_setting.main_menu_music_volume")}"
+        description="${translateText(
+          "user_setting.main_menu_music_volume_desc",
+        )}"
+        min="0"
+        max="100"
+        .value=${this.userSettings.mainMenuMusicVolume() * 100}
+        @change=${this.onMenuVolumeChange}
+      ></setting-slider>
+
       <!-- 🌙 Dark Mode -->
       <setting-toggle
         label="${translateText("user_setting.dark_mode_label")}"

src/client/index.html

@@ -59,13 +59,26 @@
         background-image: url("/images/EuropeBackgroundBlurred.webp");
         background-position: center;
         background-attachment: fixed;
-        background-size: cover;
+        background-size: 200%;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: -1;
+        animation: move-background 200s linear infinite;
+      }
+
+      @keyframes move-background {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
       }
 
       .bg-image::before {

src/client/sound/MenuSoundManager.ts

@@ -0,0 +1,62 @@
+import { Howl } from "howler";
+import ironHorizon from "../../../proprietary/sounds/music/iron-horizon.mp3";
+import preludeToWar from "../../../proprietary/sounds/music/prelude-to-war.mp3";
+import worldDivided from "../../../proprietary/sounds/music/world-divided.mp3";
+
+class MenuSoundManager {
+  private backgroundMusic: Howl[] = [];
+  private currentTrack: number = 0;
+  private backgroundMusicVolume: number = 0;
+
+  constructor() {
+    this.backgroundMusic = [
+      new Howl({
+        src: [ironHorizon],
+        loop: false,
+        onend: this.playNext.bind(this),
+        volume: 0,
+      }),
+      new Howl({
+        src: [worldDivided],
+        loop: false,
+        onend: this.playNext.bind(this),
+        volume: 0,
+      }),
+      new Howl({
+        src: [preludeToWar],
+        loop: false,
+        onend: this.playNext.bind(this),
+        volume: 0,
+      }),
+    ];
+  }
+
+  public playBackgroundMusic(): void {
+    if (
+      this.backgroundMusic.length > 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();

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,

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);
   }