@blkc-code/render-canvas 0.1.0 → 0.3.0

package/src/index.ts

@@ -15,7 +15,7 @@ import type { OfficeScene } from "./types.js";
 export { createOffice } from "./office.js";
 export type { OfficeHandle, OfficeOptions } from "./office.js";
 export * from "./types.js";
-export { agentAt, applyUpdate, createWorld, findPath, step } from "./world.js";
+export { FURNITURE, agentAt, applyLayout, applyUpdate, createWorld, findPath, step } from "./world.js";
 export type { Agent, World } from "./world.js";
 
 export interface MountedBlock {

package/src/office.ts

@@ -1,24 +1,37 @@
-/** Puts a world on a canvas: sizing, the frame loop, and pointer and keyboard input. */
+/** Puts a world on a canvas: sizing, the camera, the frame loop, and input. */
 
-import { drawWorld, TILE, type Palette } from "./draw.js";
-import type { OfficeScene } from "./types.js";
-import { agentAt, applyUpdate, createWorld, step, type World } from "./world.js";
+import { daylightAt, drawBuilding, drawWorld, TILE, type Daylight, type Palette } from "./draw.js";
+import type { OfficeLayout, OfficeScene } from "./types.js";
+import { agentAt, applyLayout, applyUpdate, createWorld, step, type World } from "./world.js";
 
 export interface OfficeHandle {
   world: World;
   /** Change agents or tasks without restarting anyone. */
   update(scene: Pick<OfficeScene, "agents" | "tasks">): void;
+  /** Change the building while everyone is in it. */
+  setLayout(layout: OfficeLayout): void;
   /** Pick an agent by id, or pass nothing to clear. */
   select(id?: string): void;
+  /** The tile under a pointer event, allowing for the camera. */
+  tileAt(event: { clientX: number; clientY: number }): { x: number; y: number };
+  /** Draw something over the office each frame, in pixels at 16 a tile. For build mode. */
+  setOverlay(draw: ((c: CanvasRenderingContext2D) => void) | undefined): void;
+  /** Stop clicks picking agents and dragging the camera, while something else handles them. */
+  setInteractive(on: boolean): void;
+  /** Zoom by a factor around a point on the canvas, or reset with no arguments. */
+  zoom(factor?: number, event?: { clientX: number; clientY: number }): void;
   destroy(): void;
 }
 
 export interface OfficeOptions {
   /** Called when the selection changes, by click or by select(). */
   onSelect?: (id: string | undefined) => void;
+  /** Wheel to zoom and drag to pan. For a page that is mainly the office: it takes the wheel. */
+  camera?: boolean;
 }
 
 const SAFE_COLOUR = /^(#[0-9a-f]{3,8}|rgba?\([\d\s.,%/]+\)|hsla?\([\d\s.,%/a-z]+\))$/i;
+const MAX_ZOOM = 4;
 
 function readPalette(canvas: HTMLCanvasElement): Palette {
   const styles = getComputedStyle(canvas);
@@ -40,8 +53,6 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
   const context = canvas.getContext("2d");
   if (!context) throw new Error("This browser can't draw to a canvas.");
   const c = context;
-  const width = world.cols * TILE;
-  const height = world.rows * TILE;
   const palette = readPalette(canvas);
   const still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 
@@ -52,22 +63,55 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
   let frame = 0;
   let visible = true;
   let destroyed = false;
+  let interactive = true;
+  let overlay: ((c: CanvasRenderingContext2D) => void) | undefined;
+  const view = { x: 0, y: 0, zoom: 1 };
+  let hour = new Date().getHours();
+  let daylight: Daylight = daylightAt(hour);
+  let building: HTMLCanvasElement | undefined;
+  let buildingDirty = true;
+
+  const width = (): number => world.cols * TILE;
+  const height = (): number => world.rows * TILE;
+
+  const clampView = (): void => {
+    view.zoom = Math.min(MAX_ZOOM, Math.max(1, view.zoom));
+    view.x = Math.min(width() - width() / view.zoom, Math.max(0, view.x));
+    view.y = Math.min(height() - height() / view.zoom, Math.max(0, view.y));
+  };
+
+  const refreshBuilding = (): void => {
+    if (typeof document === "undefined") return;
+    building ??= document.createElement("canvas");
+    building.width = width() * scale;
+    building.height = height() * scale;
+    const layer = building.getContext("2d");
+    if (!layer) return;
+    layer.setTransform(scale, 0, 0, scale, 0, 0);
+    layer.imageSmoothingEnabled = false;
+    drawBuilding(layer, world, palette, daylight);
+    buildingDirty = false;
+  };
 
   const paint = (): void => {
-    c.setTransform(scale, 0, 0, scale, 0, 0);
+    if (buildingDirty) refreshBuilding();
+    const zoomed = scale * view.zoom;
+    c.setTransform(zoomed, 0, 0, zoomed, -view.x * zoomed, -view.y * zoomed);
     c.imageSmoothingEnabled = false;
-    drawWorld(c, world, time, palette, selected);
+    drawWorld(c, world, time, palette, daylight, building, selected);
+    overlay?.(c);
   };
 
   // The backing store is a whole multiple of the art, so every pixel stays square and text stays sharp.
   const resize = (): void => {
-    const shown = canvas.getBoundingClientRect().width || width;
+    const shown = canvas.getBoundingClientRect().width || width();
     const ratio = typeof devicePixelRatio === "number" ? devicePixelRatio : 1;
-    const next = Math.max(1, Math.ceil((shown * ratio) / width));
-    if (next === scale) return;
+    const next = Math.max(1, Math.ceil((shown * ratio) / width()));
+    if (next === scale && canvas.width === width() * scale && canvas.height === height() * scale) return;
     scale = next;
-    canvas.width = width * scale;
-    canvas.height = height * scale;
+    canvas.width = width() * scale;
+    canvas.height = height() * scale;
+    buildingDirty = true;
     paint();
   };
 
@@ -82,30 +126,90 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
     last = now;
     time += dt;
     step(world, dt);
+    const nowHour = new Date().getHours();
+    if (nowHour !== hour) {
+      hour = nowHour;
+      daylight = daylightAt(hour);
+      buildingDirty = true;
+    }
     paint();
   };
 
   const select = (id?: string): void => {
-    const next = id === selected ? undefined : id;
-    selected = next;
+    selected = id === selected ? undefined : id;
     options.onSelect?.(selected);
     if (still) paint();
   };
 
-  const pointerTile = (event: PointerEvent): { x: number; y: number } => {
+  const tileAt = (event: { clientX: number; clientY: number }): { x: number; y: number } => {
     const box = canvas.getBoundingClientRect();
-    return { x: ((event.clientX - box.left) / box.width) * world.cols, y: ((event.clientY - box.top) / box.height) * world.rows };
+    const px = ((event.clientX - box.left) / box.width) * (width() / view.zoom) + view.x;
+    const py = ((event.clientY - box.top) / box.height) * (height() / view.zoom) + view.y;
+    return { x: px / TILE, y: py / TILE };
   };
+
+  let drag: { x: number; y: number; moved: boolean } | undefined;
   const onDown = (event: PointerEvent): void => {
-    const { x, y } = pointerTile(event);
-    select(agentAt(world, x, y)?.id);
+    if (!interactive) return;
+    drag = { x: event.clientX, y: event.clientY, moved: false };
   };
   const onMove = (event: PointerEvent): void => {
-    const { x, y } = pointerTile(event);
-    canvas.style.cursor = agentAt(world, x, y) ? "pointer" : "default";
+    if (!interactive) return;
+    if (drag && options.camera && view.zoom > 1) {
+      const box = canvas.getBoundingClientRect();
+      const dx = event.clientX - drag.x;
+      const dy = event.clientY - drag.y;
+      if (drag.moved || Math.abs(dx) + Math.abs(dy) > 3) {
+        drag.moved = true;
+        view.x -= (dx / box.width) * (width() / view.zoom);
+        view.y -= (dy / box.height) * (height() / view.zoom);
+        drag.x = event.clientX;
+        drag.y = event.clientY;
+        clampView();
+        canvas.style.cursor = "grabbing";
+        return;
+      }
+    }
+    const { x, y } = tileAt(event);
+    canvas.style.cursor = agentAt(world, x, y) ? "pointer" : options.camera && view.zoom > 1 ? "grab" : "default";
   };
+  const onUp = (event: PointerEvent): void => {
+    if (!interactive) return;
+    const wasDrag = drag?.moved;
+    drag = undefined;
+    if (wasDrag) return;
+    const { x, y } = tileAt(event);
+    const agent = agentAt(world, x, y);
+    if (agent || selected) select(agent?.id ?? selected);
+  };
+  const zoom = (factor?: number, event?: { clientX: number; clientY: number }): void => {
+    if (factor === undefined) {
+      view.zoom = 1;
+      view.x = 0;
+      view.y = 0;
+      return;
+    }
+    const before = event ? tileAt(event) : { x: view.x / TILE + width() / view.zoom / TILE / 2, y: view.y / TILE + height() / view.zoom / TILE / 2 };
+    view.zoom = Math.min(MAX_ZOOM, Math.max(1, view.zoom * factor));
+    if (event) {
+      const after = tileAt(event);
+      view.x += (before.x - after.x) * TILE;
+      view.y += (before.y - after.y) * TILE;
+    } else {
+      view.x = before.x * TILE - width() / view.zoom / 2;
+      view.y = before.y * TILE - height() / view.zoom / 2;
+    }
+    clampView();
+  };
+  const onWheel = (event: WheelEvent): void => {
+    event.preventDefault();
+    zoom(event.deltaY < 0 ? 1.2 : 1 / 1.2, event);
+  };
+
   canvas.addEventListener("pointerdown", onDown);
   canvas.addEventListener("pointermove", onMove);
+  canvas.addEventListener("pointerup", onUp);
+  if (options.camera) canvas.addEventListener("wheel", onWheel, { passive: false });
 
   const resizer = typeof ResizeObserver === "function" ? new ResizeObserver(resize) : undefined;
   resizer?.observe(canvas);
@@ -124,7 +228,19 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
       applyUpdate(world, next);
       if (still) paint();
     },
+    setLayout(layout) {
+      applyLayout(world, layout);
+      buildingDirty = true;
+      view.zoom = Math.min(view.zoom, MAX_ZOOM);
+      clampView();
+      scale = 0;
+      resize();
+    },
     select,
+    tileAt,
+    setOverlay(draw) { overlay = draw; },
+    setInteractive(on) { interactive = on; drag = undefined; if (!on) canvas.style.cursor = "crosshair"; },
+    zoom,
     destroy() {
       destroyed = true;
       cancelAnimationFrame(frame);
@@ -132,6 +248,8 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
       viewer?.disconnect();
       canvas.removeEventListener("pointerdown", onDown);
       canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerup", onUp);
+      canvas.removeEventListener("wheel", onWheel);
     },
   };
 }

