@blkc-code/render-canvas 0.3.0 → 0.7.0

package/src/types.ts

@@ -2,11 +2,14 @@
 
 export type AgentState = "working" | "thinking" | "blocked" | "reviewing" | "idle" | "done" | "away";
 export type TaskState = "todo" | "doing" | "done";
-export type FloorStyle = "wood" | "carpet" | "tile" | "stone" | "concrete" | "grass";
-export type FurnitureType =
+export type FloorStyle = "wood" | "carpet" | "tile" | "stone" | "concrete" | "grass" | "hall";
+export type OfficeFurnitureType =
   | "desk" | "coffee" | "sofa" | "plant" | "fern" | "board" | "whiteboard" | "shelf" | "server" | "table" | "rug"
   | "water" | "arcade" | "fridge" | "printer" | "lamp" | "beanbag" | "tv" | "vending" | "clock" | "poster" | "trophy";
 
+/** An office item, or whatever else the world defines. */
+export type FurnitureType = OfficeFurnitureType | (string & {});
+
 export interface OfficeRoom {
   id?: string;
   name?: string;
@@ -19,7 +22,7 @@ export interface OfficeRoom {
   paths?: string[];
 }
 export interface OfficeDoor { x: number; y: number }
-export interface OfficeFurniture { type: FurnitureType; x: number; y: number }
+export interface OfficeFurniture { type: FurnitureType; x: number; y: number; label?: string }
 export interface OfficeAgent {
   id: string;
   name?: string;
@@ -35,15 +38,22 @@ export interface OfficeAgent {
 }
 export interface OfficeTask { title: string; state?: TaskState; agent?: string }
 
+/** `from` depends on `to`. */
+export interface OfficeLink { from: string; to: string }
+
 export interface OfficeLayout {
   cols?: number;
   rows?: number;
   rooms?: OfficeRoom[];
   doors?: OfficeDoor[];
   furniture?: OfficeFurniture[];
+  /** How the rooms' code depends on each other. Drawn as lines between them. */
+  links?: OfficeLink[];
 }
 
 export interface OfficeScene extends OfficeLayout {
+  /** Which world to draw. The office if left out or unknown. */
+  world?: string;
   agents?: OfficeAgent[];
   tasks?: OfficeTask[];
 }

package/src/world.ts

@@ -3,70 +3,36 @@
  * heading. Nothing in here touches a canvas, so all of it can be tested.
  */
 
+import { registerWorld, worldData, type ItemSpec, type WorldData } from "./pack.js";
+import { OFFICE, OFFICE_ITEMS, OFFICE_LAYOUT } from "./worlds/office-data.js";
+import type { LinkRoute } from "./links.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;
+export const MAX_COLS = 1024;
+export const MAX_ROWS = 1024;
 const MAX_AGENTS = 40;
-const MAX_FURNITURE = 300;
+const MAX_FURNITURE = 60000;
+const MAX_ROOMS = 8000;
+const MAX_DOORS = 16000;
+const MAX_LINKS = 4000;
 const MAX_TASKS = 60;
 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; 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 },
-};
+/** Footprints and uses, for the office. Other worlds bring their own. */
+export const FURNITURE = OFFICE_ITEMS;
 
 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", "stone", "concrete", "grass"];
