// shared.jsx — shared widgets: hero scene, tulip, photo puzzle demo, map, compass, placeholder. // Region-agnostic so routes can pass their own palette + map geometry. // ═══════════════════════════════════════════════════════════════════ // AnimatedHero — lightweight rolling-hills SVG with an animated car driving a road. // Palette is passed in per route. Region-agnostic (no region-specific landmarks). // ═══════════════════════════════════════════════════════════════════ function AnimatedHero({ palette, style, compact }) { const p = palette; const h = compact ? 260 : 420; return (
{/* Clouds */} {/* Birds */} {/* Hills */}
); } // Build a hero palette from a route function heroPaletteForRoute(r) { return { id: r.id, skyTop: '#e8d9a6', sky: '#f4ead5', hillBack: '#8a8a4a', hillMid: '#6b7a3e', hillFront: r.color, road: '#9b7a4a', car: r.accent, accent: r.accentSoft, tree: r.color, ink: '#2a211a', }; } // ═══════════════════════════════════════════════════════════════════ // AnimatedHeroValley — alternate scene: Sallandse Heuvelrug op de achtergrond, // een meanderende beek door de vallei, boerderij, knotwilgen, koe in de wei, // en een autootje op een onderdoorlopende weg. // ═══════════════════════════════════════════════════════════════════ function AnimatedHeroValley({ palette, style, compact }) { const p = palette; const h = compact ? 260 : 420; return (
{/* Sky */} {/* Sun */} {/* Clouds */} {/* Birds */} {/* Sallandse Heuvelrug — achterste laag, gevarieerde topografie */} {/* Donkerdere achtergrond achter heuvelrug */} {/* Pijnbomen op de heuvelrug */} {[ { x: 60, y: 218, h: 16 }, { x: 110, y: 202, h: 20 }, { x: 170, y: 184, h: 24 }, { x: 230, y: 168, h: 28 }, { x: 290, y: 158, h: 26 }, { x: 360, y: 152, h: 30 }, { x: 420, y: 154, h: 28 }, { x: 480, y: 162, h: 24 }, { x: 540, y: 172, h: 22 }, { x: 610, y: 180, h: 20 }, { x: 670, y: 192, h: 22 }, { x: 730, y: 204, h: 18 }, ].map((t, i) => ( ))} {/* Vallei-vloer middengrond */} {/* Boerderij silhouet */} {/* Schoorsteen */} {/* Verlichte raampjes */} {/* Deur */} {/* Hekje langs weide */} {[40, 90, 140, 240, 320, 400, 470, 540, 610, 680, 750].map((x, i) => ( ))} {/* Schipbeek — meanderende beek */} {/* Glinstering op water */} {/* Knotwilgen langs de beek */} {/* Koe in de weide */} {/* Voorgrond weide */} {/* Weg in voorgrond */} {/* Auto */} {/* Grasspritzers voorgrond */}
); } // Wrapper that picks the right hero scene per route function RouteHero({ route, style, compact }) { const palette = heroPaletteForRoute(route); if (route.heroVariant === 'valley') { return ; } return ; } // ═══════════════════════════════════════════════════════════════════ // InteractiveTulip — tulip diagram demo (bolletje-pijltje). // ═══════════════════════════════════════════════════════════════════ function InteractiveTulip({ color = '#2d3d2a', accent = '#c9572c', bg = '#f5efe3' }) { const options = [ { id: 'left', label: 'Linksaf', km: 1.3, desc: 'kom je bij een afslag en ga je', roads: [{x1:0,y1:48,x2:0,y2:0},{x1:0,y1:0,x2:-38,y2:0},{x1:0,y1:0,x2:0,y2:-38}], arrow: [{x1:0,y1:0,x2:-28,y2:0}], arrowHead: '-34,0 -24,-4 -24,4' }, { id: 'right', label: 'Rechtsaf', km: 2.1, desc: 'kom je bij een t-splitsing en ga je', roads: [{x1:0,y1:48,x2:0,y2:0},{x1:0,y1:0,x2:-38,y2:0},{x1:0,y1:0,x2:38,y2:0}], arrow: [{x1:0,y1:0,x2:28,y2:0}], arrowHead: '34,0 24,-4 24,4' }, { id: 'round', label: '3e afslag', km: 3.4, desc: 'kom je bij een rotonde en neem je de', roads: [{x1:0,y1:48,x2:0,y2:14},{x1:14,y1:0,x2:38,y2:0},{x1:0,y1:-14,x2:0,y2:-38},{x1:-14,y1:0,x2:-38,y2:0}], circle: {cx:0,cy:0,r:14}, arrow: [{x1:-14,y1:0,x2:-28,y2:0}], arrowHead: '-34,0 -24,-4 -24,4' }, ]; const [sel, setSel] = React.useState(options[0]); return (
{/* Zijwegen (lichtgrijs) */} {sel.roads.map((rd, i) => ( ))} {/* Rotonde cirkel */} {sel.circle && } {/* Bolletje (startpunt) */} {/* Pijl (de richting die je op moet) */} {sel.arrow.map((a, i) => ( ))}
{sel.km.toFixed(1)} km
klik om te wisselen
{options.map(o => ( ))}
● = waar je bent   → = waar je heen moet
Na {sel.km.toFixed(1)} km {sel.desc} {sel.label.toLowerCase()}.
); } // ═══════════════════════════════════════════════════════════════════ // PhotoPuzzleDemo // ═══════════════════════════════════════════════════════════════════ function PhotoPuzzleDemo({ color = '#2d3d2a', accent = '#c9572c', bg = '#f5efe3' }) { const word = "KINDEREN"; const targetIdx = 3; // 'D' at index 3 const [step, setStep] = React.useState(0); // 0, 1, 2 const [typed, setTyped] = React.useState(Array(word.length).fill('')); const refs = React.useRef([]); const base = (typeof PAGE_BASE !== 'undefined' ? PAGE_BASE : ''); const onChange = (i, v) => { const letter = v.toUpperCase().slice(-1); if (!/^[A-Z]?$/.test(letter)) return; const next = [...typed]; next[i] = letter; setTyped(next); if (letter && refs.current[i+1]) refs.current[i+1].focus(); }; const correct = typed.join('') === word; const steps = [ { label: '①', title: 'Je krijgt een foto…', desc: 'In je boekje staat een foto van onderweg, maar een deel van de tekst is afgeplakt.' }, { label: '②', title: 'Je vindt de plek…', desc: 'Onderweg herken je de locatie en zie je wat er écht staat.' }, { label: '③', title: 'Je vult het in!', desc: 'Schrijf het verborgen woord op de streepjes. De gemarkeerde letter hoort bij een nummer — zo los je de eindpuzzel op.' }, ]; return (
{/* Step indicator */}
{steps.map((s, i) => ( ))}
{/* Step description */}
{steps[step].desc}
{/* Step content */} {step === 0 && (
Foto met afgeplakte tekst
welk woord is afgeplakt?
{word.split('').map((_, i) => (
{i === targetIdx ? '?' : ''}
))}
63   
)} {step === 1 && (
Afgeplakt
in je boekje
→
Echte situatie onderweg
langs de route!
)} {step === 2 && (
Oplossing
vul het afgeplakte woord in
{word.split('').map((_, i) => ( refs.current[i] = el} value={typed[i]} onChange={e => onChange(i, e.target.value)} maxLength="1" style={{ width: 28, height: 34, border: 'none', borderBottom: `2px solid ${color}`, background: i === targetIdx ? accent + '22' : 'transparent', textAlign: 'center', fontFamily: 'Special Elite, monospace', fontSize: 18, color, outline: 'none', padding: 0, boxShadow: i === targetIdx ? `inset 0 0 0 1.5px ${accent}` : 'none', }}/> ))}
De letter in het gemarkeerde vakje hoort bij nummer 63.
Zo spaar je letters en los je de eindpuzzel op!
{correct && (
✓ Klopt! 63 = D
)}
)}
); } function Placeholder({ label, sub, color = '#2d3d2a', bg = '#e8e2d2', width = '100%', height = 200, style }) { return (
{label}
{sub &&
{sub}
}
); } function CompassRose({ size = 80, color = '#3a2f1e', spin = true }) { return ( {[0, 45, 90, 135, 180, 225, 270, 315].map(a => ( ))} N E S W ); } // ═══════════════════════════════════════════════════════════════════ // RouteMap — generic stylized map, drives its shape from the route object. // ═══════════════════════════════════════════════════════════════════ function RouteMap({ route, stroke, fill, accent, height = 320, showContour = true, style }) { const places = route.mapPlaces || []; const active = route.startpoints || []; return ( {showContour && ( )} {route.mapRiver && ( <> {route.mapRiver.label} )} {places.map(p => { const isActive = active.includes(p.id); return ( {p.big && isActive && } {p.big && } {p.label || p.id} ); })} ); } // Shared keyframes if (typeof document !== 'undefined' && !document.getElementById('shared-anim-styles')) { const s = document.createElement('style'); s.id = 'shared-anim-styles'; s.textContent = ` @keyframes compassSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } `; document.head.appendChild(s); } Object.assign(window, { AnimatedHero, AnimatedHeroValley, RouteHero, heroPaletteForRoute, InteractiveTulip, PhotoPuzzleDemo, Placeholder, CompassRose, RouteMap });