From 7f9c4b4a3a323bf3bbe7e17324f637f3bb0fecd6 Mon Sep 17 00:00:00 2001 From: 1brucben <1benjbruce@gmail.com> Date: Tue, 28 Oct 2025 23:06:41 +0100 Subject: [PATCH 1/5] fix: adjust z-index for gameplay canvas and version display for proper layering --- src/client/Utils.ts | 3 +++ src/client/index.html | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/client/Utils.ts b/src/client/Utils.ts index 361a74ba4..abcc9360b 100644 --- a/src/client/Utils.ts +++ b/src/client/Utils.ts @@ -39,6 +39,9 @@ export function createCanvas(): HTMLCanvasElement { canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.style.touchAction = "none"; + // Ensure the gameplay canvas renders above the site footer (z-20) + // but below in-game HUD overlays (z-50). + canvas.style.zIndex = "30"; return canvas; } diff --git a/src/client/index.html b/src/client/index.html index 4ae731dfe..0b0f98263 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -115,7 +115,7 @@ top: 10px; left: 10px; color: white; - z-index: 100; + z-index: 10; " > v0.1.10 From eacef85075b554a8c467ed02d4a40c3e73cd0f11 Mon Sep 17 00:00:00 2001 From: 1brucben <1benjbruce@gmail.com> Date: Tue, 28 Oct 2025 23:26:14 +0100 Subject: [PATCH 2/5] style: update background colors for BuildMenu and ControlPanel2; brighten text colors for submarine panels --- src/client/graphics/layers/BuildMenu.ts | 3 ++- src/client/graphics/layers/ControlPanel2.ts | 3 ++- src/client/styles/components/controls.css | 8 ++++---- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/client/graphics/layers/BuildMenu.ts b/src/client/graphics/layers/BuildMenu.ts index 696f5ee95..b4494bf2d 100644 --- a/src/client/graphics/layers/BuildMenu.ts +++ b/src/client/graphics/layers/BuildMenu.ts @@ -257,7 +257,8 @@ export class BuildMenu extends LitElement { width: 120px; height: 50px; border: 2px solid #0e1a33; - background: linear-gradient(to bottom, #0b1220, #101b33); + /* Darker idle surface to improve separation */ + background: linear-gradient(to bottom, #070f1f, #0a1529); color: #c9dbff; /* submarine palette light blue */ border-radius: 6px; box-shadow: diff --git a/src/client/graphics/layers/ControlPanel2.ts b/src/client/graphics/layers/ControlPanel2.ts index 9ceb8f167..af181962b 100644 --- a/src/client/graphics/layers/ControlPanel2.ts +++ b/src/client/graphics/layers/ControlPanel2.ts @@ -816,7 +816,8 @@ export class ControlPanel2 extends LitElement implements Layer { width: 100%; /* Full width of the column */ height: 50px; border: 2px solid #2d3748; - background-color: #2d3748; + /* Darker idle surface */ + background-color: #232d40; color: #e2e8f0; border-radius: 6px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); diff --git a/src/client/styles/components/controls.css b/src/client/styles/components/controls.css index 9ae626c00..e706137ba 100644 --- a/src/client/styles/components/controls.css +++ b/src/client/styles/components/controls.css @@ -105,18 +105,18 @@ inset 0 0 10px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); padding: 2px; - color: #dbe7ff; /* soft desaturated light-blue text */ + color: #e9f2ff; /* brighten default text for submarine panels */ font-family: monospace; /* Default downscale for panels without affecting transforms used elsewhere */ zoom: var(--ui-panel-zoom, 0.9); } /* Typography inside submarine panels */ .submarine-panel .military-heading { - color: #e3edff; /* slightly brighter for headings */ + color: #f2f7ff; /* brighter headings */ } .submarine-panel .military-label { - /* tone down saturation for better readability */ - color: #d6dbe6; /* muted light-gray-blue */ + /* tone down saturation but brighten value for readability */ + color: #e4ecff; /* brighter label */ } /* Default slider look in submarine panels */ From e5aa1d67a6835efc2964f846438f58cfc0a25d6a Mon Sep 17 00:00:00 2001 From: 1brucben <1benjbruce@gmail.com> Date: Tue, 28 Oct 2025 23:30:12 +0100 Subject: [PATCH 3/5] fix: adjust z-index for player name rendering to ensure proper layering above gameplay canvas --- src/client/graphics/layers/NameLayer.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts index 1da0c766d..ec1f826e6 100644 --- a/src/client/graphics/layers/NameLayer.ts +++ b/src/client/graphics/layers/NameLayer.ts @@ -114,7 +114,8 @@ export class NameLayer implements Layer { this.container.style.left = "50%"; this.container.style.top = "50%"; this.container.style.pointerEvents = "none"; - this.container.style.zIndex = "2"; + // Ensure player names render above the gameplay canvas (z-30) but below HUD overlays (z-50) + this.container.style.zIndex = "40"; document.body.appendChild(this.container); this.eventBus.on(AlternateViewEvent, (e) => this.onAlternateViewChange(e)); From 9418621a72eeea393ecc7f8fa30d4c3d0fda1384 Mon Sep 17 00:00:00 2001 From: 1brucben <1benjbruce@gmail.com> Date: Tue, 28 Oct 2025 23:32:51 +0100 Subject: [PATCH 4/5] fix: adjust player info overlay layout for better alignment of flag images --- src/client/graphics/layers/PlayerInfoOverlay.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts index 1278dc2c3..f1b8e99e4 100644 --- a/src/client/graphics/layers/PlayerInfoOverlay.ts +++ b/src/client/graphics/layers/PlayerInfoOverlay.ts @@ -241,13 +241,13 @@ export class PlayerInfoOverlay extends LitElement implements Layer { class="flex justify-center items-center gap-2 mb-2 w-full border border-gray-400 rounded p-1" >
${player.flag() ? html`` : ""} From e7e46625d07e4a39882a2a074814f0852b5d6b2e Mon Sep 17 00:00:00 2001 From: 1brucben <1benjbruce@gmail.com> Date: Wed, 29 Oct 2025 00:01:53 +0100 Subject: [PATCH 5/5] fix: enhance player info rendering by adding relation class for better visual distinction --- src/client/graphics/layers/PlayerInfoOverlay.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts index f1b8e99e4..7f9e6f2a6 100644 --- a/src/client/graphics/layers/PlayerInfoOverlay.ts +++ b/src/client/graphics/layers/PlayerInfoOverlay.ts @@ -167,6 +167,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { const myPlayer = this.game.myPlayer(); const isFriendly = myPlayer?.isFriendly(player); let relationHtml: TemplateResult | null = null; + let relationClassForType = ""; const attackingTroops = player .outgoingAttacks() .map((a) => a.troops) @@ -193,6 +194,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { relationHtml = html` ${relationName} `; + relationClassForType = relationClass; } } let playerType = ""; @@ -253,9 +255,14 @@ export class PlayerInfoOverlay extends LitElement implements Layer { : ""} ${player.name()}
-
+
${relationHtml} - ${playerType}