@jjlmoya/utils-nautical 1.2.0

package/src/tool/tideCalculator/style.css

@@ -0,0 +1,310 @@
+.tide-calculator {
+  --n-bg: #fff;
+  --n-bg-muted: #f1f5f9;
+  --n-text: #0f172a;
+  --n-text-muted: #475569;
+  --n-text-dim: #64748b;
+  --n-border: #e2e8f0;
+  --n-shadow: rgba(0, 0, 0, 0.05);
+  --n-primary: #3b82f6;
+  --n-primary-on: #fff;
+  --n-accent: #6366f1;
+  --n-cyan: #0891b2;
+  --n-success: #10b981;
+  --n-warning: #f59e0b;
+  --n-error: #f43f5e;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.theme-dark .tide-calculator {
+  --n-bg: #0f172a;
+  --n-bg-muted: #1e293b;
+  --n-text: #f8fafc;
+  --n-text-muted: #94a3b8;
+  --n-text-dim: #64748b;
+  --n-border: #334155;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+  --n-primary: #60a5fa;
+  --n-primary-on: #fff;
+  --n-accent: #818cf8;
+  --n-cyan: #22d3ee;
+  --n-success: #34d399;
+  --n-warning: #fbbf24;
+  --n-error: #fb7185;
+}
+
+.tc-main-card {
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: 2rem;
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  overflow: hidden;
+  box-shadow: 0 20px 40px var(--n-shadow);
+}
+
+@media (max-width: 850px) {
+  .tc-main-card {
+    grid-template-columns: 1fr;
+  }
+}
+
+.tc-calc-sidebar {
+  background: var(--n-primary);
+  color: var(--n-primary-on);
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.tc-sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tc-sidebar-header h3 {
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.9;
+}
+
+#invert-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--n-primary-on);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+#invert-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.tc-input-set {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.tc-input-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.tc-input-block label {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--n-primary-on);
+  opacity: 0.85;
+}
+
+.tc-input-block .row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tide-calculator input[type='time'],
+.tide-calculator input[type='number'] {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.8rem;
+  padding: 0.8rem;
+  color: var(--n-primary-on);
+  font-size: 1rem;
+  outline: none;
+}
+
+.tc-unit-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.tc-unit-input input {
+  width: 80px;
+  padding-right: 25px;
+}
+
+.tc-unit-input span {
+  position: absolute;
+  right: 10px;
+  font-size: 0.8rem;
+  opacity: 0.5;
+}
+
+.tc-featured label {
+  color: var(--n-primary-on);
+  opacity: 1;
+  font-size: 0.95rem;
+}
+
+.tide-calculator input[type='time'].large-time {
+  background: var(--n-primary-on);
+  color: var(--n-primary);
+  font-size: 1.8rem;
+  font-weight: 800;
+  text-align: center;
+}
+
+.tc-calc-content {
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  background: var(--n-bg-muted);
+}
+
+.tc-top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.tc-result-display {
+  display: flex;
+  flex-direction: column;
+}
+
+.tc-result-display .label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--n-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.tc-value-box {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+#target-value {
+  font-size: 4rem;
+  font-weight: 800;
+  color: var(--n-accent);
+  line-height: 1;
+}
+
+.tc-value-box small {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--n-text-dim);
+}
+
+.tc-status-indicator {
+  padding: 0.4rem 1rem;
+  border-radius: 2rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+  display: inline-block;
+  width: fit-content;
+  background: var(--n-bg-muted);
+  color: var(--n-text-dim);
+}
+
+.tc-status-indicator.up {
+  background: color-mix(in srgb, var(--n-success), transparent 80%);
+  color: var(--n-success);
+}
+
+.tc-status-indicator.down {
+  background: color-mix(in srgb, var(--n-error), transparent 80%);
+  color: var(--n-error);
+}
+
+.tc-summary-info {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.tc-stat {
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+}
+
+.tc-s-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--n-text-muted);
+  text-transform: uppercase;
+}
+
+.tc-stat span:last-child {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--n-text);
+}
+
+.tc-chart-area {
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+  height: 250px;
+  position: relative;
+}
+
+.tc-table-card {
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+}
+
+.tc-table-card h4 {
+  margin: 0 0 1rem;
+  font-size: 1rem;
+  color: var(--n-text-muted);
+}
+
+.tc-table-wrapper {
+  overflow-x: auto;
+}
+
+.tide-calculator table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tide-calculator th {
+  text-align: left;
+  padding: 1rem;
+  font-size: 0.8rem;
+  color: var(--n-text-muted);
+  text-transform: uppercase;
+  border-bottom: 2px solid var(--n-bg-muted);
+}
+
+.tide-calculator td {
+  padding: 1rem;
+  font-size: 0.95rem;
+  color: var(--n-text-muted);
+  border-bottom: 1px solid var(--n-bg-muted);
+}
+
+@media (max-width: 640px) {
+  .tc-top-row {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+}

package/src/tool/underKeel/bibliography.astro

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

package/src/tool/underKeel/component.astro

@@ -0,0 +1,240 @@
+---
+import './style.css';
+import type { UnderKeelUI } from './index';
+
+interface Props {
+  ui: UnderKeelUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<section id="under-keel-calculator" class="under-keel-calculator" data-ui={JSON.stringify(ui)}>
+  <div class="ukc-main-card">
+    <div class="ukc-calc-sidebar">
+      <div class="ukc-sidebar-header">
+        <h3>{ui.parametersLabel}</h3>
+      </div>
+
+      <div class="ukc-input-set">
+        <div class="ukc-input-block">
+          <label>{ui.boatDraftLabel}</label>
+          <div class="ukc-unit-input">
+            <input type="number" id="boat-draft" value="2.0" step="0.1" />
+            <span>m</span>
+          </div>
+        </div>
+
+        <div class="ukc-input-block">
+          <label>{ui.chartDepthLabel}</label>
+          <div class="ukc-unit-input">
+            <input type="number" id="chart-depth" value="1.5" step="0.1" />
+            <span>m</span>
+          </div>
+        </div>
+
+        <div class="ukc-input-block">
+          <label>{ui.safetyMarginLabel}</label>
+          <div class="ukc-unit-input">
+            <input type="number" id="safety-margin" value="0.5" step="0.1" />
+            <span>m</span>
+          </div>
+        </div>
+
+        <div class="ukc-hr-divider"></div>
+
+        <div class="ukc-input-block">
+          <label>{ui.highTideLabel}</label>
+          <div class="ukc-row">
+            <input type="time" id="high-tide-time" value="12:00" />
+            <input type="number" id="high-tide-height" value="3.5" step="0.1" class="ukc-mini-num" />
+          </div>
+        </div>
+
+        <div class="ukc-input-block">
+          <label>{ui.lowTideLabel}</label>
+          <div class="ukc-row">
+            <input type="time" id="low-tide-time" value="06:00" />
+            <input type="number" id="low-tide-height" value="0.5" step="0.1" class="ukc-mini-num" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ukc-calc-content">
+      <div class="ukc-top-row">
+        <div class="ukc-result-display">
+          <span class="label">{ui.passWindowLabel}</span>
+          <div class="ukc-time-range">
+            <span id="pass-start">--:--</span>
+            <div class="ukc-arrow-sep">
+              <svg viewBox="0 0 24 24" width="24" height="24">
+                <path fill="currentColor" d="M12,4L10.59,5.41L16.17,11H4V13H16.17L10.59,18.59L12,20L20,12L12,4Z"></path>
+              </svg>
+            </div>
+            <span id="pass-end">--:--</span>
+          </div>
+          <span id="pass-status" class="ukc-status-indicator">--</span>
+        </div>
+
+        <div class="ukc-data-group">
+          <div class="ukc-stat-pill">
+            <span>{ui.neededLabel}</span>
+            <strong id="needed-depth">--</strong>
+          </div>
+          <div class="ukc-stat-pill">
+            <span>{ui.tideRequiredLabel}</span>
+            <strong id="needed-tide">--</strong>
+          </div>
+        </div>
+      </div>
+
+      <div class="ukc-visual-container">
+        <div class="ukc-ocean-frame">
+          <div class="ukc-surface-line"></div>
+          <div class="ukc-ship-silhouette" id="viz-boat">
+            <svg viewBox="0 0 100 40" preserveAspectRatio="none">
+              <path fill="currentColor" d="M10,20 L90,20 L80,35 L20,35 Z"></path>
+            </svg>
+          </div>
+          <div class="ukc-water-volume" id="viz-water"></div>
+          <div class="ukc-sand-bottom">
+            <span>{ui.bottomLabel}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  const section = document.getElementById('under-keel-calculator') as HTMLElement;
+  const ui = JSON.parse(section.dataset.ui as string);
+
+  interface CycleData {
+    flooding: boolean; sT: number; dur: number;
+    sH: number; amp: number; mult: number; tH: number;
+  }
+
+  class UnderKeelCalculator {
+    private draftIn: HTMLInputElement;
+    private depthIn: HTMLInputElement;
+    private marginIn: HTMLInputElement;
+    private highTIn: HTMLInputElement;
+    private highHIn: HTMLInputElement;
+    private lowTIn: HTMLInputElement;
+    private lowHIn: HTMLInputElement;
+    private statusInd: HTMLElement;
+    private startSpan: HTMLElement;
+    private endSpan: HTMLElement;
+    private neededD: HTMLElement;
+    private neededT: HTMLElement;
+    private vizWater: HTMLElement;
+    private vizBoat: HTMLElement;
+
+    constructor() {
+      this.draftIn = document.getElementById('boat-draft') as HTMLInputElement;
+      this.depthIn = document.getElementById('chart-depth') as HTMLInputElement;
+      this.marginIn = document.getElementById('safety-margin') as HTMLInputElement;
+      this.highTIn = document.getElementById('high-tide-time') as HTMLInputElement;
+      this.highHIn = document.getElementById('high-tide-height') as HTMLInputElement;
+      this.lowTIn = document.getElementById('low-tide-time') as HTMLInputElement;
+      this.lowHIn = document.getElementById('low-tide-height') as HTMLInputElement;
+      this.statusInd = document.getElementById('pass-status') as HTMLElement;
+      this.startSpan = document.getElementById('pass-start') as HTMLElement;
+      this.endSpan = document.getElementById('pass-end') as HTMLElement;
+      this.neededD = document.getElementById('needed-depth') as HTMLElement;
+      this.neededT = document.getElementById('needed-tide') as HTMLElement;
+      this.vizWater = document.getElementById('viz-water') as HTMLElement;
+      this.vizBoat = document.getElementById('viz-boat') as HTMLElement;
+      this.init();
+    }
+
+    private init() {
+      const inputs = [this.draftIn, this.depthIn, this.marginIn, this.highTIn, this.highHIn, this.lowTIn, this.lowHIn];
+      inputs.forEach((i) => i.addEventListener('input', () => this.calculate()));
+      this.calculate();
+    }
+
+    private tToM(s: string) {
+      const [h, m] = s.split(':').map(Number);
+      return (h ?? 0) * 60 + (m ?? 0);
+    }
+
+    private mToT(m: number) {
+      let mins = Math.round(m) % 1440;
+      if (mins < 0) mins += 1440;
+      return `${String(Math.floor(mins / 60)).padStart(2, '0')}:${String(mins % 60).padStart(2, '0')}`;
+    }
+
+    private getCycleData(tH: number, hH: number, tL: number, hL: number): CycleData {
+      const flooding = tH > tL;
+      return {
+        flooding,
+        sT: flooding ? tL : tH,
+        dur: Math.abs(tH - tL),
+        sH: flooding ? hL : hH,
+        amp: Math.abs(hH - hL),
+        mult: flooding ? 1 : -1,
+        tH,
+      };
+    }
+
+    private findOffset(target: number, dur: number) {
+      const doz = [1 / 12, 2 / 12, 3 / 12, 3 / 12, 2 / 12, 1 / 12];
+      const step = dur / 6;
+      let cum = 0;
+      for (let i = 0; i < 6; i++) {
+        const d = doz[i] ?? 0;
+        if (cum + d >= target) return (i + (target - cum) / d) * step;
+        cum += d;
+      }
+      return dur;
+    }
+
+    private updateUI(txt: string, s: string, e: string, cls: string) {
+      this.statusInd.textContent = txt;
+      this.statusInd.className = `ukc-status-indicator ${cls}`;
+      this.startSpan.textContent = s;
+      this.endSpan.textContent = e;
+    }
+
+    private resolveStatus(tideReq: number, hH: number, hL: number, cycle: CycleData) {
+      const { flooding, sT, dur, sH, amp, mult, tH } = cycle;
+      if (tideReq > hH) { this.updateUI(ui.statusNeverLabel, '--:--', '--:--', 'danger'); return; }
+      if (tideReq <= hL) { this.updateUI(ui.statusAlwaysLabel, this.mToT(sT), this.mToT(sT + dur), 'success'); return; }
+      const tOff = this.findOffset((tideReq - sH) / (mult * amp), dur);
+      const pT = sT + tOff;
+      if (flooding) { this.updateUI(ui.statusFromLabel, this.mToT(pT), this.mToT(tH + (tH - pT)), 'warning'); return; }
+      this.updateUI(ui.statusUntilLabel, this.mToT(tH - (pT - tH)), this.mToT(pT), 'warning');
+    }
+
+    private updateViz(needed: number, sd: number, hH: number, dr: number) {
+      const totalWater = sd + hH;
+      const maxVal = Math.max(needed, totalWater, 5) + 2;
+      const floorPct = 15;
+      const waterPct = floorPct + (totalWater / maxVal) * (100 - floorPct);
+      const boatPct = Math.max(floorPct, Math.min(95, floorPct + ((totalWater - dr) / maxVal) * (100 - floorPct)));
+      this.vizWater.style.height = `${waterPct}%`;
+      this.vizBoat.style.bottom = `${boatPct}%`;
+    }
+
+    private calculate() {
+      const dr = parseFloat(this.draftIn.value);
+      const sd = parseFloat(this.depthIn.value);
+      const mg = parseFloat(this.marginIn.value);
+      const hH = parseFloat(this.highHIn.value);
+      const hL = parseFloat(this.lowHIn.value);
+      if (isNaN(dr) || isNaN(sd) || isNaN(mg) || isNaN(hH)) return;
+      const needed = dr + mg;
+      const tideReq = Math.max(0, needed - sd);
+      this.neededD.textContent = `${needed.toFixed(1)}m`;
+      this.neededT.textContent = `${tideReq.toFixed(1)}m`;
+      const cycle = this.getCycleData(this.tToM(this.highTIn.value), hH, this.tToM(this.lowTIn.value), hL);
+      this.resolveStatus(tideReq, hH, hL, cycle);
+      this.updateViz(needed, sd, hH, dr);
+    }
+  }
+
+  new UnderKeelCalculator();
+</script>