// ROAMR — Explore + Route Detail + Saved + Profile screens const { TOKENS: T, Chip, ConfBadge, Stat, SurfaceBar, MapMock, ElevationGraph, ActIcon, SectionHead, IconBtn } = window; // ──────────────────────────────────────────────────────────── // Sample data // ──────────────────────────────────────────────────────────── const ROUTES = [ { id: 'r1', name: 'Roych Clough Byway', region: 'Peak District · Derbyshire', distance: '14.2', elev: '+428', time: '2h 10m', activity: 'moto', diff: 'INTERMEDIATE', conf: 'high', confDays: 8, surfaces: [ { label: 'Tarmac', pct: 22, color: '#5a6253' }, { label: 'Byway', pct: 48, color: T.signal }, { label: 'Rough', pct: 23, color: T.amber }, { label: 'Tech', pct: 7, color: T.rust }, ], routePath: "M40 165 Q 70 140 100 130 Q 130 120 160 100 Q 200 80 230 90 Q 270 110 310 80 Q 340 60 370 75", reports: 3, tags: ['BOAT', 'Big-ADV friendly'], }, { id: 'r2', name: 'Stanage North Loop', region: 'Peak District · S. Yorks', distance: '8.6', elev: '+312', time: '3h 20m', activity: 'hike', diff: 'EASY', conf: 'high', confDays: 14, surfaces: [ { label: 'Path', pct: 68, color: T.signal }, { label: 'Rocky', pct: 24, color: T.amber }, { label: 'Road', pct: 8, color: '#5a6253' }, ], routePath: "M50 160 Q 80 150 110 120 L 150 110 Q 200 100 240 130 Q 280 150 310 130 L 360 100", reports: 1, tags: ['Dog-friendly', 'Circular'], }, { id: 'r3', name: 'Strines Reservoir Gravel', region: 'Bradfield · S. Yorks', distance: '32.8', elev: '+540', time: '2h 45m', activity: 'gravel', diff: 'INTERMEDIATE', conf: 'med', confDays: 38, surfaces: [ { label: 'Tarmac', pct: 38, color: '#5a6253' }, { label: 'Gravel', pct: 54, color: T.signal }, { label: 'Rough', pct: 8, color: T.amber }, ], routePath: "M40 170 Q 80 160 110 140 Q 140 120 180 130 Q 220 140 260 110 Q 300 80 340 95 L 370 80", reports: 0, tags: ['Cafe stop', 'Circular'], }, { id: 'r4', name: 'Glossop UCR Network', region: 'High Peak · Derbyshire', distance: '21.4', elev: '+612', time: '3h 50m', activity: 'moto', diff: 'ADVANCED', conf: 'low', confDays: 94, surfaces: [ { label: 'Tarmac', pct: 12, color: '#5a6253' }, { label: 'Byway', pct: 38, color: T.signal }, { label: 'Rough', pct: 32, color: T.amber }, { label: 'Tech', pct: 18, color: T.rust }, ], routePath: "M30 170 Q 60 140 90 130 L 130 150 Q 170 170 210 130 Q 250 90 290 110 Q 320 130 360 100", reports: 5, warn: true, tags: ['UCR', 'Recent TRO report'], }, ]; // ──────────────────────────────────────────────────────────── // ROUTE CARD // ──────────────────────────────────────────────────────────── function RouteCard({ route, onClick, compact }) { return (
{route.activity.toUpperCase()} {route.warn && ⚠ TRO}
{route.name}
{route.region.toUpperCase()}
{route.reports > 0 && (
{route.reports} RECENT REPORT{route.reports > 1 ? 'S' : ''} · {route.diff}
)}
); } // ──────────────────────────────────────────────────────────── // EXPLORE SCREEN // ──────────────────────────────────────────────────────────── function ExploreScreen({ onOpenRoute, onNavigate }) { const [activeAct, setActiveAct] = React.useState('all'); const acts = [ { k: 'all', label: 'All', icon: null }, { k: 'moto', label: 'Moto' }, { k: 'hike', label: 'Hike' }, { k: 'gravel', label: 'Gravel' }, { k: 'mtb', label: 'MTB' }, { k: '4x4', label: '4×4' }, { k: 'run', label: 'Trail run' }, { k: 'dog', label: 'Dog' }, ]; const filtered = activeAct === 'all' ? ROUTES : ROUTES.filter(r => r.activity === activeAct); return (
{/* Header */}
SHEFFIELD · UK
Good morning.
onNavigate('profile')} label="profile">
{/* Search w/ AI hint */}
onNavigate('ai')} style={{ display: 'flex', alignItems: 'center', gap: 10, background: T.card, border: `1px solid ${T.border}`, padding: '12px 14px', cursor: 'pointer', }}> Find a route, or ask… AI
{/* Weather strip */}
● 11°C OVERCAST · WIND 18 KM/H SW · RAIN 60% PM
{/* Activity chips */}
{acts.map(a => ( setActiveAct(a.k)} icon={a.k !== 'all' ? : null}> {a.label} ))}
{/* Featured: AI route of the day */}
{/* Nearby */} onNavigate('map')} />
{filtered.map(r => onOpenRoute(r)} />)}
{/* Community feed */}
{[ { who: 'Tom R.', when: '2h', type: 'GATE', color: T.amber, body: 'Locked gate at northern end of Stanage Causeway. Walk-around possible on the west side.', route: 'Stanage North Loop' }, { who: 'Sarah K.', when: '14h', type: 'TRO', color: T.rust, body: 'New TRO sign posted on byway near Glossop. Council notice attached.', route: 'Glossop UCR Network' }, { who: 'James M.', when: '1d', type: 'OK', color: T.lichen, body: 'Rode it yesterday in light rain — surface holding up well. Watch for the ford at km 7.', route: 'Roych Clough Byway' }, ].map((r, i) => (
{r.type}
{r.body}
{r.who.toUpperCase()} · {r.when.toUpperCase()} · {r.route.toUpperCase()}
))}
{/* Premium teaser */}
); } // ──────────────────────────────────────────────────────────── // MAP SCREEN // ──────────────────────────────────────────────────────────── function MapScreen({ onOpenRoute }) { const [sel, setSel] = React.useState(ROUTES[0]); const [layers, setLayers] = React.useState(false); const [config, setConfig] = React.useState(window.ROAMR_CONFIG); const [query, setQuery] = React.useState('Peak District'); const [routeStatus, setRouteStatus] = React.useState(''); const [routeError, setRouteError] = React.useState(''); const [liveRoute, setLiveRoute] = React.useState(null); const [saveStatus, setSaveStatus] = React.useState(''); React.useEffect(() => { window.ROAMR_CONFIG_READY?.then(setConfig); const onConfig = (event) => setConfig(event.detail); window.addEventListener('roamr:config', onConfig); return () => window.removeEventListener('roamr:config', onConfig); }, []); const mapTilerReady = config?.maps?.provider === 'maptiler' && config?.maps?.mapTilerKey; const liveTiles = mapTilerReady ? window.ROAMR_MAP.peakDistrictTiles() : []; const profile = sel.activity === 'hike' ? 'foot-walking' : sel.activity === 'moto' ? 'driving-car' : 'cycling-regular'; const minutesToLabel = (minutes) => { if (!minutes && minutes !== 0) return sel.time; const h = Math.floor(minutes / 60); const m = minutes % 60; return h ? `${h}h ${String(m).padStart(2, '0')}m` : `${m}m`; }; const searchRoute = async () => { const text = query.trim(); if (text.length < 2) { setRouteError('Enter a place or area first.'); return; } setRouteError(''); setRouteStatus('Searching OpenRouteService…'); try { const geo = await window.ROAMR_API.geocode(text); const destination = geo.results?.[0]; if (!destination?.coordinates) throw new Error('No matching place found.'); setRouteStatus('Building route…'); const data = await window.ROAMR_API.route([-1.817, 53.349], destination.coordinates, profile); const route = data.route || {}; const nextRoute = { ...sel, id: `live-${Date.now()}`, name: `${text} route draft`, region: destination.label, distance: String(route.distanceKm || sel.distance), elev: route.ascentM ? `+${Math.round(route.ascentM)}` : sel.elev, time: minutesToLabel(route.durationMinutes), conf: 'med', confDays: 0, reports: 0, tags: ['OpenRouteService', 'Draft'], }; setLiveRoute(route); setSel(nextRoute); setRouteStatus(`Live route from OpenRouteService · ${data.provider}`); } catch (err) { setRouteError(err.message || 'Route search failed.'); setRouteStatus(''); } }; const saveSelectedRoute = async () => { setSaveStatus('Saving…'); try { await window.ROAMR_API.saveRoute(sel); setSaveStatus('Saved to Supabase'); } catch (err) { setSaveStatus(err.message || 'Sign in to save routes.'); } }; return (
{/* Big map */}
{mapTilerReady && (
{liveTiles.map(tile => ( ))}
)} {[100,140,180,220,260,300,340,380,420,460,500,540,580,620].map(y => ( ))} {/* multiple routes */} {liveRoute && } {/* pins */} R ! {/* user location */} 53.1424°N · 1.9789°W · 1:25K
{mapTilerReady ? 'MAPTILER LIVE TILES' : 'PLACEHOLDER MAP · ADD MAPTILER KEY'}
{/* Top controls */}
setQuery(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') searchRoute(); }} aria-label="Search destination" placeholder="Search this area…" style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', fontFamily: T.fontB, fontSize: 13, color: T.textHi, }} />
setLayers(!layers)} active={layers} label="layers">
{/* Layers panel */} {layers && (
MAP LAYERS
{[ { k: 'BOAT byways', on: true, c: T.signal }, { k: 'UCR network', on: true, c: T.signal }, { k: 'ORPA candidate', on: false, c: T.amber }, { k: 'TRO/closures', on: true, c: T.rust }, { k: 'Recent reports', on: true, c: T.signalGlow }, { k: 'Contour lines', on: true, c: T.textMute }, ].map(l => (
{l.k}
))}
)} {/* Bottom sheet with selected route */}
{(routeStatus || routeError || saveStatus) && (
{routeError || saveStatus || routeStatus}
)}
); } // ──────────────────────────────────────────────────────────── // ROUTE DETAIL SCREEN // ──────────────────────────────────────────────────────────── function RouteDetailScreen({ route, onBack, onStartNav }) { const r = route || ROUTES[0]; const [reportOpen, setReportOpen] = React.useState(false); const [reportNote, setReportNote] = React.useState(''); const [reportStatus, setReportStatus] = React.useState(''); const [saveStatus, setSaveStatus] = React.useState(''); const gpxFilename = `${r.name.toLowerCase().replace(/[^a-z0-9]+/g, '-') || 'roamr-route'}.gpx`; const escapeXml = value => String(value || '').replace(/[<>&'"]/g, char => ({ '<': '<', '>': '>', '&': '&', "'": ''', '"': '"', }[char])); const downloadGpxBlob = (blob, filename = gpxFilename) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); }; const fallbackGpx = () => { const routeName = escapeXml(r.name); return ` ${routeName} ${routeName} `; }; const exportGpx = async () => { setSaveStatus('Preparing GPX…'); try { const response = await fetch(`/api/routes/${encodeURIComponent(r.id)}/export-gpx`); if (!response.ok) throw new Error('Route GPX is not available from the API yet.'); const header = response.headers.get('content-disposition') || ''; const filename = header.match(/filename="([^"]+)"/)?.[1] || gpxFilename; downloadGpxBlob(await response.blob(), filename); setSaveStatus('GPX downloaded.'); } catch (err) { downloadGpxBlob(new Blob([fallbackGpx()], { type: 'application/gpx+xml' }), gpxFilename); setSaveStatus('GPX downloaded from demo route geometry.'); } }; const saveRoute = async () => { setSaveStatus('Saving…'); try { await window.ROAMR_API.saveRoute(r); setSaveStatus('Saved to Supabase'); } catch (err) { setSaveStatus(err.message || 'Sign in to save routes.'); } }; const submitReport = async () => { if (reportNote.trim().length < 6) { setReportStatus('Add a short note before submitting.'); return; } setReportStatus('Submitting…'); try { await window.ROAMR_API.submitReport(r, reportNote.trim()); setReportNote(''); setReportOpen(false); setReportStatus('Report submitted for moderation'); } catch (err) { setReportStatus(err.message || 'Report failed.'); } }; return (
{/* Hero map */}
{/* Title block */}
}>{r.activity.toUpperCase()} {r.tags && r.tags.map(t => {t})}
{r.name}
{r.region.toUpperCase()}
{/* Stats row */}
{/* Actions */}
Live turn-by-turn and offline packs are disabled for this user-testing build.
{saveStatus &&
{saveStatus}
} {/* Access confidence panel */}
§ ACCESS CONFIDENCE
{[ { label: 'Designated BOAT', src: 'Derbyshire CC · ROW Map · 2024', status: 'ok' }, { label: 'No active TRO', src: 'DCC TRO database · checked 8d ago', status: 'ok' }, { label: 'TRF route reference', src: 'TRF GreenRoad · 2024-Q2', status: 'ok' }, { label: 'Seasonal advisory', src: '"Avoid Nov-Feb during wet" · TRF', status: 'warn' }, ].map((s, i) => (
{s.status === 'ok' ? '✓' : '!'}
{s.label}
{s.src.toUpperCase()}
))}
ROAMR's access confidence is a planning aid, not legal advice. Always verify local signs and authority notices before riding.
{/* Surface profile */}
§ SURFACE PROFILE
{/* Elevation */}
§ ELEVATION
{/* AI summary */}
§ AI SUMMARY
A classic Peak District byway with a manageable rocky descent at km 9. Surface is dry across recent reports — good for a big ADV bike on mixed tyres. The optional pub stop at the halfway point makes this a popular weekend loop. One seasonal advisory: TRF recommends avoiding Nov–Feb during prolonged wet.
GENERATED 14 MIN AGO · 12 SOURCES
{/* Recent reports */}
§ RECENT REPORTS · 3
{reportOpen && (