# Fable World — Art & Systems Handoff

For: **Cowork** (engineer, MAIspace overworld) · From: **Fable** (design)
Direction reference: `Fable World (Live Village)` — the click-to-zoom, real-time, real-weather village.

This package is everything you need to build the overworld for real against the live 12-agent crew and bridge data. Nothing here is locked — colors, layout, and bindings are all proposals you can override.

## What's in the box

| File | What it is |
|---|---|
| `README.md` | This file. |
| `tokens.json` | Named color tokens (roles, not bare hex), per-material ramps, the day/night sky keyframes, and weather ramps. Machine-readable. |
| `render-pipeline.md` | The exact draw order, blend modes, camera math, and lighting/weather model. Implement this and it looks right. |
| `zones.json` | The village layout — world size, every room (rect, floor, wall style, accent, doorway), billboards, light sources, courtyard. Tile + pixel coords. |
| `crew.json` | Your 12 agents pre-mapped to appearances + **proposed** team colors + home zone + a `socket` binding stub each. |
| `sockets.md` | The **data-socket contract** — the object-binding schema (`{id, socket, bind}`), socket types, the mapping DSL, and worked examples wired to `bridge-state`. |
| `fonts-and-licenses.md` | Fonts (Space Grotesk + Silkscreen, both OFL) and the art-asset licensing story (it's all original/CC0-clean — plus how to swap in real Kenney/OGA CC0 sheets). |
| `fable-art.js` | **The actual renderer**, extracted as a dependency-free UMD module. Palette + tile patterns + walls + furniture + character + lighting, all parametric. Works in a `<script>` (`window.FableArt`) or `globalThis`. This is more useful than a frozen sheet because every sprite is recolorable and variant-rich. |
| `sprite-atlas.png` + `atlas.json` | A rendered, transparent sheet of the sprites with a name→rect map, in case you want static frames for Phaser's atlas loader. Generated from `fable-art.js`. |
| `reference/Fable World (Live Village).dc.html` | The canonical, runnable source (the live prototype). |
| `reference/Fable World — Live Village.html` | The same, bundled to a single offline file. Open it to see the target behavior. |

## The one-paragraph mental model

The world is a **single 928×480px top-down tilemap** (58×30 tiles, 16px each) drawn once to an offscreen "base" canvas: grass → courtyard path → room floors → autotiled rugs/water → walls (with depth) → static furniture → billboard bezels. Every frame you blit that base through a **camera transform** (pan + zoom), draw the **crew** (dynamic, wandering, customizable) on top in world space, then in *screen* space apply, in order: **time-of-day ambient tint → night tint → weather veil → emissive lights → weather particles → vignette**. HTML overlays (room labels, crew nametags, billboards, HUD) are projected with the same camera each frame. Two global rules make twelve material sets read as one game: **one warm ink outline (`#2B2A38`) on everything** and **one top-left light baked into every tile**.

## The big idea you're actually building

Every world object is a **socket**. A crew member is an `agent.status` socket bound to a live agent on the bridge; a billboard is a `screen.feed` socket bound to a URL/feed; a room's glow is a `zone.metric` socket bound to load/throughput; weather and clock are `world.*` sockets bound to reality. The art is just the skin — the value is that the village *is* a live dashboard you walk around in. `sockets.md` is the contract for that.

## Suggested build order

1. Render pipeline + tokens → get a static lit room on screen (`render-pipeline.md`, `tokens.json`, `fable-art.js`).
2. Zone map → assemble the full building (`zones.json`).
3. Camera + click-to-zoom + overlays.
4. Crew from `crew.json`, wandering + nametags + click-to-customize.
5. Wire the sockets to `bridge-state` (`sockets.md`) — crew presence first, then billboards, then zone glows.
6. Time/weather already real; point `world.weather` at your station.

Ping me (via Brandon's bridge) with the bits you want deeper — happy to iterate on any zone, the foreman/QA character reads, or the socket DSL once you see your feed shapes.
