Fix small UI issues (#2845)

## Description:

Changes a few small UI issues:
- Player info text transparency made it less legible:
<img width="367" height="445" alt="image"
src="https://github.com/user-attachments/assets/a08b2808-74a5-4783-93f3-182d97b36055"
/>

- Fix naval invasion target end fade which didn't work previously


![ui_fade](https://github.com/user-attachments/assets/a4867257-0962-4c0d-9e1c-bcac7eba8089)


- Rename rendering function since the UI layer doesn't only handle
target

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

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

IngloriousTom

src/client/graphics/layers/DynamicUILayer.ts

@@ -18,7 +18,7 @@ const TEXT_STACK_SPACING = 8;
 const TEXT_DURATION = 2500;
 
 export class DynamicUILayer implements Layer {
-  private readonly allElements: Array<UIElement> = [];
+  private readonly uiElements: Array<UIElement> = [];
   private lastRefresh = Date.now();
 
   constructor(
@@ -105,14 +105,14 @@ export class DynamicUILayer implements Layer {
   onBombEvent(unit: UnitView) {
     if (this.createdThisTick(unit) && this.isOwnedByPlayer(unit)) {
       const target = new NukeTelegraph(this.transformHandler, this.game, unit);
-      this.allElements.push(target);
+      this.uiElements.push(target);
     }
   }
 
   onTransportShipEvent(unit: UnitView) {
     if (this.createdThisTick(unit) && this.isOwnedByPlayer(unit)) {
       const target = new NavalTarget(this.transformHandler, this.game, unit);
-      this.allElements.push(target);
+      this.uiElements.push(target);
     }
   }
 
@@ -121,14 +121,14 @@ export class DynamicUILayer implements Layer {
     const dt = now - this.lastRefresh;
     this.lastRefresh = now;
     if (this.game.config().userSettings()?.fxLayer()) {
-      this.renderAllTargets(context, dt);
+      this.renderUIElements(context, dt);
     }
   }
 
-  renderAllTargets(context: CanvasRenderingContext2D, delta: number) {
-    for (let i = this.allElements.length - 1; i >= 0; i--) {
-      if (!this.allElements[i].render(context, delta)) {
-        this.allElements.splice(i, 1);
+  renderUIElements(context: CanvasRenderingContext2D, delta: number) {
+    for (let i = this.uiElements.length - 1; i >= 0; i--) {
+      if (!this.uiElements[i].render(context, delta)) {
+        this.uiElements.splice(i, 1);
       }
     }
   }
@@ -154,7 +154,7 @@ export class DynamicUILayer implements Layer {
       typeof num === "bigint" ? (num < 0n ? -num : num) : Math.abs(num);
     const shortened = renderNumber(absNum, 0);
     const sign = num >= 0 ? "+" : "-";
-    this.allElements.push(
+    this.uiElements.push(
       new TextIndicator(
         this.transformHandler,
         `${sign} ${shortened}`,

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -210,7 +210,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     return !this.game.config().isUnitDisabled(type)
       ? html`<div
           class="flex p-1 w-[calc(50%-0.13rem)] border rounded-md border-gray-500
-                         items-center gap-2 text-sm opacity-80"
+                         items-center gap-2 text-sm"
           translate="no"
         >
           <img
@@ -355,17 +355,14 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
         ${this.showDetails
           ? html`
               ${player.team() !== null
-                ? html`<div class="text-sm opacity-80">
+                ? html`<div class="text-sm">
                     ${translateText("player_info_overlay.team")}:
                     ${player.team()}
                   </div>`
                 : ""}
               <div class="flex text-sm">${playerType} ${relationHtml}</div>
               ${player.troops() >= 1
-                ? html`<div
-                    class="flex gap-2 text-sm opacity-80"
-                    translate="no"
-                  >
+                ? html`<div class="flex gap-2 text-sm" translate="no">
                     ${translateText("player_info_overlay.troops")}
                     <span class="ml-auto mr-0 font-bold">
                       ${renderTroops(player.troops())}
@@ -373,10 +370,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                   </div>`
                 : ""}
               ${maxTroops >= 1
-                ? html`<div
-                    class="flex gap-2 text-sm opacity-80"
-                    translate="no"
-                  >
+                ? html`<div class="flex gap-2 text-sm" translate="no">
                     ${translateText("player_info_overlay.maxtroops")}
                     <span class="ml-auto mr-0 font-bold">
                       ${renderTroops(maxTroops)}
@@ -384,10 +378,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                   </div>`
                 : ""}
               ${attackingTroops >= 1
-                ? html`<div
-                    class="flex gap-2 text-sm opacity-80"
-                    translate="no"
-                  >
+                ? html`<div class="flex gap-2 text-sm" translate="no">
                     ${translateText("player_info_overlay.a_troops")}
                     <span class="ml-auto mr-0 text-red-400 font-bold">
                       ${renderTroops(attackingTroops)}
@@ -397,7 +388,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
               ${this.renderTroopBar(totalTroops, attackingTroops, maxTroops)}
               <div
                 class="flex p-1 mb-1 mt-1 w-full border rounded-md border-yellow-400
-                          font-bold text-yellow-400 text-sm opacity-80"
+                          font-bold text-yellow-400 text-sm"
                 translate="no"
               >
                 <img
@@ -507,7 +498,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
           <div class="text-sm opacity-80">${unit.type()}</div>
           ${unit.hasHealth()
             ? html`
-                <div class="text-sm opacity-80">
+                <div class="text-sm">
                   ${translateText("player_info_overlay.health")}:
                   ${unit.health()}
                 </div>

src/client/graphics/ui/NavalTarget.ts

@@ -42,7 +42,7 @@ export class Target implements UIElement {
     let t: number;
     if (this.ended) {
       // end animation
-      t = Math.max(0, 1 - this.lifeTime / this.animationDuration);
+      t = Math.max(0, 1 - this.animationElapsedTime / this.animationDuration);
     } else {
       t = 1; // No start fade feels more reactive
     }