@jjlmoya/utils-astronomy 1.24.0 → 1.26.0

package/src/tool/telescopeResolution/component.astro

@@ -1,222 +1,222 @@
----
-import type { TelescopeResolutionUI } from './index';
-interface Props {
-  ui: TelescopeResolutionUI;
-}
-
-const { ui } = Astro.props;
----
-
-<script define:vars={{ ui }} is:inline>
-  window.__telescopeUI = ui;
-</script>
-
-<div class="tscope-wrapper" id="tscope-root">
-  <div class="tscope-grid">
-    <div class="tscope-controls">
-      <div class="tscope-control-group">
-        <label class="tscope-control-label" for="aperture-input">{ui.apertureLabel}</label>
-        <div class="tscope-stepper">
-          <button class="tscope-step-btn" data-action="dec" data-target="aperture">-</button>
-          <input type="number" id="aperture-input" value="150" min="1" max="2000" class="tscope-stepper-input" />
-          <button class="tscope-step-btn" data-action="inc" data-target="aperture">+</button>
-        </div>
-      </div>
-
-      <div class="tscope-control-group">
-        <label class="tscope-control-label" for="unit-selector">{ui.unitLabel}</label>
-        <div class="tscope-select-wrapper">
-          <select id="unit-selector" class="tscope-select">
-            <option value="mm">{ui.mmUnit}</option>
-            <option value="in">{ui.inUnit}</option>
-          </select>
-          <svg class="tscope-select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </div>
-      </div>
-
-      <div class="tscope-control-group">
-        <label class="tscope-control-label" for="preset-selector">{ui.presetsLabel}</label>
-        <div class="tscope-select-wrapper">
-          <select id="preset-selector" class="tscope-select">
-            <option value="">{ui.presetsPlaceholder}</option>
-            {ui.presets.map((preset: { value: string; label: string }) => <option value={preset.value}>{preset.label}</option>)}
-          </select>
-          <svg class="tscope-select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </div>
-      </div>
-
-      <div class="tscope-control-group">
-        <label class="tscope-control-label">
-          {ui.seeingLabel}: <span id="seeing-value">1.0</span>"
-        </label>
-        <input type="range" id="seeing-input" min="0.5" max="3.0" step="0.1" value="1.0" class="tscope-range" aria-label={ui.seeingLabel} />
-      </div>
-    </div>
-
-    <div class="tscope-results">
-      <div class="tscope-main-result">
-        <h4 class="tscope-result-title">{ui.dawesLabel}</h4>
-        <div class="tscope-resolution-value">
-          <span id="dawes-result" class="tscope-resolution-number">0.77</span>
-          <span class="tscope-resolution-unit">{ui.arcsecUnit}</span>
-        </div>
-      </div>
-
-      <div class="tscope-seeing-alert" id="seeing-alert">
-        <span id="seeing-alert-prefix">{ui.seeingAlertPrefix}</span>
-        <span id="seeing-alert-suffix">{ui.seeingAlertSuffix}</span>
-      </div>
-
-      <div class="tscope-comp-grid">
-        <div class="tscope-comp-card">
-          <h4 class="tscope-comp-title">{ui.rayleighLabel}</h4>
-          <span class="tscope-comp-value" id="rayleigh-result">0.92</span>"
-        </div>
-        <div class="tscope-comp-card">
-          <h4 class="tscope-comp-title">{ui.maxMagLabel}</h4>
-          <span class="tscope-comp-value" id="max-mag-result">300</span>x
-        </div>
-      </div>
-
-      <div class="tscope-visualization">
-        <label class="tscope-vis-label">{ui.simLabel}</label>
-        <div class="tscope-sim-container">
-          <div class="tscope-binary-system" id="binary-system">
-            <div class="tscope-star" id="star-1"></div>
-            <div class="tscope-star" id="star-2"></div>
-          </div>
-        </div>
-        <p class="tscope-sim-explanation">{ui.simExplanation}</p>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-  import { calculateResolution, inchesToMm, mmToInches } from './logic';
-
-  const seeingAlertPrefix = document.getElementById('seeing-alert-prefix');
-  const seeingValueDisplay = document.getElementById('seeing-value');
-
-  function updateSeeingAlert() {
-    if (seeingAlertPrefix && seeingValueDisplay) {
-      const seeingVal = seeingValueDisplay.textContent;
-      const originalPrefix = seeingAlertPrefix.textContent || '';
-      seeingAlertPrefix.textContent = `${originalPrefix} (${seeingVal}")`;
-    }
-  }
-
-  class ResolutionApp {
-    apertureInput: HTMLInputElement;
-    unitSelector: HTMLSelectElement;
-    presetSelector: HTMLSelectElement;
-    seeingInput: HTMLInputElement;
-    dawesDisplay: HTMLElement;
-    rayleighDisplay: HTMLElement;
-    maxMagDisplay: HTMLElement;
-    seeingDisplay: HTMLElement;
-    star1: HTMLElement;
-    star2: HTMLElement;
-    stepBtns: NodeListOf<HTMLButtonElement> | undefined;
-
-    constructor() {
-      this.apertureInput = document.getElementById('aperture-input') as HTMLInputElement;
-      this.unitSelector = document.getElementById('unit-selector') as HTMLSelectElement;
-      this.presetSelector = document.getElementById('preset-selector') as HTMLSelectElement;
-      this.seeingInput = document.getElementById('seeing-input') as HTMLInputElement;
-      this.dawesDisplay = document.getElementById('dawes-result') as HTMLElement;
-      this.rayleighDisplay = document.getElementById('rayleigh-result') as HTMLElement;
-      this.maxMagDisplay = document.getElementById('max-mag-result') as HTMLElement;
-      this.seeingDisplay = document.getElementById('seeing-value') as HTMLElement;
-      this.star1 = document.getElementById('star-1') as HTMLElement;
-      this.star2 = document.getElementById('star-2') as HTMLElement;
-      this.stepBtns = document.querySelectorAll('.tscope-step-btn');
-      this.init();
-    }
-
-    bindStepButtons() {
-      this.stepBtns.forEach((btn) => {
-        btn.addEventListener('click', () => {
-          const action = btn.dataset.action;
-          let val = parseFloat(this.apertureInput.value);
-          if (action === 'inc') val += this.unitSelector.value === 'mm' ? 10 : 0.5;
-          if (action === 'dec') val -= this.unitSelector.value === 'mm' ? 10 : 0.5;
-          this.apertureInput.value = Math.max(1, val).toString();
-          this.calculate();
-        });
-      });
-    }
-
-    bindUnitSelector() {
-      this.unitSelector.addEventListener('change', () => {
-        const val = parseFloat(this.apertureInput.value);
-        if (this.unitSelector.value === 'in') {
-          this.apertureInput.value = mmToInches(val).toFixed(1);
-        } else {
-          this.apertureInput.value = inchesToMm(val).toFixed(0);
-        }
-        this.calculate();
-      });
-    }
-
-    init() {
-      this.bindStepButtons();
-      this.apertureInput.addEventListener('input', () => this.calculate());
-      this.bindUnitSelector();
-      this.presetSelector.addEventListener('change', () => {
-        const val = this.presetSelector.value;
-        if (val) {
-          this.unitSelector.value = 'mm';
-          this.apertureInput.value = val;
-          this.calculate();
-        }
-      });
-      this.seeingInput.addEventListener('input', () => {
-        this.seeingDisplay.textContent = this.seeingInput.value;
-        updateSeeingAlert();
-        this.calculate();
-      });
-      this.calculate();
-    }
-
-    calculate() {
-      let apertureMm = parseFloat(this.apertureInput.value) || 1;
-      if (this.unitSelector.value === 'in') {
-        apertureMm = inchesToMm(apertureMm);
-      }
-      const seeing = parseFloat(this.seeingInput.value);
-      const result = calculateResolution(apertureMm, seeing);
-
-      this.dawesDisplay.textContent = result.dawes.toFixed(2);
-      this.rayleighDisplay.textContent = result.rayleigh.toFixed(2);
-      this.maxMagDisplay.textContent = Math.round(result.maxMagnification).toString();
-
-      this.updateSimulation(result.dawes);
-    }
-
-    updateSimulation(dawes: number) {
-      const baseBlur = Math.max(0, dawes * 3);
-      const separation = Math.max(8, 30 - dawes * 15);
-
-      if (this.star1 && this.star2) {
-        this.star1.style.setProperty('--star-blur', `${baseBlur}px`);
-        this.star2.style.setProperty('--star-blur', `${baseBlur}px`);
-        const container = document.getElementById('binary-system');
-        if (container) {
-          container.style.gap = `${separation}px`;
-        }
-        const scale = Math.max(0.5, 2.5 - dawes / 1.5);
-        this.star1.style.transform = `scale(${scale})`;
-        this.star2.style.transform = `scale(${scale})`;
-      }
-    }
-  }
-
-  new ResolutionApp();
-  updateSeeingAlert();
-</script>
-
+---
+import type { TelescopeResolutionUI } from './index';
+interface Props {
+  ui: TelescopeResolutionUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<script define:vars={{ ui }} is:inline>
+  window.__telescopeUI = ui;
+</script>
+
+<div class="tscope-wrapper" id="tscope-root">
+  <div class="tscope-grid">
+    <div class="tscope-controls">
+      <div class="tscope-control-group">
+        <label class="tscope-control-label" for="aperture-input">{ui.apertureLabel}</label>
+        <div class="tscope-stepper">
+          <button class="tscope-step-btn" data-action="dec" data-target="aperture">-</button>
+          <input type="number" id="aperture-input" value="150" min="1" max="2000" class="tscope-stepper-input" />
+          <button class="tscope-step-btn" data-action="inc" data-target="aperture">+</button>
+        </div>
+      </div>
+
+      <div class="tscope-control-group">
+        <label class="tscope-control-label" for="unit-selector">{ui.unitLabel}</label>
+        <div class="tscope-select-wrapper">
+          <select id="unit-selector" class="tscope-select">
+            <option value="mm">{ui.mmUnit}</option>
+            <option value="in">{ui.inUnit}</option>
+          </select>
+          <svg class="tscope-select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </div>
+      </div>
+
+      <div class="tscope-control-group">
+        <label class="tscope-control-label" for="preset-selector">{ui.presetsLabel}</label>
+        <div class="tscope-select-wrapper">
+          <select id="preset-selector" class="tscope-select">
+            <option value="">{ui.presetsPlaceholder}</option>
+            {ui.presets.map((preset: { value: string; label: string }) => <option value={preset.value}>{preset.label}</option>)}
+          </select>
+          <svg class="tscope-select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </div>
+      </div>
+
+      <div class="tscope-control-group">
+        <label class="tscope-control-label">
+          {ui.seeingLabel}: <span id="seeing-value">1.0</span>"
+        </label>
+        <input type="range" id="seeing-input" min="0.5" max="3.0" step="0.1" value="1.0" class="tscope-range" aria-label={ui.seeingLabel} />
+      </div>
+    </div>
+
+    <div class="tscope-results">
+      <div class="tscope-main-result">
+        <h4 class="tscope-result-title">{ui.dawesLabel}</h4>
+        <div class="tscope-resolution-value">
+          <span id="dawes-result" class="tscope-resolution-number">0.77</span>
+          <span class="tscope-resolution-unit">{ui.arcsecUnit}</span>
+        </div>
+      </div>
+
+      <div class="tscope-seeing-alert" id="seeing-alert">
+        <span id="seeing-alert-prefix">{ui.seeingAlertPrefix}</span>
+        <span id="seeing-alert-suffix">{ui.seeingAlertSuffix}</span>
+      </div>
+
+      <div class="tscope-comp-grid">
+        <div class="tscope-comp-card">
+          <h4 class="tscope-comp-title">{ui.rayleighLabel}</h4>
+          <span class="tscope-comp-value" id="rayleigh-result">0.92</span>"
+        </div>
+        <div class="tscope-comp-card">
+          <h4 class="tscope-comp-title">{ui.maxMagLabel}</h4>
+          <span class="tscope-comp-value" id="max-mag-result">300</span>x
+        </div>
+      </div>
+
+      <div class="tscope-visualization">
+        <label class="tscope-vis-label">{ui.simLabel}</label>
+        <div class="tscope-sim-container">
+          <div class="tscope-binary-system" id="binary-system">
+            <div class="tscope-star" id="star-1"></div>
+            <div class="tscope-star" id="star-2"></div>
+          </div>
+        </div>
+        <p class="tscope-sim-explanation">{ui.simExplanation}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculateResolution, inchesToMm, mmToInches } from './logic';
+
+  const seeingAlertPrefix = document.getElementById('seeing-alert-prefix');
+  const seeingValueDisplay = document.getElementById('seeing-value');
+
+  function updateSeeingAlert() {
+    if (seeingAlertPrefix && seeingValueDisplay) {
+      const seeingVal = seeingValueDisplay.textContent;
+      const originalPrefix = seeingAlertPrefix.textContent || '';
+      seeingAlertPrefix.textContent = `${originalPrefix} (${seeingVal}")`;
+    }
+  }
+
+  class ResolutionApp {
+    apertureInput: HTMLInputElement;
+    unitSelector: HTMLSelectElement;
+    presetSelector: HTMLSelectElement;
+    seeingInput: HTMLInputElement;
+    dawesDisplay: HTMLElement;
+    rayleighDisplay: HTMLElement;
+    maxMagDisplay: HTMLElement;
+    seeingDisplay: HTMLElement;
+    star1: HTMLElement;
+    star2: HTMLElement;
+    stepBtns: NodeListOf<HTMLButtonElement> | undefined;
+
+    constructor() {
+      this.apertureInput = document.getElementById('aperture-input') as HTMLInputElement;
+      this.unitSelector = document.getElementById('unit-selector') as HTMLSelectElement;
+      this.presetSelector = document.getElementById('preset-selector') as HTMLSelectElement;
+      this.seeingInput = document.getElementById('seeing-input') as HTMLInputElement;
+      this.dawesDisplay = document.getElementById('dawes-result') as HTMLElement;
+      this.rayleighDisplay = document.getElementById('rayleigh-result') as HTMLElement;
+      this.maxMagDisplay = document.getElementById('max-mag-result') as HTMLElement;
+      this.seeingDisplay = document.getElementById('seeing-value') as HTMLElement;
+      this.star1 = document.getElementById('star-1') as HTMLElement;
+      this.star2 = document.getElementById('star-2') as HTMLElement;
+      this.stepBtns = document.querySelectorAll('.tscope-step-btn');
+      this.init();
+    }
+
+    bindStepButtons() {
+      this.stepBtns.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const action = btn.dataset.action;
+          let val = parseFloat(this.apertureInput.value);
+          if (action === 'inc') val += this.unitSelector.value === 'mm' ? 10 : 0.5;
+          if (action === 'dec') val -= this.unitSelector.value === 'mm' ? 10 : 0.5;
+          this.apertureInput.value = Math.max(1, val).toString();
+          this.calculate();
+        });
+      });
+    }
+
+    bindUnitSelector() {
+      this.unitSelector.addEventListener('change', () => {
+        const val = parseFloat(this.apertureInput.value);
+        if (this.unitSelector.value === 'in') {
+          this.apertureInput.value = mmToInches(val).toFixed(1);
+        } else {
+          this.apertureInput.value = inchesToMm(val).toFixed(0);
+        }
+        this.calculate();
+      });
+    }
+
+    init() {
+      this.bindStepButtons();
+      this.apertureInput.addEventListener('input', () => this.calculate());
+      this.bindUnitSelector();
+      this.presetSelector.addEventListener('change', () => {
+        const val = this.presetSelector.value;
+        if (val) {
+          this.unitSelector.value = 'mm';
+          this.apertureInput.value = val;
+          this.calculate();
+        }
+      });
+      this.seeingInput.addEventListener('input', () => {
+        this.seeingDisplay.textContent = this.seeingInput.value;
+        updateSeeingAlert();
+        this.calculate();
+      });
+      this.calculate();
+    }
+
+    calculate() {
+      let apertureMm = parseFloat(this.apertureInput.value) || 1;
+      if (this.unitSelector.value === 'in') {
+        apertureMm = inchesToMm(apertureMm);
+      }
+      const seeing = parseFloat(this.seeingInput.value);
+      const result = calculateResolution(apertureMm, seeing);
+
+      this.dawesDisplay.textContent = result.dawes.toFixed(2);
+      this.rayleighDisplay.textContent = result.rayleigh.toFixed(2);
+      this.maxMagDisplay.textContent = Math.round(result.maxMagnification).toString();
+
+      this.updateSimulation(result.dawes);
+    }
+
+    updateSimulation(dawes: number) {
+      const baseBlur = Math.max(0, dawes * 3);
+      const separation = Math.max(8, 30 - dawes * 15);
+
+      if (this.star1 && this.star2) {
+        this.star1.style.setProperty('--star-blur', `${baseBlur}px`);
+        this.star2.style.setProperty('--star-blur', `${baseBlur}px`);
+        const container = document.getElementById('binary-system');
+        if (container) {
+          container.style.gap = `${separation}px`;
+        }
+        const scale = Math.max(0.5, 2.5 - dawes / 1.5);
+        this.star1.style.transform = `scale(${scale})`;
+        this.star2.style.transform = `scale(${scale})`;
+      }
+    }
+  }
+
+  new ResolutionApp();
+  updateSeeingAlert();
+</script>
+