package/src/runtime.ts

@@ -1,5 +1,8 @@
 /** The script tag version: starts every canvas Block on the page by itself. */
-import { mountCanvasBlocks } from "./index.js";
+import { FURNITURE, createOffice, findPath, mountCanvasBlocks } from "./index.js";
+
+// For pages that drive an office themselves, such as the blkc dev app.
+(globalThis as unknown as { BLKCCanvas: unknown }).BLKCCanvas = { FURNITURE, createOffice, findPath, mountCanvasBlocks };
 
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", () => mountCanvasBlocks());

package/src/types.ts

@@ -2,11 +2,22 @@
 
 export type AgentState = "working" | "thinking" | "blocked" | "reviewing" | "idle" | "done" | "away";
 export type TaskState = "todo" | "doing" | "done";
-export type FloorStyle = "wood" | "carpet" | "tile";
+export type FloorStyle = "wood" | "carpet" | "tile" | "stone" | "concrete" | "grass";
 export type FurnitureType =
-  | "desk" | "coffee" | "sofa" | "plant" | "board" | "shelf" | "server" | "table" | "rug" | "water";
+  | "desk" | "coffee" | "sofa" | "plant" | "fern" | "board" | "whiteboard" | "shelf" | "server" | "table" | "rug"
+  | "water" | "arcade" | "fridge" | "printer" | "lamp" | "beanbag" | "tv" | "vending" | "clock" | "poster" | "trophy";
 
