Merge pull request #58 from NewHappyRabbit/namelayer-improvements

Moved flags to the left of the username. Icons above the username. Target icon and emojis still center.

src/client/graphics/layers/NameLayer.ts

@@ -155,29 +155,39 @@ export class NameLayer implements Layer {
     element.style.alignItems = "center";
     element.style.gap = "0px";
 
-    const nameDiv = document.createElement("div");
-    nameDiv.classList.add("player-name");
-    nameDiv.innerHTML = player.name();
-    nameDiv.style.color = this.theme.textColor(player.info());
-    nameDiv.style.fontFamily = this.theme.font();
-    nameDiv.style.whiteSpace = "nowrap";
-    nameDiv.style.overflow = "hidden";
-    nameDiv.style.textOverflow = "ellipsis";
-    nameDiv.style.zIndex = "3";
-    element.appendChild(nameDiv);
+    const iconsDiv = document.createElement("div");
+    iconsDiv.classList.add("player-icons");
+    iconsDiv.style.display = "flex";
+    iconsDiv.style.gap = "4px";
+    iconsDiv.style.justifyContent = "center";
+    iconsDiv.style.alignItems = "center";
+    iconsDiv.style.zIndex = "2";
+    element.appendChild(iconsDiv);
 
+    const nameDiv = document.createElement("div");
     if (player.flag()) {
       const flagImg = document.createElement("img");
       flagImg.classList.add("player-flag");
-      flagImg.style.marginBottom = "-10%";
-      flagImg.style.marginTop = "-17%";
       flagImg.style.opacity = "0.8";
       flagImg.src = "/flags/" + player.flag() + ".svg";
       flagImg.style.zIndex = "1";
-      flagImg.style.width = "30%";
       flagImg.style.aspectRatio = "3/4";
-      element.appendChild(flagImg);
+      nameDiv.appendChild(flagImg);
     }
+    nameDiv.classList.add("player-name");
+    nameDiv.style.color = this.theme.textColor(player.info());
+    nameDiv.style.fontFamily = this.theme.font();
+    nameDiv.style.whiteSpace = "nowrap";
+    nameDiv.style.textOverflow = "ellipsis";
+    nameDiv.style.zIndex = "3";
+    nameDiv.style.display = "flex";
+    nameDiv.style.justifyContent = "flex-end";
+    nameDiv.style.alignItems = "center";
+
+    const nameSpan = document.createElement("span");
+    nameSpan.innerHTML = player.name();
+    nameDiv.appendChild(nameSpan);
+    element.appendChild(nameDiv);
 
     const troopsDiv = document.createElement("div");
     troopsDiv.classList.add("player-troops");
@@ -188,18 +198,6 @@ export class NameLayer implements Layer {
     troopsDiv.style.marginTop = "-5%";
     element.appendChild(troopsDiv);
 
-    const iconsDiv = document.createElement("div");
-    iconsDiv.classList.add("player-icons");
-    iconsDiv.style.display = "flex";
-    iconsDiv.style.gap = "4px";
-    iconsDiv.style.justifyContent = "center";
-    iconsDiv.style.alignItems = "center";
-    iconsDiv.style.position = "absolute";
-    iconsDiv.style.zIndex = "2";
-    iconsDiv.style.width = "100%";
-    iconsDiv.style.height = "100%";
-    element.appendChild(iconsDiv);
-
     // Start off invisible so it doesn't flash at 0,0
     element.style.display = "none";
 
@@ -244,11 +242,18 @@ export class NameLayer implements Layer {
     const nameDiv = render.element.querySelector(
       ".player-name",
     ) as HTMLDivElement;
+    const flagDiv = render.element.querySelector(
+      ".player-flag",
+    ) as HTMLDivElement;
     const troopsDiv = render.element.querySelector(
       ".player-troops",
     ) as HTMLDivElement;
     nameDiv.style.fontSize = `${render.fontSize}px`;
+    nameDiv.style.lineHeight = `${render.fontSize}px`;
     nameDiv.style.color = render.fontColor;
+    if (flagDiv) {
+      flagDiv.style.height = `${render.fontSize}px`;
+    }
     troopsDiv.style.fontSize = `${render.fontSize}px`;
     troopsDiv.style.color = render.fontColor;
     troopsDiv.textContent = renderTroops(render.player.troops());
@@ -265,7 +270,12 @@ 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",
+            false,
+          ),
         );
       }
     } else if (existingCrown) {
@@ -312,7 +322,12 @@ export class NameLayer implements Layer {
     ) {
       if (!existingTarget) {
         iconsDiv.appendChild(
-          this.createIconElement(this.targetIconImage.src, iconSize, "target"),
+          this.createIconElement(
+            this.targetIconImage.src,
+            iconSize,
+            "target",
+            true,
+          ),
         );
       }
     } else if (existingTarget) {
@@ -334,8 +349,10 @@ export class NameLayer implements Layer {
         const emojiDiv = document.createElement("div");
         emojiDiv.setAttribute("data-icon", "emoji");
         emojiDiv.style.fontSize = `${iconSize}px`;
-        // emojiDiv.textAlign = 'center'
         emojiDiv.textContent = emojis[0].message;
+        emojiDiv.style.position = "absolute";
+        emojiDiv.style.top = "50%";
+        emojiDiv.style.transform = "translateY(-50%)";
         iconsDiv.appendChild(emojiDiv);
       }
     } else if (existingEmoji) {
@@ -360,13 +377,18 @@ export class NameLayer implements Layer {
     src: string,
     size: number,
     id: string,
+    center: boolean = false,
   ): HTMLImageElement {
     const icon = document.createElement("img");
     icon.src = src;
     icon.style.width = `${size}px`;
     icon.style.height = `${size}px`;
     icon.setAttribute("data-icon", id);
-    icon.style.position = "absolute";
+    if (center) {
+      icon.style.position = "absolute";
+      icon.style.top = "50%";
+      icon.style.transform = "translateY(-50%)";
+    }
     return icon;
   }