/** * Server injects window.__PACEMAKER__ = { races, raceExtra } (see views/pacemaker.html). */ const __PM = typeof window !== "undefined" && window.__PACEMAKER__ ? window.__PACEMAKER__ : {}; const RACES = Array.isArray(__PM.races) ? __PM.races : []; const RACE_EXTRA = __PM.raceExtra && typeof __PM.raceExtra === "object" ? __PM.raceExtra : {}; const FILTERS_DIST = ["All", "5K", "10K", "Half", "Full", "Ultra"]; const GLOBAL_MAX_GAIN = 2000; const PROFILE_MAX_H = 68; const PROFILE_MIN_H = 5; const TODAY = new Date(); function weeksUntil(dateStr) { const parts = dateStr.match(/(\d+)\s(\w+)\s(\d+)/); if (!parts) return null; const d = new Date(`${parts[2]} ${parts[1]}, ${parts[3]}`); if (Number.isNaN(d.getTime())) return null; return Math.round((d - TODAY) / (7 * 24 * 60 * 60 * 1000)); } function planStart(weeks) { const d = new Date(TODAY.getTime() + (weeks - 14) * 7 * 24 * 60 * 60 * 1000); return d.toLocaleDateString("en-GB", { day: "numeric", month: "short" }); } function ElevationProfile({ points, gain, width = 320 }) { const scaledH = Math.max(PROFILE_MIN_H, (gain / GLOBAL_MAX_GAIN) * PROFILE_MAX_H); const totalH = PROFILE_MAX_H + 6; const baselineY = totalH - 2; const max = Math.max(...points), range = max || 1; const pts = points.map((v, i) => { const x = (i / (points.length - 1)) * width; const y = baselineY - (v / range) * scaledH; return `${x},${y}`; }); const polyline = pts.join(" "); const area = `${pts[0]} ${polyline} ${width},${baselineY} 0,${baselineY}`; const uid = `eg${gain}w${width}`; return (
{gain}m 0
); } function DiffBar({ val, max = 10, color = "var(--track)" }) { return (
{Array.from({ length: max }).map((_, i) => (
))}
); } function Nav({ onBack, showBack }) { return ( ); } /* ─── RACE CARD ─────────────────────────────────────────────────── */ function RaceCard({ race, onSelect }) { const [tracked, setTracked] = React.useState(false); const distLabel = race.distance >= 45 ? "Ultra" : race.distance >= 30 ? "30K+" : race.distance >= 21 ? "Half" : race.distance >= 8 ? "10K" : "5K"; return (
e.currentTarget.style.background = "var(--surface-2)"} onMouseLeave={e => e.currentTarget.style.background = "var(--surface)"} >
{race.city_area} {distLabel} {race.surface === "Trail" && Trail} {race.pbPotential >= 8 && PB Course}
★ {(Number(race.rating) || 0).toFixed(1)}

{race.name}

{race.date} · {race.time}
Elevation profile
↑ {race.elevGain}m {race.terrain}
0km{(race.distance/2).toFixed(0)}km{race.distance}km
{[ { label:"Difficulty", val:race.difficulty, bar:true, color: race.difficulty > 7 ? "#ef4444" : race.difficulty > 4 ? "#f59e0b" : "#4ade80" }, { label:"PB potential", val:race.pbPotential, bar:true, color:"var(--track)" }, { label:"Reviews", val:(Number(race.reviews) || 0).toLocaleString(), bar:false }, ].map((s, i) => (
{s.label}
{s.bar ? (<>
{s.val}/10
) : (
{s.val}
★{(Number(race.rating) || 0).toFixed(1)} avg
)}
))}
Avg finish ({race.avgFinish.label})
{race.avgFinish.time}
Tracking
{race.tracking.toLocaleString()}
{race.chipTimed && Chip}
{race.tags.map(t => {t})}
); } /* ─── FILTER BAR ─────────────────────────────────────────────────── */ function FilterBar({ cities, city, setCity, distFilter, setDistFilter, sortBy, setSortBy }) { return (
{/* Row 1: City + Distance */}
Region {cities.map(c => ( ))}
Sort {["Date","Rating","Elevation","Price"].map(s => ( ))}
{/* Row 2: Distance */}
Distance {FILTERS_DIST.map(f => ( ))}
); } /* ─── RACE DETAIL PAGE ──────────────────────────────────────────── */ function RaceDetailPage({ race, onBack }) { const [tracked, setTracked] = React.useState(false); const [search, setSearch] = React.useState(""); const [expandAll, setExpandAll] = React.useState(false); const detailsRef = React.useRef([]); const capN = Math.max(0, Number(race.cap) || 0); const enteredN = Math.max(0, Number(race.entered) || 0); const placesLeftN = Math.max(0, capN - enteredN); const orgHandle = String(race.organizer || "organiser") .replace(/\s/g, "") .toLowerCase(); // Elevation SVG const rawPts = race.elevProfile; const pts = Array.isArray(rawPts) && rawPts.length > 1 ? rawPts : [0, Math.max(0, Number(race.elevGain) || 0)]; const maxElev = Math.max(...pts); const svgW = 600, svgH = 68; const coords = pts.map((v, i) => ({ x: (i / (pts.length - 1)) * svgW, y: svgH - (v / (maxElev || 1)) * (svgH - 8) - 2, })); const polylineStr = coords.map(c => `${c.x},${c.y}`).join(" "); const areaPath = `M 0,${svgH} L ${coords.map(c=>`${c.x},${c.y}`).join(" L ")} L ${svgW},${svgH} Z`; const peakIdx = pts.indexOf(maxElev); const peakKm = ((peakIdx / (pts.length - 1)) * race.distance).toFixed(0); const peakX = coords[peakIdx]?.x ?? 0; const peakY = coords[peakIdx]?.y ?? 0; // Smart links const mapsUrl = `https://www.google.com/maps/search/${encodeURIComponent(race.logistics.hq)}`; const trainlineUrl = `https://www.trainline.com/search/${encodeURIComponent(race.logistics.station?.split("—")[0]?.trim() ?? "")}`; const windyUrl = `https://www.windy.com/?${encodeURIComponent(race.logistics.hq)}`; const calDate = race.date.replace(/Sun |Sat |Mon /,"").replace(" ","").replace(" ","-"); // Calendar link (Google Calendar) function calUrl() { const d = new Date(`${race.date.replace(/^(Sun|Sat|Mon|Tue|Wed|Thu|Fri) /,"")} ${race.time}`); const pad = n => String(n).padStart(2,"0"); const fmt = d => `${d.getFullYear()}${pad(d.getMonth()+1)}${pad(d.getDate())}T${pad(d.getHours())}${pad(d.getMinutes())}00`; const end = new Date(d.getTime() + (race.distance >= 40 ? 8 : race.distance >= 21 ? 3 : 2) * 3600000); return `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(race.name)}&dates=${fmt(d)}/${fmt(end)}&details=${encodeURIComponent(`startlist.run race brief`)}&location=${encodeURIComponent(race.logistics.hq)}`; } // Search filtering const handleSearch = (e) => setSearch(e.target.value.toLowerCase()); const handleExpand = () => { const next = !expandAll; setExpandAll(next); detailsRef.current.forEach(el => { if (el) el.open = next; }); }; const weeks = weeksUntil(race.date); const extra = RACE_EXTRA[race.id]; const baseWeeks = weeks ? Math.max(0, weeks - 14) : 0; const pct = weeks ? Math.max(0, Math.min(100, ((52 - weeks) / 52) * 100)) : 0; // Helper: section icon SVGs const Icon = ({ d }) => ( ); // Helper: linked row value const L = ({ href, children }) => {children} ↗; // Accordion section const Sec = ({ icon, title, summary, children, warn: isWarn, idx }) => (
detailsRef.current[idx] = el}>
{icon}
{title}
{summary &&
{summary}
}
▾
{children}
); const Row = ({ label, val, link }) => (
{label} {link ? {val} : val}
); return (