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/PlayerIcons.ts

@@ -1,4 +1,5 @@
 import allianceIcon from "../../../resources/images/AllianceIcon.svg";
+import allianceIconFaded from "../../../resources/images/AllianceIconFaded.svg";
 import allianceRequestBlackIcon from "../../../resources/images/AllianceRequestBlackIcon.svg";
 import allianceRequestWhiteIcon from "../../../resources/images/AllianceRequestWhiteIcon.svg";
 import crownIcon from "../../../resources/images/CrownIcon.svg";
@@ -7,6 +8,7 @@ import embargoBlackIcon from "../../../resources/images/EmbargoBlackIcon.svg";
 import embargoWhiteIcon from "../../../resources/images/EmbargoWhiteIcon.svg";
 import nukeRedIcon from "../../../resources/images/NukeIconRed.svg";
 import nukeWhiteIcon from "../../../resources/images/NukeIconWhite.svg";
+import questionMarkIcon from "../../../resources/images/QuestionMarkIcon.svg";
 import targetIcon from "../../../resources/images/TargetIcon.svg";
 import traitorIcon from "../../../resources/images/TraitorIcon.svg";
 import { AllPlayers, nukeTypes } from "../../core/game/Game";
@@ -152,3 +154,69 @@ export function getPlayerIcons(
 
   return icons;
 }
+
+export function createAllianceProgressIcon(
+  size: number,
+  fraction: number,
+  hasExtensionRequest: boolean,
+  darkMode: boolean,
+): HTMLDivElement {
+  // Wrapper
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute("data-icon", "alliance");
+  wrapper.setAttribute("dark-mode", darkMode.toString());
+  wrapper.style.position = "relative";
+  wrapper.style.width = `${size}px`;
+  wrapper.style.height = `${size}px`;
+  wrapper.style.display = "inline-block";
+
+  // Base faded icon (full)
+  const base = document.createElement("img");
+  base.src = allianceIconFaded;
+  base.style.width = `${size}px`;
+  base.style.height = `${size}px`;
+  base.style.display = "block";
+  base.setAttribute("dark-mode", darkMode.toString());
+  wrapper.appendChild(base);
+
+  // Overlay container for green portion, clipped from the top via clip-path
+  const overlay = document.createElement("div");
+  overlay.className = "alliance-progress-overlay";
+  overlay.style.position = "absolute";
+  overlay.style.left = "0";
+  overlay.style.top = "0";
+  overlay.style.width = "100%";
+  overlay.style.height = "100%";
+  overlay.style.clipPath = computeAllianceClipPath(fraction);
+
+  const colored = document.createElement("img");
+  colored.src = allianceIcon; // green icon
+  colored.style.width = `${size}px`;
+  colored.style.height = `${size}px`;
+  colored.style.display = "block";
+  colored.setAttribute("dark-mode", darkMode.toString());
+  overlay.appendChild(colored);
+
+  wrapper.appendChild(overlay);
+
+  // Question mark overlay (shown when there's a pending extension request)
+  const questionMark = document.createElement("img");
+  questionMark.className = "alliance-question-mark";
+  questionMark.src = questionMarkIcon;
+  questionMark.style.position = "absolute";
+  questionMark.style.left = "0";
+  questionMark.style.top = "0";
+  questionMark.style.width = `${size}px`;
+  questionMark.style.height = `${size}px`;
+  questionMark.style.display = hasExtensionRequest ? "block" : "none";
+  questionMark.style.pointerEvents = "none";
+  questionMark.setAttribute("dark-mode", darkMode.toString());
+  wrapper.appendChild(questionMark);
+
+  return wrapper;
+}
+
+export function computeAllianceClipPath(fraction: number): string {
+  const topCut = 20 + (1 - fraction) * 80 * 0.78; // min 20%, max 82.40%
+  return `inset(${topCut.toFixed(2)}% -2px 0 -2px)`;
+}