From 0c7da790f1a4db45a5396e8254deead53d8bdaf7 Mon Sep 17 00:00:00 2001 From: FloPinguin <25036848+FloPinguin@users.noreply.github.com> Date: Sun, 15 Feb 2026 04:48:43 +0100 Subject: [PATCH] =?UTF-8?q?Improve=20Ingame=20UI=20=E2=9C=A8=20(#3212)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description: - **Dynamic sidebar offset for top bars** - GameLeftSidebar, GameRightSidebar, and PlayerInfoOverlay now shift down when SpawnTimer and/or ImmunityTimer bars are visible (7px per bar). Implemented via events. - **Fixed text overflow** in HeadsUpMessage.ts (Random spawn message is long) - **Fixed inconsistent text sizing** in EventsDisplay - **Alliance icon horizontal** in PlayerInfoOverlay so the size of the overlay doesn't change if there is an alliance - **Nation relation coloring** - Nation player names are now colored based on their relation - **Background & Blur Unification** - **Border Radius & Page Edge Gap Standardization** - **EventsDisplay collapsed button:** Fixed badge hidden / inline-block CSS conflict (conditional rendering), added gap-2 between text and badge - **Right panel spacing:** Changed right container from sm:w-1/2 to sm:flex-1 to fill remaining space - **Leaderboard**: Rounded grid corners (rounded-lg overflow-hidden), removed last-row border, added `willUpdate` for auto-refresh on hide/show click, plus button styled to match toggle buttons - Other little CSS fixes (margins etc) Showcase: (Note the red mexico name on betrayal) https://github.com/user-attachments/assets/f0ed91de-3a07-4564-a209-3d7723edee55 Two progress bars at the top, mobile UI not cut off: https://github.com/user-attachments/assets/83f1fd64-ceab-4a74-8d16-6e1eeea1709d HeadsUpMessage text overflow fixed, SpawnTimer does not cut off the PlayerInfoOverlay: Screenshot 2026-02-14 214410 Previous: Screenshot 2026-02-14 213705 Smaller event panel text: Screenshot 2026-02-14 215738 ## 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: FloPinguin --- index.html | 6 +- resources/lang/en.json | 1 + src/client/graphics/GameRenderer.ts | 3 + src/client/graphics/layers/AttacksDisplay.ts | 24 ++++--- src/client/graphics/layers/ControlPanel.ts | 2 +- src/client/graphics/layers/EventsDisplay.ts | 26 +++---- src/client/graphics/layers/GameLeftSidebar.ts | 23 ++++++- .../graphics/layers/GameRightSidebar.ts | 24 ++++++- src/client/graphics/layers/HeadsUpMessage.ts | 6 +- src/client/graphics/layers/ImmunityTimer.ts | 47 ++++++++----- src/client/graphics/layers/Leaderboard.ts | 49 ++++++++++--- .../graphics/layers/PlayerInfoOverlay.ts | 50 ++++++++++++-- src/client/graphics/layers/ReplayPanel.ts | 2 +- src/client/graphics/layers/SpawnTimer.ts | 69 +++++++++++-------- src/client/graphics/layers/TeamStats.ts | 4 +- 15 files changed, 239 insertions(+), 97 deletions(-) diff --git a/index.html b/index.html index e9a96fd50..b53683ca3 100644 --- a/index.html +++ b/index.html @@ -249,7 +249,7 @@
@@ -262,7 +262,9 @@ -
+
diff --git a/resources/lang/en.json b/resources/lang/en.json index af1e23d51..5947ad4e2 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -714,6 +714,7 @@ "show_units": "Show Units" }, "events_display": { + "events": "Events", "retreating": "retreating", "alliance_request_status": "{name} {status} your alliance request", "alliance_accepted": "accepted", diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts index 0de490f3f..5f4ef4a37 100644 --- a/src/client/graphics/GameRenderer.ts +++ b/src/client/graphics/GameRenderer.ts @@ -98,6 +98,7 @@ export function createRenderer( console.error("GameLeftSidebar element not found in the DOM"); } gameLeftSidebar.game = game; + gameLeftSidebar.eventBus = eventBus; const teamStats = document.querySelector("team-stats") as TeamStats; if (!teamStats || !(teamStats instanceof TeamStats)) { @@ -246,6 +247,7 @@ export function createRenderer( console.error("spawn timer not found"); } spawnTimer.game = game; + spawnTimer.eventBus = eventBus; spawnTimer.transformHandler = transformHandler; const immunityTimer = document.querySelector( @@ -255,6 +257,7 @@ export function createRenderer( console.error("immunity timer not found"); } immunityTimer.game = game; + immunityTimer.eventBus = eventBus; const inGameHeaderAd = document.querySelector( "in-game-header-ad", diff --git a/src/client/graphics/layers/AttacksDisplay.ts b/src/client/graphics/layers/AttacksDisplay.ts index 51c062706..2bca5e1b5 100644 --- a/src/client/graphics/layers/AttacksDisplay.ts +++ b/src/client/graphics/layers/AttacksDisplay.ts @@ -221,7 +221,7 @@ export class AttacksDisplay extends LitElement implements Layer { return this.incomingAttacks.map( (attack) => html`
${this.renderButton({ content: html`${renderTroops(attack.troops)} - ${( this.game.playerBySmallID(attack.attackerID) as PlayerView )?.name()}`, onClick: () => this.handleRetaliate(attack), className: - "ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 rounded px-1.5 py-1 border border-red-700/50", + "ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 rounded-lg px-1.5 py-1 border border-red-700/50", translate: false, }) : ""} @@ -269,7 +269,7 @@ export class AttacksDisplay extends LitElement implements Layer { return this.outgoingAttacks.map( (attack) => html`
${this.renderButton({ content: html`${renderTroops(attack.troops)} - ${( this.game.playerBySmallID(attack.targetID) as PlayerView )?.name()} html`
${this.renderButton({ content: html` html`
${this.renderButton({ content: html`${this.renderBoatIcon(boat)} ${renderTroops(boat.troops())} - ${this.getBoatTargetName(boat)}`, onClick: () => this.eventBus.emit(new GoToUnitEvent(boat)), @@ -403,14 +403,16 @@ export class AttacksDisplay extends LitElement implements Layer { return this.incomingBoats.map( (boat) => html`
${this.renderButton({ content: html`${this.renderBoatIcon(boat)} ${renderTroops(boat.troops())} - ${boat.owner()?.name()}`, + ${boat.owner()?.name()}`, onClick: () => this.eventBus.emit(new GoToUnitEvent(boat)), className: "text-left text-red-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0", @@ -439,7 +441,7 @@ export class AttacksDisplay extends LitElement implements Layer { return html`
${this.renderOutgoingAttacks()} ${this.renderOutgoingLandAttacks()} ${this.renderBoats()} ${this.renderIncomingAttacks()} diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts index c5f6c4a41..4400cc990 100644 --- a/src/client/graphics/layers/ControlPanel.ts +++ b/src/client/graphics/layers/ControlPanel.ts @@ -261,7 +261,7 @@ export class ControlPanel extends LitElement implements Layer { return html`
e.preventDefault()} > diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts index 31f496c05..5fc48143d 100644 --- a/src/client/graphics/layers/EventsDisplay.ts +++ b/src/client/graphics/layers/EventsDisplay.ts @@ -788,17 +788,19 @@ export class EventsDisplay extends LitElement implements Layer { > ${this.renderButton({ content: html` - Events - ${this.newEvents} + + ${translateText("events_display.events")} + ${this.newEvents > 0 + ? html`${this.newEvents}` + : ""} + `, onClick: this.toggleHidden, className: - "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 rounded-lg bg-gray-800/70 backdrop-blur-sm", + "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 min-[1200px]:rounded-lg sm:rounded-tl-lg bg-gray-800/70 backdrop-blur-xs", })}
` @@ -809,9 +811,9 @@ export class EventsDisplay extends LitElement implements Layer { >
-
+
${this.renderToggleButton( swordIcon, @@ -857,7 +859,7 @@ export class EventsDisplay extends LitElement implements Layer { >
${filteredEvents.map( @@ -896,7 +898,7 @@ export class EventsDisplay extends LitElement implements Layer { ${event.buttons.map( (btn) => html`