Feature/troop breakdown visualization with missions

src/client/graphics/layers/ControlPanel.ts

@@ -2,7 +2,7 @@ import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { translateText } from "../../../client/Utils";
 import { EventBus } from "../../../core/EventBus";
-import { Gold } from "../../../core/game/Game";
+import { Gold, UnitType } from "../../../core/game/Game";
 import { GameView } from "../../../core/game/GameView";
 import { ClientID } from "../../../core/Schemas";
 import { AttackRatioEvent } from "../../InputHandler";
@@ -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,44 @@ 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;
+
+    // Calculate troops on mission directly from player data
+    const outgoingAttacks = player.outgoingAttacks();
+
+    const attackTroops = outgoingAttacks
+      .filter((a) => a.targetID !== 0)
+      .reduce((sum, attack) => sum + attack.troops, 0);
+
+    const landAttackTroops = outgoingAttacks
+      .filter((a) => a.targetID === 0)
+      .reduce((sum, attack) => sum + attack.troops, 0);
+
+    const boatTroops = player
+      .units(UnitType.TransportShip)
+      .reduce((sum, boat) => sum + boat.troops(), 0);
+
+    this._troopsOnMission = attackTroops + landAttackTroops + boatTroops;
+
+    // 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 +224,56 @@ 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
+                ? Math.min(
+                    ((this._troops + this._troopsOnMission) / this._maxTroops) *
+                      100,
+                    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/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,19 @@ 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.totalUnitLevels(UnitType.City) * 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;

src/core/game/Game.ts

@@ -568,6 +568,7 @@ export interface Player {
   unitCount(type: UnitType): number;
   unitsConstructed(type: UnitType): number;
   unitsOwned(type: UnitType): number;
+  totalUnitLevels(type: UnitType): number;
   buildableUnits(tile: TileRef | null): BuildableUnit[];
   canBuild(type: UnitType, targetTile: TileRef): TileRef | false;
   buildUnit<T extends UnitType>(

src/core/game/PlayerImpl.ts

@@ -262,6 +262,12 @@ export class PlayerImpl implements Player {
     return total;
   }
 
+  totalUnitLevels(type: UnitType): number {
+    return this.units(type)
+      .map((unit) => unit.level())
+      .reduce((a, b) => a + b, 0);
+  }
+
   sharesBorderWith(other: Player | TerraNullius): boolean {
     for (const border of this._borderTiles) {
       for (const neighbor of this.mg.map().neighbors(border)) {