/* global React, ReactDOM */
const { useState, useMemo, useEffect, useRef, useCallback } = React;
const MAX_ZONES = 3; // zones + districts combined
const MAX_METRO = 1; // metro segments
// ─── helpers ─────────────────────────────────────────────────────────────────
function parseCode(raw, D) {
const c = (raw || "").trim().toUpperCase();
if (!c) return null;
if (/^([RSG])-(RP|C|LP)$/.test(c)) {
return { kind: "metro", code: c };
}
const zoneMatch = c.match(/^(\d{1,2})([A-Z]+)$/);
if (zoneMatch) {
const did = parseInt(zoneMatch[1], 10);
const d = D.districts.find((x) => Number(x.id) === did);
if (d && d.subzones.find((z) => z.id === c)) return { kind: "zone", code: c, district: did };
}
const dm = c.match(/^(\d{1,2})$/);
if (dm) {
const did = parseInt(dm[1], 10);
if (D.districts.find((x) => Number(x.id) === did)) return { kind: "district", code: c, district: did };
}
return null;
}
function categorize(parsed) {
const zones = parsed.filter((p) => p.kind === "zone" || p.kind === "district");
const metros = parsed.filter((p) => p.kind === "metro");
return { zones, metros };
}
function listingMatches(listing, parsed) {
if (parsed.length === 0) return true;
const { zones, metros } = categorize(parsed);
// Zones: OR. Metros: AND with zones.
const zoneOk = zones.length === 0 ? true : zones.some((p) =>
p.kind === "metro" ? false :
p.kind === "zone" ? listing.zone === p.code :
listing.district === p.district
);
const metroOk = metros.length === 0 ? true : metros.some((p) => listing.metro.includes(p.code));
return zoneOk && metroOk;
}
function readUrlSelection() {
const h = window.location.hash.replace(/^#/, "");
if (!h) return [];
return h.split("+").map((s) => s.trim()).filter(Boolean).slice(0, MAX_ZONES + MAX_METRO);
}
function writeUrlSelection(codes) {
const next = codes.length ? "#" + codes.join("+") : "";
if (window.location.hash !== next) {
window.history.replaceState(null, "", window.location.pathname + window.location.search + next);
}
}
// ─── Map ─────────────────────────────────────────────────────────────────────
// ─── pinch-zoom / pan ──────────────────────────────────────────────────────
function usePinchZoomPan(ref, { min = 1, max = 3 } = {}) {
const [transform, setTransform] = useState({ scale: min, x: 0, y: 0 });
const transformRef = useRef(transform);
transformRef.current = transform;
const gesture = useRef({ mode: null, lastTap: 0 });
const clamp = useCallback((t) => {
const el = ref.current;
const rect = el ? el.getBoundingClientRect() : { width: 0, height: 0 };
const scale = Math.min(max, Math.max(min, t.scale));
const minX = -(rect.width * (scale - 1));
const minY = -(rect.height * (scale - 1));
return {
scale,
x: Math.min(0, Math.max(minX, t.x)),
y: Math.min(0, Math.max(minY, t.y)),
};
}, [ref, min, max]);
useEffect(() => {
const el = ref.current;
if (!el) return;
const dist = (a, b) => Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
const mid = (a, b) => ({ x: (a.clientX + b.clientX) / 2, y: (a.clientY + b.clientY) / 2 });
function onTouchStart(e) {
const touches = e.touches;
const rect = el.getBoundingClientRect();
const g = gesture.current;
if (touches.length === 2) {
g.mode = "pinch";
g.startDist = dist(touches[0], touches[1]);
g.startScale = transformRef.current.scale;
const m = mid(touches[0], touches[1]);
g.anchorX = m.x - rect.left;
g.anchorY = m.y - rect.top;
g.startX = transformRef.current.x;
g.startY = transformRef.current.y;
} else if (touches.length === 1) {
const now = Date.now();
const wasDoubleTap = now - g.lastTap < 300;
g.lastTap = now;
if (wasDoubleTap) {
setTransform({ scale: min, x: 0, y: 0 });
g.mode = null;
return;
}
if (transformRef.current.scale > min + 0.01) {
g.mode = "pan";
g.startClientX = touches[0].clientX;
g.startClientY = touches[0].clientY;
g.startX = transformRef.current.x;
g.startY = transformRef.current.y;
} else {
g.mode = null;
}
}
}
function onTouchMove(e) {
const g = gesture.current;
const touches = e.touches;
if (g.mode === "pinch" && touches.length === 2) {
e.preventDefault();
const d = dist(touches[0], touches[1]);
const scaleDelta = d / (g.startDist || d);
const newScale = g.startScale * scaleDelta;
const nx = g.anchorX * (1 - scaleDelta) + scaleDelta * g.startX;
const ny = g.anchorY * (1 - scaleDelta) + scaleDelta * g.startY;
setTransform(clamp({ scale: newScale, x: nx, y: ny }));
} else if (g.mode === "pan" && touches.length === 1) {
e.preventDefault();
const dx = touches[0].clientX - g.startClientX;
const dy = touches[0].clientY - g.startClientY;
setTransform(clamp({ scale: transformRef.current.scale, x: g.startX + dx, y: g.startY + dy }));
}
}
function onTouchEnd(e) {
const g = gesture.current;
if (e.touches.length === 0) {
g.mode = null;
} else if (e.touches.length === 1 && g.mode === "pinch") {
g.mode = transformRef.current.scale > min + 0.01 ? "pan" : null;
g.startClientX = e.touches[0].clientX;
g.startClientY = e.touches[0].clientY;
g.startX = transformRef.current.x;
g.startY = transformRef.current.y;
}
}
el.addEventListener("touchstart", onTouchStart, { passive: true });
el.addEventListener("touchmove", onTouchMove, { passive: false });
el.addEventListener("touchend", onTouchEnd, { passive: true });
el.addEventListener("touchcancel", onTouchEnd, { passive: true });
return () => {
el.removeEventListener("touchstart", onTouchStart);
el.removeEventListener("touchmove", onTouchMove);
el.removeEventListener("touchend", onTouchEnd);
el.removeEventListener("touchcancel", onTouchEnd);
};
}, [ref, clamp, min]);
const reset = useCallback(() => setTransform({ scale: min, x: 0, y: 0 }), [min]);
return { transform, reset };
}
function KyivMap({ D, parsed, selected, onToggle, hideLabels }) {
const [hover, setHover] = useState(null);
const isOn = (c) => selected.includes(c);
const districtIsTouched = (d) => parsed.some((p) =>
(p.kind === "district" && p.district === d.id) || (p.kind === "zone" && p.district === d.id)
);
const anySelection = parsed.length > 0;
return (
);
}
// ─── Selection bar ───────────────────────────────────────────────────────────
function SelectionChips({ codes, parsed, onRemove, onClear, onShare, shareState, zoneCount, metroCount }) {
if (codes.length === 0) {
return (
▢
Оберіть до {MAX_ZONES} зон + {MAX_METRO} сегмент метро. Метро звужує вибірку (AND), зони — додають (OR).
);
}
return (
{codes.map((c) => {
const p = parsed.find((x) => x.code === c);
const cls = p?.kind === "metro" ? "sel-chip metro" : "sel-chip";
return (
{c}
);
})}
зони {zoneCount}/{MAX_ZONES} · метро {metroCount}/{MAX_METRO}
);
}
// ─── Filter bar ──────────────────────────────────────────────────────────────
function FilterBar({ value, onChange, onSubmit, suggestions, recents, onPickRecent, error, hint }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", close);
return () => document.removeEventListener("mousedown", close);
}, []);
return (
КОД
{ onChange(e.target.value.toUpperCase()); setOpen(true); }}
onFocus={() => setOpen(true)}
onKeyDown={(e) => { if (e.key === "Enter") { onSubmit(value); setOpen(false); } }}
/>
{value && (
)}
{open && (suggestions.length > 0 || recents.length > 0) && (
{recents.length > 0 && (
Нещодавні
{recents.map((r) => (
))}
)}
{suggestions.length > 0 && (
Підказки
{suggestions.map((s) => (
))}
)}
)}
{error &&
{hint || "Невідомий код. Формат: 2A або S-RP."}
}
);
}
// ─── Legend ──────────────────────────────────────────────────────────────────
function Legend({ D, selected, onToggle, counts }) {
const isOn = (c) => selected.includes(c);
return (
Райони (клік — додати)
{D.districts.map((d) => {
const on = isOn(String(d.id));
return (
);
})}
Метро (один сегмент)
{Object.entries(D.metro).map(([key, line]) => (
{line.name}
{line.segments.map((seg, sidx) => {
const code = seg.code;
const first = seg.stations[0]?.label, last = seg.stations[seg.stations.length-1]?.label;
return (
);
})}
))}
RP правий берег ·
C центр ·
LP лівий берег
Підзони
A центр
N північ
S південь
E схід
W захід
);
}
// ─── Listings ────────────────────────────────────────────────────────────────
function pluralize(n) {
if (n === 1) return "об'єкт";
if (n >= 2 && n <= 4) return "об'єкти";
return "об'єктів";
}
function Listings({ items }) {
return (
Знайдено
{items.length} {pluralize(items.length)}
{items.length === 0 && (
∅
Нічого не знайдено
Спробуйте інший код або скиньте фільтр
)}
{items.map((l) => (
{l.area}·
{l.rooms === 1 ? "1 кімн." : l.rooms === 2 ? "2 кімн." : "3 кімн."}
{l.zone}
{l.metro.map((m) => {m})}
))}
);
}
// ─── Root ────────────────────────────────────────────────────────────────────
function App() {
const D = window.KYIV_DATA;
const [code, setCode] = useState("");
const [selected, setSelected] = useState(() => readUrlSelection());
const [recents, setRecents] = useState(["2E", "S-RP", "6N"]);
const [error, setError] = useState(false);
const [errorHint, setErrorHint] = useState(null);
const [hideLabels, setHideLabels] = useState(false);
const [shareState, setShareState] = useState(null);
const mapCanvasRef = useRef(null);
const { transform: mapTransform, reset: resetMapZoom } = usePinchZoomPan(mapCanvasRef, { min: 1, max: 3 });
useEffect(() => { writeUrlSelection(selected); }, [selected]);
const parsed = useMemo(
() => selected.map((c) => parseCode(c, D)).filter(Boolean),
[selected]
);
const { zones, metros } = useMemo(() => categorize(parsed), [parsed]);
const zoneCount = zones.length;
const metroCount = metros.length;
const filtered = useMemo(
() => D.listings.filter((l) => listingMatches(l, parsed)),
[parsed]
);
const counts = useMemo(() => {
const m = {};
filtered.forEach((l) => { m[l.district] = (m[l.district] || 0) + 1; });
return m;
}, [filtered]);
const showError = (hint) => {
setError(true);
setErrorHint(hint || null);
setTimeout(() => { setError(false); setErrorHint(null); }, 2200);
};
const toggle = useCallback((rawCode) => {
const c = (rawCode || "").trim().toUpperCase();
if (!c) return;
const p = parseCode(c, D);
if (!p) { showError(); return; }
setSelected((prev) => {
if (prev.includes(c)) return prev.filter((x) => x !== c);
const prevParsed = prev.map((x) => parseCode(x, D)).filter(Boolean);
const { zones: pz, metros: pm } = categorize(prevParsed);
if (p.kind === "metro" && pm.length >= MAX_METRO) {
// replace existing metro
const filtered = prev.filter((x) => {
const xp = parseCode(x, D); return xp?.kind !== "metro";
});
setRecents((r) => [c, ...r.filter((x) => x !== c)].slice(0, 6));
return [...filtered, c];
}
if ((p.kind === "zone" || p.kind === "district") && pz.length >= MAX_ZONES) {
showError(`Максимум ${MAX_ZONES} зон. Зніміть одну, щоб додати нову.`);
return prev;
}
setRecents((r) => [c, ...r.filter((x) => x !== c)].slice(0, 6));
return [...prev, c];
});
}, []);
const submit = useCallback((val) => {
const v = (val || "").trim().toUpperCase();
if (!v) { setCode(""); return; }
const p = parseCode(v, D);
if (!p) { showError(); return; }
if (selected.includes(v)) { setCode(""); return; }
toggle(v);
setCode("");
}, [selected, toggle]);
const remove = (c) => setSelected((prev) => prev.filter((x) => x !== c));
const clearAll = () => { setSelected([]); setCode(""); };
const suggestions = useMemo(() => {
const q = code.trim().toUpperCase();
if (!q) return [];
const out = [];
D.districts.forEach((d) => {
d.subzones.forEach((z) => {
if (z.id.startsWith(q) && !selected.includes(z.id)) out.push({ code: z.id, label: `${d.name} · ${z.label}` });
});
});
Object.entries(D.metro).forEach(([key, line]) => {
["RP","C","LP"].forEach((seg) => {
if (key === "S" && seg === "LP") return;
const c = `${key}-${seg}`;
if (c.startsWith(q) && !selected.includes(c)) {
out.push({ code: c, label: `${line.name} · ${seg === "RP" ? "правий берег" : seg === "LP" ? "лівий берег" : "центр"}` });
}
});
});
return out.slice(0, 6);
}, [code, selected]);
const share = () => {
writeUrlSelection(selected);
const url = window.location.href;
if (navigator.clipboard) {
navigator.clipboard.writeText(url).then(() => {
setShareState("Скопійовано ✓");
setTimeout(() => setShareState(null), 1800);
});
} else {
setShareState("URL у адресі");
setTimeout(() => setShareState(null), 1800);
}
};
return (
Київ · Зони
до {MAX_ZONES} зон + {MAX_METRO} метро · {filtered.length} {pluralize(filtered.length)}
!selected.includes(r))}
onPickRecent={(c) => submit(c)}
error={error}
hint={errorHint}
/>
Схема міста
{mapTransform.scale > 1.01 && (
)}
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();