Feature/troop breakdown visualization with missions

src/client/graphics/layers/ControlPanel.ts

@@ -23,6 +23,12 @@ export class ControlPanel extends LitElement implements Layer {
   @state()
   private _maxTroops: number;
 
+  @state()
+  private _territoryCapacity: number = 0;
+
+  @state()
+  private _cityCapacity: number = 0;
+
   @state()
   private troopRate: number;
 
@@ -35,6 +41,9 @@ export class ControlPanel extends LitElement implements Layer {
   @state()
   private _gold: Gold;
 
+  @state()
+  private _troopsOnMission: number = 0;
+
   private _troopRateIsIncreasing: boolean = true;
 
   private _lastTroopIncreaseRate: number;
@@ -85,10 +94,35 @@ export class ControlPanel extends LitElement implements Layer {
       this.updateTroopIncrease();
     }
 
-    this._maxTroops = this.game.config().maxTroops(player);
     this._gold = player.gold();
     this._troops = player.troops();
     this.troopRate = this.game.config().troopIncreaseRate(player) * 10;
+
+    // Get troops on mission from EventsDisplay
+    const eventsDisplay = document.querySelector("events-display");
+    if (eventsDisplay && "getTroopsOnMission" in eventsDisplay) {
+      this._troopsOnMission = (eventsDisplay as any).getTroopsOnMission() ?? 0;
+    } else {
+      this._troopsOnMission = 0;
+    }
+
+    // Compute breakdown of max troops into territory and city contributions
+    // Uses config methods to ensure consistency with maxTroops calculation
+    try {
+      const config = this.game.config();
+      this._territoryCapacity = Math.round(
+        config.baseTerritoryCapacity(player),
+      );
+      this._cityCapacity = Math.round(config.baseCityCapacity(player));
+      this._maxTroops = config.maxTroops(player);
+    } catch (e) {
+      // Fallback: clear breakdown if anything unexpected
+      console.warn("Failed to calculate capacity breakdown:", e);
+      this._territoryCapacity = 0;
+      this._cityCapacity = 0;
+      this._maxTroops = 0;
+    }
+
     this.requestUpdate();
   }
 
@@ -181,6 +215,53 @@ export class ControlPanel extends LitElement implements Layer {
               ></span
             >
           </div>
+          <!-- Max troops breakdown bar -->
+          <div
+            role="progressbar"
+            aria-valuenow="${this._troops + this._troopsOnMission}"
+            aria-valuemin="0"
+            aria-valuemax="${this._maxTroops}"
+            aria-label="Troop capacity: ${this._troops} available, ${this
+              ._troopsOnMission} on mission, ${this._maxTroops} maximum"
+            class="h-1 bg-black/50 rounded-full overflow-hidden mt-2 mb-3"
+          >
+            <div
+              class="flex h-full"
+              style="width: ${this._maxTroops > 0
+                ? ((this._troops + this._troopsOnMission) / this._maxTroops) *
+                  100
+                : 0}%"
+            >
+              <!-- Available troops (territory + cities) -->
+              <div class="flex" style="flex-grow: ${this._troops}">
+                <div
+                  class="h-full opacity-60"
+                  style="background-color: ${this.game
+                    ?.myPlayer()
+                    ?.territoryColor()
+                    .toRgbString() ?? "rgb(147, 51, 234)"}; flex-grow: ${this
+                    ._territoryCapacity}"
+                ></div>
+                ${this._cityCapacity > 0
+                  ? html`<div
+                      class="h-full opacity-80"
+                      style="background-color: ${this.game
+                        ?.myPlayer()
+                        ?.territoryColor()
+                        .toRgbString() ??
+                      "rgb(59, 130, 246)"}; flex-grow: ${this._cityCapacity}"
+                    ></div>`
+                  : ""}
+              </div>
+              <!-- Troops on mission (red with pattern for distinction) -->
+              ${this._troopsOnMission > 0
+                ? html`<div
+                    class="h-full bg-red-600 opacity-50"
+                    style="flex-grow: ${this._troopsOnMission}"
+                  ></div>`
+                : ""}
+            </div>
+          </div>
           <div class="flex justify-between">
             <span class="font-bold"
               >${translateText("control_panel.gold")}:</span

src/client/graphics/layers/EventsDisplay.ts

@@ -653,6 +653,30 @@ export class EventsDisplay extends LitElement implements Layer {
     this.eventBus.emit(new GoToUnitEvent(unit));
   }
 
+  /**
+   * Calculate total troops currently engaged in attacks and naval transport.
+   * Used by ControlPanel to display troops on mission indicator.
+   * @returns Total number of troops on mission
+   */
+  public getTroopsOnMission(): number {
+    const attackTroops = this.outgoingAttacks.reduce(
+      (sum, attack) => sum + attack.troops,
+      0,
+    );
+
+    const landAttackTroops = this.outgoingLandAttacks.reduce(
+      (sum, attack) => sum + attack.troops,
+      0,
+    );
+
+    const boatTroops = this.outgoingBoats.reduce(
+      (sum, boat) => sum + boat.troops(),
+      0,
+    );
+
+    return attackTroops + landAttackTroops + boatTroops;
+  }
+
   onEmojiMessageEvent(update: EmojiUpdate) {
     const myPlayer = this.game.myPlayer();
     if (!myPlayer) return;

src/core/configuration/Config.ts

@@ -118,6 +118,8 @@ export interface Config {
   // are twice more likely to be selected. X is determined below.
   proximityBonusPortsNb(totalPorts: number): number;
   maxTroops(player: Player | PlayerView): number;
+  baseTerritoryCapacity(player: Player | PlayerView): number;
+  baseCityCapacity(player: Player | PlayerView): number;
   cityTroopIncrease(): number;
   boatAttackAmount(attacker: Player, defender: Player | TerraNullius): number;
   shellLifetime(): number;

src/core/configuration/DefaultConfig.ts

@@ -822,16 +822,24 @@ export class DefaultConfig implements Config {
     return this.infiniteTroops() ? 1_000_000 : 25_000;
   }
 
+  baseTerritoryCapacity(player: Player | PlayerView): number {
+    return 2 * (Math.pow(player.numTilesOwned(), 0.6) * 1000 + 50000);
+  }
+
+  baseCityCapacity(player: Player | PlayerView): number {
+    return (
+      player
+        .units(UnitType.City)
+        .map((city) => city.level())
+        .reduce((a, b) => a + b, 0) * this.cityTroopIncrease()
+    );
+  }
+
   maxTroops(player: Player | PlayerView): number {
     const maxTroops =
       player.type() === PlayerType.Human && this.infiniteTroops()
         ? 1_000_000_000
-        : 2 * (Math.pow(player.numTilesOwned(), 0.6) * 1000 + 50000) +
-          player
-            .units(UnitType.City)
-            .map((city) => city.level())
-            .reduce((a, b) => a + b, 0) *
-            this.cityTroopIncrease();
+        : this.baseTerritoryCapacity(player) + this.baseCityCapacity(player);
 
     if (player.type() === PlayerType.Bot) {
       return maxTroops / 3;