feat: icon over player name to signal embargo

resources/images/EmbargoIcon.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2285 4675 c-640 -84 -1211 -457 -1551 -1015 -278 -456 -372 -1020
+-258 -1550 86 -400 284 -760 579 -1055 351 -352 787 -560 1284 -615 171 -19
+442 -8 615 24 423 80 802 282 1111 591 407 407 625 931 625 1505 0 574 -218
+1098 -625 1505 -348 349 -786 561 -1270 615 -122 13 -387 11 -510 -5z m574
+-436 c375 -64 738 -269 989 -560 504 -583 557 -1420 129 -2067 -33 -50 -63
+-92 -67 -92 -3 0 -68 63 -145 140 -77 77 -144 140 -150 140 -13 0 -295 -282
+-295 -295 0 -6 63 -73 140 -150 77 -77 140 -142 140 -145 0 -12 -195 -134
+-289 -181 -399 -198 -882 -229 -1302 -83 -595 206 -1020 703 -1130 1320 -30
+166 -30 422 -1 585 48 265 145 487 324 744 4 6 68 -50 152 -134 l145 -145 22
+20 c57 49 279 272 279 280 0 5 -64 73 -142 152 -83 83 -139 146 -133 150 297
+207 556 308 878 342 113 12 320 2 456 -21z"/>
+<path d="M2350 3715 l0 -126 -45 -19 c-128 -55 -251 -173 -315 -303 -143 -291
+-60 -569 230 -764 25 -17 132 -76 238 -131 195 -102 284 -159 302 -192 28 -52
+1 -148 -57 -202 -58 -55 -77 -58 -388 -58 l-285 0 0 -215 0 -215 160 0 160 0
+0 -105 0 -105 210 0 210 0 0 125 0 126 45 19 c232 100 398 365 382 610 -12
+179 -112 332 -299 458 -25 18 -132 76 -237 131 -193 100 -283 158 -301 191
+-28 52 -1 148 57 202 58 55 77 58 388 58 l285 0 0 215 0 215 -160 0 -160 0 0
+105 0 105 -210 0 -210 0 0 -125z"/>
+</g>
+</svg>

src/client/graphics/layers/NameLayer.ts

@@ -14,6 +14,7 @@ import allianceIcon from "../../../../resources/images/AllianceIcon.svg";
 import allianceRequestIcon from "../../../../resources/images/AllianceRequestIcon.svg";
 import crownIcon from "../../../../resources/images/CrownIcon.svg";
 import targetIcon from "../../../../resources/images/TargetIcon.svg";
+import embargoIcon from "../../../../resources/images/EmbargoIcon.svg";
 import { ClientID } from "../../../core/Schemas";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { createCanvas, renderTroops } from "../../Utils";
@@ -45,6 +46,7 @@ export class NameLayer implements Layer {
   private allianceIconImage: HTMLImageElement;
   private targetIconImage: HTMLImageElement;
   private crownIconImage: HTMLImageElement;
+  private embargoIconImage: HTMLImageElement;
   private container: HTMLDivElement;
   private myPlayer: PlayerView | null = null;
   private firstPlace: PlayerView | null = null;
@@ -65,6 +67,8 @@ export class NameLayer implements Layer {
     this.crownIconImage.src = crownIcon;
     this.targetIconImage = new Image();
     this.targetIconImage.src = targetIcon;
+    this.embargoIconImage = new Image();
+    this.embargoIconImage.src = embargoIcon;
   }
 
   resizeCanvas() {
@@ -380,6 +384,24 @@ export class NameLayer implements Layer {
       existingEmoji.remove();
     }
 
+    const existingEmbargo = iconsDiv.querySelector('[data-icon="embargo"]');
+    const hasEmbargo =
+      render.player.hasEmbargoAgainst(myPlayer) ||
+      myPlayer.hasEmbargoAgainst(render.player);
+    if (myPlayer && hasEmbargo) {
+      if (!existingEmbargo) {
+        iconsDiv.appendChild(
+          this.createIconElement(
+            this.embargoIconImage.src,
+            iconSize,
+            "embargo",
+          ),
+        );
+      }
+    } else if (existingEmbargo) {
+      existingEmbargo.remove();
+    }
+
     // Update all icon sizes
     const icons = iconsDiv.getElementsByTagName("img");
     for (const icon of icons) {