// Croquis du Torpen au mouillage — illustration héro animée
// Soleil qui suit l'arc de la journée, eau qui monte/descend avec la marée,
// catamaran qui flotte au niveau de l'eau, ancre au fond, sous-quille mesuré.
// Style: carnet de bord — Fraunces italic, traits dessinés à la main.
function CroquisTorpen({ day, time = null, width = 720, height = 760, palette }) {
// time: Date — defaults to current hour data
const C = palette || {
paper: '#F0E6CC',
paperDk: '#E4D5A8',
ink: '#1A2330',
inkSoft: '#3D4A5C',
sun: '#B8782E',
sea: '#3D6E8E',
seaDk: '#2A5471',
seaSurface: '#3268A0',
sand: '#D9C58E',
sandDk: '#B8A06B',
red: '#A4332B',
rope: '#1A2330',
};
// Pick the hour: closest to time, default = current local hour or noon
const now = time || new Date();
let hour = day.hours.find(h => h.date.getHours() === now.getHours()) || day.hours[12];
// Sun position along arc — based on hour relative to sunrise/sunset
const srH = day.sunrise.getHours() + day.sunrise.getMinutes() / 60;
const ssH = day.sunset.getHours() + day.sunset.getMinutes() / 60;
const curH = hour.date.getHours() + hour.date.getMinutes() / 60;
const dayProgress = Math.max(0, Math.min(1, (curH - srH) / (ssH - srH)));
const isDaylight = curH >= srH && curH <= ssH;
// Sun arc: from left (sunrise) to right (sunset) over a half-ellipse
const W = width, H = height;
const margin = 36;
const arcLeft = margin + 60;
const arcRight = W - margin - 60;
const arcCenterX = (arcLeft + arcRight) / 2;
const arcRadiusX = (arcRight - arcLeft) / 2;
const arcCenterY = H * 0.42;
const arcRadiusY = H * 0.30;
const sunAngle = Math.PI * (1 - dayProgress); // pi=left, 0=right
const sunX = arcCenterX - arcRadiusX * Math.cos(sunAngle);
const sunY = arcCenterY - arcRadiusY * Math.sin(sunAngle);
// === ÉCHELLE PHYSIQUE ===
// 1 mètre = METER_PX pixels. Le bateau (8m × 4m hors-tout) et la profondeur
// sont dessinés avec la même unité, donc tout est cohérent à l'échelle.
const METER_PX = 26;
const BOAT_LEN_M = 8; // longueur Torpen
const BOAT_BEAM_M = 4; // largeur (non visible de profil mais sert pour cabine)
const BOAT_DRAFT_M = 0.7; // tirant d'eau
const BOAT_FREEBOARD_M = 1.0; // hauteur coque hors-eau
const MAST_HEIGHT_M = 9; // hauteur mât
// Le fond est fixe en bas du dessin. La hauteur d'eau (tide ZH) détermine
// où se trouve la surface. Le bateau flotte juste au-dessus.
const tide = hour.tide ?? 2.5;
const sousQuille = hour.depth ?? 1.5;
const seabedY = H * 0.85;
// surface de l'eau = seabed - (profondeur d'eau * METER_PX)
// profondeur d'eau au mouillage = sousQuille + tirant d'eau
const waterDepthM = sousQuille + BOAT_DRAFT_M;
const waterY = seabedY - waterDepthM * METER_PX;
const boatX = W * 0.50;
const verdict = hour.score?.verdict || 'go';
const verdictColor = verdict === 'go' ? '#2E7D4F' : verdict === 'caution' ? '#C8841C' : C.red;
const fmtTime = d => `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
const serif = '"Fraunces", "Times New Roman", serif';
const mono = '"JetBrains Mono", monospace';
return (
);
}
// === Sub-components ===
function Cloud({ x, y, scale = 1 }) {
// Hand-drawn cumulus, two bumps
const s = scale;
return (
);
}
function Catamaran({ cx, cy, colors, lengthPx = 208, freeboardPx = 26, draftPx = 18 }) {
const C = colors;
// Scaled: lengthPx is total length, freeboardPx is hull above water, draftPx below
const halfL = lengthPx / 2;
const hullTop = cy - freeboardPx * 0.4; // deck top
const hullBot = cy + draftPx; // keel underwater
const wlInner = halfL * 0.92;
const wlGap = halfL * 0.08; // small gap between hulls
return (
{/* Left hull underwater bottom curve */}
{/* Right hull */}
{/* Deck — across the two hulls, just above water */}
{/* Cabin — small bump centered */}
);
}
function Anchor({ cx, cy, colors }) {
const C = colors;
// Tiny anchor symbol on seabed
return (
{/* shank */}
{/* crown bar */}
{/* arms (curve) */}
{/* flukes (small) */}
{/* ring on top */}
);
}
window.CroquisTorpen = CroquisTorpen;