fixed radar view

LaserPerception/LaserPerception.css

@@ -750,7 +750,7 @@ input[type="number"]:focus {
 
 .engage-grid {
     display: grid;
-    grid-template-columns: 4.5fr 0.5fr;
+    grid-template-columns: 2.5fr 1.5fr;
     gap: 12px;
     min-height: 0;
     transition: grid-template-columns 0.3s ease;
@@ -769,11 +769,19 @@ input[type="number"]:focus {
     flex-direction: column;
     gap: 12px;
     min-height: 0;
-    max-width: 320px;
 }
 
 .radar {
-    height: 180px;
+    height: 540px;
+    display: flex;
+    flex-direction: column;
+}
+
+.radar canvas {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: block;
 }
 
 .strip {

LaserPerception/LaserPerception.html

@@ -400,7 +400,7 @@
                 </div>
               </h3>
 
-              <div class="viewbox" style="min-height: 650px;">
+              <div class="viewbox" style="min-height: 420px;">
                 <video id="videoEngage" playsinline muted></video>
                 <canvas id="engageOverlay" class="overlay"></canvas>
                 <div class="watermark">LOCK · DIST · DWELL · AIMPOINT · FIRE/ASSESS</div>

LaserPerception/LaserPerception.js

@@ -19,6 +19,7 @@
     const clamp = (x, a, b) => Math.min(b, Math.max(a, x));
     const lerp = (a, b, t) => a + (b - a) * t;
     const now = () => performance.now();
+    const ENABLE_KILL = false;
 
     const state = {
         videoUrl: null,
@@ -177,6 +178,9 @@
     const chipFeed = $("#chipFeed");
 
     const btnEngage = $("#btnEngage");
+
+    // Debug hook for console inspection
+    window.__LP_STATE__ = state;
     const btnPause = $("#btnPause");
     const btnReset = $("#btnReset");
     const btnToggleSidebar = $("#btnToggleSidebar");
@@ -2311,24 +2315,7 @@
             const ay = b.y + b.h * d.aim.rely;
             drawAimpoint(ctx, ax, ay, isSel);
 
-            // label
-            const range = Math.round(d.baseRange_m || 0);
-            const dwell = (d.baseDwell_s != null) ? d.baseDwell_s.toFixed(1) : "—";
-            const pk = (d.pkill != null) ? Math.round(d.pkill * 100) : "—";
-
-            ctx.font = "bold 14px " + getComputedStyle(document.body).fontFamily;
-            const tag = `${d.id} · ${d.label} · R=${range}m · DWELL=${dwell}s · Pk=${pk}%`;
-            const tw = ctx.measureText(tag).width;
-            const tx = clamp(b.x, 6, w - tw - 12);
-            const ty = clamp(b.y - 12, 18, h - 12);
-
-            ctx.fillStyle = "rgba(0,0,0,.50)";
-            ctx.strokeStyle = "rgba(255,255,255,.14)";
-            ctx.lineWidth = 1;
-            roundRect(ctx, tx - 6, ty - 14, tw + 12, 18, 8, true, true);
-
-            ctx.fillStyle = "rgba(255,255,255,.86)";
-            ctx.fillText(tag, tx, ty);
+            // no text overlay on first-frame view
         });
 
         // click-to-select on canvas (manual aimpoint override can be added later)
@@ -2801,11 +2788,16 @@
         } else if (tr.state === "ASSESS") {
             tr.assessT += dtSec;
             if (tr.assessT >= assessS) {
-                tr.killed = true;
-                tr.state = "KILL";
-                state.tracker.beamOn = false; // stop beam after kill to make it dramatic
-                chipBeam.textContent = "BEAM:OFF";
-                log(`Target ${tr.id} assessed neutralized.`, "g");
+                if (ENABLE_KILL) {
+                    tr.killed = true;
+                    tr.state = "KILL";
+                    state.tracker.beamOn = false; // stop beam after kill to make it dramatic
+                    chipBeam.textContent = "BEAM:OFF";
+                    log(`Target ${tr.id} assessed neutralized.`, "g");
+                } else {
+                    tr.state = "ASSESS";
+                    tr.assessT = 0;
+                }
             }
         }
 
@@ -2908,10 +2900,7 @@
             if (!killed) {
                 drawAimpoint(ctx, ax, ay, isSel);
             } else {
-                // killed marker
-                ctx.fillStyle = "rgba(34,197,94,.95)";
-                ctx.font = "14px " + getComputedStyle(document.body).fontFamily;
-                ctx.fillText("NEUTRALIZED", b.x + 10, b.y + 22);
+                // killed marker (no text overlay)
             }
 
             // dwell ring
@@ -2924,23 +2913,7 @@
                 ctx.stroke();
             }
 
