diff --git a/src/client/hud/layers/ControlPanel.ts b/src/client/hud/layers/ControlPanel.ts index 4d4f0b668e..0c0c96dde9 100644 --- a/src/client/hud/layers/ControlPanel.ts +++ b/src/client/hud/layers/ControlPanel.ts @@ -627,21 +627,29 @@ export class ControlPanel extends LitElement implements Controller { > ${this.renderMobileTroopBar()} - +
- - ${(this.attackRatio * 100).toFixed(0)}% + + ${(this.attackRatio * 100).toFixed(0)}% +
+ (${renderTroops( + (this.game?.myPlayer()?.troops() ?? 0) * this.attackRatio, + )}) diff --git a/tests/client/ControlPanelAttackRatio.test.ts b/tests/client/ControlPanelAttackRatio.test.ts index 249c33cc4e..4de8333466 100644 --- a/tests/client/ControlPanelAttackRatio.test.ts +++ b/tests/client/ControlPanelAttackRatio.test.ts @@ -53,4 +53,18 @@ describe("control-panel attack ratio", () => { expect(uiState.attackRatio).toBeCloseTo(0.2); }); + + it("renders the calculated troop count alongside percentage in mobile view", async () => { + panel.game = { + inSpawnPhase: () => false, + myPlayer: () => ({ isAlive: () => true, troops: () => 100_000 }), + } as unknown as GameView; + + panel.setVisibile(true); + await (panel as any).updateComplete; + + const mobileContainer = panel.querySelector(".lg\\:hidden"); + expect(mobileContainer?.textContent).toContain("20%"); + expect(mobileContainer?.textContent).toContain("(2.00K)"); + }); });