@jjlmoya/utils-astronomy 1.16.0 → 1.18.0

package/src/tool/smartEyepieceCalculator/app.ts

@@ -0,0 +1,327 @@
+import { calculateEyepieceStats, calculateExitPupil, getTelescopeLimits, analyzeEyepiece } from './logic';
+import type { TelescopeLimits, EyepieceStats, EyepieceStatus } from './logic';
+
+export interface EyepieceData {
+  id: string;
+  focal: number;
+  afov: number;
+}
+
+export interface AppState {
+  aperture: number;
+  focal: number;
+  eyepieces: EyepieceData[];
+  activeEyepiece: string | null;
+}
+
+export class EyepieceApp {
+  ui: Record<string, string>;
+  wrapper: HTMLElement;
+  container: HTMLElement;
+  appState: AppState;
+  targetSizes: Record<string, number> = {
+    moon: 0.5,
+    pleiades: 1.8,
+    andromeda: 3.16,
+    m13: 0.33,
+    saturn: 0.012
+  };
+
+  constructor(uiObj: Record<string, string>) {
+    this.ui = uiObj;
+    this.wrapper = document.getElementById('epc-root') as HTMLElement;
+    this.container = document.getElementById('epc-cards-container') as HTMLElement;
+    this.appState = this.loadState();
+    this.init();
+  }
+
+  loadState(): AppState {
+    try {
+      const saved = localStorage.getItem('epc_state');
+      const parsed = saved ? JSON.parse(saved) : null;
+      if (parsed && parsed.eyepieces && parsed.eyepieces.length > 0) return parsed;
+    } catch {}
+    
+    return {
+      aperture: 150,
+      focal: 750,
+      eyepieces: [{ id: Date.now().toString(), focal: 10, afov: 52 }],
+      activeEyepiece: null
+    };
+  }
+
+  saveState() {
+    localStorage.setItem('epc_state', JSON.stringify(this.appState));
+  }
+
+  init() {
+    this.bindAptInputs();
+    this.bindFocalInputs();
+    this.bindPresetInputs();
+    
+    document.getElementById('epc-add-btn')?.addEventListener('click', () => {
+      this.appState.eyepieces.push({ id: Date.now().toString(), focal: 0, afov: 52 });
+      this.renderCards();
+      this.updateAll();
+    });
+
+    document.getElementById('epc-target')?.addEventListener('change', () => this.updateSim());
+    this.renderCards();
+    this.updateAll();
+  }
+
+
+
+  bindAptInputs() {
+    const aptInput = document.getElementById('epc-aperture') as HTMLInputElement;
+    if (!aptInput) return;
+    aptInput.value = this.appState.aperture ? this.appState.aperture.toString() : '';
+    aptInput.addEventListener('input', (e) => {
+      this.appState.aperture = parseFloat((e.target as HTMLInputElement).value) || 0;
+      const sel = document.getElementById('epc-preset') as HTMLSelectElement;
+      if (sel) sel.value = '';
+      this.updateAll();
+    });
+  }
+
+  bindFocalInputs() {
+    const fclInput = document.getElementById('epc-focal') as HTMLInputElement;
+    if (!fclInput) return;
+    fclInput.value = this.appState.focal ? this.appState.focal.toString() : '';
+    fclInput.addEventListener('input', (e) => {
+      this.appState.focal = parseFloat((e.target as HTMLInputElement).value) || 0;
+      const sel = document.getElementById('epc-preset') as HTMLSelectElement;
+      if (sel) sel.value = '';
+      this.updateAll();
+    });
+  }
+
+  bindPresetInputs() {
+    const presetSel = document.getElementById('epc-preset') as HTMLSelectElement;
+    if (!presetSel) return;
+    presetSel.addEventListener('change', (e) => {
+      const val = (e.target as HTMLSelectElement).value;
+      if (!val) return;
+      const [a, f] = val.split(',').map(Number);
+      this.appState.aperture = a;
+      this.appState.focal = f;
+      const apt = document.getElementById('epc-aperture') as HTMLInputElement;
+      const fcl = document.getElementById('epc-focal') as HTMLInputElement;
+      if (apt) apt.value = a.toString();
+      if (fcl) fcl.value = f.toString();
+      this.updateAll();
+    });
+  }
+
+
+
+  createCardDom(ep: EyepieceData): HTMLElement {
+    const tmpl = document.getElementById('epc-card-template') as HTMLTemplateElement;
+    const clone = tmpl.content.cloneNode(true) as HTMLElement;
+    const card = clone.querySelector('.epc-card') as HTMLElement;
+    card.dataset.id = ep.id;
+    return clone;
+  }
+
+  bindCardEvents(clone: HTMLElement, ep: EyepieceData) {
+    const fInp = clone.querySelector('.epc-ep-focal') as HTMLInputElement;
+    const aInp = clone.querySelector('.epc-ep-afov') as HTMLInputElement;
+    
+    if (ep.focal) fInp.value = ep.focal.toString();
+    if (ep.afov) aInp.value = ep.afov.toString();
+
+    fInp.addEventListener('input', (e) => {
+      ep.focal = parseFloat((e.target as HTMLInputElement).value) || 0;
+      this.updateAll();
+    });
+    
+    aInp.addEventListener('input', (e) => {
+      ep.afov = parseFloat((e.target as HTMLInputElement).value) || 0;
+      this.updateAll();
+    });
+
+    clone.querySelector('.epc-card-remove')?.addEventListener('click', () => {
+      this.appState.eyepieces = this.appState.eyepieces.filter(e => e.id !== ep.id);
+      this.renderCards();
+      this.updateAll();
+    });
+
+    const card = clone.querySelector('.epc-card') as HTMLElement;
+    card.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('.epc-card-remove')) return;
+      if ((e.target as HTMLElement).tagName.toLowerCase() === 'input') return;
+      this.appState.activeEyepiece = ep.id;
+      this.updateAll();
+    });
+  }
+
+  createCard(ep: EyepieceData): HTMLElement {
+    const clone = this.createCardDom(ep);
+    this.bindCardEvents(clone, ep);
+    return clone;
+  }
+
+  renderCards() {
+    this.container.innerHTML = '';
+    this.appState.eyepieces.forEach(ep => {
+      this.container.appendChild(this.createCard(ep));
+    });
+  }
+
+  setElText(root: HTMLElement, selector: string, text: string) {
+    const el = root.querySelector(selector);
+    if (el) el.textContent = text;
+  }
+
+  updateCardDom(cardEl: HTMLElement, stats: EyepieceStats, exitPupil: number, analysis: EyepieceStatus) {
+    const activeEp = this.getActiveEyepiece();
+    const isActive = activeEp && activeEp.id === cardEl.dataset.id;
+    let className = 'epc-card';
+    
+    const valid = stats.magnification > 0;
+    this.setElText(cardEl, '[data-type="mag"]', valid ? stats.magnification.toFixed(0) : '--');
+    this.setElText(cardEl, '[data-type="tfov"]', valid ? stats.trueFieldOfView.toFixed(2) : '--');
+    this.setElText(cardEl, '[data-type="pupil"]', valid ? exitPupil.toFixed(1) : '--');
+    
+    if (valid) className += ` status-${analysis.state}`;
+    if (isActive) className += ' active';
+    cardEl.className = className;
+  }
+
+  updateAll() {
+    this.saveState();
+    const focalRatio = this.appState.aperture > 0 ? this.appState.focal / this.appState.aperture : 0;
+    const limits = getTelescopeLimits(this.appState.aperture);
+
+    document.querySelectorAll('.epc-card').forEach(cardEl => {
+      const id = (cardEl as HTMLElement).dataset.id;
+      const ep = this.appState.eyepieces.find(e => e.id === id);
+      if (!ep) return;
+
+      const stats = calculateEyepieceStats(this.appState.focal, ep.focal, ep.afov);
+      const exitPupil = calculateExitPupil(ep.focal, focalRatio);
+      const analysis = analyzeEyepiece(stats, limits, exitPupil);
+      
+      this.updateCardDom(cardEl as HTMLElement, stats, exitPupil, analysis);
+    });
+
+    this.updateCTA(limits);
+    this.updateSim();
+  }
+
+  updateCTA(limits: TelescopeLimits) {
+    const cta = document.getElementById('epc-cta');
+    if (!cta) return;
+    if (this.appState.aperture > 0 && limits.maxMagnification > 0) {
+      const activeEp = this.getActiveEyepiece();
+      let isWarning = false;
+      
+      if (activeEp && activeEp.focal > 0) {
+        const stats = calculateEyepieceStats(this.appState.focal, activeEp.focal, activeEp.afov);
+        const focalRatio = this.appState.focal / this.appState.aperture;
+        const pupil = calculateExitPupil(activeEp.focal, focalRatio);
+        const analysis = analyzeEyepiece(stats, limits, pupil);
+        if (analysis.state !== 'perfect') isWarning = true;
+      }
+
+      let text = this.ui.ctaText.replace('{min}', Math.round(limits.minMagnification).toString());
+      text = text.replace('{max}', Math.round(limits.maxMagnification * 0.75).toString());
+      cta.textContent = text;
+      
+      cta.className = 'epc-cta-box show';
+      if (isWarning) cta.classList.add('warning-border');
+    } else {
+      cta.classList.remove('show');
+    }
+  }
+
+  getActiveEyepiece(): EyepieceData | null {
+    const validOps = this.appState.eyepieces.filter(ep => ep.focal > 0 && this.appState.focal > 0);
+    if (validOps.length === 0) return null;
+
+    let epToShow = validOps[0];
+    if (this.appState.activeEyepiece) {
+      const found = validOps.find(e => e.id === this.appState.activeEyepiece);
+      if (found) epToShow = found;
+    }
+    return epToShow;
+  }
+
+  applyVisuals(ep: EyepieceData, targetDeg: number) {
+    const targetEl = document.getElementById('epc-sim-target');
+    const noiseEl = document.getElementById('epc-sim-noise');
+    const masksEl = document.getElementById('epc-sim-masks');
+    if (!targetEl || !noiseEl || !masksEl) return;
+
+    const stats = calculateEyepieceStats(this.appState.focal, ep.focal, ep.afov);
+    const focalRatio = this.appState.aperture > 0 ? this.appState.focal / this.appState.aperture : 0;
+    const exitPupil = calculateExitPupil(ep.focal, focalRatio);
+
+    const scale = targetDeg / stats.trueFieldOfView;
+    const sizePct = Math.min(scale * 100, 400); 
+    targetEl.style.width = `${sizePct}%`;
+    targetEl.style.height = `${sizePct}%`;
+
+    const mask = document.createElement('div');
+    mask.className = 'epc-sim-mask';
+    mask.style.width = '100%';
+    mask.style.height = '100%';
+    masksEl.appendChild(mask);
+
+    if (exitPupil < 1.0) {
+      noiseEl.style.opacity = Math.min(1, (1.0 - exitPupil) * 1.5).toString();
+    }
+  }
+
+  getFeedbackMsg(analysis: EyepieceStatus, stats: EyepieceStats): string {
+    if (analysis.state === 'perfect') {
+      if (stats.magnification < 50) return this.ui.statusPerfectDeepSky;
+      if (stats.magnification > 100) return this.ui.statusPerfectPlanetary;
+      return this.ui.statusPerfectGeneral;
+    }
+    if (analysis.state === 'warning') {
+      return analysis.reason === 'lowMag' ? this.ui.statusWarningLowMag : this.ui.statusWarningHighMag;
+    }
+    return analysis.reason === 'highPupil' ? this.ui.statusDangerPupil : this.ui.statusDangerHighMag;
+  }
+
+  applyFeedback(ep: EyepieceData) {
+    const feedback = document.getElementById('epc-feedback-status');
+    if (!feedback) return;
+
+    const stats = calculateEyepieceStats(this.appState.focal, ep.focal, ep.afov);
+    const limits = getTelescopeLimits(this.appState.aperture);
+    const focalRatio = this.appState.aperture > 0 ? this.appState.focal / this.appState.aperture : 0;
+    const exitPupil = calculateExitPupil(ep.focal, focalRatio);
+    const analysis = analyzeEyepiece(stats, limits, exitPupil);
+
+    feedback.textContent = this.getFeedbackMsg(analysis, stats);
+    feedback.classList.add('show', analysis.state);
+  }
+
+  updateSim() {
+    const targetSel = document.getElementById('epc-target') as HTMLSelectElement;
+    if (!targetSel) return;
+    
+    const targetId = targetSel.value;
+    const targetDeg = this.targetSizes[targetId];
+    
+    const targetEl = document.getElementById('epc-sim-target');
+    const noiseEl = document.getElementById('epc-sim-noise');
+    const masksEl = document.getElementById('epc-sim-masks');
+    const feedback = document.getElementById('epc-feedback-status');
+    if (!targetEl || !noiseEl || !masksEl || !feedback) return;
+
+    targetEl.className = `epc-sim-target epc-target-${targetId}`;
+    masksEl.innerHTML = '';
+    feedback.className = 'epc-feedback-card';
+    feedback.textContent = '';
+    noiseEl.style.opacity = '0';
+
+    const epToShow = this.getActiveEyepiece();
+    if (!epToShow) return;
+
+    this.applyVisuals(epToShow, targetDeg);
+    this.applyFeedback(epToShow);
+  }
+}

