Fading handshake (#2474)

## Description:
Add dynamic alliance icon with time-based fill and extension request
indicator

- Implement bottom-up green fill on alliance icon proportional to
remaining time
- Use AllianceIconFaded.svg as base layer with green overlay clipped
from top
- Add 20-82.40% clip range to account for icon vertical offset 

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


<img width="1132" height="631" alt="Screenshot 2025-11-18 205205"
src="https://github.com/user-attachments/assets/4af71ddc-f847-4460-9046-167275efc773"
/>
<img width="1387" height="792" alt="Screenshot 2025-11-18 205532"
src="https://github.com/user-attachments/assets/9dd0e018-323f-4de1-bae8-2633c09fe867"
/>

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

---------

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

src/client/graphics/layers/NameLayer.ts

@@ -9,6 +9,8 @@ import { UserSettings } from "../../../core/game/UserSettings";
 import { AlternateViewEvent } from "../../InputHandler";
 import { createCanvas, renderNumber, renderTroops } from "../../Utils";
 import {
+  computeAllianceClipPath,
+  createAllianceProgressIcon,
   getFirstPlacePlayer,
   getPlayerIcons,
   PlayerIconId,
@@ -51,6 +53,8 @@ export class NameLayer implements Layer {
   ) {
     this.shieldIconImage = new Image();
     this.shieldIconImage.src = shieldIcon;
+    this.shieldIconImage = new Image();
+    this.shieldIconImage.src = shieldIcon;
   }
 
   resizeCanvas() {
@@ -399,6 +403,69 @@ export class NameLayer implements Layer {
         emojiDiv.textContent = icon.text;
         emojiDiv.style.fontSize = `${iconSize}px`;
       } else if (icon.kind === "image" && icon.src) {
+        // Special handling for alliance icon with progress indicator
+        if (icon.id === "alliance") {
+          let allianceWrapper = render.icons.get(icon.id) as
+            | HTMLDivElement
+            | undefined;
+
+          const myPlayer = this.game.myPlayer();
+          const allianceView = myPlayer
+            ?.alliances()
+            .find((a) => a.other === render.player.id());
+
+          let fraction = 0;
+          let hasExtensionRequest = false;
+          if (allianceView) {
+            const remaining = Math.max(
+              0,
+              allianceView.expiresAt - this.game.ticks(),
+            );
+            const duration = Math.max(1, this.game.config().allianceDuration());
+            fraction = Math.max(0, Math.min(1, remaining / duration));
+            hasExtensionRequest = allianceView.hasExtensionRequest;
+          }
+
+          if (!allianceWrapper) {
+            allianceWrapper = createAllianceProgressIcon(
+              iconSize,
+              fraction,
+              hasExtensionRequest,
+              this.userSettings.darkMode(),
+            );
+            iconsDiv.appendChild(allianceWrapper);
+            render.icons.set(icon.id, allianceWrapper);
+          } else {
+            // Update existing alliance icon
+            allianceWrapper.style.width = `${iconSize}px`;
+            allianceWrapper.style.height = `${iconSize}px`;
+
+            const overlay = allianceWrapper.querySelector(
+              ".alliance-progress-overlay",
+            ) as HTMLDivElement | null;
+            if (overlay) {
+              overlay.style.clipPath = computeAllianceClipPath(fraction);
+            }
+
+            const questionMark = allianceWrapper.querySelector(
+              ".alliance-question-mark",
+            ) as HTMLImageElement | null;
+            if (questionMark) {
+              questionMark.style.display = hasExtensionRequest
+                ? "block"
+                : "none";
+            }
+
+            // Update inner image sizes
+            const imgs = allianceWrapper.getElementsByTagName("img");
+            for (const img of imgs) {
+              img.style.width = `${iconSize}px`;
+              img.style.height = `${iconSize}px`;
+            }
+          }
+          continue; // Skip regular image handling
+        }
+
         let imgElement = render.icons.get(icon.id) as
           | HTMLImageElement
           | undefined;