File size: 1,841 Bytes
e4ebc53 e0e4431 e4ebc53 e0e4431 e4ebc53 e0e4431 e4ebc53 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import type { RouteInfo } from '../types';
import { NODE_COLORS } from '../constants';
interface Props {
info: RouteInfo | null;
}
const PATH_TYPE_LABELS: Record<string, string> = {
room: 'Room',
subnode: 'Room Subnode',
corridor: 'Corridor',
door: 'Door',
outside: 'Outdoor',
floor_transition: 'Floor Transition',
};
// Show the navigationally meaningful types first.
const TYPE_ORDER = ['room', 'door', 'floor_transition', 'corridor', 'outside', 'subnode'];
export default function RouteStats({ info }: Props) {
if (!info || !info.found) return null;
const entries = TYPE_ORDER.filter((t) => info.nodeTypes[t]).map(
(t) => [t, info.nodeTypes[t]] as const,
);
return (
<div className="panel route-stats">
<h3>Current Route</h3>
<div className="stat-row">
<span className="label">Path length</span>
<span className="value">{info.distance.toLocaleString()} px</span>
</div>
<div className="stat-row">
<span className="label">Nodes on path</span>
<span className="value">{info.nodeCount}</span>
</div>
<div className="stat-row">
<span className="label">Segments</span>
<span className="value">{info.segments}</span>
</div>
{info.crossFloor && <span className="route-badge">Crosses floors</span>}
<hr className="stat-divider" />
<label className="stage-label">Nodes traversed</label>
{entries.map(([t, c]) => (
<div className="stat-row" key={t}>
<span className="label" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span className="type-swatch" style={{ backgroundColor: NODE_COLORS[t] || '#999' }} />
{PATH_TYPE_LABELS[t] || t}
</span>
<span className="value">{c}</span>
</div>
))}
</div>
);
}
|