-
-export const DEFAULT_LAYOUT = {
-  cols: 26,
-  rows: 17,
-  rooms: [
-    { id: "studio", name: "Studio", x: 1, y: 3, w: 15, h: 13, floor: "wood" },
-    { id: "lounge", name: "Lounge", x: 17, y: 3, w: 8, h: 6, floor: "carpet" },
-    { id: "quests", name: "Quests", x: 17, y: 10, w: 8, h: 6, floor: "tile" },
-  ] as OfficeRoom[],
-  doors: [{ x: 16, y: 6 }, { x: 16, y: 13 }, { x: 23, y: 9 }] as OfficeDoor[],
-  furniture: [
-    { type: "desk", x: 2, y: 4 }, { type: "desk", x: 7, y: 4 }, { type: "desk", x: 12, y: 4 },
-    { type: "desk", x: 2, y: 10 }, { type: "desk", x: 7, y: 10 }, { type: "desk", x: 12, y: 10 },
-    { type: "plant", x: 1, y: 8 }, { type: "plant", x: 15, y: 8 }, { type: "server", x: 15, y: 15 }, { type: "server", x: 14, y: 15 },
-    { type: "shelf", x: 1, y: 15 },
-    { type: "coffee", x: 19, y: 3 }, { type: "water", x: 21, y: 3 }, { type: "sofa", x: 22, y: 3 }, { type: "rug", x: 20, y: 5 }, { type: "plant", x: 24, y: 8 },
-    { type: "board", x: 19, y: 10 }, { type: "table", x: 19, y: 13 }, { type: "plant", x: 24, y: 15 },
-  ] as OfficeFurniture[],
-};
+const FLOORS: readonly string[] = ["wood", "carpet", "tile", "stone", "concrete", "grass", "hall"];
+
+export const DEFAULT_LAYOUT = OFFICE_LAYOUT;
 
 const int = (value: unknown, fallback: number): number => (typeof value === "number" && Number.isFinite(value) ? Math.floor(value) : fallback);
 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 { 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 Item { type: FurnitureType; x: number; y: number; label?: string }
 export interface Task { title: string; state: TaskState; agent: string }
 
 export interface Agent {
@@ -94,6 +60,12 @@ export interface Agent {
 }
 
 export interface World {
+  /** What this world is made of. */
+  pack: WorldData;
+  links: { from: string; to: string }[];
+  /** Worked out when first drawn, and again when the building changes. */
+  routes?: LinkRoute[];
+  showLinks: boolean;
   cols: number;
   rows: number;
   rooms: Room[];
@@ -187,13 +159,18 @@ 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) };
 }
 
-function buildLayout(scene: OfficeLayout): Pick<World, "cols" | "rows" | "rooms" | "doors" | "furniture" | "walkable" | "spots" | "seats"> {
+registerWorld(OFFICE);
+
+/** A piece of furniture's spec. Only items in the world's list get into a World. */
+export const specOf = (world: Pick<World, "pack">, item: Item): ItemSpec => world.pack.items[item.type] as ItemSpec;
+
+function buildLayout(scene: OfficeLayout, pack: WorldData): Pick<World, "links" | "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);
-  const rawRooms = custom ? list<OfficeRoom>(scene.rooms, 40) : DEFAULT_LAYOUT.rooms;
-  const rawDoors = custom ? list<OfficeDoor>(scene.doors, 60) : DEFAULT_LAYOUT.doors;
-  const rawItems = Array.isArray(scene?.furniture) ? list<OfficeFurniture>(scene.furniture, MAX_FURNITURE) : custom ? [] : DEFAULT_LAYOUT.furniture;
+  const cols = Math.min(Math.max(int(scene?.cols, custom ? 20 : pack.layout.cols), 6), MAX_COLS);
+  const rows = Math.min(Math.max(int(scene?.rows, custom ? 14 : pack.layout.rows), 6), MAX_ROWS);
+  const rawRooms = custom ? list<OfficeRoom>(scene.rooms, MAX_ROOMS) : pack.layout.rooms;
+  const rawDoors = custom ? list<OfficeDoor>(scene.doors, MAX_DOORS) : pack.layout.doors;
+  const rawItems = Array.isArray(scene?.furniture) ? list<OfficeFurniture>(scene.furniture, MAX_FURNITURE) : custom ? [] : pack.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, index) => {
@@ -201,7 +178,7 @@ function buildLayout(scene: OfficeLayout): Pick<World, "cols" | "rows" | "rooms"
     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),
+      name: str(room?.name, 60),
       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),
@@ -220,36 +197,46 @@ function buildLayout(scene: OfficeLayout): Pick<World, "cols" | "rows" | "rooms"
   for (const door of doors) mark(door.x, door.y, true);
 
   const furniture: Item[] = rawItems
