@jjlmoya/utils-nautical 1.22.0 → 1.24.0

package/src/tool/hullSpeed/controller.ts

@@ -0,0 +1,204 @@
+import { sceneSvg, setText } from './dom-views';
+import { bandCopy, formatNumber, kindNote } from './evaluator';
+import {
+  clampLwlMetres,
+  computeHullSpeed,
+  displayLength,
+  LWL_MAX_M,
+  LWL_MIN_M,
+  storeLength,
+} from './logic';
+import type { HullKind, HullSpeedResult, UnitSystem } from './logic';
+import { BOAT_PRESETS, presetIdForLwl } from './presets';
+import { loadState, saveState } from './storage';
+import type { HullSpeedState } from './storage';
+import type { HullSpeedUI } from './ui';
+
+interface MountData {
+  ui: HullSpeedUI;
+}
+
+function el<T extends HTMLElement>(root: HTMLElement, sel: string): T | null {
+  return root.querySelector(sel);
+}
+
+function bindDrag(root: HTMLElement, ui: HullSpeedUI, state: HullSpeedState): void {
+  const scene = el(root, '[data-scene]');
+  if (!scene) return;
+  const grab = { x: 0, lwl: state.lwlMetres };
+  scene.addEventListener('pointerdown', (ev) => {
+    scene.setPointerCapture(ev.pointerId);
+    grab.x = ev.clientX;
+    grab.lwl = state.lwlMetres;
+  });
+  scene.addEventListener('pointermove', (ev) => {
+    if (!scene.hasPointerCapture(ev.pointerId)) return;
+    const width = Math.max(scene.getBoundingClientRect().width, 1);
+    const delta = ((ev.clientX - grab.x) / width) * (LWL_MAX_M - LWL_MIN_M);
+    state.lwlMetres = clampLwlMetres(grab.lwl + delta);
+    saveState(state);
+    paint(root, ui, state);
+  });
+}
+
+function secondarySpeed(result: HullSpeedResult, unit: UnitSystem): string {
+  if (unit === 'imperial') return `${formatNumber(result.hullSpeedMph, 1)} mph`;
+  return `${formatNumber(result.hullSpeedKmh, 1)} km/h`;
+}
+
+function markPressed(root: HTMLElement, sel: string, value: string): void {
+  root.querySelectorAll<HTMLElement>(sel).forEach((node) => {
+    const on = node.getAttribute(sel.includes('kind') ? 'data-kind' : 'data-boat') === value;
+    node.classList.toggle('is-on', on);
+    node.setAttribute('aria-pressed', on ? 'true' : 'false');
+  });
+}
+
+function fillSelect(root: HTMLElement, result: HullSpeedResult): void {
+  markPressed(root, '[data-kind]', result.hullKind);
+  markPressed(root, '[data-boat]', presetIdForLwl(result.lwlMetres) ?? '');
+}
+
+function paintFleet(root: HTMLElement, ui: HullSpeedUI, unit: UnitSystem): void {
+  const suffix = unit === 'imperial' ? ui.lwlUnitFt : ui.lwlUnitM;
+  BOAT_PRESETS.forEach((preset) => {
+    const node = el(root, `[data-boat="${preset.id}"] [data-len]`);
+    const shown = displayLength(preset.lwlMetres, unit);
+    setText(node, `${formatNumber(shown, 1)} ${suffix}`);
+  });
+}
+
+function paint(root: HTMLElement, ui: HullSpeedUI, state: HullSpeedState): void {
+  const result = computeHullSpeed(state);
+  root.dataset.band = result.band;
+  const scene = el(root, '[data-scene]');
+  if (scene) scene.innerHTML = sceneSvg({ result, unit: state.unit });
+  setText(el(root, '[data-kn]'), formatNumber(result.hullSpeedKnots, 1));
+  setText(el(root, '[data-sec]'), secondarySpeed(result, state.unit));
+  setText(el(root, '[data-ratio]'), formatNumber(result.speedLengthRatio, 2));
+  setText(el(root, '[data-froude]'), formatNumber(result.froudeNumber, 3));
+  setText(el(root, '[data-band]'), bandCopy(ui, result.band, state.hullKind));
+  setText(el(root, '[data-note]'), kindNote(ui, state.hullKind));
+  paintLength(root, ui, state, result);
+  paintLog(root, state);
+  fillSelect(root, result);
+  paintFleet(root, ui, state.unit);
+}
+
+function paintLength(
+  root: HTMLElement,
+  ui: HullSpeedUI,
+  state: HullSpeedState,
+  result: HullSpeedResult,
+): void {
+  const unit = state.unit;
+  const length = displayLength(result.lwlMetres, unit);
+  setText(el(root, '[data-lwl-label]'), unit === 'imperial' ? ui.lwlLabelImperial : ui.lwlLabelMetric);
+  setText(el(root, '[data-lwl-unit]'), unit === 'imperial' ? ui.lwlUnitFt : ui.lwlUnitM);
+  const digits = unit === 'imperial' ? 1 : 2;
+  const min = displayLength(LWL_MIN_M, unit);
+  const max = displayLength(LWL_MAX_M, unit);
+  syncNumber({ input: el<HTMLInputElement>(root, '[data-lwl]'), value: length, min, max, digits });
+  syncNumber({ input: el<HTMLInputElement>(root, '[data-lwl-rail]'), value: length, min, max, digits });
+  root.querySelectorAll<HTMLElement>('[data-unit]').forEach((node) => {
+    const on = node.getAttribute('data-unit') === unit;
+    node.classList.toggle('is-on', on);
+    node.setAttribute('aria-pressed', on ? 'true' : 'false');
+  });
+}
+
+function paintLog(root: HTMLElement, state: HullSpeedState): void {
+  syncNumber({
+    input: el<HTMLInputElement>(root, '[data-obs]'),
+    value: state.observedKnots,
+    min: 0,
+    max: 40,
+    digits: 1,
+  });
+  syncNumber({
+    input: el<HTMLInputElement>(root, '[data-obs-rail]'),
+    value: state.observedKnots,
+    min: 0,
+    max: 40,
+    digits: 1,
+  });
+}
+
+interface SyncNumber {
+  input: HTMLInputElement | null;
+  value: number;
+  min: number;
+  max: number;
+  digits: number;
+}
+
+function syncNumber(opts: SyncNumber): void {
+  if (!opts.input) return;
+  opts.input.min = String(opts.min);
+  opts.input.max = String(opts.max);
+  opts.input.value = formatNumber(opts.value, opts.digits);
+}
+
+function bindUnits(root: HTMLElement, ui: HullSpeedUI, state: HullSpeedState): void {
+  root.querySelectorAll<HTMLElement>('[data-unit]').forEach((node) => {
+    node.addEventListener('click', () => {
+      const next = node.getAttribute('data-unit');
+      state.unit = next === 'imperial' ? 'imperial' : 'metric';
+      saveState(state);
+      paint(root, ui, state);
+    });
+  });
+}
+
+function bindLength(root: HTMLElement, ui: HullSpeedUI, state: HullSpeedState): void {
+  const lwl = el<HTMLInputElement>(root, '[data-lwl]');
+  const rail = el<HTMLInputElement>(root, '[data-lwl-rail]');
+  const apply = (raw: string) => {
+    state.lwlMetres = storeLength(Number(raw), state.unit);
+    saveState(state);
+    paint(root, ui, state);
+  };
+  lwl?.addEventListener('input', () => apply(lwl.value));
+  rail?.addEventListener('input', () => apply(rail.value));
+}
+
+function bindLog(root: HTMLElement, ui: HullSpeedUI, state: HullSpeedState): void {
+  const obs = el<HTMLInputElement>(root, '[data-obs]');
+  const rail = el<HTMLInputElement>(root, '[data-obs-rail]');
+  const apply = (raw: string) => {
+    state.observedKnots = Number(raw);
+    saveState(state);
+    paint(root, ui, state);
+  };
+  obs?.addEventListener('input', () => apply(obs.value));
+  rail?.addEventListener('input', () => apply(rail.value));
+}
+
+function bindKinds(root: HTMLElement, ui: HullSpeedUI, state: HullSpeedState): void {
+  root.querySelectorAll<HTMLElement>('[data-kind]').forEach((node) => {
+    node.addEventListener('click', () => {
+      state.hullKind = node.getAttribute('data-kind') as HullKind;
+      saveState(state);
+      paint(root, ui, state);
+    });
+  });
+  root.querySelectorAll<HTMLElement>('[data-boat]').forEach((node) => {
+    node.addEventListener('click', () => {
+      const preset = BOAT_PRESETS.find((item) => item.id === node.getAttribute('data-boat'));
+      if (!preset) return;
+      state.lwlMetres = preset.lwlMetres;
+      saveState(state);
+      paint(root, ui, state);
+    });
+  });
+}
+
+export function mountHullSpeed(root: HTMLElement, data: MountData): void {
+  const state = loadState();
+  bindUnits(root, data.ui, state);
+  bindLength(root, data.ui, state);
+  bindLog(root, data.ui, state);
+  bindDrag(root, data.ui, state);
+  bindKinds(root, data.ui, state);
+  paint(root, data.ui, state);
+}