-export interface OfficeRoom { id?: string; name?: string; x: number; y: number; w: number; h: number; floor?: FloorStyle }
+export interface OfficeRoom {
+  id?: string;
+  name?: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  floor?: FloorStyle;
+  /** Project folders this room stands for, so agents go there when they work in them. */
+  paths?: string[];
+}
 export interface OfficeDoor { x: number; y: number }
 export interface OfficeFurniture { type: FurnitureType; x: number; y: number }
 export interface OfficeAgent {
@@ -15,6 +26,8 @@ export interface OfficeAgent {
   role?: string;
   state?: AgentState;
   task?: string;
+  /** The id of the room this agent is working in. */
+  area?: string;
   /** Character colours. Anything left out is picked from the id. */
   hair?: string;
   skin?: string;
@@ -22,12 +35,15 @@ export interface OfficeAgent {
 }
 export interface OfficeTask { title: string; state?: TaskState; agent?: string }
 
-export interface OfficeScene {
+export interface OfficeLayout {
   cols?: number;
   rows?: number;
   rooms?: OfficeRoom[];
   doors?: OfficeDoor[];
   furniture?: OfficeFurniture[];
+}
+
+export interface OfficeScene extends OfficeLayout {
   agents?: OfficeAgent[];
   tasks?: OfficeTask[];
 }

package/src/world.ts

@@ -3,32 +3,44 @@
  * heading. Nothing in here touches a canvas, so all of it can be tested.
  */
 
-import type { AgentState, FloorStyle, FurnitureType, OfficeAgent, OfficeDoor, OfficeFurniture, OfficeRoom, OfficeScene, OfficeTask, TaskState } from "./types.js";
+import type { AgentState, FloorStyle, FurnitureType, OfficeAgent, OfficeDoor, OfficeFurniture, OfficeLayout, OfficeRoom, OfficeScene, OfficeTask, TaskState } from "./types.js";
 
 export const MAX_COLS = 64;
 export const MAX_ROWS = 40;
 const MAX_AGENTS = 40;
 const MAX_FURNITURE = 300;
 const MAX_TASKS = 60;
-export const WALK_SPEED = 3.2; // tiles a second
+export const WALK_SPEED = 4.5; // tiles a second
 
 /** Footprint in tiles, and where someone stands to use it, relative to its corner. */
-export const FURNITURE: Record<FurnitureType, { w: number; h: number; solid?: boolean; spot?: { x: number; y: number } }> = {
+export const FURNITURE: Record<FurnitureType, { w: number; h: number; solid?: boolean; wall?: boolean; spot?: { x: number; y: number } }> = {
   desk: { w: 3, h: 2, spot: { x: 1, y: 2 } },
   coffee: { w: 2, h: 1, spot: { x: 0, y: 1 } },
   water: { w: 1, h: 1, spot: { x: 0, y: 1 } },
   sofa: { w: 3, h: 1, spot: { x: 1, y: 1 } },
   plant: { w: 1, h: 1 },
+  fern: { w: 1, h: 1 },
   board: { w: 4, h: 1, spot: { x: 1, y: 1 } },
+  whiteboard: { w: 3, h: 1, spot: { x: 1, y: 1 } },
   shelf: { w: 2, h: 1, spot: { x: 0, y: 1 } },
   server: { w: 1, h: 1 },
   table: { w: 3, h: 2, spot: { x: 1, y: 2 } },
   rug: { w: 4, h: 3, solid: false },
+  arcade: { w: 1, h: 1, spot: { x: 0, y: 1 } },
+  fridge: { w: 1, h: 1, spot: { x: 0, y: 1 } },
+  printer: { w: 1, h: 1, spot: { x: 0, y: 1 } },
+  lamp: { w: 1, h: 1 },
+  beanbag: { w: 1, h: 1, spot: { x: 0, y: 1 } },
+  tv: { w: 3, h: 1, spot: { x: 1, y: 2 } },
+  vending: { w: 1, h: 1, spot: { x: 0, y: 1 } },
+  trophy: { w: 1, h: 1 },
+  clock: { w: 1, h: 1, solid: false, wall: true },
+  poster: { w: 1, h: 1, solid: false, wall: true },
 };
 
 const AGENT_STATES: readonly string[] = ["working", "thinking", "blocked", "reviewing", "idle", "done", "away"];
 const TASK_STATES: readonly string[] = ["todo", "doing", "done"];
-const FLOORS: readonly string[] = ["wood", "carpet", "tile"];
+const FLOORS: readonly string[] = ["wood", "carpet", "tile", "stone", "concrete", "grass"];
 
 export const DEFAULT_LAYOUT = {
   cols: 26,
@@ -53,7 +65,7 @@ const int = (value: unknown, fallback: number): number => (typeof value === "num
 const str = (value: unknown, max = 120): string => (typeof value === "string" ? value.slice(0, max) : "");
 const list = <T>(value: unknown, max: number): T[] => (Array.isArray(value) ? (value.slice(0, max) as T[]) : []);
 
-export interface Room { name: string; x: number; y: number; w: number; h: number; floor: FloorStyle }
+export interface Room { id: string; name: string; x: number; y: number; w: number; h: number; floor: FloorStyle; paths: string[] }
 export interface Item { type: FurnitureType; x: number; y: number }
 export interface Task { title: string; state: TaskState; agent: string }
 
@@ -63,6 +75,9 @@ export interface Agent {
   role: string;
   state: AgentState;
   task: string;
+  area: string;
+  /** Seconds of celebration left after finishing something. */
+  party: number;
   hair: string;
   skin: string;
   shirt: string;
@@ -88,6 +103,7 @@ export interface World {
   tasks: Task[];
   walkable: boolean[];
   spots: { lounge: { x: number; y: number }[]; board: { x: number; y: number }[] };
+  seats: { x: number; y: number }[];
 }
 
 export function hash(text: string): number {
@@ -152,6 +168,8 @@ function toAgent(raw: OfficeAgent, index: number): Agent {
     role: str(raw?.role, 40),
     state,
     task: str(raw?.task, 120),
+    area: str(raw?.area, 60),
+    party: 0,
     hair: colour(raw?.hair, HAIR[seed % HAIR.length] as string),
     skin: colour(raw?.skin, SKIN[(seed >>> 4) % SKIN.length] as string),
     shirt: colour(raw?.shirt, SHIRT[(seed >>> 8) % SHIRT.length] as string),
@@ -169,8 +187,7 @@ function toTask(raw: OfficeTask): Task {
   return { title: str(raw?.title, 80), state: TASK_STATES.includes(raw?.state as string) ? (raw.state as TaskState) : "todo", agent: str(raw?.agent, 60) };
 }
 
-/** Build a world from a scene. Bad values are dropped or clamped, so it never throws. */
-export function createWorld(scene: OfficeScene = {}): World {
+function buildLayout(scene: OfficeLayout): Pick<World, "cols" | "rows" | "rooms" | "doors" | "furniture" | "walkable" | "spots" | "seats"> {
   const custom = Array.isArray(scene?.rooms) && scene.rooms.length > 0;
   const cols = Math.min(Math.max(int(scene?.cols, custom ? 20 : DEFAULT_LAYOUT.cols), 6), MAX_COLS);
   const rows = Math.min(Math.max(int(scene?.rows, custom ? 14 : DEFAULT_LAYOUT.rows), 6), MAX_ROWS);
@@ -179,15 +196,17 @@ export function createWorld(scene: OfficeScene = {}): World {
   const rawItems = Array.isArray(scene?.furniture) ? list<OfficeFurniture>(scene.furniture, MAX_FURNITURE) : custom ? [] : DEFAULT_LAYOUT.furniture;
 
   // Clamped to the grid: everything later loops over these, so a huge room must not hang the page.
-  const rooms: Room[] = rawRooms.map((room) => {
+  const rooms: Room[] = rawRooms.map((room, index) => {
     const x = Math.min(Math.max(int(room?.x, 0), 0), cols);
     const y = Math.min(Math.max(int(room?.y, 0), 0), rows);
     return {
+      id: str(room?.id, 60) || `room-${index + 1}`,
       name: str(room?.name, 24),
       x, y,
       w: Math.min(Math.max(int(room?.w, 0), 0), cols - x),
       h: Math.min(Math.max(int(room?.h, 0), 0), rows - y),
       floor: FLOORS.includes(room?.floor as string) ? (room.floor as FloorStyle) : "wood",
+      paths: list<string>(room?.paths, 20).filter((p) => typeof p === "string").map((p) => p.slice(0, 200)),
     };
   });
   const walkable = new Array<boolean>(cols * rows).fill(false);
@@ -209,48 +228,116 @@ export function createWorld(scene: OfficeScene = {}): World {
     for (let y = item.y; y < item.y + spec.h; y++) for (let x = item.x; x < item.x + spec.w; x++) mark(x, y, false);
   }
 
-  const world: World = {
-    cols, rows, rooms, doors, furniture, walkable,
-    agents: list<OfficeAgent>(scene?.agents, MAX_AGENTS).map(toAgent),
-    tasks: list<OfficeTask>(scene?.tasks, MAX_TASKS).map(toTask),
-    spots: { lounge: [], board: [] },
-  };
-
+  const open = (x: number, y: number): boolean => x >= 0 && y >= 0 && x < cols && y < rows && walkable[y * cols + x] === true;
   const spot = (item: Item): { x: number; y: number } | undefined => {
     const offset = FURNITURE[item.type].spot;
     if (!offset) return undefined;
     const point = { x: item.x + offset.x, y: item.y + offset.y };
-    return isWalkable(world, point.x, point.y) ? point : undefined;
+    return open(point.x, point.y) ? point : undefined;
   };
   const seats = furniture.filter((item) => item.type === "desk").map(spot).filter((p): p is { x: number; y: number } => Boolean(p));
+  const spots: World["spots"] = { lounge: [], board: [] };
   for (const item of furniture) {
     const point = spot(item);
     if (!point) continue;
-    if (item.type === "coffee" || item.type === "sofa" || item.type === "water" || item.type === "shelf") world.spots.lounge.push(point);
-    if (item.type === "board" || item.type === "table") world.spots.board.push(point);
+    if (["coffee", "sofa", "water", "shelf", "arcade", "fridge", "beanbag", "vending", "tv"].includes(item.type)) spots.lounge.push(point);
+    if (["board", "table", "whiteboard"].includes(item.type)) spots.board.push(point);
   }
+  return { cols, rows, rooms, doors, furniture, walkable, seats, spots };
+}
 
-  world.agents.forEach((agent, index) => {
-    agent.seat = seats[index];
-    placeAgent(world, agent);
-  });
+/** Build a world from a scene. Bad values are dropped or clamped, so it never throws. */
+export function createWorld(scene: OfficeScene = {}): World {
+  const world: World = {
+    ...buildLayout(scene),
+    agents: list<OfficeAgent>(scene?.agents, MAX_AGENTS).map(toAgent),
+    tasks: list<OfficeTask>(scene?.tasks, MAX_TASKS).map(toTask),
+  };
+  for (const agent of world.agents) placeAgent(world, agent);
   return world;
 }
 
+/** Change the building while everyone is in it. Anyone left inside a wall or a desk moves. */
+export function applyLayout(world: World, layout: OfficeLayout): void {
+  Object.assign(world, buildLayout(layout));
+  for (const agent of world.agents) {
+    agent.seat = undefined;
+    agent.path = [];
+    agent.x = Math.round(agent.x);
+    agent.y = Math.round(agent.y);
+    if (!isWalkable(world, agent.x, agent.y)) {
+      placeAgent(world, agent);
+    } else {
+      updateSeat(world, agent);
+      routeTo(world, agent, goalFor(world, agent));
+    }
+  }
+}
+
 function firstWalkable(world: World): { x: number; y: number } {
   for (let y = 0; y < world.rows; y++) for (let x = 0; x < world.cols; x++) if (isWalkable(world, x, y)) return { x, y };
   return { x: 0, y: 0 };
 }
 
-/** Where this agent's current state wants them to be. */
+const NEEDS_DESK: readonly AgentState[] = ["working", "thinking", "blocked"];
+
+/** Desks belong to whoever is working at one: claimed when an agent starts, freed when it stops. */
+function updateSeat(world: World, agent: Agent): void {
+  if (!NEEDS_DESK.includes(agent.state)) {
+    agent.seat = undefined;
+    return;
+  }
+  const room = world.rooms.find((candidate) => candidate.id === agent.area);
+  const inRoom = (seat: { x: number; y: number }): boolean =>
+    Boolean(room) && seat.x >= (room as Room).x && seat.x < (room as Room).x + (room as Room).w && seat.y >= (room as Room).y && seat.y < (room as Room).y + (room as Room).h;
+  // Moved to another room: this desk is no longer the right one.
+  if (agent.seat && (!room || inRoom(agent.seat))) return;
+  agent.seat = undefined;
+  const taken = new Set(world.agents.filter((other) => other !== agent && other.seat).map((other) => `${other.seat?.x},${other.seat?.y}`));
+  const free = world.seats.filter((seat) => !taken.has(`${seat.x},${seat.y}`));
+  agent.seat = room ? free.find(inRoom) : free[0];
+}
+
+/** Where an agent is standing, or heading to if it is walking. */
+function standing(agent: Agent): { x: number; y: number } {
+  const end = agent.path[agent.path.length - 1];
+  return end ?? { x: Math.round(agent.x), y: Math.round(agent.y) };
+}
+
+/** The closest tile to a spot that no other agent is on, so they don't stand inside each other. */
+function freeTileNear(world: World, agent: Agent, spot: { x: number; y: number }): { x: number; y: number } {
+  const others = new Set(world.agents.filter((other) => other !== agent && other.state !== "away").map((other) => {
+    const at = standing(other);
+    return `${at.x},${at.y}`;
+  }));
+  for (let radius = 0; radius <= 4; radius++) {
+    for (let dy = -radius; dy <= radius; dy++) {
+      for (let dx = -radius; dx <= radius; dx++) {
+        if (Math.abs(dx) + Math.abs(dy) !== radius) continue;
+        const tile = { x: spot.x + dx, y: spot.y + dy };
+        if (isWalkable(world, tile.x, tile.y) && !others.has(`${tile.x},${tile.y}`) && findPath(world, spot, tile)) return tile;
+      }
+    }
+  }
+  return spot;
+}
+
+/** Where this agent's current state wants it to be. */
 export function goalFor(world: World, agent: Agent): { x: number; y: number } | undefined {
-  const pick = (spots: { x: number; y: number }[]): { x: number; y: number } | undefined =>
-    spots.length > 0 ? spots[(agent.seed + Math.floor(agent.rest * 1000)) % spots.length] : undefined;
+  const pick = (spots: { x: number; y: number }[]): { x: number; y: number } | undefined => {
+    const spot = spots.length > 0 ? spots[(agent.seed + Math.floor(agent.rest * 1000)) % spots.length] : undefined;
+    return spot && freeTileNear(world, agent, spot);
+  };
   switch (agent.state) {
     case "working":
     case "thinking":
-    case "blocked":
-      return agent.seat ?? pick(world.spots.lounge);
+    case "blocked": {
+      if (agent.seat) return agent.seat;
+      // No free desk in the room they are working in: they stand in it anyway.
+      const room = world.rooms.find((candidate) => candidate.id === agent.area);
+      if (room && room.w > 0 && room.h > 0) return freeTileNear(world, agent, { x: room.x + (room.w >> 1), y: room.y + (room.h >> 1) });
+      return pick(world.spots.lounge);
+    }
     case "reviewing":
       return pick(world.spots.board) ?? agent.seat;
     case "idle":
@@ -262,6 +349,7 @@ export function goalFor(world: World, agent: Agent): { x: number; y: number } |
 }
 
 function placeAgent(world: World, agent: Agent): void {
+  updateSeat(world, agent);
   const goal = goalFor(world, agent) ?? agent.seat ?? firstWalkable(world);
   agent.x = goal.x;
   agent.y = goal.y;
@@ -307,6 +395,7 @@ export function step(world: World, dt: number): void {
     }
 
     agent.walking = false;
+    if (agent.party > 0) agent.party = Math.max(0, agent.party - dt);
     if (agent.state === "idle") {
       agent.rest -= dt;
       if (agent.rest <= 0) {
@@ -324,25 +413,39 @@ export function applyUpdate(world: World, scene: Pick<OfficeScene, "agents" | "t
   if (Array.isArray(scene.tasks)) world.tasks = list<OfficeTask>(scene.tasks, MAX_TASKS).map(toTask);
   if (!Array.isArray(scene.agents)) return;
   const existing = new Map(world.agents.map((agent) => [agent.id, agent]));
-  const seats = world.furniture
-    .filter((item) => item.type === "desk")
-    .map((item) => ({ x: item.x + 1, y: item.y + 2 }))
-    .filter((point) => isWalkable(world, point.x, point.y));
-  world.agents = list<OfficeAgent>(scene.agents, MAX_AGENTS).map((raw, index) => {
-    const next = toAgent(raw, index);
+  const incoming = list<OfficeAgent>(scene.agents, MAX_AGENTS).map(toAgent);
+  world.agents = incoming.map((next) => existing.get(next.id)).filter((agent): agent is Agent => Boolean(agent));
+  const updated = incoming.map((next) => {
     const current = existing.get(next.id);
-    next.seat = seats[index];
     if (!current) {
       placeAgent(world, next);
+      world.agents = [...world.agents, next];
+      // New arrivals come in through a door and walk to where they are going.
+      const door = world.doors[0];
+      const goal = { x: next.x, y: next.y };
+      if (door && next.state !== "away") {
+        next.x = door.x;
+        next.y = door.y;
+        routeTo(world, next, goal);
+      }
       return next;
     }
-    Object.assign(current, { name: next.name, role: next.role, task: next.task, hair: next.hair, skin: next.skin, shirt: next.shirt, seat: next.seat });
-    if (current.state !== next.state) {
+    Object.assign(current, { name: next.name, role: next.role, task: next.task, hair: next.hair, skin: next.skin, shirt: next.shirt });
+    const moved = current.area !== next.area;
+    current.area = next.area;
+    if (current.state !== next.state || moved) {
+      if (next.state === "done" && current.state !== "done") current.party = 3;
       current.state = next.state;
+      updateSeat(world, current);
       if (next.state !== "away") routeTo(world, current, goalFor(world, current));
+    } else if (NEEDS_DESK.includes(current.state) && !current.seat) {
+      // No desk was free before. One may be now.
+      updateSeat(world, current);
+      if (current.seat) routeTo(world, current, current.seat);
     }
     return current;
   });
+  world.agents = updated;
 }
 
 /** Agent under a point given in tiles, nearest first. */