@jjlmoya/utils-nautical 1.22.0 → 1.23.0

package/src/tool/hullSpeed/sailboat-hull-speed-calculator.css

@@ -0,0 +1,504 @@
+:root {
+  --n-sky: #dce8ee;
+  --n-deep: #2f6f7d;
+  --n-sea: #4a97a6;
+  --n-foam: #f7fbfc;
+  --n-ink: #1b333c;
+  --n-mute: #4e6872;
+  --n-line: #ddd6c8;
+  --n-topside: #fbf7ef;
+  --n-deck: #e3d6c0;
+  --n-wet: #3a342e;
+  --n-keel: #2a2622;
+  --n-cabin: #8a4d2c;
+  --n-glass: #7ec8dc;
+  --n-board: #fffcf6;
+  --n-sole: #f2eee4;
+  --n-sole-ink: #1b333c;
+  --n-sole-mute: #5b7078;
+  --n-track: #e5dfd2;
+  --n-field: #fffcf6;
+  --n-on: #fff;
+  --n-focus: #c45a2a;
+  --n-rail: #2f6f7d;
+  --n-spar: #1c1814;
+}
+
+.theme-dark {
+  --n-sky: #0c1822;
+  --n-deep: #06232c;
+  --n-sea: #0f5366;
+  --n-foam: #6ed9ce;
+  --n-ink: #e6f0f3;
+  --n-mute: #9db4be;
+  --n-line: #2a3c44;
+  --n-topside: #e6dfd2;
+  --n-deck: #b9ab94;
+  --n-wet: #1a1714;
+  --n-keel: #0c0b0a;
+  --n-cabin: #c47848;
+  --n-glass: #f0c56e;
+  --n-board: #1a2228;
+  --n-sole: #12181c;
+  --n-sole-ink: #e6f0f3;
+  --n-sole-mute: #8ea3ac;
+  --n-track: #1c282e;
+  --n-field: #0e1418;
+  --n-on: #24353c;
+  --n-focus: #e08a62;
+  --n-rail: #6ed9ce;
+  --n-spar: #f0ebe3;
+}
+
+.n-hull {
+  --n-sky: #dce8ee;
+  --n-deep: #2f6f7d;
+  --n-sea: #4a97a6;
+  --n-foam: #f7fbfc;
+  --n-ink: #1b333c;
+  --n-mute: #4e6872;
+  --n-line: #ddd6c8;
+  --n-topside: #fbf7ef;
+  --n-deck: #e3d6c0;
+  --n-wet: #3a342e;
+  --n-keel: #2a2622;
+  --n-cabin: #8a4d2c;
+  --n-glass: #7ec8dc;
+  --n-board: #fffcf6;
+  --n-sole: #f2eee4;
+  --n-sole-ink: #1b333c;
+  --n-sole-mute: #5b7078;
+  --n-track: #e5dfd2;
+  --n-field: #fffcf6;
+  --n-on: #fff;
+  --n-focus: #c45a2a;
+  --n-rail: #2f6f7d;
+  --n-spar: #1c1814;
+
+  background: var(--n-sky);
+  color: var(--n-ink);
+  overflow: hidden;
+}
+
+.theme-dark .n-hull {
+  --n-sky: #0c1822;
+  --n-deep: #06232c;
+  --n-sea: #0f5366;
+  --n-foam: #6ed9ce;
+  --n-ink: #e6f0f3;
+  --n-mute: #9db4be;
+  --n-line: #2a3c44;
+  --n-topside: #e6dfd2;
+  --n-deck: #b9ab94;
+  --n-wet: #1a1714;
+  --n-keel: #0c0b0a;
+  --n-cabin: #c47848;
+  --n-glass: #f0c56e;
+  --n-board: #1a2228;
+  --n-sole: #12181c;
+  --n-sole-ink: #e6f0f3;
+  --n-sole-mute: #8ea3ac;
+  --n-track: #1c282e;
+  --n-field: #0e1418;
+  --n-on: #24353c;
+  --n-focus: #e08a62;
+  --n-rail: #6ed9ce;
+  --n-spar: #f0ebe3;
+}
+
+.n-hull-stage {
+  position: relative;
+  background: var(--n-sky);
+}
+
+.n-hull-scene {
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.n-hull-svg {
+  display: block;
+  width: 100%;
+  height: 26rem;
+}
+
+.n-hull-sky {
+  fill: var(--n-sky);
+}
+
+.n-hull-deep {
+  fill: var(--n-deep);
+}
+
+.n-hull-sea {
+  fill: var(--n-sea);
+}
+
+.n-hull-foamline {
+  fill: none;
+  stroke: var(--n-foam);
+  stroke-width: 2.2;
+  stroke-linejoin: round;
+}
+
+.n-hull-foam {
+  fill: var(--n-foam);
+}
+
+.n-hull-topside {
+  fill: var(--n-topside);
+}
+
+.n-hull-deck {
+  fill: var(--n-deck);
+}
+
+.n-hull-transom {
+  fill: var(--n-deck);
+}
+
+.n-hull-gunwale {
+  fill: var(--n-keel);
+}
+
+.n-hull-bootfill {
+  fill: var(--n-ink);
+}
+
+.n-hull-body {
+  fill: var(--n-wet);
+}
+
+.n-hull-keel {
+  fill: var(--n-keel);
+}
+
+.n-hull-cabin {
+  fill: var(--n-cabin);
+}
+
+.n-hull-glass {
+  fill: var(--n-glass);
+}
+
+.n-hull-spar {
+  fill: none;
+  stroke: var(--n-spar);
+  stroke-width: 3;
+  stroke-linecap: square;
+}
+
+.n-hull-boot {
+  stroke: var(--n-ink);
+  stroke-width: 1.5;
+}
+
+.n-hull-dim {
+  stroke: var(--n-ink);
+  stroke-width: 1.6;
+}
+
+.n-hull-dimlabel {
+  fill: var(--n-ink);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.n-hull-chine {
+  fill: none;
+  stroke: var(--n-keel);
+  stroke-width: 2.2;
+}
+
+.n-hull-band {
+  position: absolute;
+  top: 0.9rem;
+  left: 1rem;
+  z-index: 2;
+  margin: 0;
+  max-width: 20rem;
+  padding: 0.28rem 0.7rem;
+  background: var(--n-board);
+  color: var(--n-ink);
+  font-size: 0.92rem;
+  font-weight: 600;
+  border-radius: 999px;
+}
+
+.n-hull-units {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 2;
+}
+
+.n-hull-seg {
+  display: flex;
+  gap: 0.15rem;
+  padding: 0.18rem;
+  background: var(--n-track);
+  border-radius: 999px;
+}
+
+.n-hull-seg button {
+  appearance: none;
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: var(--n-mute);
+  min-height: 2.15rem;
+  padding: 0.25rem 0.85rem;
+  font: inherit;
+  font-size: 0.82rem;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.n-hull-seg button.is-on {
+  background: var(--n-on);
+  color: var(--n-ink);
+}
+
+.n-hull-forms {
+  border-radius: 1.1rem;
+}
+
+.n-hull-forms button {
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  font-size: 0.75rem;
+  padding: 0.4rem 0.3rem 0.45rem;
+  border-radius: 0.9rem;
+}
+
+.n-hull-forms svg {
+  width: 3.2rem;
+  height: 1.1rem;
+}
+
+.n-hull-plate {
+  position: absolute;
+  left: 1rem;
+  bottom: 1.2rem;
+  z-index: 2;
+  background: transparent;
+  color: var(--n-ink);
+  border: 0;
+  padding: 0;
+  min-width: 9rem;
+}
+
+.n-hull-plate-k,
+.n-hull-alt,
+.n-hull-nums {
+  margin: 0;
+  color: var(--n-mute);
+  font-size: 0.78rem;
+}
+
+.n-hull-kn {
+  margin: 0.05rem 0 0.1rem;
+  font-size: 3.2rem;
+  font-weight: 800;
+  line-height: 0.92;
+  letter-spacing: -0.04em;
+  font-variant-numeric: tabular-nums;
+}
+
+.n-hull-kn small {
+  margin-left: 0.3rem;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: var(--n-mute);
+}
+
+.n-hull-nums span {
+  color: var(--n-ink);
+  font-weight: 700;
+  margin-right: 0.15rem;
+}
+
+.n-hull-nums span + span {
+  margin-left: 0.7rem;
+}
+
+.n-hull-sole {
+  background: var(--n-sole);
+  color: var(--n-sole-ink);
+  padding: 1.05rem 1.15rem 1.2rem;
+  display: grid;
+  gap: 0.9rem;
+}
+
+.n-hull-meters {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.n-hull-field {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.n-hull-field > span:first-of-type {
+  color: var(--n-sole-mute);
+  font-size: 0.8rem;
+}
+
+.n-hull-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.n-hull-row > span {
+  color: var(--n-sole-ink);
+  font-size: 0.92rem;
+}
+
+.n-hull input[type='number'] {
+  width: 100%;
+  min-height: 2.6rem;
+  padding: 0.35rem 0.75rem;
+  border: 0;
+  border-radius: 0.7rem;
+  background: var(--n-field);
+  color: var(--n-ink);
+  font: inherit;
+  font-size: 1.12rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.n-hull-rail {
+  appearance: none;
+  width: 100%;
+  height: 0.35rem;
+  background: var(--n-track);
+  border: 0;
+  border-radius: 99px;
+}
+
+.n-hull-rail::-webkit-slider-thumb {
+  appearance: none;
+  width: 1.05rem;
+  height: 1.05rem;
+  background: var(--n-ink);
+  border: 0;
+  border-radius: 99px;
+  cursor: pointer;
+}
+
+.n-hull-rail::-moz-range-thumb {
+  width: 1.05rem;
+  height: 1.05rem;
+  background: var(--n-ink);
+  border: 0;
+  border-radius: 99px;
+  cursor: pointer;
+}
+
+.n-hull-hint,
+.n-hull-note {
+  margin: 0;
+  color: var(--n-sole-mute);
+  font-size: 0.88rem;
+  max-width: 46rem;
+}
+
+.n-hull-fleet {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.15rem 0.1rem;
+}
+
+.n-hull-fleet button {
+  appearance: none;
+  display: grid;
+  justify-items: start;
+  gap: 0.12rem;
+  border: 0;
+  background: transparent;
+  color: var(--n-sole-mute);
+  min-height: 2.4rem;
+  padding: 0.3rem 0.7rem;
+  font: inherit;
+  font-size: 0.78rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.n-hull-fleet button.is-on {
+  color: var(--n-sole-ink);
+}
+
+.n-hull-fleet b {
+  font-size: 0.8rem;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+.n-hull-fleet button::after {
+  content: '';
+  display: block;
+  height: 2px;
+  background: currentcolor;
+}
+
+.n-hull-fleet [data-boat='dinghy']::after {
+  width: 1.1rem;
+}
+
+.n-hull-fleet [data-boat='daysailer']::after {
+  width: 1.55rem;
+}
+
+.n-hull-fleet [data-boat='cruiser']::after {
+  width: 2.1rem;
+}
+
+.n-hull-fleet [data-boat='bluewater']::after {
+  width: 2.7rem;
+}
+
+.n-hull-fleet [data-boat='workboat']::after {
+  width: 3.4rem;
+}
+
+.n-hull-units button:focus-visible,
+.n-hull-forms button:focus-visible,
+.n-hull-fleet button:focus-visible,
+.n-hull input:focus-visible {
+  outline: 2px solid var(--n-focus);
+  outline-offset: 2px;
+}
+
+@media (min-width: 720px) {
+  .n-hull-meters {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .n-hull-kn {
+    font-size: 3.5rem;
+  }
+
+  .n-hull-svg {
+    height: 28rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .n-hull-svg {
+    height: 18.5rem;
+  }
+
+  .n-hull-kn {
+    font-size: 2.4rem;
+  }
+
+  .n-hull-forms {
+    flex-wrap: wrap;
+  }
+}

package/src/tool/hullSpeed/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { hullSpeed } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await hullSpeed.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/hullSpeed/storage.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_STATE, parseState } from './storage';
+
+describe('hull speed storage', () => {
+  it('returns defaults for invalid json', () => {
+    expect(parseState('{')).toEqual(DEFAULT_STATE);
+  });
+
+  it('clamps saved waterline and speed', () => {
+    const parsed = parseState(
+      JSON.stringify({ lwlMetres: 90, hullKind: 'semi', observedKnots: -2, unit: 'imperial' }),
+    );
+    expect(parsed.lwlMetres).toBe(40);
+    expect(parsed.hullKind).toBe('semi');
+    expect(parsed.observedKnots).toBe(0);
+    expect(parsed.unit).toBe('imperial');
+  });
+
+  it('rejects unknown hull kinds', () => {
+    const parsed = parseState(JSON.stringify({ hullKind: 'foil' }));
+    expect(parsed.hullKind).toBe('displacement');
+  });
+});

package/src/tool/hullSpeed/storage.ts

@@ -0,0 +1,65 @@
+import type { HullKind, UnitSystem } from './logic';
+import { clampLwlMetres, clampObservedKnots } from './logic';
+
+export interface HullSpeedState {
+  lwlMetres: number;
+  hullKind: HullKind;
+  observedKnots: number;
+  unit: UnitSystem;
+}
+
+const KEY = 'n-hull-speed-v1';
+
+const KINDS: HullKind[] = ['displacement', 'semi', 'planing'];
+
+export const DEFAULT_STATE: HullSpeedState = {
+  lwlMetres: 10,
+  hullKind: 'displacement',
+  observedKnots: 0,
+  unit: 'metric',
+};
+
+function isKind(value: string): value is HullKind {
+  return KINDS.includes(value as HullKind);
+}
+
+function asKind(value: unknown): HullKind {
+  if (typeof value === 'string' && isKind(value)) return value;
+  return DEFAULT_STATE.hullKind;
+}
+
+function readUnit(value: string): UnitSystem {
+  if (value === 'imperial') return 'imperial';
+  return 'metric';
+}
+
+export function loadState(): HullSpeedState {
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) return { ...DEFAULT_STATE };
+    return parseState(raw);
+  } catch {
+    return { ...DEFAULT_STATE };
+  }
+}
+
+export function parseState(raw: string): HullSpeedState {
+  try {
+    const data = JSON.parse(raw) as Partial<HullSpeedState>;
+    const hullKind = asKind(data.hullKind);
+    return {
+      lwlMetres: clampLwlMetres(Number(data.lwlMetres)),
+      hullKind,
+      observedKnots: clampObservedKnots(Number(data.observedKnots)),
+      unit: readUnit(String(data.unit)),
+    };
+  } catch {
+    return { ...DEFAULT_STATE };
+  }
+}
+
+export function saveState(state: HullSpeedState): void {
+  try {
+    localStorage.setItem(KEY, JSON.stringify(state));
+  } catch {}
+}

package/src/tool/hullSpeed/ui.ts

@@ -0,0 +1,43 @@
+export interface HullSpeedUI {
+  [key: string]: string;
+  metric: string;
+  imperial: string;
+  unitGroup: string;
+  sceneLabel: string;
+  hullSpeedLabel: string;
+  knotsUnit: string;
+  kmhUnit: string;
+  mphUnit: string;
+  ratioLabel: string;
+  froudeLabel: string;
+  lwlLabelMetric: string;
+  lwlLabelImperial: string;
+  lwlUnitM: string;
+  lwlUnitFt: string;
+  observedLabel: string;
+  observedHint: string;
+  stretchHint: string;
+  hullKindLabel: string;
+  displacement: string;
+  semi: string;
+  planing: string;
+  boatsLabel: string;
+  dinghy: string;
+  daysailer: string;
+  cruiser: string;
+  bluewater: string;
+  workboat: string;
+  bandBelow: string;
+  bandNear: string;
+  bandAt: string;
+  bandAbove: string;
+  bandPlane: string;
+  planingNote: string;
+  displacementNote: string;
+  semiNote: string;
+  waveLegend: string;
+  waterLegend: string;
+  markLegend: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+}

package/src/tools.ts

@@ -6,6 +6,7 @@ import { SAIL_AREA_TOOL } from './tool/sailArea';
 import { SPEED_CONVERTER_TOOL } from './tool/speedConverter';
 import { ENDURANCE_TOOL } from './tool/endurance';
 import { ANCHOR_SCOPE_TOOL } from './tool/anchorScope';
+import { HULL_SPEED_TOOL } from './tool/hullSpeed';
 import type { ToolDefinition } from './types';
 
 export const ALL_TOOLS: ToolDefinition[] = [
@@ -16,6 +17,7 @@ export const ALL_TOOLS: ToolDefinition[] = [
   SPEED_CONVERTER_TOOL,
   ENDURANCE_TOOL,
   ANCHOR_SCOPE_TOOL,
+  HULL_SPEED_TOOL,
 ];
 
 export {
@@ -26,5 +28,6 @@ export {
   SPEED_CONVERTER_TOOL,
   ENDURANCE_TOOL,
   ANCHOR_SCOPE_TOOL,
+  HULL_SPEED_TOOL,
 };