/* the turn - shared chrome + primitives for the redesign.
Verdict/posture/confidence vocabulary, status pips, chips, the conditions
strip, the 7-day Ahead strip, and the 4-tab bottom nav. Composes the
design-system primitives; exports everything to window for the screens. */
const { Chip: DChip } = window.TheTurnDesignSystem_583d9e;
/* ===== vocabulary maps ===== */
const VERDICT = {
go: { color: 'var(--verdict-go)', label: 'GO' },
scout:{ color: 'var(--verdict-worth)',label: 'SCOUT' },
skip: { color: 'var(--verdict-dont)', label: 'SKIP' },
};
const POSTURE = {
atlas: { label: 'Public Atlas', glyph: '◇' },
scout: { label: 'DIY Scout', glyph: '◈' },
guide: { label: 'Guide', glyph: '◆' },
};
const LADDER = ['none', 'scouted', 'validated', 'guide'];
const LADDER_LABEL = { none: 'none', scouted: 'scouted', validated: 'personally validated', guide: 'guide confident' };
const METHOD_LABEL = { fly: 'fly', spin: 'spin', bait: 'bait' };
const PLATFORM_LABEL = { shore: 'shore', kayak: 'kayak', boat: 'boat' };
const speciesById = (id) => window.TURN.species.find(s => s.id === id);
const areaById = (id) => window.TURN.areas.find(a => a.id === id);
/* ===== verdict badge - GO solid lime (rationed), SCOUT/SKIP outline ===== */
function VerdictBadge({ verdict, size = 'md', style = {} }) {
const v = VERDICT[verdict] || VERDICT.skip;
const isGo = verdict === 'go';
const h = size === 'lg' ? 34 : size === 'sm' ? 24 : 28;
const fs = size === 'lg' ? 15 : size === 'sm' ? 11 : 13;
return (
{v.label}
);
}
/* ===== verdict dot (Explore rank, map) - colour + solidity ===== */
function VerdictDot({ verdict, confidence = 'high', size = 13 }) {
const c = (VERDICT[verdict] || VERDICT.skip).color;
const low = confidence === 'low';
return ;
}
/* ===== posture badge ===== */
function PostureBadge({ posture, style = {} }) {
const p = POSTURE[posture] || POSTURE.atlas;
return (
{p.glyph}
{p.label}
);
}
/* ===== field-confidence ladder badge ===== */
function ConfidenceBadge({ lifecycle, showLabel = true, style = {} }) {
const idx = LADDER.indexOf(lifecycle); // none=0 … guide=3
const isGuide = lifecycle === 'guide';
const c = isGuide ? 'var(--verdict-go)' : 'var(--text-dim)';
return (
{[0, 1, 2, 3].map(i => (
))}
{showLabel && {LADDER_LABEL[lifecycle]}}
);
}
/* ===== SASSI / IUCN / Season status pips (Field Guide) ===== */
const SASSI = { green: { c: 'var(--verdict-go)', t: 'SASSI Green' }, orange: { c: 'var(--verdict-caution)', t: 'SASSI Orange' }, red: { c: 'var(--verdict-danger)', t: 'SASSI Red' } };
function SassiPip({ status, style = {} }) {
const s = SASSI[status] || SASSI.orange;
return ;
}
function IucnPip({ status, style = {} }) {
const danger = ['EN', 'CR', 'VU'].includes(status);
return ;
}
function SeasonPip({ season, style = {} }) {
const open = season.open;
return (
{open ? 'OPEN' : `CLOSED${season.until ? ' · ' + season.until : ''}`}
);
}
function StatusPip({ dot, label, tone = 'var(--text-dim)', style = {} }) {
return (
{dot && }
{label}
);
}
/* ===== lure tier (1-5 dots) ===== */
function LureTier({ tier, style = {} }) {
return (
{[1, 2, 3, 4, 5].map(i => (
))}
);
}
/* ===== species chip (tappable, with silhouette) ===== */
function SpeciesChip({ id, onClick, color = 'var(--text-dim)', style = {} }) {
const sp = speciesById(id);
if (!sp) return null;
return (
);
}
/* ===== method / platform chips ===== */
function TagChip({ children, mono = true, icon = null, style = {} }) {
return (
{icon}{children}
);
}
/* ===== filter chip group ===== */
function FilterChip({ active, onClick, children }) {
return (
);
}
function FilterRow({ label, options, value, onChange, style = {} }) {
return (
{label &&
{label}}
{options.map(o => (
onChange(o.value)}>{o.label}
))}
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}
style={{
display: 'flex', alignItems: 'stretch', background: 'var(--surface)', border: '1px solid var(--border)',
borderRadius: 'var(--r-md)', overflow: 'hidden',
cursor: tappable ? 'pointer' : 'default', ...style,
}}
>
{cells.map((cell, i) => (
{cell.kind === 'wind' && ↑}
{cell.label}
{cell.value}{cell.unit && {cell.unit}}
))}
{tappable && (
)}
{/* grade pip */}
{grade &&
}
{/* label + reason */}
{label}
{reason &&
{reason}
}
{/* value */}
{value}
{sub && {sub}}
{/* TIDE SCHEMATIC */}
tide
{c.tide.height} · next {c.tide.next}
{/* WIND */}
|
{/* SWELL + WAVE */}
|
|
{/* PRESSURE */}
|
{/* TIDE row (re-stated with grade since the schematic above is visual only) */}
|
{/* TEMP */}
|
|
{/* SKY */}
|
|
|
{/* ASTRO */}
|
|
{open && (
{ahead.map((d, i) => {
const isActive = active === i;
return (
);
})}
)}
);
}
/* ===== bottom nav - 4 tabs (Today / Explore / Log / Field Guide) ===== */
function NavGlyph({ name, size = 24 }) {
const P = { fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' };
const g = {
today: ,
explore: ,
log: ,
// From DS4 brief: two wave strokes + a small sun circle
conditions:
,
guide: ,
};
return ;
}
function BottomNav({ tab, onTab, style = {} }) {
const tabs = [
{ id: 'today', label: 'Today', icon: 'today' },
{ id: 'explore', label: 'Explore', icon: 'explore' },
{ id: 'conditions', label: 'Conditions', icon: 'conditions' },
{ id: 'guide', label: 'Field Guide', icon: 'guide' },
];
return (
);
}
/* ===== small shared bits ===== */
function SectionLabel({ children, right, style = {} }) {
return (
{children}
{right}
);
}
function DrillHeader({ onBack, title, sub, right }) {
return (
);
}
Object.assign(window, {
VERDICT, POSTURE, LADDER, LADDER_LABEL, METHOD_LABEL, PLATFORM_LABEL, SASSI,
speciesById, areaById,
VerdictBadge, VerdictDot, PostureBadge, ConfidenceBadge,
SassiPip, IucnPip, SeasonPip, StatusPip, LureTier,
SpeciesChip, TagChip, FilterChip, FilterRow,
ConditionsStrip, AheadStrip, BottomNav, NavGlyph, SectionLabel, DrillHeader,
});