/* ============================================================ RouteMap — mapa aéreo estilizado com carrinho animado percorrendo a rota recomendada (BR-277 → PR-180 → Chácara). ============================================================ */ const { useState: useStateRM, useEffect: useEffectRM, useRef: useRefRM } = React; /* Pontos de virada da rota recomendada (coords no viewBox 1000x720) */ const RM_WAYPOINTS = [ { x: 95, y: 72 }, // 0 Trevo das Cataratas (saída) { x: 592, y: 316 }, // 1 entra na PR-180 (ao lado da PRF) { x: 548, y: 584 }, // 2 vira à esquerda (após Cantinho Caseiro) { x: 716, y: 608 }, // 3 vira à esquerda de novo { x: 770, y: 486 }, // 4 chácara ]; /* path da rota correta: BR-277 reta → entra na PR-180 → passa Cantinho Caseiro → esquerda (reto na estrada rural) → esquerda → reto até a chácara (gancho em C) */ const RM_ROUTE_D = "M95,72 L560,286 Q592,300 586,332 L560,440 L548,560 Q546,584 568,594 L700,606 Q718,610 720,586 L756,500 L770,486"; /* BR-277 que CONTINUA após o trevo (não seguir reto) */ const RM_277_CONT_D = "M592,300 L724,314 L884,320"; /* atalho de terra (NÃO usar) — sai da BR-277 depois do trevo, chega pelo leste */ const RM_BAD_D = "M712,316 L788,410 L808,498 L780,492"; function RouteMap() { const wrapRef = useRefRM(null); const routeRef = useRefRM(null); const trailRef = useRefRM(null); const carRef = useRefRM(null); const [step, setStep] = useStateRM(0); const [playing, setPlaying] = useStateRM(false); const stateRef = useRefRM({ raf: 0, fracs: [], len: 0, start: 0, stepIdx: -1 }); /* mede a rota e as frações de comprimento de cada waypoint */ useEffectRM(() => { const path = routeRef.current; if (!path) return; const len = path.getTotalLength(); const N = 700; const samples = []; for (let i = 0; i <= N; i++) { const p = path.getPointAtLength((i / N) * len); samples.push(p); } const fracs = RM_WAYPOINTS.map((w) => { let best = 0, bd = Infinity; for (let i = 0; i <= N; i++) { const dx = samples[i].x - w.x, dy = samples[i].y - w.y; const d = dx * dx + dy * dy; if (d < bd) { bd = d; best = i; } } return best / N; }); fracs[0] = 0; fracs[fracs.length - 1] = 1; stateRef.current.fracs = fracs; stateRef.current.len = len; if (trailRef.current) { trailRef.current.style.strokeDasharray = len; trailRef.current.style.strokeDashoffset = len; } placeCar(0); }, []); function placeCar(t) { const path = routeRef.current, car = carRef.current; if (!path || !car) return; const len = stateRef.current.len || path.getTotalLength(); const p = path.getPointAtLength(t * len); const ahead = path.getPointAtLength(Math.min(len, t * len + 6)); const ang = (Math.atan2(ahead.y - p.y, ahead.x - p.x) * 180) / Math.PI; car.setAttribute("transform", `translate(${p.x},${p.y}) rotate(${ang})`); if (trailRef.current) trailRef.current.style.strokeDashoffset = len * (1 - t); } function frame(now) { const st = stateRef.current; if (!st.start) st.start = now; const DUR = 8200; let t = (now - st.start) / DUR; if (t > 1) t = 1; placeCar(t); // passo ativo let idx = 0; for (let i = 0; i < st.fracs.length; i++) if (t >= st.fracs[i] - 0.001) idx = i; if (idx !== st.stepIdx) { st.stepIdx = idx; setStep(idx); } if (t < 1) { st.raf = requestAnimationFrame(frame); } else { // pausa e repete st.raf = setTimeout(() => { st.start = 0; st.stepIdx = -1; st.raf = requestAnimationFrame(frame); }, 1600); } } function start() { const st = stateRef.current; cancelAnimationFrame(st.raf); clearTimeout(st.raf); st.start = 0; st.stepIdx = -1; setPlaying(true); st.raf = requestAnimationFrame(frame); } /* autoplay ao entrar na viewport */ useEffectRM(() => { const el = wrapRef.current; if (!el) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce) { placeCar(1); setStep(RM_WAYPOINTS.length - 1); return; } const io = new IntersectionObserver( (es) => { if (es[0].isIntersecting) { start(); io.disconnect(); } }, { threshold: 0.35 } ); io.observe(el); return () => { io.disconnect(); cancelAnimationFrame(stateRef.current.raf); clearTimeout(stateRef.current.raf); }; }, []); const markerColor = (i) => (i <= step ? "#c2a15a" : "#ffffff"); return (
{/* terreno */} {/* manchas de mata */} {[ [150, 520, 90, 60], [250, 640, 120, 70], [820, 200, 110, 80], [905, 430, 80, 70], [470, 640, 120, 65], [760, 470, 80, 55], [180, 360, 70, 48], [70, 470, 80, 60], [430, 360, 60, 44], ].map((b, i) => ( ))} {/* Rio São Salvador */} Rio São Salvador {/* malha urbana (Cascavel) topo-esquerda */} {[0, 1, 2].map((r) => [0, 1, 2].map((c) => ( )) )} {/* rede viária base (vias reais em branco) */} {/* BR-277 reta */} {/* PR-180 e estrada rural (sob a rota) */} {/* ramais menores */} {/* Autódromo (landmark) */} Autódromo {/* BR-277 que CONTINUA (não seguir reto) */} Centralito → {/* atalho de terra — NÃO usar (sai da BR-277 depois do trevo) */} Estrada de terra {/* rota recomendada — base + trilha revelada */} {/* PRF + trevo de acesso à PR-180 */} PRF Polícia Rodoviária Trevo acesso PR-180 {/* Cantinho Caseiro (referência na PR-180) */} Cantinho Caseiro {/* São Domingos */} São Domingos {/* marcadores de virada */} {RM_WAYPOINTS.map((w, i) => { if (i === RM_WAYPOINTS.length - 1) return null; const active = i <= step; return ( {i + 1} ); })} {/* pino da chácara */} = 4 ? "#c2a15a" : "#1c5b39"} stroke="#11331f" strokeWidth="2" /> Chácara {/* carrinho */} {/* rótulos de rodovia */} BR-277 PR-180 Trevo Cataratas
{/* legenda flutuante */}
Rota recomendada Atalho de terra — não use
{/* caption do passo atual — ABAIXO do mapa (não tapa o carrinho) */}
{step === LV.rota.passos.length - 1 ? "★" : step + 1} {LV.rota.passos[step].t} {LV.rota.passos[step].d}
); } window.RouteMap = RouteMap;