/* the turn - desktop dashboard. A purpose-built three-column command surface
for wide screens (mobile keeps the PhoneFrame stack). Left: nav rail. Centre:
the verdict (today's read + the call + heads-up + conditions + next windows).
Right: the live verdict-coloured Walker Bay map. Everything reads from the
same window.TURN the mobile app uses - no second data path, no demo copy. */
// NB: pull primitives off window with UNIQUE names. Top-level `const`s live in
// the shared classic-script scope, so reusing a name another redesign file
// already declared (e.g. Explore.jsx's `ESpotMarker`) is a redeclaration
// SyntaxError that kills this whole script - leaving the stale _ds_bundle
// DesktopShell in place. Hence the Dash* prefix.
const DashSpotMarker = window.TheTurnDesignSystem_583d9e.SpotMarker;
const DESKTOP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"todayLayout": "band",
"theme": "light"
}/*EDITMODE-END*/;
/* ---- heroPhrase: lead with the species only when we're field-confident;
otherwise verdict + the place NAME (not its type). ---- */
function desktopHeroPhrase(call, area) {
const speciesConfident = call.lifecycle === 'validated' || call.lifecycle === 'guide';
const id = call.species && call.species[0];
const sp = id ? speciesById(id) : null;
const topSpName = sp ? (sp.common || '').toLowerCase().replace(/ \/.*/, '') : (id ? String(id).replace(/-/g, ' ') : null);
const placeShort = area ? (area.name || '').split(/\s*\/\s*/)[0] : '';
if (call.verdict === 'go') return speciesConfident && topSpName ? `Go - ${topSpName}` : `Go${placeShort ? ` · ${placeShort}` : ''}`;
if (call.verdict === 'scout') return `Worth a scout${placeShort ? ` · ${placeShort}` : ''}`;
return 'Skip - bait day';
}
/* ---- mark placement: the engine areas carry distKm + compass bearing but no
lat/lng, so we project them onto the schematic coast relative to Hermanus
(the "you are here" at 18%/26%). East pushes right toward Gansbaai, distance
pushes seaward (down). Schematic, not a nautical chart - markers are there to
click into the real area, not to navigate by. ---- */
const DASH_BEARING_DEG = { N: 0, NNE: 22, NE: 45, ENE: 67, E: 90, ESE: 112, SE: 135, SSE: 157, S: 180, SSW: 202, SW: 225, WSW: 247, W: 270, WNW: 292, NW: 315, NNW: 337 };
function dashMarkXY(area) {
const deg = ((DASH_BEARING_DEG[(area.bearing || 'E').toUpperCase()] ?? 90) * Math.PI) / 180;
const d = Math.min(area.distKm || 0, 40);
const ew = Math.sin(deg); // E = +1, W = -1
const ns = Math.cos(deg); // N = +1, S = -1
const x = Math.max(6, Math.min(93, 18 + ew * d * 1.5));
const y = Math.max(20, Math.min(82, 32 - ns * d * 0.5 + d * 0.35));
return { x, y };
}
/* ============================================================
Verdict card - the centrepiece. Green border + glow on a GO.
============================================================ */
function DesktopVerdictCard({ call, area, standout, onArea, onSpecies }) {
const c = VERDICT[call.verdict].color;
const isGo = call.verdict === 'go';
const low = call.confidence === 'low';
const phrase = desktopHeroPhrase(call, area);
const spId = call.species && call.species[0];
const spName = (() => { const s = spId && speciesById(spId); return s ? (s.common || '').replace(/ \/.*/, '') : null; })();
const placeLine = area ? `${area.name}${spName ? ` · ${spName}` : ''}` : '';
const leadLabel = standout ? 'best play' : "where I'd start";
// the chip already carries the method reason - pick a DIFFERENT read line so
// the card doesn't say the same sentence twice.
const readLine = (call.why || []).find(w => w && w !== call.method.reason);
return (
);
}
/* ============================================================
Heads-up - the gate / hazard / eyes-on note, amber-framed.
Only renders when there's something real to flag.
============================================================ */
function DesktopHeadsUp({ call, area }) {
const lines = [];
if (call.checks && call.checks.length) lines.push(...call.checks.slice(0, 2));
// surface a mark hazard if one of the area's marks carries one
const hazardMark = area && (area.marks || []).find(m => m.hazard);
if (hazardMark && hazardMark.hazard) lines.push(hazardMark.hazard);
if (!lines.length) return null;
return (
▲
heads up
{lines.map((l, i) => (
{l}
))}
);
}
/* ============================================================
Next windows - the forward read, from the 7-day ahead.
============================================================ */
function DesktopNextWindows({ onArea }) {
const T = window.TURN;
const days = (T.ahead || []).slice(1).filter(d => d.areaShort); // skip today
if (!days.length) return null;
return (
Next windows
{days.map((d, i) => (
))}
);
}
/* ============================================================
Coast map - full-height verdict-coloured Walker Bay, with a
live wind readout. Same SVG + markers as Explore's map.
============================================================ */
function DesktopCoastMap({ areas, conditions, onArea }) {
const { useState } = React;
const [sel, setSel] = useState(null);
const visible = areas.filter(a => !a.gatedOut);
const w = conditions && conditions.wind;
return (
{/* conditions + 7-day forecast sit up top, same as the phone -
the read of the water, then the week ahead, then the call. */}
setTab('conditions')} />
setAheadOpen(o => !o)} active={aheadActive} onPick={setAheadActive} />
{/* today's read eyebrow */}
{T.today.read && (
{T.today.contenders} marks are level today — the bay shares one set of conditions, so it's close. Your read on mouth state, kelp and what you fancy makes the call.
)}
A read on the conditions, not a guarantee. The sea changes fast — judge the swell and your exit yourself, never turn your back on it, and fish within your depth. If it looks dangerous, it is.