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,18 @@ export class ControlPanel extends LitElement implements Layer {
   @state()
   private _maxTroops: number;
 
+  @state()
+  private _maxTroopsTerritory: number = 0;
+
+  @state()
+  private _maxTroopsCity: number = 0;
+
+  @state()
+  private _troopsTerritory: number = 0;
+
+  @state()
+  private _troopsCity: number = 0;
+
   @state()
   private troopRate: number;
 
@@ -35,6 +47,12 @@ export class ControlPanel extends LitElement implements Layer {
   @state()
   private _gold: Gold;
 
+  @state()
+  private _troopsOnMission: number = 0;
+
+  @state()
+  private _playerColor: string = "";
+
   private _troopRateIsIncreasing: boolean = true;
 
   private _lastTroopIncreaseRate: number;
@@ -85,10 +103,45 @@ 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;
+
+    const outgoingAttacks = player.outgoingAttacks();
+
+    const attackTroops = outgoingAttacks.reduce(
+      (sum, attack) => sum + attack.troops,
+      0,
+    );
+
+    const boatTroops = player
+      .units(UnitType.TransportShip)
+      .reduce((sum, boat) => sum + boat.troops(), 0);
+
+    this._troopsOnMission = attackTroops + boatTroops;
+
+    try {
+      const config = this.game.config();
+      this._maxTroopsTerritory = Math.round(config.maxTroopsTerritory(player));
+      this._maxTroopsCity = Math.round(config.maxTroopsCity(player));
+      this._maxTroops = Math.round(config.maxTroops(player));
+
+      // Get estimated breakdown of current troops
+      this._troopsTerritory = config.estimatedTroopsTerritory(player);
+      this._troopsCity = config.estimatedTroopsCity(player);
+    } catch (e) {
+      console.warn("Failed to calculate capacity breakdown:", e);
+      this._maxTroopsTerritory = 0;
+      this._maxTroopsCity = 0;
+      this._maxTroops = 0;
+      this._troopsTerritory = 0;
+      this._troopsCity = 0;
+    }
+
+    this._playerColor =
+      player.territoryColor()?.toRgbString() ??
+      this.game.config().theme().neutralColor().toRgbString();
+
     this.requestUpdate();
   }
 
@@ -119,6 +172,8 @@ export class ControlPanel extends LitElement implements Layer {
   }
 
   render() {
+    const playerColor = this._playerColor;
+
     return html`
       <style>
         input[type="range"] {
@@ -181,6 +236,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"
+            aria-describedby="troop-capacity-description"
+            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: ${playerColor}; flex-grow: ${this
+                    ._troopsTerritory}"
+                ></div>
+                ${this._troopsCity > 0
+                  ? html`<div
+                      class="h-full opacity-80"
+                      style="background-color: ${playerColor}; flex-grow: ${this
+                        ._troopsCity}"
+                    ></div>`
+                  : ""}
+              </div>
+              <!-- Troops on mission -->
+              ${this._troopsOnMission > 0
+                ? html`<div
+                    class="h-full bg-red-600 opacity-50"
+                    style="flex-grow: ${this._troopsOnMission}"
+                  ></div>`
+                : ""}
+            </div>
+          </div>
+          <span id="troop-capacity-description" class="sr-only">
+            Colored bar segments represent territory capacity (lighter shade)
+            and city capacity (darker shade). Red segment shows troops currently
+            on mission.
+          </span>
           <div class="flex justify-between">
             <span class="font-bold"
               >${translateText("control_panel.gold")}:</span

src/core/configuration/Config.ts

@@ -118,6 +118,14 @@ export interface Config {
   // are twice more likely to be selected. X is determined below.
   proximityBonusPortsNb(totalPorts: number): number;
   maxTroops(player: Player | PlayerView): number;
+  maxTroopsTerritory(player: Player | PlayerView): number;
+  maxTroopsCity(player: Player | PlayerView): number;
+
+  // Helper methods to proportionally attribute current troops to their capacity sources
+  // Note: These are estimates based on capacity ratio, not actual tracking
+  estimatedTroopsTerritory(player: Player | PlayerView): number;
+  estimatedTroopsCity(player: Player | PlayerView): number;
+
   cityTroopIncrease(): number;
   boatAttackAmount(attacker: Player, defender: Player | TerraNullius): number;
   shellLifetime(): number;

src/core/configuration/DefaultConfig.ts

@@ -822,16 +822,41 @@ export class DefaultConfig implements Config {
     return this.infiniteTroops() ? 1_000_000 : 25_000;
   }
 
+  maxTroopsTerritory(player: Player | PlayerView): number {
+    return 2 * (Math.pow(player.numTilesOwned(), 0.6) * 1000 + 50000);
+  }
+
+  maxTroopsCity(player: Player | PlayerView): number {
+    return player.totalUnitLevels(UnitType.City) * this.cityTroopIncrease();
+  }
+
+  estimatedTroopsTerritory(player: Player | PlayerView): number {
+    const maxTroops = this.maxTroops(player);
+    if (maxTroops === 0) return 0;
+
+    const maxTroopsTerritory = this.maxTroopsTerritory(player);
+    const currentTroops = player.troops();
+
+    // Proportionally attribute current troops based on territory's share of max capacity
+    return Math.round((maxTroopsTerritory / maxTroops) * currentTroops);
+  }
+
+  estimatedTroopsCity(player: Player | PlayerView): number {
+    const maxTroops = this.maxTroops(player);
+    if (maxTroops === 0) return 0;
+
+    const maxTroopsCity = this.maxTroopsCity(player);
+    const currentTroops = player.troops();
+
+    // Proportionally attribute current troops based on cities' share of max capacity
+    return Math.round((maxTroopsCity / maxTroops) * currentTroops);
+  }
+
   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.maxTroopsTerritory(player) + this.maxTroopsCity(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)) {