-            // label with distance + dwell + margin
-            const rangeTag = Number.isFinite(displayRange.range)
-                ? `${Math.round(displayRange.range)}m (${displayRange.source})`
-                : "—";
-            const tag = `${tr.id} · R=${rangeTag} · DWELL=${reqD.toFixed(1)}s · ΔP=${margin >= 0 ? "+" : ""}${margin.toFixed(1)}kW`;
-            ctx.font = "bold 14px " + getComputedStyle(document.body).fontFamily;
-            const tw = ctx.measureText(tag).width;
-            const tx = clamp(b.x, 6, w - tw - 12);
-            const ty = clamp(b.y - 12, 18, h - 12);
-
-            ctx.fillStyle = "rgba(0,0,0,.55)";
-            ctx.strokeStyle = "rgba(255,255,255,.14)";
-            ctx.lineWidth = 1;
-            roundRect(ctx, tx - 6, ty - 14, tw + 12, 18, 8, true, true);
-
-            ctx.fillStyle = "rgba(255,255,255,.86)";
-            ctx.fillText(tag, tx, ty);
+            // no text overlay on engage view
 
             // engagement strip indicator near bbox bottom
             const st = tr.state || "TRACK";
@@ -2950,9 +2923,7 @@
             ctx.fillRect(b.x, b.y + b.h + 4, clamp(b.w * 0.55, 70, b.w), 5);
             ctx.globalAlpha = 1;
 
-            ctx.fillStyle = "rgba(255,255,255,.82)";
-            ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
-            ctx.fillText(st, b.x, b.y + b.h + 18);
+            // no state text overlay on engage view
 
             // beam line to selected aimpoint
             if (state.tracker.beamOn && isSel && !killed) {
@@ -3026,6 +2997,14 @@
     // ========= Radar rendering =========
     function renderRadar() {
         const ctx = radarCanvas.getContext("2d");
+        const rect = radarCanvas.getBoundingClientRect();
+        const dpr = devicePixelRatio || 1;
+        const targetW = Math.max(1, Math.floor(rect.width * dpr));
+        const targetH = Math.max(1, Math.floor(rect.height * dpr));
+        if (radarCanvas.width !== targetW || radarCanvas.height !== targetH) {
+            radarCanvas.width = targetW;
+            radarCanvas.height = targetH;
+        }
         const w = radarCanvas.width, h = radarCanvas.height;
         ctx.clearRect(0, 0, w, h);
 
@@ -3033,7 +3012,7 @@
         ctx.fillStyle = "rgba(0,0,0,.35)";
         ctx.fillRect(0, 0, w, h);
 
-        const cx = w * 0.5, cy = h * 0.55;
+        const cx = w * 0.5, cy = h * 0.5;
         const R = Math.min(w, h) * 0.42;
 
         // rings
@@ -3065,7 +3044,7 @@
         ctx.fill();
 
         // tracks as blips
-        const tracks = state.tracker.tracks.filter(t => !t.killed);
+        const tracks = state.tracker.tracks;
         tracks.forEach(tr => {
             const areaRange = rangeFromArea(tr);
             const displayRange = getTrackDisplayRange(tr);
@@ -3087,16 +3066,17 @@
             const py = cy + Math.sin(bearing) * rad;
 
             // color by engagement state
-            const col = tr.state === "FIRE" ? "rgba(239,68,68,.9)" :
-                (tr.state === "ASSESS" ? "rgba(245,158,11,.9)" :
-                    "rgba(124,58,237,.9)");
+            const col = tr.killed ? "rgba(148,163,184,.65)" :
+                (tr.state === "FIRE" ? "rgba(239,68,68,.9)" :
+                    (tr.state === "ASSESS" ? "rgba(245,158,11,.9)" :
+                        "rgba(124,58,237,.9)"));
 
             ctx.fillStyle = col;
             ctx.beginPath();
             ctx.arc(px, py, 5, 0, Math.PI * 2);
             ctx.fill();
 
-            ctx.fillStyle = "rgba(255,255,255,.75)";
+            ctx.fillStyle = tr.killed ? "rgba(148,163,184,.75)" : "rgba(255,255,255,.75)";
             ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
             const rangeLabel = Number.isFinite(displayRange.range)
                 ? `${Math.round(displayRange.range)}m`