-    .filter((item) => item && Object.hasOwn(FURNITURE, item.type))
-    .map((item) => ({ type: item.type, x: int(item.x, -99), y: int(item.y, -99) }));
+    .filter((item) => item && Object.hasOwn(pack.items, item.type))
+    .map((item) => {
+      const label = str(item.label, 40);
+      return { type: item.type, x: int(item.x, -99), y: int(item.y, -99), ...(label ? { label } : {}) };
+    });
   for (const item of furniture) {
-    const spec = FURNITURE[item.type];
+    const spec = pack.items[item.type] as ItemSpec;
     if (spec.solid === false) continue;
     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 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;
+    const offset = (pack.items[item.type] as ItemSpec).spot;
     if (!offset) return undefined;
     const point = { x: item.x + offset.x, y: item.y + offset.y };
     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 seats = furniture.filter((item) => (pack.items[item.type] as ItemSpec).use === "seat").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 (["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);
+    const use = (pack.items[item.type] as ItemSpec).use;
+    if (use === "lounge") spots.lounge.push(point);
+    if (use === "board") spots.board.push(point);
   }
-  return { cols, rows, rooms, doors, furniture, walkable, seats, spots };
+  const links = list<{ from: string; to: string }>(scene?.links, MAX_LINKS)
+    .map((link) => ({ from: str(link?.from, 60), to: str(link?.to, 60) }))
+    .filter((link) => link.from && link.to);
+  return { cols, rows, rooms, doors, furniture, walkable, seats, spots, links };
 }
 
 /** Build a world from a scene. Bad values are dropped or clamped, so it never throws. */
 export function createWorld(scene: OfficeScene = {}): World {
+  const pack = worldData(scene?.world, OFFICE);
   const world: World = {
-    ...buildLayout(scene),
+    pack,
+    showLinks: true,
+    ...buildLayout(scene, pack),
     agents: list<OfficeAgent>(scene?.agents, MAX_AGENTS).map(toAgent),
     tasks: list<OfficeTask>(scene?.tasks, MAX_TASKS).map(toTask),
   };
@@ -259,7 +246,7 @@ export function createWorld(scene: OfficeScene = {}): 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));
+  Object.assign(world, buildLayout(layout, world.pack), { routes: undefined });
   for (const agent of world.agents) {
     agent.seat = undefined;
     agent.path = [];

package/src/worlds/office-data.ts

@@ -0,0 +1,58 @@
+/** The office as data: what furniture exists, how big it is, what it's for, and what things are called. */
+
+import type { WorldData } from "../pack.js";
+import type { OfficeDoor, OfficeFurniture, OfficeRoom } from "../types.js";
+
+/** Footprint in tiles, and where someone stands to use it, relative to its corner. */
+export const OFFICE_ITEMS: WorldData["items"] = {
+  desk: { w: 3, h: 2, spot: { x: 1, y: 2 }, use: "seat" },
+  coffee: { w: 2, h: 1, spot: { x: 0, y: 1 }, use: "lounge" },
+  water: { w: 1, h: 1, spot: { x: 0, y: 1 }, use: "lounge" },
+  sofa: { w: 3, h: 1, spot: { x: 1, y: 1 }, use: "lounge" },
+  plant: { w: 1, h: 1 },
+  fern: { w: 1, h: 1 },
+  board: { w: 4, h: 1, spot: { x: 1, y: 1 }, use: "board" },
+  whiteboard: { w: 3, h: 1, spot: { x: 1, y: 1 }, use: "board" },
+  shelf: { w: 2, h: 1, spot: { x: 0, y: 1 }, use: "lounge" },
+  server: { w: 1, h: 1 },
+  table: { w: 3, h: 2, spot: { x: 1, y: 2 }, use: "board" },
+  rug: { w: 4, h: 3, solid: false },
+  pile: { w: 1, h: 1, solid: false },
+  arcade: { w: 1, h: 1, spot: { x: 0, y: 1 }, use: "lounge" },
+  fridge: { w: 1, h: 1, spot: { x: 0, y: 1 }, use: "lounge" },
+  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 }, use: "lounge" },
+  tv: { w: 3, h: 1, spot: { x: 1, y: 2 }, use: "lounge" },
+  vending: { w: 1, h: 1, spot: { x: 0, y: 1 }, use: "lounge" },
+  trophy: { w: 1, h: 1 },
+  clock: { w: 1, h: 1, solid: false, wall: true },
+  poster: { w: 1, h: 1, solid: false, wall: true },
+};
+
+export const OFFICE_LAYOUT = {
+  cols: 26,
+  rows: 17,
+  rooms: [
+    { id: "studio", name: "Studio", x: 1, y: 3, w: 15, h: 13, floor: "wood" },
+    { id: "lounge", name: "Lounge", x: 17, y: 3, w: 8, h: 6, floor: "carpet" },
+    { id: "quests", name: "Quests", x: 17, y: 10, w: 8, h: 6, floor: "tile" },
+  ] as OfficeRoom[],
+  doors: [{ x: 16, y: 6 }, { x: 16, y: 13 }, { x: 23, y: 9 }] as OfficeDoor[],
+  furniture: [
+    { type: "desk", x: 2, y: 4 }, { type: "desk", x: 7, y: 4 }, { type: "desk", x: 12, y: 4 },
+    { type: "desk", x: 2, y: 10 }, { type: "desk", x: 7, y: 10 }, { type: "desk", x: 12, y: 10 },
+    { type: "plant", x: 1, y: 8 }, { type: "plant", x: 15, y: 8 }, { type: "server", x: 15, y: 15 }, { type: "server", x: 14, y: 15 },
+    { type: "shelf", x: 1, y: 15 },
+    { type: "coffee", x: 19, y: 3 }, { type: "water", x: 21, y: 3 }, { type: "sofa", x: 22, y: 3 }, { type: "rug", x: 20, y: 5 }, { type: "plant", x: 24, y: 8 },
+    { type: "board", x: 19, y: 10 }, { type: "table", x: 19, y: 13 }, { type: "plant", x: 24, y: 15 },
+  ] as OfficeFurniture[],
+};
+
+export const OFFICE: WorldData = {
+  id: "office",
+  name: "Pixel Office",
+  words: { quests: "QUESTS" },
+  items: OFFICE_ITEMS,
+  layout: OFFICE_LAYOUT,
+};

