From 2cdce06244bcb043a3d89a76a226df5cbe2540e8 Mon Sep 17 00:00:00 2001
From: 1brucben <1benjbruce@gmail.com>
Date: Mon, 19 May 2025 20:27:52 +0200
Subject: [PATCH] Enable Shield (#817)

## Description:
Shield needs enabling
## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

1brucben
---
 src/client/graphics/layers/NameLayer.ts | 64 ++++++++++++-------------
 1 file changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts
index 9fc9584f7..8449c551f 100644
--- a/src/client/graphics/layers/NameLayer.ts
+++ b/src/client/graphics/layers/NameLayer.ts
@@ -12,7 +12,7 @@ import { ClientID } from "../../../core/Schemas";
 import { Theme } from "../../../core/configuration/Config";
 import { AllPlayers, Cell, nukeTypes } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
-import { createCanvas, renderTroops } from "../../Utils";
+import { createCanvas, renderNumber, renderTroops } from "../../Utils";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
@@ -214,20 +214,18 @@ export class NameLayer implements Layer {
     troopsDiv.style.marginTop = "-5%";
     element.appendChild(troopsDiv);
 
-    // TODO: enable this for new meta.
-
-    // const shieldDiv = document.createElement("div");
-    // shieldDiv.classList.add("player-shield");
-    // shieldDiv.style.zIndex = "3";
-    // shieldDiv.style.marginTop = "-5%";
-    // shieldDiv.style.display = "flex";
-    // shieldDiv.style.alignItems = "center";
-    // shieldDiv.style.gap = "0px";
-    // shieldDiv.innerHTML = `
-    //   <img src="${this.shieldIconImage.src}" style="width: 16px; height: 16px;" />
-    //   <span style="color: black; font-size: 10px; margin-top: -2px;">0</span>
-    // `;
-    // element.appendChild(shieldDiv);
+    const shieldDiv = document.createElement("div");
+    shieldDiv.classList.add("player-shield");
+    shieldDiv.style.zIndex = "3";
+    shieldDiv.style.marginTop = "-5%";
+    shieldDiv.style.display = "flex";
+    shieldDiv.style.alignItems = "center";
+    shieldDiv.style.gap = "0px";
+    shieldDiv.innerHTML = `
+      <img src="${this.shieldIconImage.src}" style="width: 16px; height: 16px;" />
+      <span style="color: black; font-size: 10px; margin-top: -2px;">0</span>
+    `;
+    element.appendChild(shieldDiv);
 
     // Start off invisible so it doesn't flash at 0,0
     element.style.display = "none";
@@ -293,25 +291,23 @@ export class NameLayer implements Layer {
     troopsDiv.style.color = render.fontColor;
     troopsDiv.textContent = renderTroops(render.player.troops());
 
-    // TODO: enable this for new meta.
-
-    // const density = renderNumber(
-    //   render.player.troops() / render.player.numTilesOwned(),
-    // );
-    // const shieldDiv = render.element.querySelector(
-    //   ".player-shield",
-    // ) as HTMLDivElement;
-    // const shieldImg = shieldDiv.querySelector("img");
-    // const shieldNumber = shieldDiv.querySelector("span");
-    // if (shieldImg) {
-    //   shieldImg.style.width = `${render.fontSize * 0.8}px`;
-    //   shieldImg.style.height = `${render.fontSize * 0.8}px`;
-    // }
-    // if (shieldNumber) {
-    //   shieldNumber.style.fontSize = `${render.fontSize * 0.6}px`;
-    //   shieldNumber.style.marginTop = `${-render.fontSize * 0.1}px`;
-    //   shieldNumber.textContent = density;
-    // }
+    const density = renderNumber(
+      render.player.troops() / render.player.numTilesOwned(),
+    );
+    const shieldDiv = render.element.querySelector(
+      ".player-shield",
+    ) as HTMLDivElement;
+    const shieldImg = shieldDiv.querySelector("img");
+    const shieldNumber = shieldDiv.querySelector("span");
+    if (shieldImg) {
+      shieldImg.style.width = `${render.fontSize * 0.8}px`;
+      shieldImg.style.height = `${render.fontSize * 0.8}px`;
+    }
+    if (shieldNumber) {
+      shieldNumber.style.fontSize = `${render.fontSize * 0.6}px`;
+      shieldNumber.style.marginTop = `${-render.fontSize * 0.1}px`;
+      shieldNumber.textContent = density;
+    }
 
     // Handle icons
     const iconsDiv = render.element.querySelector(