alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-08-18 17:53:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added flags

Browse Source
This commit is contained in:
NewHappyRabbit
2025-02-11 23:34:19 +02:00
parent b8a743e745
commit 949f68287e
17 changed files with 255 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/NameLayer.ts
+27 -9
View File
@@ -16,6 +16,7 @@ import targetIcon from "../../../../resources/images/TargetIcon.svg";
import { ClientID } from "../../../core/Schemas";
import { GameView, PlayerView } from "../../../core/game/GameView";
import { createCanvas, renderTroops } from "../../Utils";
import { sanitize } from "../../../core/Util";
class RenderInfo {
public icons: Map<string, HTMLImageElement> = new Map(); // Track icon elements
@@ -142,33 +143,50 @@ export class NameLayer implements Layer {
element.style.alignItems = "center";
element.style.gap = "0px";
if (player.flag()) {
const flagImg = document.createElement("img");
flagImg.classList.add('player-flag');
flagImg.style.marginBottom = "-5%";
flagImg.style.opacity = '0.8';
flagImg.src = 'flags/' + sanitize(player.flag()) + '.svg';
flagImg.style.zIndex = "1";
flagImg.style.width = "40%";
flagImg.style.aspectRatio = "3/4";
element.appendChild(flagImg);
}
const nameDiv = document.createElement("div");
nameDiv.classList.add('player-name');
nameDiv.innerHTML = player.name();
nameDiv.style.color = this.theme.playerInfoColor(player.id()).toHex();
nameDiv.style.fontFamily = this.theme.font();
nameDiv.style.whiteSpace = "nowrap";
nameDiv.style.overflow = "hidden";
nameDiv.style.textOverflow = "ellipsis";
nameDiv.style.zIndex = "2";
nameDiv.style.zIndex = "3";
element.appendChild(nameDiv);
const troopsDiv = document.createElement("div");
troopsDiv.classList.add('player-troops');
troopsDiv.textContent = renderTroops(player.troops());
troopsDiv.style.color = this.theme.playerInfoColor(player.id()).toHex();
troopsDiv.style.fontFamily = this.theme.font();
troopsDiv.style.fontWeight = "bold";
troopsDiv.style.zIndex = "2";
troopsDiv.style.zIndex = "3";
element.appendChild(troopsDiv);
const iconsDiv = document.createElement("div");
iconsDiv.classList.add('player-icons');
iconsDiv.style.display = "flex";
iconsDiv.style.gap = "4px";
iconsDiv.style.justifyContent = "center";
iconsDiv.style.alignItems = "center";
iconsDiv.style.position = "absolute"; // Add this
iconsDiv.style.zIndex = "1"; // Add this
iconsDiv.style.width = "100%"; // Add this
iconsDiv.style.height = "100%"; // Add this
iconsDiv.style.position = "absolute";
iconsDiv.style.zIndex = "2";
iconsDiv.style.width = "100%";
iconsDiv.style.height = "100%";
element.appendChild(iconsDiv);
this.container.appendChild(element);
@@ -208,14 +226,14 @@ export class NameLayer implements Layer {
render.lastRenderCalc = now + this.rand.nextInt(0, 100);
// Update text sizes
const nameDiv = render.element.children[0] as HTMLDivElement;
const troopsDiv = render.element.children[1] as HTMLDivElement;
const nameDiv = render.element.querySelector(".player-name") as HTMLDivElement;
const troopsDiv = render.element.querySelector(".player-troops") as HTMLDivElement;
nameDiv.style.fontSize = `${render.fontSize}px`;
troopsDiv.style.fontSize = `${render.fontSize}px`;
troopsDiv.textContent = renderTroops(render.player.troops());
// Handle icons
const iconsDiv = render.element.children[2] as HTMLDivElement;
const iconsDiv = render.element.querySelector(".player-icons") as HTMLDivElement;
const iconSize = Math.min(render.fontSize * 1.5, 48);
const myPlayer = this.getPlayer();