style flags: make them smaller and put under name

This commit is contained in:
Evan
2025-02-12 11:47:15 -08:00
parent 9ee1a94b10
commit 87135d6da2
+15 -2
View File
@@ -154,7 +154,7 @@ export class NameLayer implements Layer {
flagImg.classList.add("player-flag");
flagImg.style.marginBottom = "-5%";
flagImg.style.opacity = "0.8";
flagImg.src = "/flags/" + sanitize(player.flag()) + ".svg";
flagImg.src = "flags/" + sanitize(player.flag()) + ".svg";
flagImg.style.zIndex = "1";
flagImg.style.width = "40%";
flagImg.style.aspectRatio = "3/4";
@@ -174,13 +174,26 @@ export class NameLayer implements Layer {
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 = "-20%";
flagImg.style.opacity = "0.8";
flagImg.src = "flags/" + sanitize(player.flag()) + ".svg";
flagImg.style.zIndex = "1";
flagImg.style.width = "30%";
flagImg.style.aspectRatio = "3/4";
element.appendChild(flagImg);
}
const troopsDiv = document.createElement("div");
troopsDiv.classList.add("player-troops");
troopsDiv.textContent = renderTroops(player.troops());
troopsDiv.style.color = textColor;
troopsDiv.style.fontFamily = this.theme.font();
troopsDiv.style.fontWeight = "bold";
troopsDiv.style.zIndex = "3";
troopsDiv.style.marginTop = "-5%";
element.appendChild(troopsDiv);
const iconsDiv = document.createElement("div");