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 @@
+
+
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 = `
+
+ 0
+ `;
+ 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",