/* the turn - Conditions. The full read of what the water's doing right now,
and a grading system: how each condition stacks for a catch today.
Reached by tapping the conditions strip (Today/Explore) or the Conditions
tab. Fishability gauge + factor grades, tide curve, barometric trend, wind
& swell compass dials, the day's light (sunrise/sunset) and the moon phase.
All charts/dials are data-driven SVG; lime stays rationed (verdict only). */
/* ---- time helpers ---- */
function mins(hhmm) { const [h, m] = String(hhmm).split(':').map(Number); return h * 60 + (m || 0); }
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
/* ---- grading vocabulary. Good conditions read GREEN so the page scans at a
glance: lime = this is working for you, amber = working against, muted =
dead. (Earlier the design rationed lime to the GO badge; the owner wants
the good stuff lit up instead.) ---- */
const GRADE = {
A: { word: 'prime', tone: 'var(--verdict-go)', fill: 4 },
B: { word: 'good', tone: 'var(--verdict-go)', fill: 3 },
C: { word: 'fair', tone: 'var(--text-label)', fill: 2 },
D: { word: 'poor', tone: 'var(--verdict-caution)', fill: 1 },
E: { word: 'dead', tone: 'var(--verdict-dont)', fill: 0 },
};
/* impact meter - 4 segments, filled by grade */
function ImpactMeter({ grade, style = {} }) {
const g = GRADE[grade] || GRADE.C;
return (
{[0, 1, 2, 3].map(i => (
))}
);
}
/* grade badge - letter + impact word */
function GradeBadge({ grade, impact, style = {} }) {
const g = GRADE[grade] || GRADE.C;
return (
{impact && {impact}}
{grade}
);
}
/* ---- info affordance + deep-dive panel (the 'why it matters' learn layer) ---- */
/* The visible "i" stays 26px; the BUTTON is a 48px invisible square around it.
Cold-thumb misses at 05:00 are real - tap target floor is 48px even where
the visual stays small. */
function InfoButton({ open, onClick }) {
return (
);
}
/* Split content on blank lines (\n\n) and render each as its own paragraph
so the comprehensive info blocks read like a properly laid-out brief. */
function Paragraphs({ text, color = 'var(--text-dim)' }) {
const parts = String(text || '').split(/\n\s*\n/);
return (
);
}
/* ============================================================
LIGHT - daylight arc (sunrise → sunset) + sun position
============================================================ */
function DaylightArc({ sun, now }) {
const W = 300, H = 96, padX = 18, baseY = 80, peakY = 14;
const rise = mins(sun.rise), set = mins(sun.set), n = mins(now);
const x0 = padX, x1 = W - padX;
const arc = `M ${x0} ${baseY} A ${(x1 - x0) / 2} ${baseY - peakY} 0 0 1 ${x1} ${baseY}`;
const f = (n - rise) / (set - rise);
const up = f >= 0 && f <= 1;
const fc = clamp(f, 0, 1);
const sx = x0 + fc * (x1 - x0);
const sy = baseY - (baseY - peakY) * Math.sin(Math.PI * fc);
return (
);
}
/* ============================================================
MOON - phase disc (terminator path) + meta
============================================================ */
function MoonGlyph({ illum = 50, waxing = true, size = 64 }) {
const C = 50, R = 44;
const k = clamp(illum / 100, 0, 1);
// invert lit-fraction → shadow-circle offset (two equal circles): lit = 1 - lens/π
let lo = 0, hi = 1;
for (let i = 0; i < 40; i++) {
const u = (lo + hi) / 2;
const lens = 2 * Math.acos(u) - 2 * u * Math.sqrt(Math.max(0, 1 - u * u));
(1 - lens / Math.PI) < k ? (lo = u) : (hi = u);
}
const dx = ((lo + hi)) * R; // dx/R = 2u
const shadowCx = C + (waxing ? -dx : dx); // lune (lit) sits opposite the shadow centre
const clipId = 'moonclip';
return (
);
}
/* ---- small two-up / three-up meta row ---- */
function MetaPair({ items }) {
return (
{items.map((it, i) => (
{it.label}
{it.value}
))}
);
}
/* ============================================================
Conditions screen
============================================================ */
function Conditions() {
const T = window.TURN;
const c = T.conditions;
// The demo bootstrap and any offline state carry only a thin conditions stub
// (no per-factor series). The detail surface needs live engine data - show an
// honest placeholder instead of white-screening on undefined.series.
const hasLive = c && c.tide && Array.isArray(c.tide.series)
&& c.wind && Array.isArray(c.wind.series)
&& c.pressure && Array.isArray(c.pressure.series);
if (!hasLive) {
return (
Conditions
Pulling live conditions…
Tide, pressure and wind fill in automatically the moment the forecast lands - usually a second or two. If it lingers, check your connection.