@jjlmoya/utils-nautical 1.2.0

package/src/tool/sailArea/component.astro

@@ -0,0 +1,418 @@
+---
+import './style.css';
+import type { SailAreaUI } from './index';
+
+interface Props {
+  ui: SailAreaUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="sail-area-calculator-root" class="sail-area-calculator" data-ui={JSON.stringify(ui)}>
+  <div class="sa-calculator-wrapper" id="calculator-capture-area">
+    <div class="sa-main-controls">
+
+      <div class="sa-section-group">
+        <h3>{ui.hullSectionLabel}</h3>
+        <div class="sa-compact-grid">
+          <div class="sa-input-row">
+            <label for="displacement">{ui.totalMassLabel}</label>
+            <div class="sa-input-with-unit">
+              <input type="number" id="displacement" class="sa-elegant-input" placeholder="8500" />
+              <div class="sa-unit-tag">
+                <select id="disp-unit" style="background:transparent; border:none; appearance:none; font-weight:900; cursor:pointer;">
+                  <option value="kg">KG</option>
+                  <option value="lbs">LBS</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="sa-input-row">
+            <label for="rig-type">{ui.sailConfigLabel}</label>
+            <select id="rig-type" class="sa-elegant-input">
+              <option value="sloop">{ui.sloopLabel}</option>
+              <option value="cutter">{ui.cutterLabel}</option>
+              <option value="ketch">{ui.ketchLabel}</option>
+            </select>
+          </div>
+          <div class="sa-input-row">
+            <label for="boat-type">{ui.intendedUseLabel}</label>
+            <select id="boat-type" class="sa-elegant-input">
+              <option value="cruiser">{ui.cruiserLabel}</option>
+              <option value="performance">{ui.performanceTypeLabel}</option>
+              <option value="racer">{ui.racerLabel}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="sa-section-group">
+        <h3>{ui.rigGeometryLabel}</h3>
+        <div class="sa-compact-grid">
+          <div class="sa-input-row">
+            <label>P (m)</label>
+            <div class="sa-input-with-unit">
+              <input type="number" id="val-p" class="sa-elegant-input" placeholder="12.5" />
+              <div class="sa-unit-tag">
+                <select class="sa-len-unit" data-for="val-p" style="background:transparent; border:none; appearance:none; font-weight:900; cursor:pointer;">
+                  <option value="m">M</option>
+                  <option value="ft">FT</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="sa-input-row">
+            <label>E (m)</label>
+            <div class="sa-input-with-unit">
+              <input type="number" id="val-e" class="sa-elegant-input" placeholder="4.2" />
+              <div class="sa-unit-tag">
+                <select class="sa-len-unit" data-for="val-e" style="background:transparent; border:none; appearance:none; font-weight:900; cursor:pointer;">
+                  <option value="m">M</option>
+                  <option value="ft">FT</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="sa-input-row">
+            <label>I (m)</label>
+            <div class="sa-input-with-unit">
+              <input type="number" id="val-i" class="sa-elegant-input" placeholder="14.0" />
+              <div class="sa-unit-tag">
+                <select class="sa-len-unit" data-for="val-i" style="background:transparent; border:none; appearance:none; font-weight:900; cursor:pointer;">
+                  <option value="m">M</option>
+                  <option value="ft">FT</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="sa-input-row">
+            <label>J (m)</label>
+            <div class="sa-input-with-unit">
+              <input type="number" id="val-j" class="sa-elegant-input" placeholder="4.5" />
+              <div class="sa-unit-tag">
+                <select class="sa-len-unit" data-for="val-j" style="background:transparent; border:none; appearance:none; font-weight:900; cursor:pointer;">
+                  <option value="m">M</option>
+                  <option value="ft">FT</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="mizzen-row" style="display: none; margin-top: 1.5rem;" class="sa-compact-grid">
+          <div class="sa-input-row">
+            <label>Py (m)</label>
+            <div class="sa-input-with-unit">
+              <input type="number" id="val-py" class="sa-elegant-input" placeholder="8.5" />
+              <div class="sa-unit-tag">
+                <select class="sa-len-unit" data-for="val-py" style="background:transparent; border:none; appearance:none; font-weight:900; cursor:pointer;">
+                  <option value="m">M</option>
+                  <option value="ft">FT</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="sa-input-row">
+            <label>Ey (m)</label>
+            <div class="sa-input-with-unit">
+              <input type="number" id="val-ey" class="sa-elegant-input" placeholder="3.0" />
+              <div class="sa-unit-tag">
+                <select class="sa-len-unit" data-for="val-ey" style="background:transparent; border:none; appearance:none; font-weight:900; cursor:pointer;">
+                  <option value="m">M</option>
+                  <option value="ft">FT</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sa-section-group">
+        <h3>{ui.genoaOverlapLabel}</h3>
+        <div class="sa-slider-box">
+          <div class="sa-slider-header">
+            <label for="genoa-overlap">{ui.genoaOverlapLabel} (LP/J)</label>
+            <span id="overlap-val" class="sa-percentage-badge">130%</span>
+          </div>
+          <div class="sa-slider-wrapper">
+            <input type="range" id="genoa-overlap" class="sa-modern-slider" min="100" max="155" value="130" step="1" />
+            <div class="sa-slider-ticks">
+              <span>100% ({ui.foqueLabel})</span>
+              <span>155% ({ui.genovaLabel} G.)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <aside class="sa-sidebar-results">
+      <span class="sad-label">{ui.sadRatioLabel}</span>
+      <span id="sad-ratio-val" class="sad-value-large">0.0</span>
+      <div class="sa-gauge-track">
+        <div id="gauge-marker-el" class="sa-gauge-indicator" style="left: 0%"></div>
+      </div>
+      <div class="sa-verdict-box">
+        <h4 id="verdict-title-el">-</h4>
+        <p id="verdict-text-el">-</p>
+      </div>
+      <div class="sa-stats-summary">
+        <div class="sa-stat-item">
+          <span>{ui.totalAreaLabel}</span>
+          <span id="total-area-el">0.0 m²</span>
+        </div>
+        <div class="sa-stat-item">
+          <span>{ui.performanceLabel}</span>
+          <span id="power-indicator-el">-</span>
+        </div>
+      </div>
+      <button id="btn-export-pdf-premium" class="sa-export-btn-premium sa-ignore-capture">
+        {ui.exportPdfLabel}
+      </button>
+    </aside>
+  </div>
+</div>
+
+<script>
+  const root = document.getElementById('sail-area-calculator-root') as HTMLElement;
+  const ui = JSON.parse(root.dataset.ui as string) as Record<string, string>;
+
+  const rigType = document.getElementById('rig-type') as HTMLSelectElement;
+  const displacement = document.getElementById('displacement') as HTMLInputElement;
+  const dispUnit = document.getElementById('disp-unit') as HTMLSelectElement;
+  const valP = document.getElementById('val-p') as HTMLInputElement;
+  const valE = document.getElementById('val-e') as HTMLInputElement;
+  const valI = document.getElementById('val-i') as HTMLInputElement;
+  const valJ = document.getElementById('val-j') as HTMLInputElement;
+  const valPy = document.getElementById('val-py') as HTMLInputElement;
+  const valEy = document.getElementById('val-ey') as HTMLInputElement;
+  const genoaOverlap = document.getElementById('genoa-overlap') as HTMLInputElement;
+  const overlapLabel = document.getElementById('overlap-val') as HTMLElement;
+  const totalAreaDisplay = document.getElementById('total-area-el') as HTMLElement;
+  const sadRatioDisplay = document.getElementById('sad-ratio-val') as HTMLElement;
+  const verdictTitle = document.getElementById('verdict-title-el') as HTMLElement;
+  const verdictText = document.getElementById('verdict-text-el') as HTMLElement;
+  const gaugeMarker = document.getElementById('gauge-marker-el') as HTMLElement;
+  const powerIndicator = document.getElementById('power-indicator-el') as HTMLElement;
+  const mizzenRow = document.getElementById('mizzen-row') as HTMLElement;
+  const lenUnits = document.querySelectorAll<HTMLSelectElement>('.sa-len-unit');
+
+  function getValInM(id: string): number {
+    const el = document.getElementById(id) as HTMLInputElement;
+    const unitEl = document.querySelector<HTMLSelectElement>(`.sa-len-unit[data-for="${id}"]`);
+    const val = parseFloat(el.value) || 0;
+    return unitEl?.value === 'ft' ? val * 0.3048 : val;
+  }
+
+  function calculate() {
+    const p = getValInM('val-p');
+    const e = getValInM('val-e');
+    const i = getValInM('val-i');
+    const j = getValInM('val-j');
+    const py = getValInM('val-py');
+    const ey = getValInM('val-ey');
+    const overlap = (parseFloat(genoaOverlap.value) || 100) / 100;
+    let dispKg = parseFloat(displacement.value) || 0;
+    if (dispUnit.value === 'lbs') dispKg *= 0.453592;
+
+    const mainA = 0.5 * p * e;
+    const genoaA = 0.5 * i * j * overlap;
+    let totalA = mainA + genoaA;
+    if (rigType.value === 'ketch') totalA += 0.5 * py * ey;
+    if (rigType.value === 'cutter') totalA += 0.5 * i * j * 0.4;
+
+    totalAreaDisplay.textContent = `${totalA.toFixed(1)} m²`;
+    const areaSqFt = totalA * 10.7639;
+    const dispLbs = dispKg * 2.20462;
+    if (dispLbs > 100 && areaSqFt > 1) {
+      const sad = Math.min(99.9, areaSqFt / Math.pow(dispLbs / 64, 2 / 3));
+      sadRatioDisplay.textContent = sad.toFixed(1);
+      updateUI(sad);
+    }
+  }
+
+  function updateUI(sad: number) {
+    let title = ui.cruiserLabel ?? 'Crucero';
+    let text = 'Diseno robusto ideal para seguridad oceanica y travesias.';
+    let power = 'Moderada';
+    const gaugePos = Math.min(100, Math.max(0, (sad - 10) * 4));
+    if (sad > 16.5) {
+      title = ui.cruiserLabel ?? 'Crucero';
+      text = 'Equilibrio ideal para la mayoria de navegantes de recreo.';
+      power = 'Optima';
+    }
+    if (sad > 20) {
+      title = ui.performanceTypeLabel ?? 'Performance';
+      text = 'Barcos rapidos que requieren manejo activo de escotas.';
+      power = 'Alta';
+    }
+    if (sad > 25) {
+      title = ui.racerLabel ?? 'Regata';
+      text = 'Maxima agilidad. Respuesta inmediata y potencial de planeo.';
+      power = 'Extrema';
+    }
+    verdictTitle.textContent = title;
+    verdictText.textContent = text;
+    powerIndicator.textContent = power;
+    gaugeMarker.style.left = `${gaugePos}%`;
+  }
+
+  function saveToLocal() {
+    const data = {
+      rig: rigType.value,
+      disp: displacement.value,
+      dispU: dispUnit.value,
+      p: valP.value,
+      e: valE.value,
+      i: valI.value,
+      j: valJ.value,
+      py: valPy.value,
+      ey: valEy.value,
+      overlap: genoaOverlap.value,
+      lenUnits: Array.from(lenUnits).map((u) => ({ id: u.getAttribute('data-for'), val: u.value })),
+    };
+    localStorage.setItem('sail_calc_data', JSON.stringify(data));
+  }
+
+  type SavedData = { rig?: string; disp?: string; dispU?: string; p?: string; e?: string; i?: string; j?: string; py?: string; ey?: string; overlap?: string; lenUnits?: { id: string; val: string }[] };
+
+  function applyDimensions(d: SavedData) {
+    valP.value = d.p || '';
+    valE.value = d.e || '';
+    valI.value = d.i || '';
+    valJ.value = d.j || '';
+    valPy.value = d.py || '';
+    valEy.value = d.ey || '';
+  }
+
+  function applyMeta(d: SavedData) {
+    genoaOverlap.value = d.overlap || '130';
+    overlapLabel.textContent = `${genoaOverlap.value}%`;
+    (d.lenUnits || []).forEach((u) => {
+      const el = document.querySelector<HTMLSelectElement>(`.sa-len-unit[data-for="${u.id}"]`);
+      if (el) el.value = u.val;
+    });
+    mizzenRow.style.display = d.rig === 'ketch' ? 'grid' : 'none';
+  }
+
+  function loadFromLocal() {
+    const raw = localStorage.getItem('sail_calc_data');
+    if (!raw) { calculate(); return; }
+    try {
+      const data = JSON.parse(raw) as SavedData;
+      rigType.value = data.rig || 'sloop';
+      displacement.value = data.disp || '';
+      dispUnit.value = data.dispU || 'kg';
+      applyDimensions(data);
+      applyMeta(data);
+      calculate();
+    } catch { calculate(); }
+  }
+
+  [rigType, displacement, dispUnit, valP, valE, valI, valJ, valPy, valEy, genoaOverlap].forEach((el) => {
+    el.addEventListener('input', () => {
+      mizzenRow.style.display = rigType.value === 'ketch' ? 'grid' : 'none';
+      overlapLabel.textContent = `${genoaOverlap.value}%`;
+      calculate();
+      saveToLocal();
+    });
+  });
+
+  lenUnits.forEach((u) => u.addEventListener('change', () => { calculate(); saveToLocal(); }));
+
+  function getLenUnit(id: string): string {
+    return document.querySelector<HTMLSelectElement>(`.sa-len-unit[data-for="${id}"]`)?.value ?? 'm';
+  }
+
+  function buildMizzenRows(): string {
+    if (rigType.value !== 'ketch') return '';
+    const td = 'style="padding:10px;border:1px solid #ddd;font-size:13px;"';
+    const tdB = 'style="padding:10px;border:1px solid #ddd;font-size:13px;font-weight:bold;"';
+    return `<tr><td ${td}>Py (Altura Mesana)</td><td ${tdB}>${valPy.value} ${getLenUnit('val-py')}</td></tr>
+      <tr><td ${td}>Ey (Base Mesana)</td><td ${tdB}>${valEy.value} ${getLenUnit('val-ey')}</td></tr>`;
+  }
+
+  function buildPdfTable(): string {
+    const td = 'style="padding:10px;border:1px solid #ddd;font-size:13px;"';
+    const tdB = 'style="padding:10px;border:1px solid #ddd;font-size:13px;font-weight:bold;"';
+    const th = 'style="background:#003b73;color:#fff;"';
+    const thCell = 'style="padding:10px;text-align:left;font-size:12px;border:1px solid #003b73;"';
+    return `<table style="width:100%;border-collapse:collapse;margin-bottom:30px;">
+      <thead><tr ${th}><th ${thCell}>Parametro</th><th ${thCell}>Valor</th></tr></thead>
+      <tbody>
+        <tr><td ${td}>Tipo de Aparejo</td><td ${tdB}>${rigType.options[rigType.selectedIndex]?.text ?? ''}</td></tr>
+        <tr><td ${td}>Desplazamiento</td><td ${tdB}>${displacement.value} ${dispUnit.value}</td></tr>
+        <tr><td ${td}>P (Mastil Mayor)</td><td ${tdB}>${valP.value} ${getLenUnit('val-p')}</td></tr>
+        <tr><td ${td}>E (Botavara Mayor)</td><td ${tdB}>${valE.value} ${getLenUnit('val-e')}</td></tr>
+        <tr><td ${td}>I (Altura Foretriangulo)</td><td ${tdB}>${valI.value} ${getLenUnit('val-i')}</td></tr>
+        <tr><td ${td}>J (Base Foretriangulo)</td><td ${tdB}>${valJ.value} ${getLenUnit('val-j')}</td></tr>
+        <tr><td ${td}>Solape Genova</td><td ${tdB}>${genoaOverlap.value}%</td></tr>
+        ${buildMizzenRows()}
+      </tbody>
+    </table>`;
+  }
+
+  function buildPdfResults(): string {
+    return `<div style="margin-bottom:40px;background:#f9f9f9;padding:25px;border-radius:8px;">
+      <h2 style="margin:0 0 20px 0;font-size:18px;border-bottom:1px solid #ddd;padding-bottom:10px;color:#003b73;">Resumen de Resultados</h2>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:30px;">
+        <div style="text-align:center;border-right:1px solid #ddd;">
+          <span style="display:block;font-size:12px;text-transform:uppercase;color:#666;margin-bottom:5px;">Ratio SA/D</span>
+          <span style="font-size:48px;font-weight:bold;color:#003b73;">${sadRatioDisplay.textContent}</span>
+          <div style="margin-top:10px;font-weight:bold;color:#ef4135;font-size:14px;">${verdictTitle.textContent}</div>
+        </div>
+        <div style="text-align:center;">
+          <span style="display:block;font-size:12px;text-transform:uppercase;color:#666;margin-bottom:5px;">Superficie Velica Total</span>
+          <span style="font-size:48px;font-weight:bold;color:#003b73;">${totalAreaDisplay.textContent}</span>
+          <div style="margin-top:10px;color:#666;font-size:14px;">Rendimiento: <strong>${powerIndicator.textContent}</strong></div>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  function buildPdfHtml(): string {
+    const date = new Date().toLocaleDateString();
+    const header = `<div style="border-bottom:3px solid #003b73;padding-bottom:20px;margin-bottom:30px;display:flex;justify-content:space-between;align-items:flex-end;">
+      <div><h1 style="margin:0;color:#003b73;font-size:28px;text-transform:uppercase;">Informe Tecnico de Superficie Velica</h1>
+      <p style="margin:5px 0 0;color:#666;font-size:14px;">Generado por jjlmoya.es • ${date}</p></div>
+      <div style="text-align:right;"><span style="font-size:12px;font-weight:bold;color:#003b73;">VERSION PROFESIONAL</span></div>
+    </div>`;
+    const note = `<div style="background:#eef2f6;padding:20px;border-radius:8px;font-size:12px;color:#444;border-left:4px solid #003b73;">
+      <strong>Nota Tecnica:</strong> El ratio SA/D es un indicador del rendimiento potencial del barco.
+    </div>`;
+    const footer = `<div style="margin-top:40px;text-align:center;border-top:1px solid #eee;padding-top:20px;">
+      <p style="font-size:10px;color:#999;">Documento generado automaticamente por el calculador de jjlmoya.es.</p>
+    </div>`;
+    return `<div style="padding:40px;color:#333;max-width:800px;margin:0 auto;">${header}${buildPdfResults()}<h2 style="font-size:16px;text-transform:uppercase;color:#003b73;margin-bottom:15px;">Especificaciones Tecnicas</h2>${buildPdfTable()}${note}${footer}</div>`;
+  }
+
+  document.getElementById('btn-export-pdf-premium')?.addEventListener('click', async () => {
+    const element = document.getElementById('calculator-capture-area');
+    if (!element) return;
+    try {
+      const [jsPDFMod, html2canvasMod] = await Promise.all([import('jspdf'), import('html2canvas')]);
+      const jsPDF = jsPDFMod.default;
+      const html2canvas = html2canvasMod.default;
+      const canvas = await html2canvas(element, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: '#ffffff',
+        ignoreElements: (el) => el.classList.contains('sa-ignore-capture'),
+        onclone: (clonedDoc) => {
+          const clonedEl = clonedDoc.getElementById('calculator-capture-area');
+          if (clonedEl) clonedEl.innerHTML = buildPdfHtml();
+        },
+      });
+      const imgWidth = 595.28;
+      const imgHeight = (canvas.height * imgWidth) / canvas.width;
+      const pdf = new jsPDF('p', 'pt', 'a4');
+      pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);
+      pdf.save(`informe-superficie-velica-${new Date().getTime()}.pdf`);
+    } catch (err) {
+      console.error(err);
+    }
+  });
+
+  loadFromLocal();
+</script>