Uishrink

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;
 }

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:

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);

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));

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`
           <span class="${relationClass}">${relationName}</span>
         `;
+        relationClassForType = relationClass;
       }
     }
     let playerType = "";
@@ -241,21 +243,26 @@ 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"
         >
           <div
-            class="text-bold text-lg font-bold inline-flex break-all ${isFriendly
+            class="text-bold text-lg font-bold inline-flex items-center break-all ${isFriendly
               ? "text-green-500"
               : "text-white"}"
           >
             ${player.flag()
               ? html`<img
-                  class="h-8 mr-1 aspect-[3/4]"
+                  class="h-8 mr-1 aspect-[3/4] self-center"
                   src=${`/flags/${player.flag()}.svg`}
                 />`
               : ""}
             ${player.name()}
           </div>
-          <div class="text-sm opacity-80">
+          <div class="text-sm opacity-80 relative top-[1px]">
             ${relationHtml}
-            <span class="${isFriendly ? "text-green-500" : ""}"
+            <span
+              class="${relationHtml
+                ? relationClassForType
+                : isFriendly
+                  ? "text-green-500"
+                  : ""}"
               >${playerType}</span
             >
           </div>

src/client/index.html

@@ -115,7 +115,7 @@
         top: 10px;
         left: 10px;
         color: white;
-        z-index: 100;
+        z-index: 10;
       "
     >
       v0.1.10

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 */