/* CleanDeen — shared components & icons (exported to window) */ const { useState } = React; /* ---------------- Icons (simple, line-based) ---------------- */ const Ic = { leaf: (p) => (), flask: (p) => (), shield: (p) => (), check: (p) => (), phone: (p) => (), mail: (p) => (), pin: (p) => (), cal: (p) => (), plus: (p) => (), arrow: (p) => (), home: (p) => (), building: (p) => (), sparkle: (p) => (), drop: (p) => (), menu: (p) => (), x: (p) => (), chevron: (p) => (), chevDown: (p) => (), lock: (p) => (), user: (p) => (), grid: (p) => (), clip: (p) => (), chart: (p) => (), expand: (p) => (), users: (p) => (), star: (p) => (), trash: (p) => (), cube: (p) => (), camera: (p) => (), upload: (p) => (), eye: (p) => (), send: (p) => (), refresh: (p) => (), }; /* ---------------- Wordmark ---------------- */ function Wordmark({ size = "", onDark = false, onClick }) { return ( CleanDeen ); } /* ---------------- Severity chip ---------------- */ function SevChip({ level, small }) { const s = window.CD.SEVERITY[level]; return {s.label}; } /* ---------------- Score ring ---------------- */ function ScoreRing({ value, size = 64, label }) { const r = (size - 8) / 2, c = 2 * Math.PI * r; const off = c * (1 - value / 100); const col = value >= 92 ? "var(--sev-clean)" : value >= 80 ? "var(--sev-med)" : "var(--sev-high)"; return (
{value}
{label &&
{label}
}
); } /* ---------------- Faux-3D isometric room ---------------- */ function IsoRoom({ room, phase, selectedId, onSelect, interactive = false, onInteract, expandable = false, infoOnSelect = false }) { const sizeFor = { high: 96, med: 70, low: 50, clean: 28 }; const [spin, setSpin] = React.useState(-46); const [tilt, setTilt] = React.useState(56); const [grabbing, setGrabbing] = React.useState(false); const [fs, setFs] = React.useState(false); const [info, setInfo] = React.useState(null); const stageRef = React.useRef(null); const drag = React.useRef({ active: false, x: 0, y: 0, spin: -46, tilt: 56, moved: false, capturing: false }); const engaged = React.useRef(false); // Close fullscreen on Esc React.useEffect(() => { if (!fs) return; const onKey = (e) => { if (e.key === "Escape") setFs(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [fs]); // Auto-rotate turntable until the user interacts (then it stays put) React.useEffect(() => { if (!interactive) return; let last = performance.now(), raf; const tick = (now) => { const dt = Math.min(now - last, 60); last = now; if (!engaged.current && !drag.current.active) setSpin(s => s - dt * 0.011); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [interactive]); function onDown(e) { if (!interactive) return; engaged.current = true; // first touch stops the auto-rotate for good drag.current = { active: true, x: e.clientX, y: e.clientY, spin, tilt, moved: false, capturing: false }; } function onMove(e) { if (!interactive || !drag.current.active) return; const dx = e.clientX - drag.current.x, dy = e.clientY - drag.current.y; // Only treat as a drag (and capture the pointer) once it actually moves, // so a plain click still reaches the blob underneath. if (!drag.current.moved && Math.abs(dx) + Math.abs(dy) > 4) { drag.current.moved = true; setGrabbing(true); try { stageRef.current.setPointerCapture(e.pointerId); drag.current.capturing = true; } catch (_) {} } if (drag.current.moved) { setSpin(drag.current.spin + dx * 0.45); setTilt(Math.max(26, Math.min(84, drag.current.tilt - dy * 0.28))); } } function onUp(e) { if (!interactive || !drag.current.active) return; const moved = drag.current.moved; if (drag.current.capturing) { try { stageRef.current.releasePointerCapture(e.pointerId); } catch (_) {} } drag.current.active = false; setGrabbing(false); if (moved && onInteract) onInteract(); } function handleBlob(key, hs) { if (drag.current.moved) return; if (infoOnSelect) setInfo({ key, hs }); if (onSelect) onSelect(key, hs); } function blob(hs, faceCls) { const lvl = phase === "before" ? hs.before : hs.after; const d = sizeFor[lvl]; const key = `${faceCls}-${hs.id}`; const sel = selectedId === key || (info && info.key === key); const clickable = onSelect || infoOnSelect; return (
handleBlob(key, hs)} title={window.CD.MICROBES[hs.microbe].short} > {lvl === "clean" && }
); } const floor = room.hotspots.filter(h => h.surface === "floor"); const wallL = room.hotspots.filter(h => h.surface === "wallL"); const wallR = room.hotspots.filter(h => h.surface === "wallR"); const sceneStyle = interactive ? { transform: `rotateX(${tilt}deg) rotateZ(${spin}deg)`, transition: "none" } : null; const pop = info ? window.CD.MICROBES[info.hs.microbe] : null; const popLvl = info ? (phase === "before" ? info.hs.before : info.hs.after) : null; return (
{wallL.map(h => blob(h, "wallL"))}
{wallR.map(h => blob(h, "wallR"))}
{floor.map(h => blob(h, "floor"))}
{interactive &&
Drag to rotate{infoOnSelect ? " · tap a spot" : ""}
}
{expandable && ( )} {info && pop && (
{info.hs.detail}
{pop.name}

What it does: {pop.harm}

)}
); } function IsoLegend() { return (
High load Moderate Low Cleared
); } Object.assign(window, { Ic, Wordmark, SevChip, ScoreRing, IsoRoom, IsoLegend });