Spaces:
Running
Running
| /** | |
| * Legend — color-to-name roster legend (unused, kept for reference). | |
| * | |
| * Maps each agent's dot color to their name and lets the user focus the | |
| * camera by clicking a name. | |
| * | |
| * Architecture: not currently rendered — SimCanvas draws labels directly; | |
| * retained as the planned clickable roster. | |
| * | |
| * Design: superseded by on-canvas labels; left in the tree until the | |
| * focus UX is finalized. | |
| */ | |
| export default function Legend({ agents, focusedId, onFocus }) { | |
| if (!agents) return null; | |
| const entries = Object.entries(agents); | |
| if (!entries.length) return null; | |
| return ( | |
| <div style={{ | |
| position: "fixed", | |
| top: 16, | |
| left: 16, | |
| background: "rgba(0,0,0,0.80)", | |
| backdropFilter: "blur(8px)", | |
| border: "1px solid rgba(212,160,74,0.12)", | |
| borderRadius: 6, | |
| padding: "8px 10px", | |
| fontFamily: "'Outfit', sans-serif", | |
| fontSize: 12, | |
| zIndex: 1000, | |
| minWidth: 150, | |
| }}> | |
| <div style={{ | |
| fontSize: 8, | |
| letterSpacing: 1.2, | |
| textTransform: "uppercase", | |
| color: "#6b6b78", | |
| marginBottom: 6, | |
| fontFamily: "'Space Mono', monospace", | |
| }}> | |
| Students | |
| </div> | |
| {entries.map(([id, a]) => { | |
| const focused = id === focusedId; | |
| return ( | |
| <div | |
| key={id} | |
| onClick={() => onFocus && onFocus(focused ? null : id)} | |
| style={{ | |
| display: "flex", | |
| alignItems: "center", | |
| gap: 8, | |
| padding: "3px 4px", | |
| borderRadius: 4, | |
| cursor: "pointer", | |
| background: focused ? "rgba(212,160,74,0.14)" : "transparent", | |
| transition: "background 0.15s", | |
| }} | |
| > | |
| <span style={{ | |
| width: 9, height: 9, borderRadius: "50%", | |
| background: a.color, flexShrink: 0, | |
| boxShadow: focused ? `0 0 8px ${a.color}` : "none", | |
| }} /> | |
| <span style={{ color: focused ? "#eeeef4" : "#c8c8d2", fontWeight: focused ? 600 : 400 }}> | |
| {a.name} | |
| </span> | |
| {a.in_conversation && ( | |
| <span style={{ marginLeft: "auto", fontSize: 9, color: "#d4a04a" }}>chatting</span> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| ); | |
| } | |