From a26590473c3b175195dd58c5783f1aa28abc3e9e Mon Sep 17 00:00:00 2001 From: DevelopingTom Date: Sat, 10 Jan 2026 05:39:04 +0100 Subject: [PATCH] Fix small UI issues (#2845) ## Description: Changes a few small UI issues: - Player info text transparency made it less legible: image - Fix naval invasion target end fade which didn't work previously ![ui_fade](https://github.com/user-attachments/assets/a4867257-0962-4c0d-9e1c-bcac7eba8089) - Rename rendering function since the UI layer doesn't only handle target ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: IngloriousTom --- src/client/graphics/layers/DynamicUILayer.ts | 18 +++++++-------- .../graphics/layers/PlayerInfoOverlay.ts | 23 ++++++------------- src/client/graphics/ui/NavalTarget.ts | 2 +- 3 files changed, 17 insertions(+), 26 deletions(-) diff --git a/src/client/graphics/layers/DynamicUILayer.ts b/src/client/graphics/layers/DynamicUILayer.ts index 8d555d855..66810b08a 100644 --- a/src/client/graphics/layers/DynamicUILayer.ts +++ b/src/client/graphics/layers/DynamicUILayer.ts @@ -18,7 +18,7 @@ const TEXT_STACK_SPACING = 8; const TEXT_DURATION = 2500; export class DynamicUILayer implements Layer { - private readonly allElements: Array = []; + private readonly uiElements: Array = []; private lastRefresh = Date.now(); constructor( @@ -105,14 +105,14 @@ export class DynamicUILayer implements Layer { onBombEvent(unit: UnitView) { if (this.createdThisTick(unit) && this.isOwnedByPlayer(unit)) { const target = new NukeTelegraph(this.transformHandler, this.game, unit); - this.allElements.push(target); + this.uiElements.push(target); } } onTransportShipEvent(unit: UnitView) { if (this.createdThisTick(unit) && this.isOwnedByPlayer(unit)) { const target = new NavalTarget(this.transformHandler, this.game, unit); - this.allElements.push(target); + this.uiElements.push(target); } } @@ -121,14 +121,14 @@ export class DynamicUILayer implements Layer { const dt = now - this.lastRefresh; this.lastRefresh = now; if (this.game.config().userSettings()?.fxLayer()) { - this.renderAllTargets(context, dt); + this.renderUIElements(context, dt); } } - renderAllTargets(context: CanvasRenderingContext2D, delta: number) { - for (let i = this.allElements.length - 1; i >= 0; i--) { - if (!this.allElements[i].render(context, delta)) { - this.allElements.splice(i, 1); + renderUIElements(context: CanvasRenderingContext2D, delta: number) { + for (let i = this.uiElements.length - 1; i >= 0; i--) { + if (!this.uiElements[i].render(context, delta)) { + this.uiElements.splice(i, 1); } } } @@ -154,7 +154,7 @@ export class DynamicUILayer implements Layer { typeof num === "bigint" ? (num < 0n ? -num : num) : Math.abs(num); const shortened = renderNumber(absNum, 0); const sign = num >= 0 ? "+" : "-"; - this.allElements.push( + this.uiElements.push( new TextIndicator( this.transformHandler, `${sign} ${shortened}`, diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts index 810a18d8a..0bc367ce7 100644 --- a/src/client/graphics/layers/PlayerInfoOverlay.ts +++ b/src/client/graphics/layers/PlayerInfoOverlay.ts @@ -210,7 +210,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { return !this.game.config().isUnitDisabled(type) ? html`
+ ? html`
${translateText("player_info_overlay.team")}: ${player.team()}
` : ""}
${playerType} ${relationHtml}
${player.troops() >= 1 - ? html`
+ ? html`
${translateText("player_info_overlay.troops")} ${renderTroops(player.troops())} @@ -373,10 +370,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
` : ""} ${maxTroops >= 1 - ? html`
+ ? html`
${translateText("player_info_overlay.maxtroops")} ${renderTroops(maxTroops)} @@ -384,10 +378,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
` : ""} ${attackingTroops >= 1 - ? html`
+ ? html`
${translateText("player_info_overlay.a_troops")} ${renderTroops(attackingTroops)} @@ -397,7 +388,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { ${this.renderTroopBar(totalTroops, attackingTroops, maxTroops)}
${unit.type()}
${unit.hasHealth() ? html` -
+
${translateText("player_info_overlay.health")}: ${unit.health()}
diff --git a/src/client/graphics/ui/NavalTarget.ts b/src/client/graphics/ui/NavalTarget.ts index 55e97a158..4def4c20e 100644 --- a/src/client/graphics/ui/NavalTarget.ts +++ b/src/client/graphics/ui/NavalTarget.ts @@ -42,7 +42,7 @@ export class Target implements UIElement { let t: number; if (this.ended) { // end animation - t = Math.max(0, 1 - this.lifeTime / this.animationDuration); + t = Math.max(0, 1 - this.animationElapsedTime / this.animationDuration); } else { t = 1; // No start fade feels more reactive }