feat: add icon when player request alliance

To spot who asked alliance on the map add an email icon next to them

src/client/graphics/layers/NameLayer.ts

@@ -11,6 +11,7 @@ import { Layer } from "./Layer";
 import { TransformHandler } from "../TransformHandler";
 import traitorIcon from "../../../../resources/images/TraitorIcon.svg";
 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 { ClientID } from "../../../core/Schemas";
@@ -40,6 +41,7 @@ export class NameLayer implements Layer {
   private renders: RenderInfo[] = [];
   private seenPlayers: Set<PlayerView> = new Set();
   private traitorIconImage: HTMLImageElement;
+  private allianceRequestIconImage: HTMLImageElement;
   private allianceIconImage: HTMLImageElement;
   private targetIconImage: HTMLImageElement;
   private crownIconImage: HTMLImageElement;
@@ -57,6 +59,8 @@ export class NameLayer implements Layer {
     this.traitorIconImage.src = traitorIcon;
     this.allianceIconImage = new Image();
     this.allianceIconImage.src = allianceIcon;
+    this.allianceRequestIconImage = new Image();
+    this.allianceRequestIconImage.src = allianceRequestIcon;
     this.crownIconImage = new Image();
     this.crownIconImage.src = crownIcon;
     this.targetIconImage = new Image();
@@ -314,6 +318,23 @@ export class NameLayer implements Layer {
       existingAlliance.remove();
     }
 
+    // Alliance request icon
+    const data = '[data-icon="alliance-request"]';
+    const existingRequestAlliance = iconsDiv.querySelector(data);
+    if (myPlayer != null && render.player.isRequestingAllianceWith(myPlayer)) {
+      if (!existingRequestAlliance) {
+        iconsDiv.appendChild(
+          this.createIconElement(
+            this.allianceRequestIconImage.src,
+            iconSize,
+            "alliance-request",
+          ),
+        );
+      }
+    } else if (existingRequestAlliance) {
+      existingRequestAlliance.remove();
+    }
+
     // Target icon
     const existingTarget = iconsDiv.querySelector('[data-icon="target"]');
     if (

src/core/game/GameUpdates.ts

@@ -1,5 +1,6 @@
 import { ClientID } from "../Schemas";
 import {
+  AllianceRequest,
   EmojiMessage,
   GameUpdates,
   MapPos,
@@ -99,6 +100,7 @@ export interface PlayerUpdate {
   outgoingEmojis: EmojiMessage[];
   outgoingAttacks: AttackUpdate[];
   incomingAttacks: AttackUpdate[];
+  outgoingAllianceRequests: PlayerID[];
 }
 
 export interface AllianceRequestUpdate {

src/core/game/GameView.ts

@@ -187,6 +187,10 @@ export class PlayerView {
     return this.data.allies.some((n) => other.smallID() == n);
   }
 
+  isRequestingAllianceWith(other: PlayerView) {
+    return this.data.outgoingAllianceRequests.some((id) => other.id() == id);
+  }
+
   profile(): Promise<PlayerProfile> {
     return this.game.worker.playerProfile(this.smallID());
   }

src/core/game/PlayerImpl.ts

@@ -102,6 +102,10 @@ export class PlayerImpl implements Player {
   largestClusterBoundingBox: { min: Cell; max: Cell } | null;
 
   toUpdate(): PlayerUpdate {
+    const outgoingAllianceRequests = this.outgoingAllianceRequests().map((ar) =>
+      ar.recipient().id(),
+    );
+
     return {
       type: GameUpdateType.Player,
       clientID: this.clientID(),
@@ -138,6 +142,7 @@ export class PlayerImpl implements Player {
             troops: a.troops(),
           }) as AttackUpdate,
       ),
+      outgoingAllianceRequests: outgoingAllianceRequests,
     };
   }