@jjlmoya/utils-astronomy 1.1.0

package/src/tool/starExposureCalculator/component.astro

@@ -0,0 +1,562 @@
+---
+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">{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">{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">{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">{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>
+  import { calculateExposureTime } from './logic';
+  import type { SensorCropFactor } from './logic';
+
+  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 = 'Trazo de estrella visible';
+      } else {
+        this.starPreview.style.width = '4px';
+        this.starPreview.style.borderRadius = '50%';
+        this.starPreview.classList.remove('is-trail');
+        if (info) info.textContent = 'Estrellas como puntos';
+      }
+    }
+  }
+
+  new StarCalculatorApp();
+</script>
+
+<style>
+  .star-calc-wrapper {
+    width: 100%;
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 2rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base);
+    border-radius: 1.5rem;
+    box-shadow: 0 25px 50px -12px var(--shadow-base);
+  }
+
+  .star-calc-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  @media (min-width: 768px) {
+    .star-calc-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 3rem;
+    }
+  }
+
+  .star-calc-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .star-mode-selector {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .star-mode-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-muted, #cbd5e1);
+  }
+
+  .star-toggle-group {
+    display: flex;
+    background: var(--bg-muted);
+    padding: 0.25rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--border-base);
+  }
+
+  .star-toggle-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    background: transparent;
+    color: var(--text-muted, #94a3b8);
+    cursor: pointer;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: all 0.2s ease;
+  }
+
+  .star-toggle-btn.active {
+    background: var(--color-amber, #f59e0b);
+    color: var(--color-bg-deep, #0f172a);
+    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+  }
+
+  .star-control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .star-control-label {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-muted, #cbd5e1);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .star-stepper {
+    display: flex;
+    align-items: center;
+    background: var(--bg-muted);
+    border: 1px solid var(--border-base);
+    border-radius: 0.75rem;
+    overflow: hidden;
+  }
+
+  .star-step-btn {
+    width: 4rem;
+    height: 3.5rem;
+    border: none;
+    background: var(--bg-muted);
+    color: var(--color-amber, #f59e0b);
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .star-step-btn:hover {
+    background: var(--bg-page);
+  }
+
+  .star-stepper-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-base);
+    text-align: center;
+    font-size: 1.25rem;
+    font-weight: 600;
+    outline: none;
+    width: 100%;
+  }
+
+  .star-select-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .star-select-arrow {
+    position: absolute;
+    right: 0.875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    color: var(--color-amber, #f59e0b);
+    pointer-events: none;
+  }
+
+  .star-select {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    background: var(--bg-muted);
+    border: 1px solid var(--border-base);
+    color: var(--text-base);
+    padding: 0.875rem 3rem 0.875rem 1rem;
+    border-radius: 0.75rem;
+    font-size: 0.95rem;
+    outline: none;
+    cursor: pointer;
+    transition: border-color 0.2s ease;
+  }
+
+  .star-select:hover {
+    border-color: var(--text-muted);
+  }
+
+  .star-select:focus {
+    border-color: var(--color-amber, #f59e0b);
+  }
+
+  .star-select option {
+    background: var(--bg-surface);
+    color: var(--text-base);
+  }
+
+  .star-range {
+    width: 100%;
+    accent-color: var(--color-amber, #f59e0b);
+    height: 6px;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  .star-range-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: var(--text-muted, #64748b);
+  }
+
+  .star-npf-controls {
+    display: none;
+    flex-direction: column;
+    gap: 1.5rem;
+    animation: star-fade-in 0.3s ease;
+  }
+
+  @keyframes star-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .star-results {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    justify-content: center;
+  }
+
+  .star-result-main {
+    text-align: center;
+    background: var(--bg-muted);
+    padding: 2rem;
+    border-radius: 1.5rem;
+    border: 1px solid var(--border-base);
+  }
+
+  .star-time-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .star-time-value {
+    font-size: 5rem;
+    font-weight: 800;
+    color: var(--color-amber, #f59e0b);
+    line-height: 1;
+    text-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
+  }
+
+  .star-time-unit {
+    font-size: 1.25rem;
+    color: var(--text-muted, #94a3b8);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-top: 0.5rem;
+  }
+
+  .star-result-text {
+    font-size: 0.95rem;
+    color: var(--text-muted, #94a3b8);
+    margin: 0;
+  }
+
+  .star-simulation {
+    background: var(--bg-muted);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-base);
+  }
+
+  .star-sim-label {
+    display: block;
+    font-size: 0.85rem;
+    color: var(--text-muted, #94a3b8);
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+
+  .star-sim-container {
+    height: 100px;
+    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
+    border-radius: 0.5rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    margin-bottom: 1rem;
+  }
+
+  .star-sim-view {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .star-point {
+    height: 4px;
+    width: 4px;
+    background: white;
+    border-radius: 50%;
+    box-shadow: 0 0 10px white;
+    transition: width 0.3s ease, border-radius 0.3s ease;
+  }
+
+  .star-point.is-trail {
+    background: linear-gradient(90deg, white, rgba(255, 255, 255, 0.1));
+  }
+
+  .star-center-marker {
+    position: absolute;
+    color: rgba(245, 158, 11, 0.3);
+    font-size: 1.5rem;
+    pointer-events: none;
+  }
+
+  .star-sim-info-row {
+    text-align: center;
+    font-size: 0.85rem;
+  }
+
+  .star-sim-info {
+    color: var(--color-amber, #f59e0b);
+    font-weight: 500;
+  }
+
+  .star-sim-range-wrapper {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .star-sim-range-label {
+    font-size: 0.75rem;
+    color: var(--text-muted, #64748b);
+    text-align: center;
+  }
+</style>