@jjlmoya/utils-astronomy 1.24.0 → 1.26.0

package/src/tool/deepSpaceScope/component.astro

@@ -1,382 +1,382 @@
----
-import type { DeepSpaceScopeUI } from "./index";
-import type { KnownLocale } from "../../types";
-import { Icon } from "astro-icon/components";
-
-interface Props {
-  ui: DeepSpaceScopeUI;
-  locale?: KnownLocale;
-}
-
-const { ui } = Astro.props;
----
-
-<div class="scope-container" id="scope-container" aria-label={ui.toolTitle}>
-  <div id="world-layer" class="world-layer">
-    <canvas id="sky-canvas" class="sky-canvas"></canvas>
-    <div id="objects-layer" class="objects-layer"></div>
-  </div>
-
-  <div class="scope-vignette"></div>
-  <div id="pollution-layer" class="scope-pollution-layer"></div>
-
-  <div class="scope-drag-hint">
-    <span class="hint-mobile">{ui.dragHintMobile}</span>
-    <span class="hint-desktop">{ui.dragHint}</span>
-  </div>
-
-  <div id="info-modal" class="scope-modal modal-hidden" aria-hidden="true">
-    <div class="scope-modal-content" id="modal-content">
-      <div class="modal-header">
-        <div class="modal-header-info">
-          <div id="modal-icon" class="modal-icon"></div>
-          <div>
-            <h3 id="modal-title" class="modal-title">Object Name</h3>
-            <p id="modal-type" class="modal-type">Type</p>
-          </div>
-        </div>
-        <button id="close-modal" class="modal-close" aria-label={ui.closeLabel}>
-          <Icon name="mdi:close" />
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="modal-stat">
-          <span class="modal-stat-label">{ui.magnitudeLabel}</span>
-          <span id="modal-mag" class="modal-stat-value">1.5</span>
-        </div>
-        <div class="modal-stat">
-          <span class="modal-stat-label">{ui.coordinatesLabel}</span>
-          <div class="modal-coords">
-            <div id="modal-az" class="modal-coord">Az: 120°</div>
-            <div id="modal-alt" class="modal-coord modal-coord-secondary">
-              Alt: 45°
-            </div>
-          </div>
-        </div>
-        <p id="modal-desc" class="modal-desc">Description...</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="scope-controls-wrapper">
-    <div class="scope-controls">
-      <div class="scope-control-grid">
-        <div class="scope-control-group">
-          <div class="scope-control-header">
-            <label for="aperture" class="scope-control-label scope-label-cyan">
-              <Icon name="mdi:telescope" />
-              {ui.apertureLabel}
-            </label>
-            <span id="aperture-display" class="scope-control-value">200mm</span>
-          </div>
-          <input
-            type="range"
-            id="aperture"
-            min="0"
-            max="100"
-            step="1"
-            value="50"
-            class="scope-range scope-range-cyan"
-            aria-label={ui.apertureLabel}
-          />
-        </div>
-
-        <div class="scope-limit-display">
-          <div class="scope-limit-label">{ui.limitMagLabel}</div>
-          <div id="limit-mag" class="scope-limit-value">12.5</div>
-          <div class="scope-azimuth" id="azimuth-display">
-            {ui.azimuthLabel}: 0°
-          </div>
-        </div>
-
-        <div class="scope-control-group">
-          <div class="scope-control-header">
-            <label for="bortle" class="scope-control-label scope-label-amber">
-              <Icon name="mdi:weather-night" />
-              {ui.bortleLabel}
-            </label>
-            <span id="bortle-display" class="scope-control-value">Class 5</span>
-          </div>
-          <input
-            type="range"
-            id="bortle"
-            min="1"
-            max="9"
-            step="1"
-            value="5"
-            class="scope-range scope-range-amber"
-            aria-label={ui.bortleLabel}
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="scope-legend">
-      <span class="legend-item legend-planet">
-        <Icon name="mdi:circle" />
-        {ui.planetLabel}
-      </span>
-      <span class="legend-item legend-star">
-        <Icon name="mdi:star-four-points" />
-        {ui.starLabel}
-      </span>
-      <span class="legend-item legend-deep">
-        <Icon name="mdi:creation" />
-        {ui.deepSpaceLabel}
-      </span>
-    </div>
-  </div>
-</div>
-
-<script define:vars={{ ui }} is:inline>
-  window.__deepSpaceUI = ui;
-</script>
-
-<script>
-  import type { DeepSpaceObject } from "./index";
-  import {
-    calculateLimitingMagnitude,
-    apertureSliderToMm,
-  } from "./logic";
-
-  const container = document.getElementById("scope-container");
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const uiData = (window as any).__deepSpaceUI || {};
-  const canvas = document.getElementById("sky-canvas") as HTMLCanvasElement;
-  const getCanvasWidth = () => canvas ? canvas.offsetWidth : 0;
-  const getCanvasHeight = () => canvas ? canvas.offsetHeight : 0;
-  const getContainerWidth = () => container ? container.offsetWidth : 0;
-  const ctx = canvas?.getContext("2d");
-  const objectsLayer = document.getElementById("objects-layer");
-  const apertureInput = document.getElementById("aperture") as HTMLInputElement;
-  const bortleInput = document.getElementById("bortle") as HTMLInputElement;
-  const pollutionLayer = document.getElementById("pollution-layer");
-  const limitMagDisplay = document.getElementById("limit-mag");
-  const azimuthDisplay = document.getElementById("azimuth-display");
-
-  let panAngle = 0;
-  let isDragging = false;
-  let startX = 0;
-  let startPan = 0;
-  let dragDistance = 0;
-
-  const FOV = 100;
-
-  let stars: { az: number; alt: number; mag: number }[] = [];
-  function initStars() {
-    stars = [];
-    for (let i = 0; i < 3000; i++) {
-      stars.push({
-        az: Math.random() * 360,
-        alt: Math.random() * 100,
-        mag: Math.pow(Math.random(), 0.8) * 15,
-      });
-    }
-  }
-
-  function initObjectsDOM() {
-    if (!objectsLayer) return;
-    objectsLayer.innerHTML = "";
-    const objects = uiData.deepSpaceObjects || [];
-    objects.forEach((obj: DeepSpaceObject, idx: number) => {
-      const el = document.createElement("div");
-      el.id = `obj-${idx}`;
-      el.className = "scope-object";
-      el.dataset.mag = obj.mag.toString();
-      el.innerHTML = `
-        <div class="scope-obj-icon" style="color:${obj.color}">
-          <span class="iconify" data-icon="${obj.icon}"></span>
-        </div>
-        <div class="scope-obj-label">
-          <span class="scope-obj-name">${obj.name}</span>
-          <span class="scope-obj-mag">Mag ${obj.mag}</span>
-        </div>
-      `;
-      el.addEventListener("click", (e) => {
-        e.stopPropagation();
-        if (dragDistance < 5) openModal(obj);
-      });
-      objectsLayer.appendChild(el);
-    });
-  }
-
-  const modal = document.getElementById("info-modal");
-  const modalContent = document.getElementById("modal-content");
-  const closeModalBtn = document.getElementById("close-modal");
-
-  function openModal(obj: DeepSpaceObject) {
-    if (!modal || !modalContent) return;
-    document.getElementById("modal-title")!.innerText = obj.name;
-    document.getElementById("modal-type")!.innerText = obj.type;
-    document.getElementById("modal-mag")!.innerText = obj.mag.toString();
-    document.getElementById("modal-az")!.innerText = `${uiData.azimuthLabel}: ${obj.az}°`;
-    document.getElementById("modal-alt")!.innerText = `${uiData.altitudeLabel}: ${obj.alt}°`;
-    const iconEl = document.getElementById("modal-icon");
-    if (iconEl) {
-      iconEl.innerHTML = `<span class="iconify" data-icon="${obj.icon}" style="font-size:2.5rem;color:${obj.color}"></span>`;
-    }
-    const descEl = document.getElementById("modal-desc");
-    if (descEl) {
-      descEl.innerText =
-        obj.desc ||
-        `${uiData.defaultObjDesc} ${obj.mag}.`;
-    }
-    modal.classList.remove("modal-hidden");
-    modalContent.classList.remove("modal-scale-out");
-    modalContent.classList.add("modal-scale-in");
-  }
-
-  function closeModal() {
-    if (!modal || !modalContent) return;
-    modal.classList.add("modal-hidden");
-    modalContent.classList.remove("modal-scale-in");
-    modalContent.classList.add("modal-scale-out");
-  }
-
-  closeModalBtn?.addEventListener("click", closeModal);
-  modal?.addEventListener("click", (e) => {
-    if (e.target === modal) closeModal();
-  });
-
-  function getShortestDelta(target: number, current: number) {
-    const delta = target - current;
-    return ((delta + 540) % 360) - 180;
-  }
-
-  function updateDisplays(limit: number, apertureMM: number, bortle: number) {
-    document.getElementById("aperture-display")!.innerText = `${apertureMM}mm`;
-    document.getElementById("bortle-display")!.innerText = `${uiData.bortleClassPrefix} ${bortle}`;
-    if (limitMagDisplay) limitMagDisplay.innerText = limit.toFixed(1);
-    if (azimuthDisplay)
-      azimuthDisplay.innerText = `${uiData.azimuthLabel}: ${Math.round(panAngle)}°`;
-    if (pollutionLayer) {
-      const opacity = (bortle - 1) * 0.08;
-      pollutionLayer.style.backgroundColor = `rgba(217, 119, 6, ${opacity})`;
-    }
-  }
-
-  function renderStars(w: number, h: number, limit: number) {
-    if (!ctx) return;
-    const ppd = w / FOV;
-    stars.forEach((s) => {
-      if (s.mag > limit) return;
-      const delta = getShortestDelta(s.az, panAngle);
-      if (Math.abs(delta) >= FOV / 2 + 10) return;
-      const x = w / 2 + delta * ppd;
-      const y = h - (s.alt / 100) * h;
-      const margin = limit - s.mag;
-      const alpha = Math.min(1, margin * 0.4);
-      const size = Math.max(0.6, 3 - s.mag / 4);
-      ctx.fillStyle = `rgba(255,255,255, ${alpha})`;
-      ctx.beginPath();
-      ctx.arc(x, y, size, 0, Math.PI * 2);
-      ctx.fill();
-    });
-  }
-
-  function updateObjectElement(
-    el: HTMLElement,
-    obj: DeepSpaceObject,
-    limit: number,
-  ) {
-    const delta = getShortestDelta(obj.az, panAngle);
-    if (Math.abs(delta) >= FOV / 2 + 20) {
-      el.style.display = "none";
-      return;
-    }
-    el.style.display = "flex";
-    el.style.left = `${50 + (delta / (FOV / 2)) * 50}%`;
-    el.style.top = `${100 - obj.alt}%`;
-    const label = el.querySelector(".scope-obj-label") as HTMLElement | null;
-    label?.style.setProperty("opacity", limit - obj.mag > 2.0 ? "1" : "0");
-  }
-
-  function renderObjects(limit: number) {
-    const objects = uiData.deepSpaceObjects || [];
-    objects.forEach((obj: DeepSpaceObject, idx: number) => {
-      const el = document.getElementById(`obj-${idx}`);
-      if (!el) return;
-      if (obj.mag > limit) {
-        el.style.display = "none";
-        return;
-      }
-      updateObjectElement(el, obj, limit);
-    });
-  }
-
-  function render() {
-    if (!ctx || !canvas) return;
-    const w = (canvas.width = getCanvasWidth());
-    const h = (canvas.height = getCanvasHeight());
-    ctx.clearRect(0, 0, w, h);
-    const sliderVal = parseInt(apertureInput.value);
-    const bortle = parseInt(bortleInput.value);
-    const limit = calculateLimitingMagnitude(sliderVal, bortle);
-    const apertureMM = apertureSliderToMm(sliderVal);
-    updateDisplays(limit, apertureMM, bortle);
-    renderStars(w, h, limit);
-    renderObjects(limit);
-  }
-
-  container?.addEventListener("mousedown", (e) => {
-    const target = e.target as HTMLElement;
-    if (target.tagName === "INPUT" || target.tagName === "BUTTON" || target.closest(".scope-controls-wrapper")) return;
-    isDragging = true;
-    startX = e.clientX;
-    startPan = panAngle;
-    dragDistance = 0;
-    container.style.cursor = "grabbing";
-  });
-
-  window.addEventListener("mousemove", (e) => {
-    if (!isDragging || !container) return;
-    const dx = e.clientX - startX;
-    dragDistance += Math.abs(e.movementX);
-    const degreesPerPixel = FOV / getContainerWidth();
-    let newPan = startPan - dx * degreesPerPixel;
-    if (newPan < 0) newPan += 360;
-    if (newPan >= 360) newPan -= 360;
-    panAngle = newPan;
-    requestAnimationFrame(render);
-  });
-
-  window.addEventListener("mouseup", () => {
-    isDragging = false;
-    if (container) container.style.cursor = "grab";
-  });
-
-  container?.addEventListener("touchstart", (e) => {
-    const target = e.target as HTMLElement;
-    if (target.tagName === "INPUT" || target.closest(".scope-controls-wrapper")) return;
-    isDragging = true;
-    startX = e.touches[0]!.clientX;
-    startPan = panAngle;
-    dragDistance = 0;
-  });
-
-  window.addEventListener("touchmove", (e) => {
-    if (!isDragging || !container) return;
-    const dx = e.touches[0].clientX - startX;
-    dragDistance += Math.abs(dx);
-    const degreesPerPixel = FOV / getContainerWidth();
-    let newPan = startPan - dx * degreesPerPixel;
-    if (newPan < 0) newPan += 360;
-    if (newPan >= 360) newPan -= 360;
-    panAngle = newPan;
-    requestAnimationFrame(render);
-  });
-
-  window.addEventListener("touchend", () => (isDragging = false));
-
-  const iconifyScript = document.createElement("script");
-  iconifyScript.src = "https://code.iconify.design/3/3.1.0/iconify.min.js";
-  document.head.appendChild(iconifyScript);
-
-  initStars();
-  initObjectsDOM();
-  apertureInput.addEventListener("input", () => requestAnimationFrame(render));
-  bortleInput.addEventListener("input", () => requestAnimationFrame(render));
-  window.addEventListener("resize", () => requestAnimationFrame(render));
-  setTimeout(render, 50);
-</script>
-
+---
+import type { DeepSpaceScopeUI } from "./index";
+import type { KnownLocale } from "../../types";
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  ui: DeepSpaceScopeUI;
+  locale?: KnownLocale;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="scope-container" id="scope-container" aria-label={ui.toolTitle}>
+  <div id="world-layer" class="world-layer">
+    <canvas id="sky-canvas" class="sky-canvas"></canvas>
+    <div id="objects-layer" class="objects-layer"></div>
+  </div>
+
+  <div class="scope-vignette"></div>
+  <div id="pollution-layer" class="scope-pollution-layer"></div>
+
+  <div class="scope-drag-hint">
+    <span class="hint-mobile">{ui.dragHintMobile}</span>
+    <span class="hint-desktop">{ui.dragHint}</span>
+  </div>
+
+  <div id="info-modal" class="scope-modal modal-hidden" aria-hidden="true">
+    <div class="scope-modal-content" id="modal-content">
+      <div class="modal-header">
+        <div class="modal-header-info">
+          <div id="modal-icon" class="modal-icon"></div>
+          <div>
+            <h3 id="modal-title" class="modal-title">Object Name</h3>
+            <p id="modal-type" class="modal-type">Type</p>
+          </div>
+        </div>
+        <button id="close-modal" class="modal-close" aria-label={ui.closeLabel}>
+          <Icon name="mdi:close" />
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-stat">
+          <span class="modal-stat-label">{ui.magnitudeLabel}</span>
+          <span id="modal-mag" class="modal-stat-value">1.5</span>
+        </div>
+        <div class="modal-stat">
+          <span class="modal-stat-label">{ui.coordinatesLabel}</span>
+          <div class="modal-coords">
+            <div id="modal-az" class="modal-coord">Az: 120°</div>
+            <div id="modal-alt" class="modal-coord modal-coord-secondary">
+              Alt: 45°
+            </div>
+          </div>
+        </div>
+        <p id="modal-desc" class="modal-desc">Description...</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="scope-controls-wrapper">
+    <div class="scope-controls">
+      <div class="scope-control-grid">
+        <div class="scope-control-group">
+          <div class="scope-control-header">
+            <label for="aperture" class="scope-control-label scope-label-cyan">
+              <Icon name="mdi:telescope" />
+              {ui.apertureLabel}
+            </label>
+            <span id="aperture-display" class="scope-control-value">200mm</span>
+          </div>
+          <input
+            type="range"
+            id="aperture"
+            min="0"
+            max="100"
+            step="1"
+            value="50"
+            class="scope-range scope-range-cyan"
+            aria-label={ui.apertureLabel}
+          />
+        </div>
+
+        <div class="scope-limit-display">
+          <div class="scope-limit-label">{ui.limitMagLabel}</div>
+          <div id="limit-mag" class="scope-limit-value">12.5</div>
+          <div class="scope-azimuth" id="azimuth-display">
+            {ui.azimuthLabel}: 0°
+          </div>
+        </div>
+
+        <div class="scope-control-group">
+          <div class="scope-control-header">
+            <label for="bortle" class="scope-control-label scope-label-amber">
+              <Icon name="mdi:weather-night" />
+              {ui.bortleLabel}
+            </label>
+            <span id="bortle-display" class="scope-control-value">Class 5</span>
+          </div>
+          <input
+            type="range"
+            id="bortle"
+            min="1"
+            max="9"
+            step="1"
+            value="5"
+            class="scope-range scope-range-amber"
+            aria-label={ui.bortleLabel}
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="scope-legend">
+      <span class="legend-item legend-planet">
+        <Icon name="mdi:circle" />
+        {ui.planetLabel}
+      </span>
+      <span class="legend-item legend-star">
+        <Icon name="mdi:star-four-points" />
+        {ui.starLabel}
+      </span>
+      <span class="legend-item legend-deep">
+        <Icon name="mdi:creation" />
+        {ui.deepSpaceLabel}
+      </span>
+    </div>
+  </div>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__deepSpaceUI = ui;
+</script>
+
+<script>
+  import type { DeepSpaceObject } from "./index";
+  import {
+    calculateLimitingMagnitude,
+    apertureSliderToMm,
+  } from "./logic";
+
+  const container = document.getElementById("scope-container");
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const uiData = (window as any).__deepSpaceUI || {};
+  const canvas = document.getElementById("sky-canvas") as HTMLCanvasElement;
+  const getCanvasWidth = () => canvas ? canvas.offsetWidth : 0;
+  const getCanvasHeight = () => canvas ? canvas.offsetHeight : 0;
+  const getContainerWidth = () => container ? container.offsetWidth : 0;
+  const ctx = canvas?.getContext("2d");
+  const objectsLayer = document.getElementById("objects-layer");
+  const apertureInput = document.getElementById("aperture") as HTMLInputElement;
+  const bortleInput = document.getElementById("bortle") as HTMLInputElement;
+  const pollutionLayer = document.getElementById("pollution-layer");
+  const limitMagDisplay = document.getElementById("limit-mag");
+  const azimuthDisplay = document.getElementById("azimuth-display");
+
+  let panAngle = 0;
+  let isDragging = false;
+  let startX = 0;
+  let startPan = 0;
+  let dragDistance = 0;
+
+  const FOV = 100;
+
+  let stars: { az: number; alt: number; mag: number }[] = [];
+  function initStars() {
+    stars = [];
+    for (let i = 0; i < 3000; i++) {
+      stars.push({
+        az: Math.random() * 360,
+        alt: Math.random() * 100,
+        mag: Math.pow(Math.random(), 0.8) * 15,
+      });
+    }
+  }
+
+  function initObjectsDOM() {
+    if (!objectsLayer) return;
+    objectsLayer.innerHTML = "";
+    const objects = uiData.deepSpaceObjects || [];
+    objects.forEach((obj: DeepSpaceObject, idx: number) => {
+      const el = document.createElement("div");
+      el.id = `obj-${idx}`;
+      el.className = "scope-object";
+      el.dataset.mag = obj.mag.toString();
+      el.innerHTML = `
+        <div class="scope-obj-icon" style="color:${obj.color}">
+          <span class="iconify" data-icon="${obj.icon}"></span>
+        </div>
+        <div class="scope-obj-label">
+          <span class="scope-obj-name">${obj.name}</span>
+          <span class="scope-obj-mag">Mag ${obj.mag}</span>
+        </div>
+      `;
+      el.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (dragDistance < 5) openModal(obj);
+      });
+      objectsLayer.appendChild(el);
+    });
+  }
+
+  const modal = document.getElementById("info-modal");
+  const modalContent = document.getElementById("modal-content");
+  const closeModalBtn = document.getElementById("close-modal");
+
+  function openModal(obj: DeepSpaceObject) {
+    if (!modal || !modalContent) return;
+    document.getElementById("modal-title")!.innerText = obj.name;
+    document.getElementById("modal-type")!.innerText = obj.type;
+    document.getElementById("modal-mag")!.innerText = obj.mag.toString();
+    document.getElementById("modal-az")!.innerText = `${uiData.azimuthLabel}: ${obj.az}°`;
+    document.getElementById("modal-alt")!.innerText = `${uiData.altitudeLabel}: ${obj.alt}°`;
+    const iconEl = document.getElementById("modal-icon");
+    if (iconEl) {
+      iconEl.innerHTML = `<span class="iconify" data-icon="${obj.icon}" style="font-size:2.5rem;color:${obj.color}"></span>`;
+    }
+    const descEl = document.getElementById("modal-desc");
+    if (descEl) {
+      descEl.innerText =
+        obj.desc ||
+        `${uiData.defaultObjDesc} ${obj.mag}.`;
+    }
+    modal.classList.remove("modal-hidden");
+    modalContent.classList.remove("modal-scale-out");
+    modalContent.classList.add("modal-scale-in");
+  }
+
+  function closeModal() {
+    if (!modal || !modalContent) return;
+    modal.classList.add("modal-hidden");
+    modalContent.classList.remove("modal-scale-in");
+    modalContent.classList.add("modal-scale-out");
+  }
+
+  closeModalBtn?.addEventListener("click", closeModal);
+  modal?.addEventListener("click", (e) => {
+    if (e.target === modal) closeModal();
+  });
+
+  function getShortestDelta(target: number, current: number) {
+    const delta = target - current;
+    return ((delta + 540) % 360) - 180;
+  }
+
+  function updateDisplays(limit: number, apertureMM: number, bortle: number) {
+    document.getElementById("aperture-display")!.innerText = `${apertureMM}mm`;
+    document.getElementById("bortle-display")!.innerText = `${uiData.bortleClassPrefix} ${bortle}`;
+    if (limitMagDisplay) limitMagDisplay.innerText = limit.toFixed(1);
+    if (azimuthDisplay)
+      azimuthDisplay.innerText = `${uiData.azimuthLabel}: ${Math.round(panAngle)}°`;
+    if (pollutionLayer) {
+      const opacity = (bortle - 1) * 0.08;
+      pollutionLayer.style.backgroundColor = `rgba(217, 119, 6, ${opacity})`;
+    }
+  }
+
+  function renderStars(w: number, h: number, limit: number) {
+    if (!ctx) return;
+    const ppd = w / FOV;
+    stars.forEach((s) => {
+      if (s.mag > limit) return;
+      const delta = getShortestDelta(s.az, panAngle);
+      if (Math.abs(delta) >= FOV / 2 + 10) return;
+      const x = w / 2 + delta * ppd;
+      const y = h - (s.alt / 100) * h;
+      const margin = limit - s.mag;
+      const alpha = Math.min(1, margin * 0.4);
+      const size = Math.max(0.6, 3 - s.mag / 4);
+      ctx.fillStyle = `rgba(255,255,255, ${alpha})`;
+      ctx.beginPath();
+      ctx.arc(x, y, size, 0, Math.PI * 2);
+      ctx.fill();
+    });
+  }
+
+  function updateObjectElement(
+    el: HTMLElement,
+    obj: DeepSpaceObject,
+    limit: number,
+  ) {
+    const delta = getShortestDelta(obj.az, panAngle);
+    if (Math.abs(delta) >= FOV / 2 + 20) {
+      el.style.display = "none";
+      return;
+    }
+    el.style.display = "flex";
+    el.style.left = `${50 + (delta / (FOV / 2)) * 50}%`;
+    el.style.top = `${100 - obj.alt}%`;
+    const label = el.querySelector(".scope-obj-label") as HTMLElement | null;
+    label?.style.setProperty("opacity", limit - obj.mag > 2.0 ? "1" : "0");
+  }
+
+  function renderObjects(limit: number) {
+    const objects = uiData.deepSpaceObjects || [];
+    objects.forEach((obj: DeepSpaceObject, idx: number) => {
+      const el = document.getElementById(`obj-${idx}`);
+      if (!el) return;
+      if (obj.mag > limit) {
+        el.style.display = "none";
+        return;
+      }
+      updateObjectElement(el, obj, limit);
+    });
+  }
+
+  function render() {
+    if (!ctx || !canvas) return;
+    const w = (canvas.width = getCanvasWidth());
+    const h = (canvas.height = getCanvasHeight());
+    ctx.clearRect(0, 0, w, h);
+    const sliderVal = parseInt(apertureInput.value);
+    const bortle = parseInt(bortleInput.value);
+    const limit = calculateLimitingMagnitude(sliderVal, bortle);
+    const apertureMM = apertureSliderToMm(sliderVal);
+    updateDisplays(limit, apertureMM, bortle);
+    renderStars(w, h, limit);
+    renderObjects(limit);
+  }
+
+  container?.addEventListener("mousedown", (e) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === "INPUT" || target.tagName === "BUTTON" || target.closest(".scope-controls-wrapper")) return;
+    isDragging = true;
+    startX = e.clientX;
+    startPan = panAngle;
+    dragDistance = 0;
+    container.style.cursor = "grabbing";
+  });
+
+  window.addEventListener("mousemove", (e) => {
+    if (!isDragging || !container) return;
+    const dx = e.clientX - startX;
+    dragDistance += Math.abs(e.movementX);
+    const degreesPerPixel = FOV / getContainerWidth();
+    let newPan = startPan - dx * degreesPerPixel;
+    if (newPan < 0) newPan += 360;
+    if (newPan >= 360) newPan -= 360;
+    panAngle = newPan;
+    requestAnimationFrame(render);
+  });
+
+  window.addEventListener("mouseup", () => {
+    isDragging = false;
+    if (container) container.style.cursor = "grab";
+  });
+
+  container?.addEventListener("touchstart", (e) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === "INPUT" || target.closest(".scope-controls-wrapper")) return;
+    isDragging = true;
+    startX = e.touches[0]!.clientX;
+    startPan = panAngle;
+    dragDistance = 0;
+  });
+
+  window.addEventListener("touchmove", (e) => {
+    if (!isDragging || !container) return;
+    const dx = e.touches[0].clientX - startX;
+    dragDistance += Math.abs(dx);
+    const degreesPerPixel = FOV / getContainerWidth();
+    let newPan = startPan - dx * degreesPerPixel;
+    if (newPan < 0) newPan += 360;
+    if (newPan >= 360) newPan -= 360;
+    panAngle = newPan;
+    requestAnimationFrame(render);
+  });
+
+  window.addEventListener("touchend", () => (isDragging = false));
+
+  const iconifyScript = document.createElement("script");
+  iconifyScript.src = "https://code.iconify.design/3/3.1.0/iconify.min.js";
+  document.head.appendChild(iconifyScript);
+
+  initStars();
+  initObjectsDOM();
+  apertureInput.addEventListener("input", () => requestAnimationFrame(render));
+  bortleInput.addEventListener("input", () => requestAnimationFrame(render));
+  window.addEventListener("resize", () => requestAnimationFrame(render));
+  setTimeout(render, 50);
+</script>
+