From a2ba10bdbda6498a0a9c4d2dc43596a1a7ca01e6 Mon Sep 17 00:00:00 2001
From: evan <openfrontio@gmail.com>
Date: Wed, 23 Apr 2025 14:26:12 -0700
Subject: [PATCH] show density under player name

---
 resources/images/ShieldIconBlack.svg    | 39 +++++++++++++++++++++++++
 src/client/graphics/layers/NameLayer.ts | 37 ++++++++++++++++++++++-
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 resources/images/ShieldIconBlack.svg

diff --git a/resources/images/ShieldIconBlack.svg b/resources/images/ShieldIconBlack.svg
new file mode 100644
index 000000000..26bc34312
--- /dev/null
+++ b/resources/images/ShieldIconBlack.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 100 125"
+   enable-background="new 0 0 100 100"
+   xml:space="preserve"
+   id="svg2"
+   sodipodi:docname="SheildIconBlack.svg"
+   inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="7.024"
+     inkscape:cx="50.042711"
+     inkscape:cy="51.110478"
+     inkscape:window-width="1200"
+     inkscape:window-height="1027"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" /><path
+     d="M86.482,12.673h-1.839c-18.965,0-33.29-11.565-33.435-11.682l-0.242-0.198L50.003,0l-0.002,0.002L49.997,0l-0.962,0.793  l-0.244,0.198c-0.144,0.117-14.469,11.682-33.434,11.682h-1.838h-0.002v47.558h0.002c0,28.016,36.123,39.656,36.478,39.769  c0.357-0.112,36.485-11.753,36.485-39.769h0.001L86.482,12.673L86.482,12.673z M50.001,92.075  c-3.986-1.394-29.805-11.251-29.805-32.743c0,0,0-37.478,0-40.186C35.2,18.602,46.591,11.215,50.001,8.708  c3.408,2.507,14.8,9.894,29.804,10.438c0,2.708,0,40.186,0,40.186C79.805,80.824,53.986,90.682,50.001,92.075z"
+     id="path1" /><path
+     id="text1"
+     d="m 46.074219,112.41406 c 0.04038,0.006 0.08071,0.0119 0.121093,0.0176 v -0.0176 z" /><path
+     id="text2"
+     d="m 1.5839844,116.85938 c -0.014455,-0.003 -0.030007,-0.003 -0.046875,0.004 0.028683,0.008 0.058198,0.0117 0.087891,0.0156 -0.013204,-0.009 -0.026561,-0.0163 -0.041016,-0.0195 z m 50.7851566,0.78515 c -0.02696,0.0298 -0.03988,0.0408 -0.0625,0.0644 0.08126,-0.0135 0.111943,-0.0172 0.0625,-0.0644 z M 0,117.84766 v 0.043 H 0.00976563 C 0.00624989,117.87619 0.00348598,117.86193 0,117.84766 Z m 0.42578125,2.07031 V 120 h 0.0371094 c -0.0120428,-0.0276 -0.025727,-0.0544 -0.0371094,-0.082 z m 13.17382775,0.0937 c 0.05637,0.005 0.110483,0.0137 0.169922,0.0137 0.07,0 0.141511,-0.003 0.214844,-0.006 0.02637,-0.001 0.04743,-0.006 0.07227,-0.008 -0.152252,-5.6e-4 -0.304756,2.6e-4 -0.457032,0 z" /></svg>
diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts
index 1ecdfba02..58c49fff2 100644
--- a/src/client/graphics/layers/NameLayer.ts
+++ b/src/client/graphics/layers/NameLayer.ts
@@ -4,6 +4,7 @@ import crownIcon from "../../../../resources/images/CrownIcon.svg";
 import embargoIcon from "../../../../resources/images/EmbargoIcon.svg";
 import nukeRedIcon from "../../../../resources/images/NukeIconRed.svg";
 import nukeWhiteIcon from "../../../../resources/images/NukeIconWhite.svg";
+import shieldIcon from "../../../../resources/images/ShieldIconBlack.svg";
 import targetIcon from "../../../../resources/images/TargetIcon.svg";
 import traitorIcon from "../../../../resources/images/TraitorIcon.svg";
 import { PseudoRandom } from "../../../core/PseudoRandom";
@@ -11,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";
 
@@ -44,6 +45,7 @@ export class NameLayer implements Layer {
   private embargoIconImage: HTMLImageElement;
   private nukeWhiteIconImage: HTMLImageElement;
   private nukeRedIconImage: HTMLImageElement;
+  private shieldIconImage: HTMLImageElement;
   private container: HTMLDivElement;
   private myPlayer: PlayerView | null = null;
   private firstPlace: PlayerView | null = null;
@@ -70,6 +72,8 @@ export class NameLayer implements Layer {
     this.nukeWhiteIconImage.src = nukeWhiteIcon;
     this.nukeRedIconImage = new Image();
     this.nukeRedIconImage.src = nukeRedIcon;
+    this.shieldIconImage = new Image();
+    this.shieldIconImage.src = shieldIcon;
   }
 
   resizeCanvas() {
@@ -210,6 +214,19 @@ export class NameLayer implements Layer {
     troopsDiv.style.marginTop = "-5%";
     element.appendChild(troopsDiv);
 
+    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";
 
@@ -274,6 +291,24 @@ export class NameLayer implements Layer {
     troopsDiv.style.color = render.fontColor;
     troopsDiv.textContent = renderTroops(render.player.troops());
 
+    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(
       ".player-icons",