package/src/tool/hullSpeed/dom-views.ts

@@ -0,0 +1,141 @@
+import { formatNumber } from './evaluator';
+import { boatMarkup } from './hull-draw';
+import type { HullSpeedResult, UnitSystem } from './logic';
+import { displayLength, LWL_MAX_M, LWL_MIN_M } from './logic';
+
+interface Span {
+  stern: number;
+  bow: number;
+  wl: number;
+  width: number;
+  height: number;
+}
+
+function hullSpan(lwlMetres: number): Span {
+  const t = (lwlMetres - LWL_MIN_M) / (LWL_MAX_M - LWL_MIN_M);
+  const hull = 430 + t * 130;
+  const padX = 96 + t * 200;
+  const width = hull + padX * 2;
+  const height = 460;
+  return { stern: padX, bow: padX + hull, wl: 268, width, height };
+}
+
+function hullLift(result: HullSpeedResult): number {
+  if (result.hullKind === 'planing' && result.band === 'above') return 16;
+  if (result.band === 'above') return -10;
+  if (result.band === 'at') return -5;
+  return 0;
+}
+
+function waveAmpPx(result: HullSpeedResult): number {
+  if (result.band === 'below') return 8;
+  if (result.band === 'near') return 16;
+  if (result.band === 'at') return 28;
+  if (result.hullKind === 'planing') return 10;
+  return 36;
+}
+
+function compareKnots(result: HullSpeedResult): number {
+  if (result.observedKnots > 0) return result.observedKnots;
+  return result.hullSpeedKnots;
+}
+
+function waveLengthPx(span: Span, result: HullSpeedResult): number {
+  const hs = result.hullSpeedKnots;
+  const speed = compareKnots(result);
+  const hull = span.bow - span.stern;
+  if (hs <= 0) return hull;
+  return Math.max(hull * 0.35, hull * ((speed * speed) / (hs * hs)));
+}
+
+function waveEnv(x: number, span: Span): number {
+  const mid = (span.stern + span.bow) / 2;
+  const reach = (span.bow - span.stern) * 0.72;
+  const d = Math.abs(x - mid) / reach;
+  if (d <= 1) return 1;
+  return Math.max(0, 1.4 - d * 0.75);
+}
+
+function waveY(x: number, span: Span, result: HullSpeedResult): number {
+  const lambda = waveLengthPx(span, result);
+  const amp = waveAmpPx(result) * waveEnv(x, span);
+  const angle = ((x - span.bow) / lambda) * Math.PI * 2;
+  return span.wl - amp * Math.cos(angle);
+}
+
+function waveFill(span: Span, result: HullSpeedResult): string {
+  const step = Math.max(8, span.width / 90);
+  const bits = [`M 0 ${span.height}`];
+  for (let x = 0; x <= span.width; x += step) {
+    bits.push(`L ${x.toFixed(1)} ${waveY(x, span, result).toFixed(1)}`);
+  }
+  bits.push(`L ${span.width.toFixed(1)} ${span.height} Z`);
+  return `<path class="n-hull-sea" d="${bits.join(' ')}" />`;
+}
+
+function waveStroke(span: Span, result: HullSpeedResult): string {
+  const step = Math.max(8, span.width / 90);
+  const bits = [`M 0 ${waveY(0, span, result).toFixed(1)}`];
+  for (let x = step; x <= span.width; x += step) {
+    bits.push(`L ${x.toFixed(1)} ${waveY(x, span, result).toFixed(1)}`);
+  }
+  return `<path class="n-hull-foamline" d="${bits.join(' ')}" />`;
+}
+
+function foam(span: Span, result: HullSpeedResult): string {
+  const y = waveY(span.bow, span, result);
+  const r = 6 + waveAmpPx(result) / 5;
+  return `<ellipse class="n-hull-foam" cx="${span.bow.toFixed(1)}" cy="${y.toFixed(1)}" rx="${(r * 1.8).toFixed(1)}" ry="${r.toFixed(1)}" />`;
+}
+
+function dimLine(span: Span, label: string): string {
+  const y = span.wl + 112;
+  const mid = (span.stern + span.bow) / 2;
+  return [
+    `<line class="n-hull-dim" x1="${span.stern.toFixed(1)}" y1="${y}" x2="${span.bow.toFixed(1)}" y2="${y}" />`,
+    `<line class="n-hull-dim" x1="${span.stern.toFixed(1)}" y1="${y - 8}" x2="${span.stern.toFixed(1)}" y2="${y + 8}" />`,
+    `<line class="n-hull-dim" x1="${span.bow.toFixed(1)}" y1="${y - 8}" x2="${span.bow.toFixed(1)}" y2="${y + 8}" />`,
+    `<text class="n-hull-dimlabel" x="${mid.toFixed(1)}" y="${y + 24}" text-anchor="middle">${label}</text>`,
+  ].join('');
+}
+
+function seaGroup(span: Span, result: HullSpeedResult): string {
+  const deepY = span.height * 0.72;
+  return [
+    `<rect class="n-hull-sky" x="0" y="0" width="${span.width}" height="${span.height}" />`,
+    waveFill(span, result),
+    `<rect class="n-hull-deep" x="0" y="${deepY}" width="${span.width}" height="${span.height - deepY}" />`,
+    waveStroke(span, result),
+    foam(span, result),
+  ].join('');
+}
+
+function boatGroup(span: Span, lift: number, kind: HullSpeedResult['hullKind']): string {
+  return boatMarkup({
+    stern: span.stern,
+    bow: span.bow,
+    wl: span.wl,
+    lift,
+    kind,
+  });
+}
+
+export function sceneSvg(opts: { result: HullSpeedResult; unit: UnitSystem }): string {
+  const { result, unit } = opts;
+  const span = hullSpan(result.lwlMetres);
+  const lift = hullLift(result);
+  const box = `0 0 ${span.width.toFixed(0)} ${span.height.toFixed(0)}`;
+  const suffix = unit === 'imperial' ? 'ft' : 'm';
+  const label = `${formatNumber(displayLength(result.lwlMetres, unit), 1)} ${suffix}`;
+  return [
+    `<svg class="n-hull-svg" viewBox="${box}" preserveAspectRatio="xMidYMid meet" role="img" aria-hidden="true">`,
+    seaGroup(span, result),
+    boatGroup(span, lift, result.hullKind),
+    dimLine(span, label),
+    '</svg>',
+  ].join('');
+}
+
+export function setText(el: Element | null, value: string): void {
+  if (el) el.textContent = value;
+}

