Improve unit updates & reloading (#1394)

## Description:

Previously upgrading a unit would have it reload immediately, eg
upgrading missile silo 1=>2 gives it 2 missiles immediately. With this
change it must reload the missile. Same with SAMs. This prevents users
from spamming upgrades as missiles are coming in.

Fix the progress reloading bar. Previously it only showed the SAM/silo
as reloading when it was completely out of missiles. Now it shows
roughly how many missiles are available (eg level 5 fires 3 missiles,
now progress bar is at 40%). It also shows progress of missiles
reloading. If no missiles are available, progress bar is empty

There was a bug where if a silo of SAM was in cooldown it would be
updated each tick, causing the sprite/icon to be rerendered each tick.

## 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:

evan

src/client/graphics/layers/UILayer.ts

@@ -1,7 +1,7 @@
 import { Colord } from "colord";
 import { EventBus } from "../../../core/EventBus";
 import { Theme } from "../../../core/configuration/Config";
-import { Tick, UnitType } from "../../../core/game/Game";
+import { UnitType } from "../../../core/game/Game";
 import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView, UnitView } from "../../../core/game/GameView";
 import { UserSettings } from "../../../core/game/UserSettings";
@@ -32,7 +32,7 @@ export class UILayer implements Layer {
   private selectionAnimTime = 0;
   private allProgressBars: Map<
     number,
-    { unit: UnitView; startTick: Tick; endTick: Tick; progressBar: ProgressBar }
+    { unit: UnitView; progressBar: ProgressBar }
   > = new Map();
   private allHealthBars: Map<number, ProgressBar> = new Map();
   // Keep track of currently selected unit
@@ -105,21 +105,12 @@ export class UILayer implements Layer {
   onUnitEvent(unit: UnitView) {
     switch (unit.type()) {
       case UnitType.Construction: {
-        const playerId = this.game.myPlayer()?.id();
-        if (
-          unit.isActive() &&
-          playerId !== undefined &&
-          unit.owner().id() === playerId
-        ) {
-          const constructionType = unit.constructionType();
-          if (constructionType === undefined) {
-            // Skip units without construction type
-            return;
-          }
-          const endTick =
-            this.game.unitInfo(constructionType).constructionDuration || 0;
-          this.drawLoadingBar(unit, endTick);
+        const constructionType = unit.constructionType();
+        if (constructionType === undefined) {
+          // Skip units without construction type
+          return;
         }
+        this.createLoadingBar(unit);
         break;
       }
       case UnitType.Warship: {
@@ -127,24 +118,10 @@ export class UILayer implements Layer {
         break;
       }
       case UnitType.MissileSilo:
-        if (
-          unit.isActive() &&
-          unit.isInCooldown() &&
-          !this.allProgressBars.has(unit.id())
-        ) {
-          const endTick = this.game.config().SiloCooldown();
-          this.drawLoadingBar(unit, endTick);
-        }
+        this.createLoadingBar(unit);
         break;
       case UnitType.SAMLauncher:
-        if (
-          unit.isActive() &&
-          unit.isInCooldown() &&
-          !this.allProgressBars.has(unit.id())
-        ) {
-          const endTick = this.game.config().SAMCooldown();
-          this.drawLoadingBar(unit, endTick);
-        }
+        this.createLoadingBar(unit);
         break;
       default:
         return;
@@ -318,20 +295,41 @@ export class UILayer implements Layer {
   }
 
   private updateProgressBars() {
-    const currentTick = this.game.ticks();
     this.allProgressBars.forEach((progressBarInfo, unitId) => {
-      const progress =
-        (currentTick - progressBarInfo.startTick) / progressBarInfo.endTick;
-      if (progress >= 1 || !progressBarInfo.unit.isActive()) {
+      const progress = this.getProgress(progressBarInfo.unit);
+      if (progress >= 1) {
         this.allProgressBars.get(unitId)?.progressBar.clear();
         this.allProgressBars.delete(unitId);
         return;
+      } else {
+        progressBarInfo.progressBar.setProgress(progress);
       }
-      progressBarInfo.progressBar.setProgress(progress);
     });
   }
 
-  public drawLoadingBar(unit: UnitView, endTick: Tick) {
+  private getProgress(unit: UnitView): number {
+    if (!unit.isActive()) {
+      return 1;
+    }
+    switch (unit.type()) {
+      case UnitType.Construction:
+        const constructionType = unit.constructionType();
+        if (constructionType === undefined) {
+          return 1;
+        }
+        return (
+          (this.game.ticks() - unit.createdAt()) /
+          (this.game.unitInfo(constructionType).constructionDuration || 1)
+        );
+      case UnitType.MissileSilo:
+      case UnitType.SAMLauncher:
+        return unit.missileReadinesss();
+      default:
+        return 1;
+    }
+  }
+
+  public createLoadingBar(unit: UnitView) {
     if (!this.context) {
       return;
     }
@@ -347,8 +345,6 @@ export class UILayer implements Layer {
       );
       this.allProgressBars.set(unit.id(), {
         unit,
-        startTick: this.game.ticks(),
-        endTick,
         progressBar,
       });
     }