nuke icon (#207)

- **feat: white nuke icon next to name if player nukes you**
![Capture d'écran 2025-03-10
220439](https://github.com/user-attachments/assets/1b717b2d-bffb-45fc-96ea-2feb57d25de0)
- **feat: red nuke icon if player sends nuke towards you**
- 
![Capture d'écran 2025-03-10
220358](https://github.com/user-attachments/assets/b755fa06-9510-4bd1-8312-7180dc681d85)

src/client/graphics/layers/NameLayer.ts

@@ -2,8 +2,11 @@ import {
   AllPlayers,
   Cell,
   Game,
+  NukeType,
+  nukeTypes,
   Player,
   PlayerType,
+  UnitType,
 } from "../../../core/game/Game";
 import { PseudoRandom } from "../../../core/PseudoRandom";
 import { Theme } from "../../../core/configuration/Config";
@@ -15,6 +18,8 @@ import allianceRequestIcon from "../../../../resources/images/AllianceRequestIco
 import crownIcon from "../../../../resources/images/CrownIcon.svg";
 import targetIcon from "../../../../resources/images/TargetIcon.svg";
 import embargoIcon from "../../../../resources/images/EmbargoIcon.svg";
+import nukeWhiteIcon from "../../../../resources/images/NukeIconWhite.svg";
+import nukeRedIcon from "../../../../resources/images/NukeIconRed.svg";
 import { ClientID } from "../../../core/Schemas";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { createCanvas, renderTroops } from "../../Utils";
@@ -47,6 +52,8 @@ export class NameLayer implements Layer {
   private targetIconImage: HTMLImageElement;
   private crownIconImage: HTMLImageElement;
   private embargoIconImage: HTMLImageElement;
+  private nukeWhiteIconImage: HTMLImageElement;
+  private nukeRedIconImage: HTMLImageElement;
   private container: HTMLDivElement;
   private myPlayer: PlayerView | null = null;
   private firstPlace: PlayerView | null = null;
@@ -69,6 +76,10 @@ export class NameLayer implements Layer {
     this.targetIconImage.src = targetIcon;
     this.embargoIconImage = new Image();
     this.embargoIconImage.src = embargoIcon;
+    this.nukeWhiteIconImage = new Image();
+    this.nukeWhiteIconImage.src = nukeWhiteIcon;
+    this.nukeRedIconImage = new Image();
+    this.nukeRedIconImage.src = nukeRedIcon;
   }
 
   resizeCanvas() {
@@ -405,6 +416,47 @@ export class NameLayer implements Layer {
       existingEmbargo.remove();
     }
 
+    const nukesSentByOtherPlayer = this.game.units().filter((unit) => {
+      const isSendingNuke = render.player.id() == unit.owner().id();
+      const notMyPlayer = unit.owner().id() != myPlayer.id();
+      return (
+        nukeTypes.includes(unit.type()) &&
+        isSendingNuke &&
+        notMyPlayer &&
+        unit.isActive()
+      );
+    });
+    const isMyPlayerTarget = nukesSentByOtherPlayer.find((unit) => {
+      const detonationDst = unit.detonationDst();
+      const targetId = this.game.owner(detonationDst).id();
+      return targetId == this.myPlayer.id();
+    });
+    const existingNuke = iconsDiv.querySelector(
+      '[data-icon="nuke"]',
+    ) as HTMLImageElement;
+
+    if (existingNuke) {
+      if (nukesSentByOtherPlayer.length == 0) {
+        existingNuke.remove();
+      } else if (
+        isMyPlayerTarget &&
+        existingNuke.src != this.nukeRedIconImage.src
+      ) {
+        existingNuke.src = this.nukeRedIconImage.src;
+      } else if (
+        !isMyPlayerTarget &&
+        existingNuke.src != this.nukeWhiteIconImage.src
+      ) {
+        existingNuke.src = this.nukeWhiteIconImage.src;
+      }
+    } else if (myPlayer && nukesSentByOtherPlayer.length > 0) {
+      if (!existingNuke) {
+        const icon = isMyPlayerTarget
+          ? this.nukeRedIconImage.src
+          : this.nukeWhiteIconImage.src;
+        iconsDiv.appendChild(this.createIconElement(icon, iconSize, "nuke"));
+      }
+    }
     // Update all icon sizes
     const icons = iconsDiv.getElementsByTagName("img");
     for (const icon of icons) {

src/client/graphics/layers/UnitLayer.ts

@@ -248,10 +248,10 @@ export class UnitLayer implements Layer {
     }
 
     let outerColor = this.theme.territoryColor(unit.owner().info());
-    if (unit.targetId()) {
+    if (unit.warshipTargetId()) {
       const targetOwner = this.game
         .units()
-        .find((u) => u.id() == unit.targetId())
+        .find((u) => u.id() == unit.warshipTargetId())
         ?.owner();
       if (targetOwner == this.myPlayer) {
         outerColor = colord({ r: 200, b: 0, g: 0 });