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), the Settings tab the game's own settings as a form (GameSettings.tsx: its title, its mode, its rules, its loadout, its places), the Catalogue tab searches what a game may name and puts a building or a prop in the city (CataloguePanel.tsx). Nothing is kept from being deleted: the spawn, the last district, a road others end on; what that leaves missing is an issue with its fix. Save (Ctrl+S) writes the spec and the game for the revision they were read at, issues and all (a spec with issues is saved and not built): 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, and so while the platform's model fixes the issues it was asked to (Fix with AI: saved first, then POST /drafts/:id/fix, the creation followed until it answers, the new revision loaded with what it said). Build queues a build and waits for it (its state, its issues, its preview), then Look round, Playtest, Publish and Open a room (BuildPanel.tsx); Delete deletes the draft. Without a draft it starts one: a new large city, or a curated city's (its spec to edit, or its level as it ships). The ids and data- attributes are the end-to-end tests' contract.