@jjlmoya/utils-astronomy 1.24.0 → 1.26.0

package/src/tool/starExposureCalculator/component.astro

@@ -1,249 +1,249 @@
----
-import type { StarExposureCalculatorUI } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  ui: StarExposureCalculatorUI;
-  locale?: KnownLocale;
-}
-
-const { ui } = Astro.props;
----
-
-<div class="star-calc-wrapper">
-  <div class="star-calc-grid">
-    <div class="star-calc-controls">
-      <div class="star-mode-selector">
-        <span class="star-mode-label">{ui.modeLabel}:</span>
-        <div class="star-toggle-group">
-          <button id="mode-classic" class="star-toggle-btn active" data-mode="classic">{ui.classicMode}</button>
-          <button id="mode-npf" class="star-toggle-btn" data-mode="npf">{ui.npfMode}</button>
-        </div>
-      </div>
-
-      <div class="star-control-group">
-        <label class="star-control-label" for="sensor-type">{ui.sensorLabel}</label>
-        <div class="star-select-wrapper">
-          <select id="sensor-type" class="star-select">
-            <option value="1.0">Full Frame (x1.0)</option>
-            <option value="1.5">APS-C Nikon/Sony/Fuji (x1.5)</option>
-            <option value="1.6">APS-C Canon (x1.6)</option>
-            <option value="2.0">Micro Four Thirds (x2.0)</option>
-          </select>
-          <svg class="star-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="star-control-group">
-        <label class="star-control-label" for="focal-length">{ui.focalLabel}</label>
-        <div class="star-stepper">
-          <button class="star-step-btn" data-action="dec" data-target="focal">-</button>
-          <input type="number" id="focal-length" value="14" min="1" max="1000" class="star-stepper-input" />
-          <button class="star-step-btn" data-action="inc" data-target="focal">+</button>
-        </div>
-      </div>
-
-      <div id="npf-controls" class="star-npf-controls">
-        <div class="star-control-group">
-          <label class="star-control-label" for="aperture">{ui.apertureLabel}</label>
-          <div class="star-stepper">
-            <button class="star-step-btn" data-action="dec" data-target="aperture">-</button>
-            <input type="number" id="aperture" value="2.8" step="0.1" min="0.5" max="32" class="star-stepper-input" />
-            <button class="star-step-btn" data-action="inc" data-target="aperture">+</button>
-          </div>
-        </div>
-        <div class="star-control-group">
-          <label class="star-control-label" for="megapixels">{ui.megapixelsLabel}</label>
-          <div class="star-stepper">
-            <button class="star-step-btn" data-action="dec" data-target="megapixels">-</button>
-            <input type="number" id="megapixels" value="24" min="1" max="150" class="star-stepper-input" />
-            <button class="star-step-btn" data-action="inc" data-target="megapixels">+</button>
-          </div>
-        </div>
-      </div>
-
-      <div class="star-control-group">
-        <label class="star-control-label">
-          {ui.declinationLabel}: <span id="declination-value">0</span>°
-        </label>
-        <input type="range" id="declination" min="0" max="89" value="0" class="star-range" aria-label={ui.declinationLabel} />
-        <div class="star-range-labels">
-          <span>{ui.equatorLabel}</span>
-          <span>{ui.poleLabel}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="star-results">
-      <div class="star-result-main">
-        <div class="star-time-display">
-          <span id="result-time" class="star-time-value">35.7</span>
-          <span class="star-time-unit">{ui.secondsUnit}</span>
-        </div>
-        <p id="result-text" class="star-result-text">{ui.resultText}</p>
-      </div>
-
-      <div class="star-simulation">
-        <label class="star-sim-label">{ui.simLabel}</label>
-        <div class="star-sim-container">
-          <div class="star-sim-view">
-            <div id="star-preview" class="star-point"></div>
-            <div class="star-center-marker">+</div>
-          </div>
-          <div class="star-sim-info-row">
-            <span id="sim-info" class="star-sim-info">{ui.pointStars}</span>
-          </div>
-        </div>
-        <div class="star-sim-range-wrapper">
-          <input type="range" id="sim-offset" min="1" max="5" step="0.1" value="1" class="star-range" aria-label={ui.simRangeLabel} />
-          <span class="star-sim-range-label">{ui.simRangeLabel}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script define:vars={{ ui }} is:inline>
-  window.__starCalcUI = ui;
-</script>
-
-<script>
-  import { calculateExposureTime } from './logic';
-  import type { SensorCropFactor } from './logic';
-
-  const uiData = window.__starCalcUI;
-
-  class StarCalculatorApp {
-    mode = 'classic';
-    focalLengthInput: HTMLInputElement;
-    sensorSelect: HTMLSelectElement;
-    apertureInput: HTMLInputElement;
-    megapixelsInput: HTMLInputElement;
-    declinationInput: HTMLInputElement;
-    resultTimeDisplay: HTMLElement;
-    declinationValueDisplay: HTMLElement;
-    starPreview: HTMLElement;
-    simOffsetInput: HTMLInputElement;
-    npfControls: HTMLElement;
-    modeBtns: NodeListOf<HTMLButtonElement>;
-    stepBtns: NodeListOf<HTMLButtonElement>;
-
-    constructor() {
-      this.focalLengthInput = document.getElementById('focal-length') as HTMLInputElement;
-      this.sensorSelect = document.getElementById('sensor-type') as HTMLSelectElement;
-      this.apertureInput = document.getElementById('aperture') as HTMLInputElement;
-      this.megapixelsInput = document.getElementById('megapixels') as HTMLInputElement;
-      this.declinationInput = document.getElementById('declination') as HTMLInputElement;
-      this.resultTimeDisplay = document.getElementById('result-time') as HTMLElement;
-      this.declinationValueDisplay = document.getElementById('declination-value') as HTMLElement;
-      this.starPreview = document.getElementById('star-preview') as HTMLElement;
-      this.simOffsetInput = document.getElementById('sim-offset') as HTMLInputElement;
-      this.npfControls = document.getElementById('npf-controls') as HTMLElement;
-      this.modeBtns = document.querySelectorAll('.star-toggle-btn');
-      this.stepBtns = document.querySelectorAll('.star-step-btn');
-      this.init();
-    }
-
-    resolveStepInput(targetId: string | undefined): HTMLInputElement | null {
-      if (targetId === 'focal') return this.focalLengthInput;
-      if (targetId === 'aperture') return this.apertureInput;
-      if (targetId === 'megapixels') return this.megapixelsInput;
-      return null;
-    }
-
-    handleStepBtn(btn: HTMLButtonElement) {
-      const action = btn.dataset.action;
-      const targetId = btn.dataset.target;
-      const input = this.resolveStepInput(targetId);
-      if (!input) return;
-      let val = parseFloat(input.value);
-      const step = parseFloat(input.step) || 1;
-      if (action === 'inc') val += step;
-      if (action === 'dec') val -= step;
-      input.value = Math.max(parseFloat(input.min) || 0, val).toFixed(targetId === 'aperture' ? 1 : 0);
-      this.calculate();
-    }
-
-    bindModeButtons() {
-      this.modeBtns.forEach((btn) => {
-        btn.addEventListener('click', () => {
-          this.modeBtns.forEach((b) => b.classList.remove('active'));
-          btn.classList.add('active');
-          this.mode = btn.dataset.mode || 'classic';
-          if (this.npfControls) {
-            this.npfControls.style.display = this.mode === 'npf' ? 'flex' : 'none';
-          }
-          this.calculate();
-        });
-      });
-    }
-
-    bindInputListeners() {
-      this.stepBtns.forEach((btn) => btn.addEventListener('click', () => this.handleStepBtn(btn)));
-      [this.focalLengthInput, this.apertureInput, this.megapixelsInput].forEach((inp) => {
-        if (inp) inp.addEventListener('input', () => this.calculate());
-      });
-      if (this.sensorSelect) this.sensorSelect.addEventListener('change', () => this.calculate());
-      if (this.declinationInput) {
-        this.declinationInput.addEventListener('input', () => {
-          if (this.declinationValueDisplay) {
-            this.declinationValueDisplay.textContent = this.declinationInput.value;
-          }
-          this.calculate();
-        });
-      }
-      if (this.simOffsetInput) {
-        this.simOffsetInput.addEventListener('input', () => this.updateSimulation());
-      }
-    }
-
-    init() {
-      this.bindModeButtons();
-      this.bindInputListeners();
-      this.calculate();
-    }
-
-    getExposureParams() {
-      return {
-        mode: this.mode as 'classic' | 'npf',
-        focalLength: parseFloat(this.focalLengthInput.value) || 1,
-        cropFactor: parseFloat(this.sensorSelect.value) as SensorCropFactor,
-        aperture: parseFloat(this.apertureInput?.value || '2.8'),
-        megapixels: parseFloat(this.megapixelsInput?.value || '24'),
-        declination: parseFloat(this.declinationInput.value) || 0,
-      };
-    }
-
-    calculate() {
-      if (!this.focalLengthInput || !this.sensorSelect || !this.declinationInput) return;
-      const resultTime = calculateExposureTime(this.getExposureParams());
-      if (this.resultTimeDisplay) {
-        this.resultTimeDisplay.textContent = resultTime.toFixed(1);
-      }
-      this.updateSimulation();
-    }
-
-    updateSimulation() {
-      if (!this.simOffsetInput || !this.starPreview) return;
-      const excess = parseFloat(this.simOffsetInput.value);
-      const trailLength = (excess - 1) * 20;
-      const info = document.getElementById('sim-info');
-      if (excess > 1.1) {
-        this.starPreview.style.width = `${trailLength + 4}px`;
-        this.starPreview.style.borderRadius = '2px';
-        this.starPreview.classList.add('is-trail');
-        if (info) info.textContent = uiData.trailStars;
-      } else {
-        this.starPreview.style.width = '4px';
-        this.starPreview.style.borderRadius = '50%';
-        this.starPreview.classList.remove('is-trail');
-        if (info) info.textContent = uiData.pointStars;
-      }
-    }
-  }
-
-  new StarCalculatorApp();
-</script>
-
+---
+import type { StarExposureCalculatorUI } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  ui: StarExposureCalculatorUI;
+  locale?: KnownLocale;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="star-calc-wrapper">
+  <div class="star-calc-grid">
+    <div class="star-calc-controls">
+      <div class="star-mode-selector">
+        <span class="star-mode-label">{ui.modeLabel}:</span>
+        <div class="star-toggle-group">
+          <button id="mode-classic" class="star-toggle-btn active" data-mode="classic">{ui.classicMode}</button>
+          <button id="mode-npf" class="star-toggle-btn" data-mode="npf">{ui.npfMode}</button>
+        </div>
+      </div>
+
+      <div class="star-control-group">
+        <label class="star-control-label" for="sensor-type">{ui.sensorLabel}</label>
+        <div class="star-select-wrapper">
+          <select id="sensor-type" class="star-select">
+            <option value="1.0">Full Frame (x1.0)</option>
+            <option value="1.5">APS-C Nikon/Sony/Fuji (x1.5)</option>
+            <option value="1.6">APS-C Canon (x1.6)</option>
+            <option value="2.0">Micro Four Thirds (x2.0)</option>
+          </select>
+          <svg class="star-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="star-control-group">
+        <label class="star-control-label" for="focal-length">{ui.focalLabel}</label>
+        <div class="star-stepper">
+          <button class="star-step-btn" data-action="dec" data-target="focal">-</button>
+          <input type="number" id="focal-length" value="14" min="1" max="1000" class="star-stepper-input" />
+          <button class="star-step-btn" data-action="inc" data-target="focal">+</button>
+        </div>
+      </div>
+
+      <div id="npf-controls" class="star-npf-controls">
+        <div class="star-control-group">
+          <label class="star-control-label" for="aperture">{ui.apertureLabel}</label>
+          <div class="star-stepper">
+            <button class="star-step-btn" data-action="dec" data-target="aperture">-</button>
+            <input type="number" id="aperture" value="2.8" step="0.1" min="0.5" max="32" class="star-stepper-input" />
+            <button class="star-step-btn" data-action="inc" data-target="aperture">+</button>
+          </div>
+        </div>
+        <div class="star-control-group">
+          <label class="star-control-label" for="megapixels">{ui.megapixelsLabel}</label>
+          <div class="star-stepper">
+            <button class="star-step-btn" data-action="dec" data-target="megapixels">-</button>
+            <input type="number" id="megapixels" value="24" min="1" max="150" class="star-stepper-input" />
+            <button class="star-step-btn" data-action="inc" data-target="megapixels">+</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="star-control-group">
+        <label class="star-control-label">
+          {ui.declinationLabel}: <span id="declination-value">0</span>°
+        </label>
+        <input type="range" id="declination" min="0" max="89" value="0" class="star-range" aria-label={ui.declinationLabel} />
+        <div class="star-range-labels">
+          <span>{ui.equatorLabel}</span>
+          <span>{ui.poleLabel}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="star-results">
+      <div class="star-result-main">
+        <div class="star-time-display">
+          <span id="result-time" class="star-time-value">35.7</span>
+          <span class="star-time-unit">{ui.secondsUnit}</span>
+        </div>
+        <p id="result-text" class="star-result-text">{ui.resultText}</p>
+      </div>
+
+      <div class="star-simulation">
+        <label class="star-sim-label">{ui.simLabel}</label>
+        <div class="star-sim-container">
+          <div class="star-sim-view">
+            <div id="star-preview" class="star-point"></div>
+            <div class="star-center-marker">+</div>
+          </div>
+          <div class="star-sim-info-row">
+            <span id="sim-info" class="star-sim-info">{ui.pointStars}</span>
+          </div>
+        </div>
+        <div class="star-sim-range-wrapper">
+          <input type="range" id="sim-offset" min="1" max="5" step="0.1" value="1" class="star-range" aria-label={ui.simRangeLabel} />
+          <span class="star-sim-range-label">{ui.simRangeLabel}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__starCalcUI = ui;
+</script>
+
+<script>
+  import { calculateExposureTime } from './logic';
+  import type { SensorCropFactor } from './logic';
+
+  const uiData = window.__starCalcUI;
+
+  class StarCalculatorApp {
+    mode = 'classic';
+    focalLengthInput: HTMLInputElement;
+    sensorSelect: HTMLSelectElement;
+    apertureInput: HTMLInputElement;
+    megapixelsInput: HTMLInputElement;
+    declinationInput: HTMLInputElement;
+    resultTimeDisplay: HTMLElement;
+    declinationValueDisplay: HTMLElement;
+    starPreview: HTMLElement;
+    simOffsetInput: HTMLInputElement;
+    npfControls: HTMLElement;
+    modeBtns: NodeListOf<HTMLButtonElement>;
+    stepBtns: NodeListOf<HTMLButtonElement>;
+
+    constructor() {
+      this.focalLengthInput = document.getElementById('focal-length') as HTMLInputElement;
+      this.sensorSelect = document.getElementById('sensor-type') as HTMLSelectElement;
+      this.apertureInput = document.getElementById('aperture') as HTMLInputElement;
+      this.megapixelsInput = document.getElementById('megapixels') as HTMLInputElement;
+      this.declinationInput = document.getElementById('declination') as HTMLInputElement;
+      this.resultTimeDisplay = document.getElementById('result-time') as HTMLElement;
+      this.declinationValueDisplay = document.getElementById('declination-value') as HTMLElement;
+      this.starPreview = document.getElementById('star-preview') as HTMLElement;
+      this.simOffsetInput = document.getElementById('sim-offset') as HTMLInputElement;
+      this.npfControls = document.getElementById('npf-controls') as HTMLElement;
+      this.modeBtns = document.querySelectorAll('.star-toggle-btn');
+      this.stepBtns = document.querySelectorAll('.star-step-btn');
+      this.init();
+    }
+
+    resolveStepInput(targetId: string | undefined): HTMLInputElement | null {
+      if (targetId === 'focal') return this.focalLengthInput;
+      if (targetId === 'aperture') return this.apertureInput;
+      if (targetId === 'megapixels') return this.megapixelsInput;
+      return null;
+    }
+
+    handleStepBtn(btn: HTMLButtonElement) {
+      const action = btn.dataset.action;
+      const targetId = btn.dataset.target;
+      const input = this.resolveStepInput(targetId);
+      if (!input) return;
+      let val = parseFloat(input.value);
+      const step = parseFloat(input.step) || 1;
+      if (action === 'inc') val += step;
+      if (action === 'dec') val -= step;
+      input.value = Math.max(parseFloat(input.min) || 0, val).toFixed(targetId === 'aperture' ? 1 : 0);
+      this.calculate();
+    }
+
+    bindModeButtons() {
+      this.modeBtns.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          this.modeBtns.forEach((b) => b.classList.remove('active'));
+          btn.classList.add('active');
+          this.mode = btn.dataset.mode || 'classic';
+          if (this.npfControls) {
+            this.npfControls.style.display = this.mode === 'npf' ? 'flex' : 'none';
+          }
+          this.calculate();
+        });
+      });
+    }
+
+    bindInputListeners() {
+      this.stepBtns.forEach((btn) => btn.addEventListener('click', () => this.handleStepBtn(btn)));
+      [this.focalLengthInput, this.apertureInput, this.megapixelsInput].forEach((inp) => {
+        if (inp) inp.addEventListener('input', () => this.calculate());
+      });
+      if (this.sensorSelect) this.sensorSelect.addEventListener('change', () => this.calculate());
+      if (this.declinationInput) {
+        this.declinationInput.addEventListener('input', () => {
+          if (this.declinationValueDisplay) {
+            this.declinationValueDisplay.textContent = this.declinationInput.value;
+          }
+          this.calculate();
+        });
+      }
+      if (this.simOffsetInput) {
+        this.simOffsetInput.addEventListener('input', () => this.updateSimulation());
+      }
+    }
+
+    init() {
+      this.bindModeButtons();
+      this.bindInputListeners();
+      this.calculate();
+    }
+
+    getExposureParams() {
+      return {
+        mode: this.mode as 'classic' | 'npf',
+        focalLength: parseFloat(this.focalLengthInput.value) || 1,
+        cropFactor: parseFloat(this.sensorSelect.value) as SensorCropFactor,
+        aperture: parseFloat(this.apertureInput?.value || '2.8'),
+        megapixels: parseFloat(this.megapixelsInput?.value || '24'),
+        declination: parseFloat(this.declinationInput.value) || 0,
+      };
+    }
+
+    calculate() {
+      if (!this.focalLengthInput || !this.sensorSelect || !this.declinationInput) return;
+      const resultTime = calculateExposureTime(this.getExposureParams());
+      if (this.resultTimeDisplay) {
+        this.resultTimeDisplay.textContent = resultTime.toFixed(1);
+      }
+      this.updateSimulation();
+    }
+
+    updateSimulation() {
+      if (!this.simOffsetInput || !this.starPreview) return;
+      const excess = parseFloat(this.simOffsetInput.value);
+      const trailLength = (excess - 1) * 20;
+      const info = document.getElementById('sim-info');
+      if (excess > 1.1) {
+        this.starPreview.style.width = `${trailLength + 4}px`;
+        this.starPreview.style.borderRadius = '2px';
+        this.starPreview.classList.add('is-trail');
+        if (info) info.textContent = uiData.trailStars;
+      } else {
+        this.starPreview.style.width = '4px';
+        this.starPreview.style.borderRadius = '50%';
+        this.starPreview.classList.remove('is-trail');
+        if (info) info.textContent = uiData.pointStars;
+      }
+    }
+  }
+
+  new StarCalculatorApp();
+</script>
+