/* eslint-disable */ const { useState, useEffect, useRef, useMemo, useCallback } = React; // ============== HOOKS ============== function useScrollProgress() { const [p, setP] = useState(0); useEffect(() => { const onScroll = () => { const max = document.documentElement.scrollHeight - window.innerHeight; setP(max > 0 ? window.scrollY / max : 0); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return p; } // ============== SUB-COMPONENTS ============== function Chrome({ lang, setLang, t }) { const langs = ["ru", "lt", "en"]; return (
V Visagino istorija · XIX a.
{langs.map((l) => ( ))}
); } function Compass() { return ( {Array.from({ length: 32 }).map((_, i) => { const a = (i / 32) * Math.PI * 2; const x1 = 100 + Math.cos(a) * 80; const y1 = 100 + Math.sin(a) * 80; const x2 = 100 + Math.cos(a) * (i % 8 === 0 ? 92 : 86); const y2 = 100 + Math.sin(a) * (i % 8 === 0 ? 92 : 86); return ; })} N S W E ); } function Hero({ t, year }) { return (
1795
·
1914
{year}
{t.hero.year_label}
{t.hero.kicker}

{t.hero.title.split("\n").map((line, i) => (
{i === 1 ? {line} : line}
))}

{t.hero.subtitle}

{t.hero.scroll}
); } function SectionHead({ kicker, num, title, body }) { return (
{kicker}

{title}

{body}

); } function Intro({ t }) { return (
); } function Timeline({ t, onYearChange }) { const events = t.timeline; const [active, setActive] = useState(0); const refs = useRef([]); useEffect(() => { const obs = new IntersectionObserver( (entries) => { const visible = entries .filter((e) => e.isIntersecting) .sort((a, b) => a.target.getBoundingClientRect().top - b.target.getBoundingClientRect().top); if (visible.length) { const idx = Number(visible[0].target.dataset.idx); setActive(idx); onYearChange?.(events[idx].year); } }, { rootMargin: "-30% 0px -50% 0px", threshold: 0 } ); refs.current.forEach((r) => r && obs.observe(r)); return () => obs.disconnect(); }, [events, onYearChange]); return (
{events[active].year}
— {events[active].title}
{events.map((e, i) => (
refs.current[i]?.scrollIntoView({ behavior: "smooth", block: "start" })} > {e.year}
))}
{events.map((e, i) => (
(refs.current[i] = el)} className={`timeline-event ${i === active ? "active" : ""}`} >
{e.year}

{e.title}

{e.text}

))}
); } function MapPanel({ t }) { const points = t.map_points; const [sel, setSel] = useState(points[0].id); const cur = points.find((p) => p.id === sel); return (
{/* Subtle topographic contour lines */} {Array.from({ length: 6 }).map((_, i) => ( ))} {/* Lakes */} {/* Forest hatch */} {/* Roads */} {/* Railway */} {Array.from({ length: 80 }).map((_, i) => ( ))} {/* Labels */} SPB — WARSAW TURNPIKE RAILWAY · 1860s Lake Visaginas Lake Drūkšiai Skėteris {points.map((p, i) => (
setSel(p.id)} > {String(i + 1).padStart(2, "0")} · {p.title}
))}
Schubert · 1:126 000
  • kaimas / khutor
  • palivarkas / folwark
  • parapija / parish
{cur && (
{cur.year} · {cur.id.toUpperCase()}

{cur.title}

{cur.text}

)}
{t.stats.map((s, i) => (
{s.stat}
{s.label}
))}
); } function Estates({ t }) { return (
{t.estates.map((e, i) => (
{e.name}
владельцы{e.owner}
фокус{e.focus}

{e.text}

))}
); } function Parish({ t }) { return (
{t.parish.map((p, i) => (
{p.lat}
{p.name}

{p.text}

))}
); } function Gallery({ t }) { return ( ); } function Method({ t }) { return (
{t.method_steps.map((s, i) => (
{s.n}

{s.title}

{s.text}

))}
{t.units.map((u, i) => (
{u.unit}
{u.value}
{u.text}
))}
); } function Foot({ t }) { return ( ); } // ============== APP ============== function App() { const [T, setT] = useState(window.TWEAK_DEFAULTS); const setTweak = (key, val) => { setT((p) => ({ ...p, [key]: val })); try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: val } }, "*"); } catch(e) {} }; const [lang, setLang] = useState("ru"); const [year, setYear] = useState(window.I18N.ru.timeline[0].year); const t = window.I18N[lang]; // accent color from tweaks useEffect(() => { document.documentElement.style.setProperty("--accent", T.accent); // derive accent-2 (lighter) const m = T.accent.match(/^#([0-9a-f]{6})$/i); if (m) { const r = Math.min(255, parseInt(m[1].slice(0, 2), 16) + 30); const g = Math.min(255, parseInt(m[1].slice(2, 4), 16) + 30); const b = Math.min(255, parseInt(m[1].slice(4, 6), 16) + 30); document.documentElement.style.setProperty("--accent-2", `rgb(${r},${g},${b})`); } }, [T.accent]); // Hero year animates from first to last across the hero scroll const [heroYear, setHeroYear] = useState(t.timeline[0].year); useEffect(() => { const onScroll = () => { const h = window.innerHeight; const sy = Math.min(1, Math.max(0, window.scrollY / h)); const yrs = t.timeline.map((e) => e.year); const idx = Math.min(yrs.length - 1, Math.floor(sy * yrs.length)); setHeroYear(yrs[idx]); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [t]); return ( <> {window.TweaksPanel && ( setTweak("accent", v)} />
{[ ["Amber", "#c98a3c"], ["Brick", "#b04a3a"], ["Moss", "#7a8a3c"], ["Slate", "#6e8aa3"], ["Plum", "#8a5a8a"], ["Bone", "#d6c79a"], ].map(([n, c]) => (
)} ); } window.App = App; ReactDOM.createRoot(document.getElementById("root")).render();