package/src/worlds/office-paint.ts

@@ -0,0 +1,284 @@
+/**
+ * How the office looks. Every piece of art here is original to this project, made in code at
+ * 16 pixels a tile.
+ */
+
+import { OUTLINE, TILE, rect, shade, type Ctx, type Palette } from "../paint.js";
+import { isSeated, type Item, type World } from "../world.js";
+
+function drawDesk(c: Ctx, x: number, y: number, on: boolean, time: number, seed: number, palette: Palette, blocked: boolean): void {
+  rect(c, "#55351d", x + 1, y + 22, 46, 8);
+  rect(c, "#6b4427", x + 1, y + 13, 46, 10);
+  rect(c, "#8a5a33", x + 1, y + 10, 46, 12);
+  rect(c, "#a87545", x + 1, y + 10, 46, 2);
+  rect(c, "#3b2413", x + 3, y + 22, 3, 9);
+  rect(c, "#3b2413", x + 42, y + 22, 3, 9);
+  rect(c, "#55351d", x + 30, y + 23, 12, 7);
+  rect(c, "#7c5637", x + 31, y + 24, 10, 2);
+  rect(c, "#d4a24e", x + 35, y + 24, 2, 1);
+  rect(c, "#7c5637", x + 31, y + 27, 10, 2);
+  rect(c, "#d4a24e", x + 35, y + 27, 2, 1);
+  // Monitor
+  rect(c, OUTLINE, x + 14, y - 3, 20, 15);
+  rect(c, "#374151", x + 22, y + 12, 4, 2);
+  rect(c, "#4b5563", x + 19, y + 14, 10, 1);
+  if (blocked) {
+    rect(c, "#3f0f14", x + 15, y - 2, 18, 13);
+    if (Math.floor(time * 2) % 2 === 0) { rect(c, "#ef4444", x + 23, y, 2, 6); rect(c, "#ef4444", x + 23, y + 7, 2, 2); }
+  } else if (on) {
+    rect(c, "#0f2a2e", x + 15, y - 2, 18, 13);
+    const scroll = Math.floor(time * 3 + (seed % 13));
+    for (let line = 0; line < 5; line++) {
+      const width = 3 + (((seed >> line) & 7) + (scroll + line) * 7) % 12;
+      rect(c, line % 3 === 0 ? palette.primary : line % 3 === 1 ? "#7dd3fc" : "#fcd34d", x + 16 + (line % 2) * 2, y - 1 + line * 2.2, width, 1);
+    }
+    c.fillStyle = "rgba(125,211,252,0.12)";
+    c.fillRect(x + 10, y + 11, 28, 8);
+  } else {
+    rect(c, "#1f2937", x + 15, y - 2, 18, 13);
+    rect(c, "#374151", x + 17, y, 3, 1);
+  }
+  rect(c, "#d1d5db", x + 16, y + 15, 16, 5);
+  for (let row = 0; row < 2; row++) for (let key = 0; key < 7; key++) rect(c, "#9ca3af", x + 17 + key * 2, y + 16 + row * 2, 1, 1);
+  rect(c, "#e5e7eb", x + 34, y + 16, 3, 4);
+  rect(c, "#f3f4f6", x + 40, y + 13, 5, 5);
+  rect(c, palette.primary, x + 40, y + 15, 5, 1);
+  rect(c, "#fde68a", x + 4, y + 13, 7, 6);
+  rect(c, "#fbbf24", x + 5, y + 15, 5, 1);
+}
+
+function drawBoard(c: Ctx, x: number, y: number, world: World): void {
+  rect(c, "#3a2c1e", x, y - 12, 64, 27);
+  rect(c, "#d9c29c", x + 2, y - 10, 60, 23);
+  for (let i = 0; i < 40; i++) rect(c, "#c9b08a", x + 3 + (i * 37) % 58, y - 9 + (i * 13) % 21, 1, 1);
+  const colors = { todo: "#fde68a", doing: "#93c5fd", done: "#86efac" };
+  const per = 8;
+  world.tasks.slice(0, per * 2).forEach((task, index) => {
+    const col = index % per;
+    const row = Math.floor(index / per);
+    rect(c, "#00000033", x + 5 + col * 7, y - 7 + row * 10, 6, 8);
+    rect(c, colors[task.state], x + 4 + col * 7, y - 8 + row * 10, 6, 8);
+    rect(c, "#ef4444", x + 6 + col * 7, y - 8 + row * 10, 2, 1);
+    rect(c, "#00000040", x + 5 + col * 7, y - 5 + row * 10, 4, 1);
+    rect(c, "#00000040", x + 5 + col * 7, y - 3 + row * 10, 3, 1);
+  });
+}
+
+function drawFurniture(c: Ctx, item: Item, world: World, time: number, palette: Palette): void {
+  const x = item.x * TILE;
+  const y = item.y * TILE;
+  switch (item.type) {
+    case "desk": {
+      const seatX = item.x + 1;
+      const seatY = item.y + 2;
+      const user = world.agents.find((a) => a.seat?.x === seatX && a.seat?.y === seatY && isSeated(a));
+      drawDesk(c, x, y, Boolean(user), time, user?.seed ?? 0, palette, user?.state === "blocked");
+      break;
+    }
+    case "coffee":
+      rect(c, "#374151", x, y + 2, 32, 14);
+      rect(c, "#6b7280", x, y + 2, 32, 2);
+      rect(c, OUTLINE, x + 4, y - 9, 15, 15);
+      rect(c, "#27272a", x + 5, y - 8, 13, 13);
+      rect(c, Math.floor(time * 2) % 2 ? "#ef4444" : "#7f1d1d", x + 15, y - 6, 2, 2);
+      rect(c, "#52525b", x + 7, y - 6, 6, 4);
+      rect(c, "#f3f4f6", x + 8, y + 3, 5, 4);
+      rect(c, "#f3f4f6", x + 23, y - 1, 5, 5);
+      rect(c, "#92400e", x + 24, y, 3, 1);
+      for (let i = 0; i < 3; i++) {
+        c.fillStyle = "rgba(255,255,255,0.5)";
+        c.fillRect(x + 9 + Math.round(Math.sin(time * 2 + i) * 1.5), y - 1 - ((time * 8 + i * 4) % 9), 1, 2);
+      }
+      break;
+    case "water":
+      rect(c, "#d1d5db", x + 3, y + 3, 10, 13);
+      rect(c, "#9ca3af", x + 3, y + 14, 10, 2);
+      rect(c, "#60a5fa", x + 4, y - 8, 8, 11);
+      rect(c, "#bae6fd", x + 5, y - 7, 2, 9);
+      rect(c, "#3b82f6", x + 5, y + 6, 2, 2);
+      rect(c, "#ef4444", x + 9, y + 6, 2, 2);
+      if (Math.floor(time * 0.4 + item.x) % 5 === 0) rect(c, "#e0f2fe", x + 8, y - 2 - ((time * 6) % 7), 1, 1);
+      break;
+    case "sofa":
+      rect(c, shade(palette.primary, -60), x + 1, y - 7, 46, 11);
+      rect(c, shade(palette.primary, -30), x + 2, y - 6, 44, 3);
+      rect(c, "#4b5563", x, y + 3, 48, 11);
+      rect(c, "#6b7280", x + 3, y + 3, 20, 7);
+      rect(c, "#6b7280", x + 25, y + 3, 20, 7);
+      rect(c, "#374151", x, y + 12, 48, 3);
+      rect(c, "#374151", x - 1, y - 2, 4, 16);
+      rect(c, "#374151", x + 45, y - 2, 4, 16);
+      break;
+    case "plant":
+      rect(c, "#92400e", x + 4, y + 9, 8, 7);
+      rect(c, "#b45309", x + 3, y + 8, 10, 2);
+      for (const [lx, ly, lw, lh] of [[6, -3, 4, 11], [2, 0, 5, 6], [9, 1, 5, 6], [4, -6, 3, 6], [9, -5, 3, 5]] as const) rect(c, "#15803d", x + lx, y + ly, lw, lh);
+      rect(c, "#22c55e", x + 7, y - 3, 2, 8);
+      rect(c, "#22c55e", x + 3, y + 1, 2, 3);
+      rect(c, "#4ade80", x + 10, y - 4, 1, 3);
+      break;
+    case "fern":
+      rect(c, "#57534e", x + 3, y + 10, 10, 6);
+      rect(c, "#78716c", x + 2, y + 9, 12, 2);
+      for (let i = 0; i < 7; i++) {
+        const lean = i - 3;
+        for (let j = 0; j < 5; j++) rect(c, j % 2 ? "#16a34a" : "#15803d", x + 7 + lean * (j / 2 + 1), y + 8 - j * 2 + Math.abs(lean), 2, 2);
+      }
+      break;
+    case "board":
+      drawBoard(c, x, y, world);
+      break;
+    case "whiteboard":
+      rect(c, "#9ca3af", x, y - 10, 48, 22);
+      rect(c, "#f9fafb", x + 2, y - 8, 44, 18);
+      rect(c, "#3b82f6", x + 5, y - 5, 14, 1); rect(c, "#3b82f6", x + 5, y - 2, 9, 1);
+      rect(c, "#ef4444", x + 24, y - 6, 8, 6); rect(c, "#f9fafb", x + 25, y - 5, 6, 4);
+      rect(c, "#10b981", x + 8, y + 3, 20, 1); rect(c, "#10b981", x + 27, y + 2, 1, 3);
+      rect(c, "#6b7280", x + 2, y + 10, 44, 2);
+      break;
+    case "shelf":
+      rect(c, "#5b3a21", x, y - 12, 32, 28);
+      for (let shelf = 0; shelf < 2; shelf++) {
+        rect(c, "#3b2413", x + 2, y - 10 + shelf * 13, 28, 11);
+        for (let book = 0; book < 8; book++) {
+          const color = ["#ef4444", "#3b82f6", "#10b981", "#f59e0b", "#8b5cf6"][(book * 3 + shelf + item.x) % 5] as string;
+          rect(c, color, x + 3 + book * 3, y - 8 + shelf * 13 + (book % 3), 2, 9 - (book % 3));
+          rect(c, shade(color, 40), x + 3 + book * 3, y - 6 + shelf * 13, 2, 1);
+        }
+      }
+      break;
+    case "server":
+      rect(c, OUTLINE, x, y - 13, 16, 29);
+      rect(c, "#1f2937", x + 1, y - 12, 14, 27);
+      for (let i = 0; i < 5; i++) {
+        rect(c, "#111827", x + 2, y - 11 + i * 5, 12, 4);
+        const on = Math.floor(time * 3 + i * 2 + item.x) % 3 !== 0;
+        rect(c, on ? "#22c55e" : "#14532d", x + 3, y - 10 + i * 5, 1, 1);
+        rect(c, i % 2 === 0 ? "#f59e0b" : "#3b82f6", x + 5, y - 10 + i * 5, 1, 1);
+        rect(c, "#374151", x + 8, y - 10 + i * 5, 5, 1);
+      }
+      break;
+    case "table":
+      rect(c, "#44403c", x + 2, y + 16, 44, 12);
+      rect(c, "#78716c", x + 2, y + 3, 44, 14);
+      rect(c, "#a8a29e", x + 2, y + 3, 44, 2);
+      rect(c, "#f9fafb", x + 10, y + 6, 8, 6);
+      rect(c, "#f9fafb", x + 28, y + 8, 8, 6);
+      rect(c, "#1f2937", x + 12, y + 8, 4, 1);
+      rect(c, "#3b82f6", x + 30, y + 10, 4, 1);
+      break;
+    case "pile":
+      // A stack of boxes, for a group of loose files.
+      rect(c, "#14141f", x + 1, y + 5, 14, 10);
+      rect(c, "#b98b55", x + 2, y + 6, 12, 8);
+      rect(c, "#d3a874", x + 2, y + 6, 12, 2);
+      rect(c, "#14141f", x + 4, y + 1, 8, 5);
+      rect(c, "#d3a874", x + 5, y + 2, 6, 3);
+      break;
+    case "rug":
+      rect(c, palette.primary, x, y, 64, 48);
+      c.fillStyle = "rgba(0,0,0,0.42)";
+      c.fillRect(x + 3, y + 3, 58, 42);
+      rect(c, palette.primary, x + 6, y + 6, 52, 1);
+      rect(c, palette.primary, x + 6, y + 41, 52, 1);
+      rect(c, palette.primary, x + 6, y + 6, 1, 36);
+      rect(c, palette.primary, x + 57, y + 6, 1, 36);
+      for (let i = 0; i < 6; i++) rect(c, palette.primary, x + 12 + i * 8, y + 22, 4, 4);
+      break;
+    case "arcade":
+      rect(c, OUTLINE, x, y - 14, 16, 30);
+      rect(c, "#4c1d95", x + 1, y - 13, 14, 28);
+      rect(c, "#111827", x + 3, y - 10, 10, 9);
+      rect(c, ["#22c55e", "#ec4899", "#38bdf8"][Math.floor(time * 2) % 3] as string, x + 4 + (Math.floor(time * 4) % 7), y - 8 + (Math.floor(time * 3) % 5), 2, 2);
+      rect(c, "#f59e0b", x + 3, y - 13, 10, 2);
+      rect(c, "#27272a", x + 2, y + 1, 12, 4);
+      rect(c, "#ef4444", x + 4, y + 2, 2, 2);
+      rect(c, "#3b82f6", x + 9, y + 2, 2, 2);
+      break;
+    case "fridge":
+      rect(c, OUTLINE, x + 1, y - 12, 14, 28);
+      rect(c, "#e5e7eb", x + 2, y - 11, 12, 26);
+      rect(c, "#9ca3af", x + 2, y - 3, 12, 1);
+      rect(c, "#6b7280", x + 11, y - 8, 1, 3);
+      rect(c, "#6b7280", x + 11, y, 1, 5);
+      rect(c, "#fde68a", x + 4, y - 9, 3, 3);
+      rect(c, "#fca5a5", x + 5, y + 3, 3, 3);
+      break;
+    case "printer":
+      rect(c, "#4b5563", x + 2, y + 8, 12, 8);
+      rect(c, OUTLINE, x + 1, y - 2, 14, 11);
+      rect(c, "#d1d5db", x + 2, y - 1, 12, 9);
+      rect(c, "#f9fafb", x + 4, y - 5 - (Math.floor(time) % 4 === 0 ? 1 : 0), 8, 5);
+      rect(c, "#22c55e", x + 11, y + 1, 2, 1);
+      rect(c, "#9ca3af", x + 3, y + 5, 10, 1);
+      break;
+    case "lamp":
+      rect(c, "#374151", x + 5, y + 13, 6, 3);
+      rect(c, "#4b5563", x + 7, y - 4, 2, 17);
+      rect(c, OUTLINE, x + 2, y - 10, 12, 8);
+      rect(c, "#fde68a", x + 3, y - 9, 10, 6);
+      rect(c, "#fef3c7", x + 4, y - 8, 4, 2);
+      break;
+    case "beanbag":
+      rect(c, OUTLINE, x, y + 3, 16, 13);
+      rect(c, shade(palette.primary, -50), x + 1, y + 4, 14, 11);
+      rect(c, shade(palette.primary, -20), x + 3, y + 5, 8, 4);
+      rect(c, "#00000040", x + 1, y + 13, 14, 2);
+      break;
+    case "tv":
+      rect(c, "#3b2413", x + 2, y + 8, 44, 8);
+      rect(c, "#5b3a21", x + 2, y + 8, 44, 2);
+      rect(c, OUTLINE, x + 4, y - 14, 40, 22);
+      rect(c, "#0b1120", x + 5, y - 13, 38, 20);
+      for (let i = 0; i < 9; i++) {
+        const h = 2 + ((i * 5 + Math.floor(time * 3)) % 12);
+        rect(c, i % 3 === 0 ? palette.primary : i % 3 === 1 ? "#38bdf8" : "#f472b6", x + 8 + i * 4, y + 5 - h, 3, h);
+      }
+      break;
+    case "vending":
+      rect(c, OUTLINE, x, y - 14, 16, 30);
+      rect(c, "#b91c1c", x + 1, y - 13, 14, 28);
+      rect(c, "#0f172a", x + 3, y - 11, 8, 16);
+      for (let row = 0; row < 3; row++) for (let col = 0; col < 2; col++) rect(c, ["#fbbf24", "#34d399", "#60a5fa", "#f472b6"][(row + col * 2) % 4] as string, x + 4 + col * 3, y - 10 + row * 5, 2, 4);
+      rect(c, "#d1d5db", x + 12, y - 9, 2, 6);
+      rect(c, "#111827", x + 3, y + 8, 10, 4);
+      break;
+    case "trophy":
+      rect(c, "#6b4427", x + 2, y + 8, 12, 8);
+      rect(c, "#8a5a33", x + 2, y + 8, 12, 2);
+      rect(c, "#78350f", x + 5, y + 5, 6, 3);
+      rect(c, "#f59e0b", x + 7, y + 1, 2, 4);
+      rect(c, OUTLINE, x + 3, y - 8, 10, 10);
+      rect(c, "#fbbf24", x + 4, y - 7, 8, 8);
+      rect(c, "#fde68a", x + 5, y - 6, 2, 5);
+      rect(c, "#fbbf24", x + 1, y - 6, 3, 1); rect(c, "#fbbf24", x + 12, y - 6, 3, 1);
+      break;
+    case "clock": {
+      rect(c, OUTLINE, x + 3, y + 1, 10, 10);
+      rect(c, "#f9fafb", x + 4, y + 2, 8, 8);
+      rect(c, "#1f2937", x + 8, y + 3, 1, 3);
+      rect(c, "#1f2937", x + 8, y + 6, 3, 1);
+      break;
+    }
+    case "poster": {
+      const colors = ["#7c3aed", "#0ea5e9", "#db2777", "#059669"];
+      const color = colors[(item.x + item.y) % colors.length] as string;
+      rect(c, OUTLINE, x + 2, y, 12, 11);
+      rect(c, color, x + 3, y + 1, 10, 9);
+      rect(c, shade(color, 60), x + 5, y + 3, 6, 3);
+      rect(c, "#f9fafb", x + 5, y + 7, 6, 1);
+      break;
+    }
+  }
+}
+
+export const OFFICE_PAINTER = {
+  furniture: drawFurniture,
+  glow(item: Item, world: World, glow: (x: number, y: number, radius: number, color: string) => void): void {
+  if (item.type === "lamp") glow(item.x * TILE + 8, item.y * TILE, 36, "rgba(253,224,139,0.30)");
+  if (item.type === "arcade" || item.type === "vending" || item.type === "tv") glow(item.x * TILE + 8, item.y * TILE, 26, "rgba(125,211,252,0.16)");
+  if (item.type === "desk" && world.agents.some((a) => a.seat?.x === item.x + 1 && a.seat?.y === item.y + 2 && isSeated(a))) {
+    glow(item.x * TILE + 24, item.y * TILE + 8, 30, "rgba(125,211,252,0.26)");
+  }
+  },
+};