Add settings toggle for troop advantage display

resources/lang/en.json

@@ -537,6 +537,8 @@
     "territory_patterns_desc": "Choose whether to display territory skin designs in game",
     "coordinate_grid_label": "Coordinate Grid",
     "coordinate_grid_desc": "Toggle the alphanumeric grid overlay",
+    "troop_advantage_label": "Troop Advantage Display",
+    "troop_advantage_desc": "Show attacker vs defender troop counts on active front lines.",
     "performance_overlay_label": "Performance Overlay",
     "performance_overlay_desc": "Toggle the performance overlay. When enabled, the performance overlay will be displayed. Press shift-D during game to toggle.",
     "easter_writing_speed_label": "Writing Speed Multiplier",

src/client/graphics/layers/SettingsModal.ts

@@ -18,6 +18,7 @@ import mouseIcon from "/images/MouseIconWhite.svg?url";
 import ninjaIcon from "/images/NinjaIconWhite.svg?url";
 import settingsIcon from "/images/SettingIconWhite.svg?url";
 import sirenIcon from "/images/SirenIconWhite.svg?url";
+import swordIcon from "/images/SwordIconWhite.svg?url";
 import treeIcon from "/images/TreeIconWhite.svg?url";
 import musicIcon from "/images/music.svg?url";
 
@@ -163,6 +164,11 @@ export class SettingsModal extends LitElement implements Layer {
     this.requestUpdate();
   }
 
+  private onToggleTroopAdvantageLayerButtonClick() {
+    this.userSettings.toggleTroopAdvantageLayer();
+    this.requestUpdate();
+  }
+
   private onTogglePerformanceOverlayButtonClick() {
     this.userSettings.togglePerformanceOverlay();
     this.requestUpdate();
@@ -408,6 +414,26 @@ export class SettingsModal extends LitElement implements Layer {
               </div>
             </button>
 
+            <button
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
+              @click="${this.onToggleTroopAdvantageLayerButtonClick}"
+            >
+              <img src=${swordIcon} alt="swordIcon" width="20" height="20" />
+              <div class="flex-1">
+                <div class="font-medium">
+                  ${translateText("user_setting.troop_advantage_label")}
+                </div>
+                <div class="text-sm text-slate-400">
+                  ${translateText("user_setting.troop_advantage_desc")}
+                </div>
+              </div>
+              <div class="text-sm text-slate-400">
+                ${this.userSettings.troopAdvantageLayer()
+                  ? translateText("user_setting.on")
+                  : translateText("user_setting.off")}
+              </div>
+            </button>
+
             <button
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleCursorCostLabelButtonClick}"

src/core/game/UserSettings.ts

@@ -89,6 +89,14 @@ export class UserSettings {
     return this.get("settings.territoryPatterns", true);
   }
 
+  troopAdvantageLayer() {
+    return this.get("settings.troopAdvantageLayer", true);
+  }
+
+  toggleTroopAdvantageLayer() {
+    this.set("settings.troopAdvantageLayer", !this.troopAdvantageLayer());
+  }
+
   cursorCostLabel() {
     const legacy = this.get("settings.ghostPricePill", true);
     return this.get("settings.cursorCostLabel", legacy);