package/src/tool/hullSpeed/entry.ts

@@ -0,0 +1,32 @@
+import type { NauticalToolEntry, ToolLocaleContent } from '../../types';
+import type { HullSpeedUI } from './ui';
+
+export type { HullSpeedUI } from './ui';
+export type HullSpeedLocaleContent = ToolLocaleContent<HullSpeedUI>;
+
+export const hullSpeed: NauticalToolEntry<HullSpeedUI> = {
+  id: 'hull-speed',
+  icons: {
+    bg: 'mdi:ferry',
+    fg: 'mdi:waves',
+  },
+  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';

package/src/tool/hullSpeed/evaluator.ts

@@ -0,0 +1,20 @@
+import type { HullSpeedUI } from './ui';
+import type { HullKind, SpeedBand } from './logic';
+
+export function bandCopy(ui: HullSpeedUI, band: SpeedBand, kind: HullKind): string {
+  if (kind === 'planing' && band === 'above') return ui.bandPlane;
+  if (band === 'below') return ui.bandBelow;
+  if (band === 'near') return ui.bandNear;
+  if (band === 'at') return ui.bandAt;
+  return ui.bandAbove;
+}
+
+export function kindNote(ui: HullSpeedUI, kind: HullKind): string {
+  if (kind === 'planing') return ui.planingNote;
+  if (kind === 'semi') return ui.semiNote;
+  return ui.displacementNote;
+}
+
+export function formatNumber(value: number, digits: number): string {
+  return value.toFixed(digits);
+}

package/src/tool/hullSpeed/hull-draw.ts

@@ -0,0 +1,185 @@
+import type { HullKind } from './logic';
+
+interface Frame {
+  s: number;
+  b: number;
+  w: number;
+  L: number;
+  kind: HullKind;
+}
+
+export interface BoatDraw {
+  stern: number;
+  bow: number;
+  wl: number;
+  lift: number;
+  kind: HullKind;
+}
+
+function frameOf(draw: BoatDraw): Frame {
+  return {
+    s: draw.stern,
+    b: draw.bow,
+    w: draw.wl + draw.lift,
+    L: draw.bow - draw.stern,
+    kind: draw.kind,
+  };
+}
+
+function fb(kind: HullKind, length: number): number {
+  if (kind === 'planing') return 54 + length * 0.03;
+  if (kind === 'semi') return 62 + length * 0.035;
+  return 74 + length * 0.045;
+}
+
+function sheer(frame: Frame): { ds: number; db: number; ox: number; oy: number } {
+  if (frame.kind === 'planing') {
+    return {
+      ds: frame.w - 50,
+      db: frame.w - 58,
+      ox: Math.min(18, frame.L * 0.04),
+      oy: 12,
+    };
+  }
+  const rise = fb(frame.kind, frame.L);
+  return {
+    ds: frame.w - rise * 0.78,
+    db: frame.w - rise * 1.22,
+    ox: Math.min(24, frame.L * 0.05),
+    oy: 16,
+  };
+}
+
+function deckPlane(frame: Frame): string {
+  const { ds, db, ox, oy } = sheer(frame);
+  return `M ${frame.s} ${ds} L ${frame.b} ${db} L ${frame.b + ox} ${db - oy} L ${frame.s + ox} ${ds - oy} Z`;
+}
+
+function topsides(frame: Frame): string {
+  const { ds, db } = sheer(frame);
+  if (frame.kind === 'planing') {
+    const aft = frame.s - 18;
+    return `M ${frame.s} ${frame.w} L ${aft} ${ds} L ${frame.b - 8} ${db} L ${frame.b + 6} ${frame.w - 6} L ${frame.b} ${frame.w} Z`;
+  }
+  const stem = frame.kind === 'displacement' ? 18 : 9;
+  return `M ${frame.s} ${frame.w} L ${frame.s - 10} ${ds} L ${frame.b} ${db} L ${frame.b + stem} ${frame.w - 10} L ${frame.b} ${frame.w} Z`;
+}
+
+function gunwale(frame: Frame): string {
+  const { ds, db } = sheer(frame);
+  return `M ${frame.s} ${ds} L ${frame.b} ${db} L ${frame.b} ${db + 7} L ${frame.s} ${ds + 7} Z`;
+}
+
+function transom(frame: Frame): string {
+  const { ds, ox, oy } = sheer(frame);
+  if (frame.kind === 'planing') {
+    const aft = frame.s - 18;
+    return `M ${frame.s} ${frame.w} L ${aft} ${ds} L ${aft + ox} ${ds - oy} L ${frame.s + ox} ${frame.w - 4} Z`;
+  }
+  return `M ${frame.s} ${frame.w} L ${frame.s} ${ds} L ${frame.s + ox} ${ds - oy} L ${frame.s + ox} ${frame.w - 8} Z`;
+}
+
+function underbody(frame: Frame): string {
+  const s = frame.s;
+  const L = frame.L;
+  const w = frame.w;
+  if (frame.kind === 'planing') {
+    return `M ${s} ${w} L ${s + L * 0.18} ${w + 10} L ${s + L * 0.72} ${w + 11} L ${s + L * 0.92} ${w + 6} L ${frame.b} ${w} Z`;
+  }
+  return `M ${s} ${w} C ${s + L * 0.14} ${w + 32} ${s + L * 0.38} ${w + 48} ${s + L * 0.52} ${w + 46} C ${s + L * 0.72} ${w + 40} ${s + L * 0.9} ${w + 24} ${frame.b} ${w} Z`;
+}
+
+function keelPath(frame: Frame): string {
+  const s = frame.s;
+  const L = frame.L;
+  const w = frame.w;
+  if (frame.kind === 'planing') {
+    return `M ${s + L * 0.16} ${w} L ${s + L * 0.6} ${w} L ${s + L * 0.4} ${w + 22} Z`;
+  }
+  if (frame.kind === 'semi') {
+    return `M ${s + L * 0.22} ${w} L ${s + L * 0.7} ${w} L ${s + L * 0.5} ${w + 52} L ${s + L * 0.32} ${w + 46} Z`;
+  }
+  return `M ${s + L * 0.18} ${w} L ${s + L * 0.66} ${w} L ${s + L * 0.54} ${w + 78} L ${s + L * 0.28} ${w + 70} Z`;
+}
+
+function cabinPath(frame: Frame): string {
+  const { ds } = sheer(frame);
+  if (frame.kind === 'planing') return planingCockpit(frame, ds);
+  const x0 = frame.s + frame.L * 0.27;
+  const x1 = frame.s + frame.L * 0.6;
+  return `<path class="n-hull-cabin" d="M ${x0} ${ds} L ${x0 + 10} ${ds - 46} L ${x1 - 4} ${ds - 44} L ${x1 + 12} ${ds} Z" />`;
+}
+
+function planingCockpit(frame: Frame, ds: number): string {
+  const x0 = frame.s + frame.L * 0.22;
+  const x1 = frame.s + frame.L * 0.48;
+  const x2 = frame.s + frame.L * 0.7;
+  const screen = `M ${x1} ${ds} L ${x1 + 10} ${ds - 32} L ${x2} ${ds - 30} L ${x2 + 8} ${ds} Z`;
+  const console = `M ${x0} ${ds} L ${x0} ${ds - 16} L ${x1 - 4} ${ds - 16} L ${x1 - 4} ${ds} Z`;
+  return `<path class="n-hull-cabin" d="${console}" /><path class="n-hull-glass" d="${screen}" />`;
+}
+
+function ports(frame: Frame): string {
+  if (frame.kind === 'planing') return '';
+  const { ds } = sheer(frame);
+  const y = ds - 22;
+  const x1 = frame.s + frame.L * 0.36;
+  const x2 = frame.s + frame.L * 0.48;
+  return `<circle class="n-hull-glass" cx="${x1.toFixed(1)}" cy="${y.toFixed(1)}" r="5" /><circle class="n-hull-glass" cx="${x2.toFixed(1)}" cy="${y.toFixed(1)}" r="5" />`;
+}
+
+function rig(frame: Frame): string {
+  if (frame.kind === 'planing') return '';
+  const { ds } = sheer(frame);
+  const x = frame.s + frame.L * 0.42;
+  const boom = frame.L * 0.28;
+  return `<path class="n-hull-spar" d="M ${x} ${ds - 44} L ${x} ${ds - 168}" /><path class="n-hull-spar" d="M ${x} ${ds - 70} L ${x + boom} ${ds - 58}" />`;
+}
+
+function rudder(frame: Frame): string {
+  const s = frame.s;
+  const w = frame.w;
+  return `M ${s + 7} ${w} L ${s - 6} ${w + 40} L ${s + 12} ${w + 40} L ${s + 16} ${w} Z`;
+}
+
+function drive(frame: Frame): string {
+  if (frame.kind === 'planing') return outboard(frame);
+  return `<path class="n-hull-keel" d="${rudder(frame)}" />`;
+}
+
+function outboard(frame: Frame): string {
+  const { ds } = sheer(frame);
+  const x = frame.s - 14;
+  const cowling = `M ${x - 7} ${ds - 4} L ${x + 9} ${ds - 4} L ${x + 8} ${ds + 18} L ${x - 6} ${ds + 18} Z`;
+  const shaft = `M ${x} ${ds + 18} L ${x} ${frame.w + 28}`;
+  const foot = `M ${x - 5} ${frame.w + 24} L ${x + 14} ${frame.w + 26} L ${x + 12} ${frame.w + 34} L ${x - 4} ${frame.w + 32} Z`;
+  return `<path class="n-hull-keel" d="${cowling}" /><path class="n-hull-spar" d="${shaft}" /><path class="n-hull-keel" d="${foot}" />`;
+}
+
+function chine(frame: Frame): string {
+  if (frame.kind !== 'planing') return '';
+  const y = frame.w - 16;
+  return `<path class="n-hull-chine" d="M ${frame.s + 6} ${y} L ${frame.b - 10} ${y - 8}" />`;
+}
+
+function boot(frame: Frame): string {
+  return `M ${frame.s} ${frame.w - 4} L ${frame.b} ${frame.w - 4} L ${frame.b} ${frame.w + 5} L ${frame.s} ${frame.w + 5} Z`;
+}
+
+export function boatMarkup(draw: BoatDraw): string {
+  const frame = frameOf(draw);
+  return [
+    `<path class="n-hull-keel" d="${keelPath(frame)}" />`,
+    drive(frame),
+    `<path class="n-hull-body" d="${underbody(frame)}" />`,
+    `<path class="n-hull-topside" d="${topsides(frame)}" />`,
+    `<path class="n-hull-transom" d="${transom(frame)}" />`,
+    `<path class="n-hull-deck" d="${deckPlane(frame)}" />`,
+    `<path class="n-hull-gunwale" d="${gunwale(frame)}" />`,
+    `<path class="n-hull-bootfill" d="${boot(frame)}" />`,
+    chine(frame),
+    cabinPath(frame),
+    ports(frame),
+    rig(frame),
+  ].join('');
+}