const { useState: usePsCloudState, useMemo: usePsCloudMemo } = React; function psCloudRand(seed) { let s = seed >>> 0; return () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; }; } const PS_SCALE = { frequency: [1.42, 1.46], needmax: [1, 1], spg: [1, 1], pulse: [1, 1], 'gaian-no8': [0.74, 1.1] }; const PS_AR = 0.62; // színpad magasság/szélesség arány az egységtérhez function psCloudScatter(n, seed, ex) { const rnd = psCloudRand(seed); let minD = 6.4, pts = []; for (let pass = 0; pass < 14 && pts.length < n; pass++) { pts = []; const r2 = minD * minD; let guard = 0; while (pts.length < n && guard < 90000) { guard++; const x = 2.5 + rnd() * 95, y = 3 + rnd() * 94; if (x > ex.x0 && x < ex.x1 && y > ex.y0 && y < ex.y1) continue; if (x < 40 && y > 84) continue; let ok = true; for (const p of pts) { const dx = p.x - x, dy = (p.y - y) * PS_AR; if (dx * dx + dy * dy < r2) { ok = false; break; } } if (ok) pts.push({ x, y }); } if (pts.length < n) minD = Math.max(3.6, minD - 0.25); } const r2 = psCloudRand(seed + 11); return pts.slice(0, n).map((p) => ({ ...p, s: 0.85 + r2() * 0.3, d: r2() * -22, t: 16 + r2() * 12, dir: r2() > 0.5 ? 1 : -1 })); } function psCloudMesh(pts, k) { const seen = {}, edges = []; pts.forEach((p, i) => { pts.map((q, j) => ({ j, d: (p.x - q.x) ** 2 + ((p.y - q.y) * PS_AR) ** 2 })).filter((o) => o.j !== i).sort((a, b) => a.d - b.d).slice(0, k) .forEach(({ j }) => { const key = i < j ? i + '-' + j : j + '-' + i; if (!seen[key]) { seen[key] = 1; edges.push([i, j]); } }); }); return edges; } function psCloudOrbits(data, hubs) { const out = {}; data.products.forEach((p) => { const idx = data.items.map((it, i) => (it.p.includes(p.id) ? i : -1)).filter((i) => i >= 0); const hub = hubs[p.id], map = {}; const rings = [ { rx: 11.5, ry: 19, cap: 10 }, { rx: 17.5, ry: 29, cap: 14 }, { rx: 23.5, ry: 39, cap: 20 }, ]; let k = 0; rings.forEach((ring, ri) => { const rest = idx.length - k; const take = ri === rings.length - 1 ? rest : Math.min(ring.cap, Math.ceil(rest / (rings.length - ri))); for (let j = 0; j < take && k < idx.length; j++, k++) { const a = (j / take) * Math.PI * 2 + ri * 0.5 - Math.PI / 2; map[idx[k]] = { x: Math.max(3.5, Math.min(96.5, hub.x + Math.cos(a) * ring.rx)), y: Math.max(5, Math.min(95, hub.y + 6 + Math.sin(a) * ring.ry)), }; } }); out[p.id] = map; }); return out; } function IngredientCloud() { const data = window.PS_CLOUD; const [hover, setHover] = usePsCloudState(null); const [prod, setProd] = usePsCloudState(null); const stageRef = React.useRef(null); const [ex, setEx] = usePsCloudState({ x0: 15, x1: 85, y0: 17, y1: 56 }); const last = React.useRef(null); React.useLayoutEffect(() => { const el = stageRef.current; if (!el) return; const calc = () => { const r = el.getBoundingClientRect(); if (!r.width) return; const bs = Array.prototype.slice.call(el.querySelectorAll('.ps-net-prod')).map((b) => b.getBoundingClientRect()).filter((b) => b.width); if (!bs.length) return; const nx = (v) => ((v - r.left) / r.width) * 100, ny = (v) => ((v - r.top) / r.height) * 100; const box = { x0: nx(Math.min.apply(null, bs.map((b) => b.left))) - 2.5, x1: nx(Math.max.apply(null, bs.map((b) => b.right))) + 2.5, y0: ny(Math.min.apply(null, bs.map((b) => b.top))) - 3, y1: ny(Math.max.apply(null, bs.map((b) => b.bottom))) + 3.5, }; const same = last.current && Math.abs(last.current.x0 - box.x0) < 0.7 && Math.abs(last.current.x1 - box.x1) < 0.7 && Math.abs(last.current.y0 - box.y0) < 0.7 && Math.abs(last.current.y1 - box.y1) < 0.7; if (same) return; last.current = box; setEx(box); }; calc(); let raf = 0; const queue = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(calc); }; const ro = new ResizeObserver(queue); ro.observe(el); Array.prototype.slice.call(el.querySelectorAll('.ps-net-prod')).forEach((b) => ro.observe(b)); window.addEventListener('resize', calc); const t = setTimeout(calc, 900); return () => { ro.disconnect(); window.removeEventListener('resize', calc); clearTimeout(t); cancelAnimationFrame(raf); }; }, []); const pts = usePsCloudMemo(() => psCloudScatter(data.items.length, 20260807, ex), [data.items.length, ex]); const edges = usePsCloudMemo(() => psCloudMesh(pts, 2), [pts]); const hubs = usePsCloudMemo(() => { const n = data.products.length, gap = 13; const o = {}; data.products.forEach((p, i) => { o[p.id] = { x: 50 + (i - (n - 1) / 2) * gap, y: 52 }; }); return o; }, [data.products]); const orbits = usePsCloudMemo(() => psCloudOrbits(data, hubs), [data, hubs]); const at = (i) => (prod && orbits[prod][i]) || pts[i]; const active = hover != null ? data.items[hover] : null; const meta = (active && window.INGREDIENTS && window.INGREDIENTS[active.n]) || {}; const initials = (s) => s.replace(/\(.*?\)/g, '').trim().split(/\s+/).map((w) => w[0]).join('').slice(0, 3).toUpperCase(); const sigOf = (pid) => (data.products.find((p) => p.id === pid) || {}).sig; const sel = prod ? sigOf(prod) : null; return (