five-on-it / apps/client/src/ui/studio/StudioMap
apps/client/src/ui/studio/StudioMap
The studio's map: a city's solved plan (or the solver's sketch of a city with issues) drawn north up in an SVG of metres (frame.ts), its districts' lots tinted by style, its water, parks, lakes, hills, its relief's rises and slopes, roads (as wide as they are, darker the higher their rank), roundabouts, jetties, the props in its parks, places and spawn; the selected element's points as handles (the ones of its own dragged, the selected one ringed) with a midpoint handle on each segment between them (a click inserts a point there), the game's zones (circles, polygons with their points dragged once selected), the solver's issues pinned and numbered where they are, the one in focus ringed with the stretch of road it is about, and the road or river being drawn. What the layers hide is not drawn. Pan by dragging the ground, zoom with the wheel or the buttons in its corner. A click is the tool's (StudioPage.tsx decides what it does); a click on an element selects it, a right click asks what can be done there. Every element picked carries its selection's key (data-pick). The ids and data- attributes are the end-to-end tests' contract.