package/src/tool/smartEyepieceCalculator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { smartEyepieceCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await smartEyepieceCalculator.entry.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/smartEyepieceCalculator/bibliography.ts

@@ -0,0 +1,6 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Sky & Telescope - Eyepiece Equations', url: 'https://www.telescoop.nl/en/telescope-eyepiece-explanation/' },
+  { name: 'Cloudy Nights - All About Exit Pupil', url: 'https://www.cloudynights.com/forums/topic/849970-all-about-exit-pupil/' },
+];

package/src/tool/smartEyepieceCalculator/component.astro

@@ -0,0 +1,125 @@
+---
+import type { EyepieceCalculatorUI } from './entry';
+import './smart-eyepiece-calculator.css';
+
+interface Props {
+  ui: EyepieceCalculatorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<script define:vars={{ ui }} is:inline>
+  window.__epcUI = ui;
+</script>
+
+<div class="epc-wrapper" id="epc-root">
+  <div class="epc-layout">
+    <div class="epc-controls">
+      <section class="epc-section">
+        <h3 class="epc-section-title">{ui.telescopeTitle}</h3>
+        
+        <div class="epc-control-group">
+          <label class="epc-label">{ui.presetsLabel}</label>
+          <select id="epc-preset" class="epc-select">
+            <option value="">{ui.presetsPlaceholder}</option>
+            <option value="60,700">Refractor 60/700 (f/11.6)</option>
+            <option value="72,400">Apo ED72 Astrofoto 72/400 (f/5.5)</option>
+            <option value="80,400">Refractor Gran Campo 80/400 (f/5)</option>
+            <option value="127,1000">Celestron 127EQ (f/7.9)</option>
+            <option value="130,650">Sky-Watcher 130/650 (f/5)</option>
+            <option value="150,1500">Maksutov 150/1500 (f/10)</option>
+            <option value="200,1200">Dobson 8" 200/1200 (f/6)</option>
+            <option value="300,1500">Dobson 12" Gigante 300/1500 (f/5)</option>
+          </select>
+        </div>
+
+        <div class="epc-grid-2">
+          <div class="epc-control-group">
+            <label class="epc-label" title={ui.apertureHelp}>
+              {ui.apertureLabel}
+              <svg class="epc-info-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+            </label>
+            <input type="number" id="epc-aperture" class="epc-input" placeholder="Ej: 150" />
+          </div>
+          <div class="epc-control-group">
+            <label class="epc-label" title={ui.focalHelp}>
+              {ui.focalLabel}
+              <svg class="epc-info-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+            </label>
+            <input type="number" id="epc-focal" class="epc-input" placeholder="Ej: 750" />
+          </div>
+        </div>
+      </section>
+
+      <section class="epc-section">
+        <h3 class="epc-section-title">{ui.eyepiecesTitle}</h3>
+        <div id="epc-cards-container" class="epc-cards-container"></div>
+        <button id="epc-add-btn" class="epc-btn-primary">{ui.addEyepieceBtn}</button>
+      </section>
+    </div>
+
+    <div class="epc-simulator-panel">
+      <h3 class="epc-section-title">{ui.simulatorTitle}</h3>
+      
+      <div class="epc-control-group">
+        <select id="epc-target" class="epc-select">
+          <option value="moon">{ui.targetMoon} (0.5°)</option>
+          <option value="pleiades">{ui.targetPleiades} (1.8°)</option>
+          <option value="andromeda">{ui.targetAndromeda} (3.16°)</option>
+          <option value="m13">{ui.targetM13} (0.33°)</option>
+          <option value="saturn">{ui.targetSaturn} (0.012°)</option>
+        </select>
+      </div>
+
+      <div class="epc-sim-container">
+        <div class="epc-sim-canvas" id="epc-sim-canvas">
+          <div class="epc-sim-target" id="epc-sim-target"></div>
+          <div class="epc-sim-noise" id="epc-sim-noise"></div>
+          <div id="epc-sim-masks"></div>
+        </div>
+      </div>
+
+      <div id="epc-feedback-status" class="epc-feedback-card"></div>
+
+      <div class="epc-cta-box" id="epc-cta">
+         {ui.ctaText}
+      </div>
+    </div>
+  </div>
+</div>
+
+<template id="epc-card-template">
+  <div class="epc-card">
+    <div class="epc-card-header">
+      <span class="epc-card-title">Ocular</span>
+      <button class="epc-card-remove"><svg viewBox="0 0 24 24" fill="none" class="epc-icon"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
+    </div>
+    <div class="epc-grid-2">
+      <div class="epc-control-group">
+        <label class="epc-label" title="Focal del ocular en mm">Focal (mm)</label>
+        <input type="number" class="epc-input epc-ep-focal" placeholder="Ej: 10" />
+      </div>
+      <div class="epc-control-group">
+        <label class="epc-label" title="Campo aparente en grados">AFOV (°)</label>
+        <input type="number" class="epc-input epc-ep-afov" placeholder="Ej: 52" value="52" />
+      </div>
+    </div>
+    <div class="epc-card-results">
+      <div class="epc-stat"><span class="epc-stat-val" data-type="mag">--</span><span class="epc-stat-lbl">x</span></div>
+      <div class="epc-stat"><span class="epc-stat-val" data-type="tfov">--</span><span class="epc-stat-lbl">°</span></div>
+      <div class="epc-stat"><span class="epc-stat-val" data-type="pupil">--</span><span class="epc-stat-lbl">mm</span></div>
+    </div>
+  </div>
+</template>
+
+
+
+<script>
+  import { EyepieceApp } from './app';
+
+  if (typeof window !== 'undefined') {
+    const win = window as unknown as { __epcUI: Record<string, string> };
+    new EyepieceApp(win.__epcUI);
+  }
+</script>

package/src/tool/smartEyepieceCalculator/entry.ts

@@ -0,0 +1,67 @@
+import type { AstronomyToolEntry, ToolLocaleContent } from '../../types';
+
+export interface EyepieceCalculatorUI {
+  [key: string]: string;
+  toolTitle: string;
+  telescopeTitle: string;
+  apertureLabel: string;
+  focalLabel: string;
+  presetsLabel: string;
+  presetsPlaceholder: string;
+  addEyepieceBtn: string;
+  eyepiecesTitle: string;
+  eyepieceFocal: string;
+  eyepieceAfov: string;
+  removeEyepiece: string;
+  magLabel: string;
+  tfovLabel: string;
+  pupilLabel: string;
+  simulatorTitle: string;
+  targetLabel: string;
+  targetMoon: string;
+  targetSaturn: string;
+  targetPleiades: string;
+  targetAndromeda: string;
+  targetM13: string;
+  statusDangerHighMag: string;
+  statusDangerPupil: string;
+  statusWarningHighMag: string;
+  statusWarningLowMag: string;
+  statusPerfectDeepSky: string;
+  statusPerfectPlanetary: string;
+  statusPerfectGeneral: string;
+  ctaText: string;
+  compareText: string;
+  apertureHelp: string;
+  focalHelp: string;
+  afovHelp: string;
+}
+
+export type EyepieceCalculatorLocaleContent = ToolLocaleContent<EyepieceCalculatorUI>;
+
+export const eyepieceCalculator: AstronomyToolEntry<EyepieceCalculatorUI> = {
+  id: 'smart-eyepiece-calculator',
+  icons: {
+    bg: 'mdi:eye-circle',
+    fg: 'mdi:telescope',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};
+
+export { bibliography } from './bibliography';