Add progress bars to show loading time and healthbars (#1107)

## Description:


Add progress bars to show construction time, loading time and health
bars in the UI layer

The progress bars always show at least one pixel of progression (better
visuals)


![buildcity](https://github.com/user-attachments/assets/7181642a-742d-4996-8ca9-748b55c04a58)

![launchNuke](https://github.com/user-attachments/assets/85fbed8f-3d91-4d7e-9c01-737ee5868992)

![ships2](https://github.com/user-attachments/assets/9fd53e6a-b2c7-4044-8b65-6f61231775b1)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Vivacious Box

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>

tests/client/graphics/ProgressBar.test.ts

@@ -0,0 +1,58 @@
+/**
+ * @jest-environment jsdom
+ */
+import { ProgressBar } from "../../../src/client/graphics/ProgressBar";
+
+describe("ProgressBar", () => {
+  let ctx: CanvasRenderingContext2D;
+  let canvas: HTMLCanvasElement;
+
+  beforeEach(() => {
+    canvas = document.createElement("canvas");
+    canvas.width = 100;
+    canvas.height = 20;
+    ctx = canvas.getContext("2d")!;
+  });
+
+  it("should initialize and draw the background", () => {
+    const spyClearRect = jest.spyOn(ctx, "clearRect");
+    const spyFillRect = jest.spyOn(ctx, "fillRect");
+    const spyFillStyle = jest.spyOn(ctx, "fillStyle", "set");
+    const bar = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10, 0.5);
+    expect(spyClearRect).toHaveBeenCalledWith(0, 0, 82, 12);
+    expect(spyFillRect).toHaveBeenCalledWith(1, 1, 80, 10);
+    expect(spyFillStyle).toHaveBeenCalledWith("#00ff00");
+    expect(bar.getX()).toBe(2);
+    expect(bar.getY()).toBe(2);
+  });
+
+  it("should set progress and draw the progress bar", () => {
+    const bar = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10);
+    const spyFillRect = jest.spyOn(ctx, "fillRect");
+    bar.setProgress(0.5);
+    expect(bar.getProgress()).toBe(0.5);
+    expect(spyFillRect).toHaveBeenCalledWith(
+      2,
+      2,
+      Math.floor(0.5 * (80 - 2)),
+      8,
+    );
+    expect(ctx.fillStyle).toBe("#00ff00");
+
+    bar.setProgress(0.1);
+    expect(ctx.fillStyle).toBe("#ff0000");
+  });
+
+  it("should clamp progress between 0 and 1 on init", () => {
+    const bar = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10, -1);
+    expect(bar.getProgress()).toBe(0);
+    const bar2 = new ProgressBar(["#ff0000", "#00ff00"], ctx, 2, 2, 80, 10, 2);
+    expect(bar2.getProgress()).toBe(1);
+  });
+
+  it("should handle empty colors array gracefully", () => {
+    const bar = new ProgressBar([], ctx, 2, 2, 80, 10, 0.5);
+    expect(() => bar.setProgress(0.5)).not.toThrow();
+    expect(ctx.fillStyle).toBe("#808080");
+  });
+});

tests/client/graphics/UILayer.test.ts

@@ -0,0 +1,136 @@
+/**
+ * @jest-environment jsdom
+ */
+import { UILayer } from "../../../src/client/graphics/layers/UILayer";
+import { UnitSelectionEvent } from "../../../src/client/InputHandler";
+import { UnitView } from "../../../src/core/game/GameView";
+
+describe("UILayer", () => {
+  let game: any;
+  let eventBus: any;
+  let transformHandler: any;
+
+  beforeEach(() => {
+    game = {
+      width: () => 100,
+      height: () => 100,
+      config: () => ({
+        theme: () => ({
+          territoryColor: () => ({
+            lighten: () => ({ alpha: () => ({ toRgbString: () => "#fff" }) }),
+          }),
+        }),
+      }),
+      x: () => 10,
+      y: () => 10,
+      unitInfo: () => ({ maxHealth: 10, constructionDuration: 5 }),
+      myPlayer: () => ({ id: () => 1 }),
+      ticks: () => 1,
+      updatesSinceLastTick: () => undefined,
+    };
+    eventBus = { on: jest.fn() };
+    transformHandler = {};
+  });
+
+  it("should initialize and redraw canvas", () => {
+    const ui = new UILayer(game, eventBus, transformHandler);
+    ui.redraw();
+    expect(ui["canvas"].width).toBe(100);
+    expect(ui["canvas"].height).toBe(100);
+    expect(ui["context"]).not.toBeNull();
+  });
+
+  it("should handle unit selection event", () => {
+    const ui = new UILayer(game, eventBus, transformHandler);
+    ui.redraw();
+    const unit = {
+      type: () => "Warship",
+      isActive: () => true,
+      tile: () => ({}),
+      owner: () => ({}),
+    };
+    const event = { isSelected: true, unit };
+    ui.drawSelectionBox = jest.fn();
+    ui["onUnitSelection"](event as UnitSelectionEvent);
+    expect(ui.drawSelectionBox).toHaveBeenCalledWith(unit);
+  });
+
+  it("should add and clear health bars", () => {
+    const ui = new UILayer(game, eventBus, transformHandler);
+    ui.redraw();
+    const unit = {
+      id: () => 1,
+      type: () => "Warship",
+      health: () => 5,
+      tile: () => ({}),
+      owner: () => ({}),
+      isActive: () => true,
+    } as unknown as UnitView;
+    ui.drawHealthBar(unit);
+    expect(ui["allHealthBars"].has(1)).toBe(true);
+
+    // a full hp unit doesnt have a health bar
+    unit.health = () => 10;
+    ui.drawHealthBar(unit);
+    expect(ui["allHealthBars"].has(1)).toBe(false);
+
+    // a dead unit doesnt have a health bar
+    unit.health = () => 5;
+    ui.drawHealthBar(unit);
+    expect(ui["allHealthBars"].has(1)).toBe(true);
+    unit.health = () => 0;
+    ui.drawHealthBar(unit);
+    expect(ui["allHealthBars"].has(1)).toBe(false);
+  });
+
+  it("should add loading bar for unit", () => {
+    const ui = new UILayer(game, eventBus, transformHandler);
+    ui.redraw();
+    const unit = {
+      id: () => 2,
+      tile: () => ({}),
+      isActive: () => true,
+    } as unknown as UnitView;
+    ui.drawLoadingBar(unit, 5);
+    expect(ui["allProgressBars"].has(2)).toBe(true);
+  });
+
+  it("should remove loading bar for inactive unit", () => {
+    const ui = new UILayer(game, eventBus, transformHandler);
+    ui.redraw();
+    const unit = {
+      id: () => 2,
+      type: () => "Construction",
+      constructionType: () => "City",
+      owner: () => ({ id: () => 1 }),
+      tile: () => ({}),
+      isActive: () => true,
+    } as unknown as UnitView;
+    ui.onUnitEvent(unit);
+    expect(ui["allProgressBars"].has(2)).toBe(true);
+
+    // an inactive unit should not have a loading bar
+    unit.isActive = () => false;
+    ui.tick();
+    expect(ui["allProgressBars"].has(2)).toBe(false);
+  });
+
+  it("should remove loading bar for a finished progress bar", () => {
+    const ui = new UILayer(game, eventBus, transformHandler);
+    ui.redraw();
+    const unit = {
+      id: () => 2,
+      type: () => "Construction",
+      constructionType: () => "City",
+      owner: () => ({ id: () => 1 }),
+      tile: () => ({}),
+      isActive: () => true,
+    } as unknown as UnitView;
+    ui.onUnitEvent(unit);
+    expect(ui["allProgressBars"].has(2)).toBe(true);
+
+    game.ticks = () => 6; // simulate enough ticks for completion
+    ui.tick();
+    expect(ui["allProgressBars"].has(2)).toBe(false);
+  });
+});