alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-22 14:09:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

bugfix: names flash at corner at start of game

Browse Source
This commit is contained in:
Evan
2025-02-11 20:02:34 -08:00
parent c3a5e58be6
commit 95a70dd8d3
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/NameLayer.ts
+20 -12
View File
@@ -143,13 +143,12 @@ 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.classList.add("player-flag");
flagImg.style.marginBottom = "-5%";
flagImg.style.opacity = '0.8';
flagImg.src = 'flags/' + sanitize(player.flag()) + '.svg';
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";
@@ -157,8 +156,9 @@ export class NameLayer implements Layer {
}
const nameDiv = document.createElement("div");
nameDiv.classList.add('player-name');
nameDiv.innerHTML = (player.type() !== PlayerType.Human ? "🤖 " : '') + player.name();
nameDiv.classList.add("player-name");
nameDiv.innerHTML =
(player.type() !== PlayerType.Human ? "🤖 " : "") + player.name();
nameDiv.style.color = this.theme.playerInfoColor(player.id()).toHex();
nameDiv.style.fontFamily = this.theme.font();
nameDiv.style.whiteSpace = "nowrap";
@@ -167,9 +167,8 @@ export class NameLayer implements Layer {
nameDiv.style.zIndex = "3";
element.appendChild(nameDiv);
const troopsDiv = document.createElement("div");
troopsDiv.classList.add('player-troops');
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();
@@ -178,7 +177,7 @@ export class NameLayer implements Layer {
element.appendChild(troopsDiv);
const iconsDiv = document.createElement("div");
iconsDiv.classList.add('player-icons');
iconsDiv.classList.add("player-icons");
iconsDiv.style.display = "flex";
iconsDiv.style.gap = "4px";
iconsDiv.style.justifyContent = "center";
@@ -189,6 +188,9 @@ export class NameLayer implements Layer {
iconsDiv.style.height = "100%";
element.appendChild(iconsDiv);
// Start off invisible so it doesn't flash at 0,0
element.style.display = "none";
this.container.appendChild(element);
return element;
}
@@ -226,14 +228,20 @@ export class NameLayer implements Layer {
render.lastRenderCalc = now + this.rand.nextInt(0, 100);
// Update text sizes
const nameDiv = render.element.querySelector(".player-name") as HTMLDivElement;
const troopsDiv = render.element.querySelector(".player-troops") 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.querySelector(".player-icons") as HTMLDivElement;
const iconsDiv = render.element.querySelector(
".player-icons"
) as HTMLDivElement;
const iconSize = Math.min(render.fontSize * 1.5, 48);
const myPlayer = this.getPlayer();