Merge branch 'main' of https://github.com/openfrontio/OpenFrontIO into SPA

src/client/graphics/layers/NameLayer.ts

@@ -26,7 +26,7 @@ class RenderInfo {
     public lastRenderCalc: number,
     public location: Cell,
     public fontSize: number,
-    public element: HTMLElement
+    public element: HTMLElement,
   ) {}
 }
 
@@ -50,7 +50,7 @@ export class NameLayer implements Layer {
     private game: GameView,
     private theme: Theme,
     private transformHandler: TransformHandler,
-    private clientID: ClientID
+    private clientID: ClientID,
   ) {
     this.traitorIconImage = new Image();
     this.traitorIconImage.src = traitorIcon;
@@ -101,7 +101,13 @@ export class NameLayer implements Layer {
         if (!this.seenPlayers.has(player)) {
           this.seenPlayers.add(player);
           this.renders.push(
-            new RenderInfo(player, 0, null, 0, this.createPlayerElement(player))
+            new RenderInfo(
+              player,
+              0,
+              null,
+              0,
+              this.createPlayerElement(player),
+            ),
           );
         }
       }
@@ -110,11 +116,11 @@ export class NameLayer implements Layer {
 
   public renderLayer(mainContex: CanvasRenderingContext2D) {
     const screenPosOld = this.transformHandler.worldToScreenCoordinates(
-      new Cell(0, 0)
+      new Cell(0, 0),
     );
     const screenPos = new Cell(
       screenPosOld.x - window.innerWidth / 2,
-      screenPosOld.y - window.innerHeight / 2
+      screenPosOld.y - window.innerHeight / 2,
     );
     this.container.style.transform = `translate(${screenPos.x}px, ${screenPos.y}px) scale(${this.transformHandler.scale})`;
 
@@ -131,7 +137,7 @@ export class NameLayer implements Layer {
       0,
       0,
       mainContex.canvas.width,
-      mainContex.canvas.height
+      mainContex.canvas.height,
     );
   }
 
@@ -143,10 +149,9 @@ export class NameLayer implements Layer {
     element.style.alignItems = "center";
     element.style.gap = "0px";
 
-    
     if (player.flag()) {
       const flagImg = document.createElement("img");
-      flagImg.classList.add('player-flag');
+      flagImg.classList.add("player-flag");
       flagImg.style.marginBottom = "-5%";
       flagImg.style.opacity = '0.8';
       flagImg.src = '/flags/' + sanitize(player.flag()) + '.svg';
@@ -157,8 +162,9 @@ export class NameLayer implements Layer {
     }
 
     const nameDiv = document.createElement("div");
-    nameDiv.classList.add('player-name');
-    nameDiv.innerHTML = (player.type() !== PlayerType.Human ? "🤖 " : '') + player.name();
+    nameDiv.classList.add("player-name");
+    nameDiv.innerHTML =
+      (player.type() !== PlayerType.Human ? "🤖 " : "") + player.name();
     nameDiv.style.color = this.theme.playerInfoColor(player.id()).toHex();
     nameDiv.style.fontFamily = this.theme.font();
     nameDiv.style.whiteSpace = "nowrap";
@@ -167,9 +173,8 @@ export class NameLayer implements Layer {
     nameDiv.style.zIndex = "3";
     element.appendChild(nameDiv);
 
-
     const troopsDiv = document.createElement("div");
-    troopsDiv.classList.add('player-troops');
+    troopsDiv.classList.add("player-troops");
     troopsDiv.textContent = renderTroops(player.troops());
     troopsDiv.style.color = this.theme.playerInfoColor(player.id()).toHex();
     troopsDiv.style.fontFamily = this.theme.font();
@@ -178,7 +183,7 @@ export class NameLayer implements Layer {
     element.appendChild(troopsDiv);
 
     const iconsDiv = document.createElement("div");
-    iconsDiv.classList.add('player-icons');
+    iconsDiv.classList.add("player-icons");
     iconsDiv.style.display = "flex";
     iconsDiv.style.gap = "4px";
     iconsDiv.style.justifyContent = "center";
@@ -189,6 +194,9 @@ export class NameLayer implements Layer {
     iconsDiv.style.height = "100%";
     element.appendChild(iconsDiv);
 
+    // Start off invisible so it doesn't flash at 0,0
+    element.style.display = "none";
+
     this.container.appendChild(element);
     return element;
   }
@@ -203,7 +211,7 @@ export class NameLayer implements Layer {
     const oldLocation = render.location;
     render.location = new Cell(
       render.player.nameLocation().x,
-      render.player.nameLocation().y
+      render.player.nameLocation().y,
     );
 
     // Calculate base size and scale
@@ -226,14 +234,20 @@ export class NameLayer implements Layer {
     render.lastRenderCalc = now + this.rand.nextInt(0, 100);
 
     // Update text sizes
-    const nameDiv = render.element.querySelector(".player-name") as HTMLDivElement;
-    const troopsDiv = render.element.querySelector(".player-troops") as HTMLDivElement;
+    const nameDiv = render.element.querySelector(
+      ".player-name",
+    ) as HTMLDivElement;
+    const troopsDiv = render.element.querySelector(
+      ".player-troops",
+    ) as HTMLDivElement;
     nameDiv.style.fontSize = `${render.fontSize}px`;
     troopsDiv.style.fontSize = `${render.fontSize}px`;
     troopsDiv.textContent = renderTroops(render.player.troops());
 
     // Handle icons
-    const iconsDiv = render.element.querySelector(".player-icons") as HTMLDivElement;
+    const iconsDiv = render.element.querySelector(
+      ".player-icons",
+    ) as HTMLDivElement;
     const iconSize = Math.min(render.fontSize * 1.5, 48);
     const myPlayer = this.getPlayer();
 
@@ -242,7 +256,7 @@ export class NameLayer implements Layer {
     if (render.player === this.firstPlace) {
       if (!existingCrown) {
         iconsDiv.appendChild(
-          this.createIconElement(this.crownIconImage.src, iconSize, "crown")
+          this.createIconElement(this.crownIconImage.src, iconSize, "crown"),
         );
       }
     } else if (existingCrown) {
@@ -254,7 +268,11 @@ export class NameLayer implements Layer {
     if (render.player.isTraitor()) {
       if (!existingTraitor) {
         iconsDiv.appendChild(
-          this.createIconElement(this.traitorIconImage.src, iconSize, "traitor")
+          this.createIconElement(
+            this.traitorIconImage.src,
+            iconSize,
+            "traitor",
+          ),
         );
       }
     } else if (existingTraitor) {
@@ -269,8 +287,8 @@ export class NameLayer implements Layer {
           this.createIconElement(
             this.allianceIconImage.src,
             iconSize,
-            "alliance"
-          )
+            "alliance",
+          ),
         );
       }
     } else if (existingAlliance) {
@@ -285,7 +303,7 @@ export class NameLayer implements Layer {
     ) {
       if (!existingTarget) {
         iconsDiv.appendChild(
-          this.createIconElement(this.targetIconImage.src, iconSize, "target")
+          this.createIconElement(this.targetIconImage.src, iconSize, "target"),
         );
       }
     } else if (existingTarget) {
@@ -299,7 +317,7 @@ export class NameLayer implements Layer {
       .filter(
         (emoji) =>
           emoji.recipientID == AllPlayers ||
-          emoji.recipientID == myPlayer?.smallID()
+          emoji.recipientID == myPlayer?.smallID(),
       );
 
     if (emojis.length > 0) {
@@ -332,7 +350,7 @@ export class NameLayer implements Layer {
   private createIconElement(
     src: string,
     size: number,
-    id: string
+    id: string,
   ): HTMLImageElement {
     const icon = document.createElement("img");
     icon.src = src;