From 960dcd0e69a0b80f8ab7de3c455bb51fd8867d1f Mon Sep 17 00:00:00 2001
From: jing <jing@JING5.local>
Date: Mon, 13 Jul 2026 12:32:04 +1000
Subject: [PATCH] phase 6: interaction polish + readability fixes

- fix ships status: registered the HUD row before setStatus (setStatus no-ops
  on an unregistered row, so the vessel count was silently dropped)
- declutter: drop the 6 stacked Fujairah idle labels (InfoBox still IDs them),
  fade ship + event labels at the global overview (translucencyByDistance)
- separate the two co-located event markers so their labels stop colliding
- verified live: 97 sats, 6300+ aircraft w/ quota, 12 vessels, scrub-gating
  (chip flips to SCRUBBED + aircraft hide), Data+Photo basemaps

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 js/layers/events.js |  9 ++++++---
 js/layers/ships.js  | 30 ++++++++++++++++++------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/js/layers/events.js b/js/layers/events.js
index 4e1c31c..902e5ed 100644
--- a/js/layers/events.js
+++ b/js/layers/events.js
@@ -22,8 +22,9 @@ export default function create(ctx) {
     },
     {
       name: 'Recon satellite pass correlation [DEMO]',
-      lon: 51.4, lat: 32.6, offsetHours: -2,
-      blurb: 'Simulated correlation of a recon satellite pass with the site above (approx coords).',
+      // Offset from the strike site so the two markers/labels don't collide.
+      lon: 52.0, lat: 32.95, offsetHours: -2,
+      blurb: 'Simulated correlation of a recon satellite pass with the strike site to the southwest (approx coords).',
     },
     {
       name: 'Tanker incident [DEMO]',
@@ -62,13 +63,15 @@ export default function create(ctx) {
       },
       label: {
         text: m.name,
-        font: '12px sans-serif',
+        font: '11px sans-serif',
         fillColor: Cesium.Color.WHITE,
         outlineColor: Cesium.Color.BLACK,
         outlineWidth: 3,
         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
         pixelOffset: new Cesium.Cartesian2(0, -14),
+        // Declutter at the global overview; sharpen when zoomed into the theater.
+        translucencyByDistance: new Cesium.NearFarScalar(2.0e6, 1.0, 8.0e6, 0.0),
         disableDepthTestDistance: Number.POSITIVE_INFINITY,
       },
       description:
diff --git a/js/layers/ships.js b/js/layers/ships.js
index 07edf29..0a5d022 100644
--- a/js/layers/ships.js
+++ b/js/layers/ships.js
@@ -40,6 +40,9 @@ export default function create(ctx) {
     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
     pixelOffset: new Cesium.Cartesian2(0, -14),
     scale: 0.9,
+    // Fade labels out at the global overview so the dense strait declutters;
+    // they sharpen as you zoom into the theater.
+    translucencyByDistance: new Cesium.NearFarScalar(1.5e6, 1.0, 6.0e6, 0.0),
     disableDepthTestDistance: Number.POSITIVE_INFINITY,
     ...extra,
   });
@@ -73,6 +76,19 @@ export default function create(ctx) {
     });
   }
 
+  // ---- HUD toggle ----
+  // Registered BEFORE the fleet is built so the later ui.setStatus('ships', …)
+  // lands on an existing row (setStatus no-ops if the row isn't registered yet).
+  // The callback controls whichever fleet is on screen: the demo fleet, or the
+  // live-AIS fleet once it takes over (tracked by liveActive) — so it never
+  // resurrects the hidden demo fleet on top of live vessels.
+  let aisDS = null;
+  let liveActive = false;
+  ui.addLayer('ships', 'Ships [DEMO]', true, (on) => {
+    if (liveActive) { if (aisDS) aisDS.show = on; }
+    else { shipsDS.show = on; }
+  });
+
   let vessels = 0;
 
   try {
@@ -151,7 +167,8 @@ export default function create(ctx) {
           scale: 0.85,
           disableDepthTestDistance: Number.POSITIVE_INFINITY,
         },
-        label: labelGraphic({ text: `IDLE ${i + 1} [DEMO]`, scale: 0.75 }),
+        // No label — six identical anchored tankers would just stack. The
+        // vessel is still identified via its InfoBox on click.
         description: describe('Various', 'Tanker at anchor', '0.0 kn',
           'Idle at Fujairah anchorage ("floating parking lot").'),
       });
@@ -164,17 +181,6 @@ export default function create(ctx) {
     ui.setStatus('ships', 'demo fleet error', 'err');
   }
 
-  // ---- HUD toggle ----
-  // Controls whichever fleet is actually on screen: the demo fleet, or the live
-  // AIS fleet once it takes over. Must not resurrect the hidden demo fleet on top
-  // of live vessels, so it follows liveActive rather than always poking shipsDS.
-  let aisDS = null;
-  let liveActive = false;
-  ui.addLayer('ships', 'Ships [DEMO]', true, (on) => {
-    if (liveActive) { if (aisDS) aisDS.show = on; }
-    else { shipsDS.show = on; }
-  });
-
   // ---- Optional live AIS (guarded, default off) ----
   // Only attempts a socket if a key is configured. On the first position report
   // the demo fleet is hidden in favor of live vessels. Never blocks init.