five-on-it / apps/client/src/ui/studio/StudioPage
apps/client/src/ui/studio/StudioPage
The studio (?studio=<draft>, one of the game pages): a draft's level drawn and edited by hand, beside the creator chat and Claude Code, which write the same draft (TECHNICAL_SPECS §9.8). Every template is drawn on a map and edited there: a city's spec (StudioMap.tsx) with its tools (select; a road of a class through the points clicked, Enter or Finish ending it, its ends on the roads it starts and ends near; a roundabout; a turned grid; the spawn moved; a river and a jetty on its bank; a hill, a district's seed in a style, a park and a prop standing in it; a named place; a mission's zone, a circle where it is clicked or a polygon point by point with Area), a grid town's (TownMap.tsx: blocks painted with a district, made parks or compounds, street lines made avenues) and a region's (RegionMap.tsx: features, roads over the tiles, towns and landuse areas, their points snapped to the grid); a draft on a level that ships draws its roads under the missions' zones, and on Riverbend offers its city's spec to edit. The spec is solved (or checked) in the browser on every edit (studio.ts), its issues numbered, pinned where they are and listed with their quick fixes (fixes.ts) and what each rule means; a city with issues stays drawn from the solver's sketch. The selected element is edited in the inspector (its schema's form with its words), its points dragged, selected, deleted, inserted on a segment or a road cut there (points.ts); the layers list every element to select, hide or delete; a right click offers what can be done where it is; Delete removes the selection, Ctrl+Z and Ctrl+Y undo and redo, a letter picks each tool, ? shows the keys. The JSON and Game tabs edit the whole spec and the whole game in a code editor (CodeEditor.tsx). Save (Ctrl+S) writes the spec and the game for the revision they were read at: a draft another wrote meanwhile is a conflict, its owner choosing to load it or to save over it; the draft is read again every five seconds and loaded when another wrote it and nothing here is unsaved. While a creation writes the draft the studio only shows it. Build queues a build and waits for it (its state, its issues, its preview), then Look round and Playtest. Without a draft it starts one, a city from the catalogue's example. The ids and data- attributes are the end-to-end tests' contract.