From 2c644d81fdb9513b5a1f591492d03a52a2758211 Mon Sep 17 00:00:00 2001
From: NewHappyRabbit <newhappyrabbit3@gmail.com>
Date: Thu, 20 Feb 2025 16:53:24 +0200
Subject: [PATCH] Moved flags to the left of the username

---
 src/client/graphics/layers/NameLayer.ts | 35 +++++++++++++++----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts
index 751df44a5..c89d95b43 100644
--- a/src/client/graphics/layers/NameLayer.ts
+++ b/src/client/graphics/layers/NameLayer.ts
@@ -156,28 +156,30 @@ export class NameLayer implements Layer {
     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);
-
     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";
+    // nameDiv.style.alignItems = "flex-start";
+
+    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");
@@ -244,11 +246,16 @@ 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;
+    flagDiv.style.height = `${render.fontSize}px`;
     troopsDiv.style.fontSize = `${render.fontSize}px`;
     troopsDiv.style.color = render.fontColor;
     troopsDiv.textContent = renderTroops(render.player.troops());