Components

WorkboardStageMap

Pixel-map village rendering for agent activity zones

WorkboardStageMap

WorkboardStageMap renders a pixel-art village map where buildings and rooms represent agent activity zones. It translates agent states into a visual tile-based map.

Import

import { WorkboardStageMap } from "@downcity/ui";

Usage

<WorkboardStageMap
  board={board}
  config={mapConfig}
  activeZoneId={zoneId}
  hoveredAgentId={hoveredId}
  onSelectZone={(id) => setZone(id)}
  onHoverAgent={(id) => setHover(id)}
/>

Props

interface WorkboardStageMapProps {
  board: DowncityWorkboardBoardSnapshot;
  config: WorkboardGameMapConfig;
  activeZoneId: DowncityWorkboardZoneId;
  hoveredAgentId?: string;
  onSelectZone: (zoneId: string) => void;
  onHoverAgent?: (agentId: string) => void;
}
PropTypeDescription
boardDowncityWorkboardBoardSnapshotCurrent board data
configWorkboardGameMapConfigMap layout config with zone, building, and room definitions
activeZoneIdstringCurrently selected zone
hoveredAgentIdstringCurrently hovered agent (for tooltips)
onSelectZone(zoneId) => voidZone selection callback
onHoverAgent(id) => voidAgent hover callback

The map config describes a tile-based grid with buildings (WorkboardVillageBuilding), rooms (WorkboardRoomConfig), and props (WorkboardRoomProp / WorkboardVillageProp).