From b045608c89dc542c8c859eb0265903c1b3ea7fd8 Mon Sep 17 00:00:00 2001 From: HulKiora <111693579+hkio120@users.noreply.github.com> Date: Sun, 15 Mar 2026 22:59:34 +0100 Subject: [PATCH 01/20] ui: reduce HUD transparency for control, attacks, events, and hover panel (#3429) ## Description: Reduce HUD transparency for better readability by making the Control Panel, Attacks panel, Events/Chat panel, and Hover panel more opaque while keeping a subtle blur effect. ## Please complete the following: - [ x] I have added screenshots for all UI updates - [ ] I process any text displayed to the user through translateText() and I've added it to the en.json file - [ ] 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: HulKiora Before : image After : image --- index.html | 2 +- src/client/graphics/layers/AttacksDisplay.ts | 10 +++++----- src/client/graphics/layers/EventsDisplay.ts | 6 +++--- src/client/graphics/layers/GameLeftSidebar.ts | 2 +- src/client/graphics/layers/GameRightSidebar.ts | 2 +- src/client/graphics/layers/PlayerInfoOverlay.ts | 2 +- src/client/graphics/layers/ReplayPanel.ts | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index f6a07f4ed..ab3609a02 100644 --- a/index.html +++ b/index.html @@ -284,7 +284,7 @@ class="w-full pointer-events-auto order-1 sm:order-none" >
diff --git a/src/client/graphics/layers/AttacksDisplay.ts b/src/client/graphics/layers/AttacksDisplay.ts index b76c435b7..597985d37 100644 --- a/src/client/graphics/layers/AttacksDisplay.ts +++ b/src/client/graphics/layers/AttacksDisplay.ts @@ -222,7 +222,7 @@ export class AttacksDisplay extends LitElement implements Layer { return this.incomingAttacks.map( (attack) => html`
${this.renderButton({ content: html` html`
${this.renderButton({ content: html` html`
${this.renderButton({ content: html` html`
${this.renderButton({ content: html`${this.renderBoatIcon(boat)} @@ -401,7 +401,7 @@ export class AttacksDisplay extends LitElement implements Layer { return this.incomingBoats.map( (boat) => html`
${this.renderButton({ content: html`${this.renderBoatIcon(boat)} diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts index a45e57e84..76a9b24c1 100644 --- a/src/client/graphics/layers/EventsDisplay.ts +++ b/src/client/graphics/layers/EventsDisplay.ts @@ -809,7 +809,7 @@ export class EventsDisplay extends LitElement implements Layer { `, onClick: this.toggleHidden, className: - "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", + "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/92 backdrop-blur-sm", })}
` @@ -820,7 +820,7 @@ export class EventsDisplay extends LitElement implements Layer { >
@@ -864,7 +864,7 @@ export class EventsDisplay extends LitElement implements Layer {
e.preventDefault()} diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts index d936f921e..fe9ed185a 100644 --- a/src/client/graphics/layers/PlayerInfoOverlay.ts +++ b/src/client/graphics/layers/PlayerInfoOverlay.ts @@ -524,7 +524,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { @contextmenu=${(e: MouseEvent) => e.preventDefault()} >
${this.player !== null ? this.renderPlayerInfo(this.player) : ""} ${this.unit !== null ? this.renderUnitInfo(this.unit) : ""} diff --git a/src/client/graphics/layers/ReplayPanel.ts b/src/client/graphics/layers/ReplayPanel.ts index fbef9051d..ff289fd19 100644 --- a/src/client/graphics/layers/ReplayPanel.ts +++ b/src/client/graphics/layers/ReplayPanel.ts @@ -68,7 +68,7 @@ export class ReplayPanel extends LitElement implements Layer { return html`
e.preventDefault()} >