// river-map.jsx — Interactive Middle Fork map + day scrubber. // Stylized topo map with a winding river, six camp markers, and a tiny raft // that travels day by day. Side panel narrates the current day. const RIVER_DAYS = [ { day: 1, date: "Sun, Jun 21", title: "Boundary → Joe Bump", camp: "Joe Bump Camp", miles: 14, elev: "5,940 → 5,560", runtime: "5 hrs", narrative: "Launch morning. Boundary Creek, fast cold water, and the first taste of canyon walls. Velvet Falls comes up sooner than you'd expect — pay attention on the right.", marks: ["Velvet Falls", "First camp"], pos: { x: 0.18, y: 0.08 }, }, { day: 2, date: "Mon, Jun 22", title: "Joe Bump → Marble", camp: "Marble Creek Camp", miles: 17, elev: "5,560 → 5,250", runtime: "6 hrs", narrative: "Pistol Creek Rapid headlines the day. Granite walls open into stretches of ponderosa. Marble Creek is a postcard.", marks: ["Pistol Creek", "Hike option"], pos: { x: 0.32, y: 0.24 }, }, { day: 3, date: "Tue, Jun 23", title: "Marble → Loon", camp: "Loon Creek Camp", miles: 12, elev: "5,250 → 4,920", runtime: "5 hrs", narrative: "Short river day, long afternoon. Tappan Falls in the morning, then time to soak — Sunflower or Loon hot springs depending on water level and group mood.", marks: ["Tappan Falls", "Hot Springs"], pos: { x: 0.45, y: 0.42 }, }, { day: 4, date: "Wed, Jun 24", title: "Loon → Camas", camp: "Camas Creek Camp", miles: 16, elev: "4,920 → 4,560", runtime: "6 hrs", narrative: "Deeper into the wilderness. Bighorn sheep on the canyon walls if you're paying attention. Fishing pockets open up if your guides give the nod.", marks: ["Bighorn sheep", "Fishing"], pos: { x: 0.58, y: 0.58 }, }, { day: 5, date: "Thu, Jun 25", title: "Camas → Big Creek", camp: "Big Creek Camp", miles: 18, elev: "4,560 → 4,140", runtime: "7 hrs", narrative: "The big-water day. Redside Rapid, Weber Rapid, and a string of Class IV that earns its name. Big Creek camp is a reward — wide, sandy, generous.", marks: ["Redside", "Weber"], pos: { x: 0.7, y: 0.72 }, }, { day: 6, date: "Fri, Jun 26", title: "Big Creek → Cache Bar", camp: "Takeout · Cache Bar", miles: 23, elev: "4,140 → 3,640", runtime: "7 hrs", narrative: "Impassable Canyon finale. Vertical granite, the river compressed, and the longest day on the water. By dinner you're in Salmon. Boots dry by morning.", marks: ["Impassable Canyon", "Takeout"], pos: { x: 0.84, y: 0.92 }, }, ]; // River path is a hand-tuned curve through all six camp positions — // generated once so the boat tween follows the same line the eye does. const RIVER_PATH = "M 60 30 C 80 80, 100 100, 130 130 S 170 200, 200 250 S 240 320, 270 360 S 320 430, 360 470"; function RiverMap() { const [active, setActive] = React.useState(0); const [playing, setPlaying] = React.useState(false); const pathRef = React.useRef(null); const [pathLen, setPathLen] = React.useState(800); React.useEffect(() => { if (pathRef.current) { setPathLen(pathRef.current.getTotalLength()); } }, []); React.useEffect(() => { if (!playing) return; const id = setInterval(() => { setActive((a) => { if (a >= RIVER_DAYS.length - 1) { setPlaying(false); return a; } return a + 1; }); }, 1800); return () => clearInterval(id); }, [playing]); const day = RIVER_DAYS[active]; // The active marker's geometric point along the river path — used to // place the boat. We compute it from the SVG path length so the dot // tracks the curve exactly, not just the lat/long pos guess. const boatPos = React.useMemo(() => { if (!pathRef.current) return { x: 60, y: 30 }; const fraction = (active + 0.5) / RIVER_DAYS.length; const p = pathRef.current.getPointAtLength(pathLen * fraction); return { x: p.x, y: p.y }; }, [active, pathLen]); // Day markers placed along the river path at evenly distributed lengths, // not by hand-coded lat/long — keeps them riding the curve cleanly. const stopPositions = React.useMemo(() => { if (!pathRef.current) return RIVER_DAYS.map(() => ({ x: 0, y: 0 })); return RIVER_DAYS.map((_, i) => { const fraction = (i + 0.5) / RIVER_DAYS.length; const p = pathRef.current.getPointAtLength(pathLen * fraction); return { x: p.x, y: p.y }; }); }, [pathLen]); const totalMiles = RIVER_DAYS.reduce((sum, d) => sum + d.miles, 0); return (
{/* ── MAP ─────────────────────────────────────────────────── */}
{/* Topographic background — concentric blobs */} {/* Compass rose */} N {/* River shadow */} {/* The river itself */} {/* River dashes (highlight) */} {/* Start & end labels */} BOUNDARY CREEK PUT-IN · 5,940 FT CACHE BAR TAKEOUT · 3,640 FT {/* Mountain glyphs scattered */} {/* Pine-tree marks */} {[[150, 100], [220, 180], [50, 180], [310, 320], [120, 350], [200, 420]].map(([x, y], i) => ( ))} {/* Camp markers — placed along the path */} {stopPositions.map((p, i) => { const isActive = i === active; return ( setActive(i)} style={{ cursor: "pointer" }}> {isActive ? ( ) : i < active ? ( ) : ( )} DAY {i + 1} ); })} {/* The moving raft glyph — sits ahead of the active stop */}
The Middle Fork ≈ {totalMiles} River Miles · 6 Days
{/* ── SIDE PANEL ─────────────────────────────────────────── */}
Day {String(day.day).padStart(2, "0")} · {day.date}
{day.title}
↳ {day.camp}

{day.narrative}

{day.marks.map((m, i) => ( {m} ))}
Miles {day.miles}
Drop {day.elev.split(" → ")[0]} ft
Time on water {day.runtime}
{/* ── SCRUBBER ─────────────────────────────────────────── */}
{RIVER_DAYS.map((d, i) => ( ))}
); } window.RiverMap = RiverMap;