v1.4 - Cosmic Events

assets/js/components.js

@@ -20,6 +20,7 @@ import {
   skyGradientForElev, skyFillForElev, grassFillForElev,
   moonPhaseFraction,
 } from './utils.js';
+import { getLensOverlaySVG } from './events.js';
 
 const html = htm.bind(h);
 
@@ -411,7 +412,7 @@ export function CloudIcon({ category, size = 30, elev = 90, dt = new Date() }) {
 //   • (value + 10) / 60 maps UTCI -10..50 onto the 270° sweep —
 //                       widen the dial range by changing those numbers
 // ═══════════════════════════════════════════════════════════════════
-export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), glob = 0 }) {
+export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), glob = 0, activeEvent = null }) {
   // ── Day/night scene behind the readout ─────────────────────────────
   // The whole back of the lens is a SkyScope-style scene: sky on top,
   // grass on the bottom, sun positioned by elevation (or moon at night
@@ -566,6 +567,11 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
                     fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.7" />
           </>`}
       </g>
+      ${(() => {
+        const overlaySVG = getLensOverlaySVG(activeEvent, cx, cy, lensR);
+        if (!overlaySVG) return null;
+        return html`<g dangerouslySetInnerHTML=${{ __html: overlaySVG }} />`;
+      })()}
       ${stressBands.map((b, i) => html`
         <path key=${i} d=${bandArcPath(b)} fill="none"
               stroke=${b.color} stroke-width="4" stroke-linecap="butt" />`)}