Merge branch 'main' into cosmetics-pack-client-load

src/client/graphics/layers/Leaderboard.ts

@@ -99,13 +99,13 @@ export class Leaderboard extends LitElement implements Layer {
     const numTilesWithoutFallout =
       this.game.numLandTiles() - this.game.numTilesWithFallout();
 
-    const playersToShow = this.showTopFive ? sorted.slice(0, 5) : sorted;
+    const alivePlayers = sorted.filter((player) => player.isAlive());
+    const playersToShow = this.showTopFive
+      ? alivePlayers.slice(0, 5)
+      : alivePlayers;
 
     this.players = playersToShow.map((player, index) => {
-      let troops = player.troops() / 10;
-      if (!player.isAlive()) {
-        troops = 0;
-      }
+      const troops = player.troops() / 10;
       return {
         name: player.displayName(),
         position: index + 1,
@@ -131,22 +131,21 @@ export class Leaderboard extends LitElement implements Layer {
         }
       }
 
-      let myPlayerTroops = myPlayer.troops() / 10;
-      if (!myPlayer.isAlive()) {
-        myPlayerTroops = 0;
+      if (myPlayer.isAlive()) {
+        const myPlayerTroops = myPlayer.troops() / 10;
+        this.players.pop();
+        this.players.push({
+          name: myPlayer.displayName(),
+          position: place,
+          score: formatPercentage(
+            myPlayer.numTilesOwned() / this.game.numLandTiles(),
+          ),
+          gold: renderNumber(myPlayer.gold()),
+          troops: renderNumber(myPlayerTroops),
+          isMyPlayer: true,
+          player: myPlayer,
+        });
       }
-      this.players.pop();
-      this.players.push({
-        name: myPlayer.displayName(),
-        position: place,
-        score: formatPercentage(
-          myPlayer.numTilesOwned() / this.game.numLandTiles(),
-        ),
-        gold: renderNumber(myPlayer.gold()),
-        troops: renderNumber(myPlayerTroops),
-        isMyPlayer: true,
-        player: myPlayer,
-      });
     }
 
     this.requestUpdate();

src/client/graphics/layers/SettingsModal.ts

@@ -9,11 +9,13 @@ import mouseIcon from "../../../../resources/images/MouseIconWhite.svg";
 import ninjaIcon from "../../../../resources/images/NinjaIconWhite.svg";
 import settingsIcon from "../../../../resources/images/SettingIconWhite.svg";
 import treeIcon from "../../../../resources/images/TreeIconWhite.svg";
+import musicIcon from "../../../../resources/images/music.svg";
 import { EventBus } from "../../../core/EventBus";
 import { UserSettings } from "../../../core/game/UserSettings";
 import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
 import { PauseGameEvent } from "../../Transport";
 import { translateText } from "../../Utils";
+import SoundManager from "../../sound/SoundManager";
 import { Layer } from "./Layer";
 
 export class ShowSettingsModalEvent {
@@ -45,6 +47,9 @@ export class SettingsModal extends LitElement implements Layer {
   wasPausedWhenOpened = false;
 
   init() {
+    SoundManager.setBackgroundMusicVolume(
+      this.userSettings.backgroundMusicVolume(),
+    );
     this.eventBus.on(ShowSettingsModalEvent, (event) => {
       this.isVisible = event.isVisible;
       this.shouldPause = event.shouldPause;
@@ -150,6 +155,13 @@ export class SettingsModal extends LitElement implements Layer {
     window.location.href = "/";
   }
 
+  private onVolumeChange(event: Event) {
+    const volume = parseFloat((event.target as HTMLInputElement).value) / 100;
+    this.userSettings.setBackgroundMusicVolume(volume);
+    SoundManager.setBackgroundMusicVolume(volume);
+    this.requestUpdate();
+  }
+
   render() {
     if (!this.isVisible) {
       return null;
@@ -187,6 +199,28 @@ export class SettingsModal extends LitElement implements Layer {
           </div>
 
           <div class="p-4 space-y-3">
+            <div
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+            >
+              <img src=${musicIcon} alt="musicIcon" width="20" height="20" />
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("user_setting.background_music_volume")}
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  .value=${this.userSettings.backgroundMusicVolume() * 100}
+                  @input=${this.onVolumeChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
+              </div>
+              <div class="text-sm text-slate-400">
+                ${Math.round(this.userSettings.backgroundMusicVolume() * 100)}%
+              </div>
+            </div>
+
             <button
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onTerrainButtonClick}"

src/client/graphics/layers/UILayer.ts

@@ -312,7 +312,7 @@ export class UILayer implements Layer {
       return 1;
     }
     switch (unit.type()) {
-      case UnitType.Construction:
+      case UnitType.Construction: {
         const constructionType = unit.constructionType();
         if (constructionType === undefined) {
           return 1;
@@ -326,7 +326,7 @@ export class UILayer implements Layer {
           (this.game.ticks() - unit.createdAt()) /
           (constDuration === 0 ? 1 : constDuration)
         );
-
+      }
       case UnitType.MissileSilo:
       case UnitType.SAMLauncher:
         return unit.missileReadinesss();