{STAGES.map((s) => {
const active = stageKey === s.key;
return (
{ if (window.PZO.sound) window.PZO.sound.click(); onSelect(s.key); }}
title={`${s.name} — ${s.subtitle}`}
style={{
padding: "4px 8px", fontSize: 9, fontFamily: "inherit",
background: active ? T.cyan + "18" : "transparent",
border: `1px solid ${active ? T.border : T.borderDim}`,
color: active ? T.cyan : T.textLo,
borderRadius: 3, cursor: "pointer", letterSpacing: 1,
fontWeight: active ? 700 : 400,
transition: "all 0.2s",
display: "flex", alignItems: "center", gap: 5,
}}>
{s.number}
{active && {s.name} }
);
})}
);
}
// ============================================================
// MAIN APP
// ============================================================
function ProceduralLevelGenerator() {
const [stageKey, setStageKey] = useState("s1");
const [roomCount, setRoomCount] = useState(22);
const [seed, setSeed] = useState("D212000");
const [pathsToExit, setPathsToExit] = useState(2);
const [roomWeights, setRoomWeights] = useState({});
const [hoveredRoom, setHoveredRoom] = useState(null);
const [transform, setTransform] = useState({ x: 0, y: 0, scale: 1 });
const [isPanning, setIsPanning] = useState(false);
const [panStart, setPanStart] = useState({ x: 0, y: 0 });
const containerRef = useRef(null);
const stage = STAGE_MAP[stageKey];
const seedNum = useMemo(() => hashSeed(String(seed)), [seed]);
const weights = useMemo(() =>
stage.rooms.map((r, i) => roomWeights[`${stageKey}:${i}`] ?? 1),
[stageKey, roomWeights, stage.rooms]
);
const setWeight = useCallback((idx, val) => {
setRoomWeights((prev) => ({ ...prev, [`${stageKey}:${idx}`]: val }));
}, [stageKey]);
const level = useMemo(() => generateLevel(stage, roomCount, seedNum, pathsToExit, weights), [stageKey, roomCount, seedNum, pathsToExit, weights]);
const { rooms, connections } = level;
useEffect(() => {
if (rooms.length === 0) return;
const bbox = getBBox(rooms.flatMap((r) => r.vertices));
const c = containerRef.current; if (!c) return;
const cw = c.clientWidth, ch = c.clientHeight;
const lw = bbox.maxX - bbox.minX + 120, lh = bbox.maxY - bbox.minY + 120;
const s = Math.min(cw / lw, ch / lh, 2.5) * 0.85;
setTransform({ x: cw / 2 - ((bbox.minX + bbox.maxX) / 2) * s, y: ch / 2 - ((bbox.minY + bbox.maxY) / 2) * s, scale: s });
}, [rooms]);
const handleMouseDown = useCallback((e) => { if (e.button === 0) { setIsPanning(true); setPanStart({ x: e.clientX - transform.x, y: e.clientY - transform.y }); } }, [transform]);
const handleMouseMove = useCallback((e) => { if (isPanning) setTransform((t) => ({ ...t, x: e.clientX - panStart.x, y: e.clientY - panStart.y })); }, [isPanning, panStart]);
const handleMouseUp = useCallback(() => setIsPanning(false), []);
const handleWheel = useCallback((e) => {
e.preventDefault(); const rect = containerRef.current?.getBoundingClientRect(); if (!rect) return;
const mx = e.clientX - rect.left, my = e.clientY - rect.top, f = e.deltaY > 0 ? 0.9 : 1.1;
setTransform((t) => { const ns = Math.max(0.1, Math.min(8, t.scale * f)), r = ns / t.scale; return { scale: ns, x: mx - (mx - t.x) * r, y: my - (my - t.y) * r }; });
}, []);
useEffect(() => { const el = containerRef.current; if (el) { el.addEventListener("wheel", handleWheel, { passive: false }); return () => el.removeEventListener("wheel", handleWheel); } }, [handleWheel]);
const hRoom = hoveredRoom !== null ? rooms[hoveredRoom] : null;
// Shared panel style
const panelStyle = {
background: THEME.panelBg,
border: `1px solid ${T.border}`,
borderRadius: 4,
backdropFilter: "blur(6px)",
};
return (
{/* ── Topbar ────────────────────────────────────────────── */}
{ if (window.PZO.sound) window.PZO.sound.click(); setSeed(Math.random().toString(36).substring(2, 8)); }} style={{ padding: "4px 12px", fontSize: 9, fontFamily: "inherit",
background: T.cyan + "14", border: `1px solid ${T.border}`, color: T.cyan, borderRadius: 3,
cursor: "pointer", letterSpacing: 2, textTransform: "uppercase", fontWeight: 700 }}
onMouseEnter={(e) => { e.target.style.background = T.cyan + "28"; }}
onMouseLeave={(e) => { e.target.style.background = T.cyan + "14"; }}>⟳ Generate
Seed
{/* ── Viewport ──────────────────────────────────────────── */}
setHoveredRoom(null)} />))}
{/* Zoom indicator — stays in viewport */}
{Math.round(transform.scale * 100)}% · SCROLL ZOOM · DRAG PAN
{/* Hover tooltip — stays in viewport */}
{hRoom &&
{hRoom.templateName}
ID: #{hRoom.id}
ROLE: {(hRoom.role || "fill").toUpperCase()}
TYPE: {hRoom.type}
SOCKETS: {hRoom.sockets.filter((s) => s.connected).length}/{hRoom.sockets.length}
{hRoom.sockets.some((s) => s.isLoop) &&
◆ Loop connection
}
}
{/* ── Bottom bar — Generation controls + Room weights ─── */}
{/* Mirrors the topbar visually. Two sections separated by
a vertical divider: fixed-width generation controls on
the left, flexible room-weight grid on the right. */}
e.stopPropagation()} onWheel={(e) => e.stopPropagation()}
style={{
display: "flex", alignItems: "stretch", gap: 0,
padding: 0,
borderTop: `1px solid ${T.borderDim}`,
background: T.bgPanel + "ee",
backdropFilter: "blur(8px)",
fontSize: 9, letterSpacing: 1,
flexShrink: 0,
}}>
{/* Left section: Rooms + Paths to Exit */}
{/* Rooms slider */}
{/* Paths to Exit slider */}
{/* Vertical divider */}
{/* Right section: Room weights — 2-column wrap grid */}
Room Weights
{stage.rooms.map((rm, i) => {
const w = weights[i];
const isZero = w === 0;
return (
{/* Room name — fixed width, truncated */}
{rm.name}
{/* Slider */}
{w === 0 ? "—" : w.toFixed(1)}
);
})}