@blkc-code/render-canvas 0.3.0 → 0.7.0

package/src/draw.ts

@@ -4,31 +4,30 @@
  * and anything else that moves are drawn on top each frame (drawWorld).
  */
 
-import { FURNITURE, isSeated, type Agent, type Item, type Room, type World } from "./world.js";
+import { drawLinks, linkRoutes } from "./links.js";
+import { BODY_FONT, LABEL_FONT, OUTLINE, TILE, rect, shade, type Ctx, type Palette } from "./paint.js";
+import { isSeated, specOf, type Agent, type Item, type Room, type World } from "./world.js";
+import { OFFICE_PAINTER } from "./worlds/office-paint.js";
 
-export const TILE = 16;
+export { TILE, type Palette } from "./paint.js";
 
-export interface Palette { primary: string; background: string; text: string; accent: string }
+// --- Worlds ---------------------------------------------------------------------------------------
 
-type Ctx = CanvasRenderingContext2D;
-
-const LABEL_FONT = "bold 7px ui-monospace, Menlo, Consolas, monospace";
-const BODY_FONT = "7px ui-monospace, Menlo, Consolas, monospace";
-const OUTLINE = "#14141f";
+/** How one world looks. The engine draws the building, characters and labels around it. */
+export interface Painter {
+  furniture(c: Ctx, item: Item, world: World, time: number, palette: Palette): void;
+  /** What lights up at night. Call `glow` for anything that does. */
+  glow(item: Item, world: World, glow: (x: number, y: number, radius: number, color: string) => void): void;
+}
 
-const rect = (c: Ctx, color: string, x: number, y: number, w: number, h: number): void => {
-  c.fillStyle = color;
-  c.fillRect(Math.round(x), Math.round(y), w, h);
-};
+const painters = new Map<string, Painter>([["office", OFFICE_PAINTER]]);
 
-function shade(color: string, amount: number): string {
-  if (!color.startsWith("#")) return color;
-  const hex = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
-  const n = parseInt(hex.slice(1, 7), 16);
-  const channel = (shift: number): number => Math.max(0, Math.min(255, ((n >> shift) & 255) + amount));
-  return `rgb(${channel(16)},${channel(8)},${channel(0)})`;
+export function registerPainter(id: string, painter: Painter): void {
+  painters.set(id, painter);
 }
 
+const painterFor = (world: World): Painter => painters.get(world.pack.id) ?? OFFICE_PAINTER;
+
 // --- Time of day, from the viewer's own clock ------------------------------------------------------------
 
 export interface Daylight { sky: string; sun: string; night: number }
@@ -238,6 +237,20 @@ function drawFloor(c: Ctx, room: Room): void {
           for (let i = 0; i < 5; i++) rect(c, i % 2 ? "#747b89" : "#636a78", x + ((tx * 11 + i * 3) % 15), y + ((ty * 5 + i * 5) % 15), 1, 1);
           if (noise === 3) rect(c, "#596070", x + 3, y + 8, 8, 1);
           break;
+        case "hall": {
+          // Polished floor, with a runner down the middle of a corridor's length.
+          rect(c, "#cfc8b8", x, y, TILE, TILE);
+          rect(c, "#bdb6a6", x, y + 15, TILE, 1);
+          rect(c, "#bdb6a6", x + 15, y, 1, TILE);
+          const along = room.w >= room.h;
+          const offset = along ? ty - room.y : tx - room.x;
+          const size = along ? room.h : room.w;
+          if (along && offset === 0) rect(c, "#7f6a55", x, y + 12, TILE, 4);
+          if (along && offset === size - 1) rect(c, "#7f6a55", x, y, TILE, 4);
+          if (!along && offset === 0) rect(c, "#7f6a55", x + 12, y, 4, TILE);
+          if (!along && offset === size - 1) rect(c, "#7f6a55", x, y, 4, TILE);
+          break;
+        }
         case "grass":
           rect(c, "#3f8f4f", x, y, TILE, TILE);
           for (let i = 0; i < 7; i++) rect(c, i % 3 ? "#4aa35c" : "#347a43", x + ((tx * 5 + i * 9) % 15), y + ((ty * 7 + i * 3) % 14), 1, 2);
@@ -262,6 +275,23 @@ const WALL_FACE = "#5c628f";
 const WALL_DARK = "#4a4f78";
 const WALL_LIGHT = "#6d74a4";
 
+/** Outside the building: lawn, with the odd shrub and tree. */
+function drawGrounds(c: Ctx, tx: number, ty: number): void {
+  const x = tx * TILE;
+  const y = ty * TILE;
+  rect(c, (tx + ty) % 2 === 0 ? "#4b8a4f" : "#478549", x, y, TILE, TILE);
+  const noise = (tx * 73 + ty * 151) % 29;
+  for (let i = 0; i < 4; i++) rect(c, "#5a9b5c", x + ((tx * 5 + i * 7) % 15), y + ((ty * 3 + i * 5) % 15), 1, 2);
+  if (noise === 4) {
+    rect(c, "#2f6a38", x + 3, y + 7, 10, 7);
+    rect(c, "#3c7f45", x + 5, y + 8, 5, 3);
+  } else if (noise === 11) {
+    rect(c, "#5b3a22", x + 7, y + 10, 2, 5);
+    rect(c, "#24592e", x + 2, y + 1, 12, 10);
+    rect(c, "#2f6f3a", x + 4, y + 2, 7, 5);
+  }
+}
+
 function drawWalls(c: Ctx, world: World, palette: Palette, daylight: Daylight): void {
   const open = new Set<string>();
   for (const room of world.rooms) {
@@ -275,12 +305,23 @@ function drawWalls(c: Ctx, world: World, palette: Palette, daylight: Daylight):
       if (open.has(key) || doors.has(key)) continue;
       const x = tx * TILE;
       const y = ty * TILE;
+      const nearBuilding = (cx: number, cy: number): boolean => {
+        for (let ay = cy - 1; ay <= cy + 1; ay++) {
+          for (let ax = cx - 1; ax <= cx + 1; ax++) if (open.has(`${ax},${ay}`) || doors.has(`${ax},${ay}`)) return true;
+        }
+        return false;
+      };
+      if (!nearBuilding(tx, ty)) {
+        drawGrounds(c, tx, ty);
+        continue;
+      }
       if (open.has(`${tx},${ty + 1}`)) {
         rect(c, WALL_FACE, x, y, TILE, TILE);
         rect(c, WALL_LIGHT, x, y, TILE, 1);
         rect(c, WALL_DARK, x, y + 12, TILE, 4);
         rect(c, palette.primary, x, y + 11, TILE, 1);
-        if (tx % 4 === 3 && !world.furniture.some((item) => FURNITURE[item.type].wall && item.x === tx && item.y === ty)) {
+        // Windows look outside, so only an outer wall has them.
+        if (tx % 4 === 3 && !nearBuilding(tx, ty - 1) && !world.furniture.some((item) => specOf(world, item).wall && item.x === tx && item.y === ty)) {
           // A window, in the colour of the sky right now.
           rect(c, "#1f2937", x + 1, y + 1, 14, 9);
           rect(c, daylight.sky, x + 2, y + 2, 12, 7);
@@ -310,6 +351,13 @@ function drawWalls(c: Ctx, world: World, palette: Palette, daylight: Daylight):
 function drawLabels(c: Ctx, world: World): void {
   c.font = LABEL_FONT;
   c.textBaseline = "top";
+  for (const item of world.furniture) {
+    if (!item.label) continue;
+    const width = Math.ceil(c.measureText(item.label).width) + 4;
+    rect(c, "#f4ecd8", item.x * TILE + 17, item.y * TILE + 3, width, 10);
+    c.fillStyle = "#1c1408";
+    c.fillText(item.label, item.x * TILE + 19, item.y * TILE + 4.5);
+  }
   for (const room of world.rooms) {
     if (!room.name) continue;
     const label = room.name.toUpperCase();
@@ -328,8 +376,8 @@ export function drawBuilding(c: Ctx, world: World, palette: Palette, daylight: D
   rect(c, WALL_TOP, 0, 0, world.cols * TILE, world.rows * TILE);
   for (const room of world.rooms) drawFloor(c, room);
   drawWalls(c, world, palette, daylight);
-  for (const item of world.furniture) if (item.type === "rug") drawFurniture(c, item, world, 0, palette);
-  for (const item of world.furniture) if (FURNITURE[item.type].wall) drawFurniture(c, item, world, 0, palette);
+  for (const item of world.furniture) if (item.type === "rug" || item.type === "pile") painterFor(world).furniture(c, item, world, 0, palette);
+  for (const item of world.furniture) if (specOf(world, item).wall) painterFor(world).furniture(c, item, world, 0, palette);
   // Light from the windows falling across the floor.
   if (daylight.sun !== "rgba(0,0,0,0)") {
     c.fillStyle = daylight.sun;
@@ -342,264 +390,6 @@ export function drawBuilding(c: Ctx, world: World, palette: Palette, daylight: D
   }
 }
 
-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 "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;
-    }
-  }
-}
-
 function nameTag(c: Ctx, agent: Agent, selected: boolean, width: number): void {
   c.font = LABEL_FONT;
   c.textBaseline = "top";
@@ -661,7 +451,7 @@ function drawProgress(c: Ctx, world: World, palette: Palette): void {
   const w = 96;
   rect(c, "rgba(17,24,39,0.85)", 4, 4, w, 20);
   c.fillStyle = "#ffffff";
-  c.fillText(`QUESTS ${done}/${world.tasks.length}`, 8, 6.5);
+  c.fillText(`${world.pack.words.quests} ${done}/${world.tasks.length}`, 8, 6.5);
   rect(c, "#374151", 8, 16, w - 8, 4);
   rect(c, palette.primary, 8, 16, Math.round(((w - 8) * done) / world.tasks.length), 4);
 }
@@ -681,11 +471,18 @@ export function drawWorld(
   if (building) c.drawImage(building, 0, 0, width, height);
   else drawBuilding(c, world, palette, daylight);
 
+  // On the floor, so people and furniture stay in front of the lines.
+  if (world.showLinks && world.links.length > 0) {
+    world.routes ??= linkRoutes(world);
+    drawLinks(c, world.routes, time);
+  }
+
+  const painter = painterFor(world);
   const scene: { depth: number; draw: () => void }[] = [];
   for (const item of world.furniture) {
-    const spec = FURNITURE[item.type];
+    const spec = specOf(world, item);
     if (spec.solid === false) continue;
-    scene.push({ depth: (item.y + spec.h) * TILE - 2, draw: () => drawFurniture(c, item, world, time, palette) });
+    scene.push({ depth: (item.y + spec.h) * TILE - 2, draw: () => painterFor(world).furniture(c, item, world, time, palette) });
   }
   const shown = world.agents.filter((agent) => agent.state !== "away");
   for (const agent of shown) scene.push({ depth: agent.y * TILE + 14, draw: () => drawAgent(c, agent, time, agent.id === selected) });
@@ -705,13 +502,7 @@ export function drawWorld(
       c.fillStyle = gradient;
       c.fillRect(x - radius, y - radius, radius * 2, radius * 2);
     };
-    for (const item of world.furniture) {
-      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)");
-      }
-    }
+    for (const item of world.furniture) painter.glow(item, world, glow);
     c.restore();
   }
 

package/src/index.ts

@@ -13,6 +13,9 @@ import { createOffice, type OfficeHandle } from "./office.js";
 import type { OfficeScene } from "./types.js";
 
 export { createOffice } from "./office.js";
+export { registerPainter, type Painter } from "./draw.js";
+export { drawLinks, linkRoutes, type LinkRoute } from "./links.js";
+export { registerWorld, type ItemSpec, type WorldData } from "./pack.js";
 export type { OfficeHandle, OfficeOptions } from "./office.js";
 export * from "./types.js";
 export { FURNITURE, agentAt, applyLayout, applyUpdate, createWorld, findPath, step } from "./world.js";

package/src/links.ts

@@ -0,0 +1,76 @@
+/** How the code depends on itself, drawn as lines along the routes agents really walk. */
+
+import { TILE, type Ctx } from "./paint.js";
+import { findPath, isWalkable, type World } from "./world.js";
+
+export interface LinkRoute { from: string; to: string; points: { x: number; y: number }[] }
+
+const COLOURS = ["#38bdf8", "#f472b6", "#fbbf24", "#a78bfa", "#34d399", "#fb7185"];
+
+/** A tile someone can stand on, as near the middle of the room as possible. */
+function standingTile(world: World, roomId: string): { x: number; y: number } | undefined {
+  const room = world.rooms.find((candidate) => candidate.id === roomId);
+  if (!room) return undefined;
+  const cx = room.x + (room.w >> 1);
+  const cy = room.y + (room.h >> 1);
+  let best: { x: number; y: number } | undefined;
+  let bestDistance = Infinity;
+  for (let y = room.y; y < room.y + room.h; y++) {
+    for (let x = room.x; x < room.x + room.w; x++) {
+      const distance = Math.abs(x - cx) + Math.abs(y - cy);
+      if (distance < bestDistance && isWalkable(world, x, y)) {
+        best = { x, y };
+        bestDistance = distance;
+      }
+    }
+  }
+  return best;
+}
+
+/** Each link's walking route. A link whose rooms aren't on the map, or can't be reached, is left out. */
+export function linkRoutes(world: World): LinkRoute[] {
+  const routes: LinkRoute[] = [];
+  for (const link of world.links) {
+    const start = standingTile(world, link.from);
+    const end = standingTile(world, link.to);
+    if (!start || !end) continue;
+    const path = findPath(world, start, end);
+    if (path && path.length > 0) routes.push({ from: link.from, to: link.to, points: [start, ...path] });
+  }
+  return routes;
+}
+
+/** Lines that move towards what is depended on. Shared stretches sit side by side. */
+export function drawLinks(c: Ctx, routes: LinkRoute[], time: number): void {
+  routes.forEach((route, index) => {
+    const colour = COLOURS[index % COLOURS.length] as string;
+    const offset = ((index % 5) - 2) * 2;
+    const at = (point: { x: number; y: number }): [number, number] => [point.x * TILE + 8 + offset, point.y * TILE + 8 + offset];
+    c.save();
+    c.lineWidth = 2;
+    c.strokeStyle = colour;
+    c.globalAlpha = 0.85;
+    c.setLineDash([6, 5]);
+    c.lineDashOffset = -time * 14;
+    c.beginPath();
+    route.points.forEach((point, i) => {
+      const [x, y] = at(point);
+      if (i === 0) c.moveTo(x, y);
+      else c.lineTo(x, y);
+    });
+    c.stroke();
+    c.setLineDash([]);
+    const first = route.points[0];
+    const last = route.points[route.points.length - 1];
+    if (first && last) {
+      const [sx, sy] = at(first);
+      const [ex, ey] = at(last);
+      c.fillStyle = colour;
+      c.fillRect(sx - 2, sy - 2, 4, 4);
+      c.beginPath();
+      c.arc(ex, ey, 4, 0, Math.PI * 2);
+      c.fill();
+    }
+    c.restore();
+  });
+}

package/src/office.ts

@@ -10,6 +10,8 @@ export interface OfficeHandle {
   update(scene: Pick<OfficeScene, "agents" | "tasks">): void;
   /** Change the building while everyone is in it. */
   setLayout(layout: OfficeLayout): void;
+  /** Show or hide the lines between rooms whose code is linked. */
+  setLinksVisible(on: boolean): 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. */
@@ -74,8 +76,10 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
   const width = (): number => world.cols * TILE;
   const height = (): number => world.rows * TILE;
 
+  // A big map starts small on screen, so it can be zoomed further: as far as 4x true size.
+  const zoomLimit = (): number => Math.max(MAX_ZOOM, scale > 0 ? 4 / scale : MAX_ZOOM);
   const clampView = (): void => {
-    view.zoom = Math.min(MAX_ZOOM, Math.max(1, view.zoom));
+    view.zoom = Math.min(zoomLimit(), 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));
   };
@@ -190,7 +194,7 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
       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));
+    view.zoom = Math.min(zoomLimit(), Math.max(1, view.zoom * factor));
     if (event) {
       const after = tileAt(event);
       view.x += (before.x - after.x) * TILE;
@@ -231,7 +235,7 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
     setLayout(layout) {
       applyLayout(world, layout);
       buildingDirty = true;
-      view.zoom = Math.min(view.zoom, MAX_ZOOM);
+      view.zoom = Math.min(view.zoom, zoomLimit());
       clampView();
       scale = 0;
       resize();
@@ -239,6 +243,7 @@ export function createOffice(canvas: HTMLCanvasElement, scene: OfficeScene = {},
     select,
     tileAt,
     setOverlay(draw) { overlay = draw; },
+    setLinksVisible(on) { world.showLinks = on; if (still) paint(); },
     setInteractive(on) { interactive = on; drag = undefined; if (!on) canvas.style.cursor = "crosshair"; },
     zoom,
     destroy() {

package/src/pack.ts

@@ -0,0 +1,36 @@
+/**
+ * What makes one world different from another. The engine handles walking, seats, time of day
+ * and agents, for any world. A world brings this data, plus a painter (see registerPainter).
+ */
+
+import type { OfficeLayout } from "./types.js";
+
+export interface ItemSpec {
+  w: number;
+  h: number;
+  solid?: boolean;
+  wall?: boolean;
+  /** Where someone stands to use it, relative to its corner. */
+  spot?: { x: number; y: number };
+  /** seat: where an agent works. lounge: where it rests. board: where it reviews. */
+  use?: "seat" | "lounge" | "board";
+}
+
+export interface WorldData {
+  id: string;
+  name: string;
+  words: {
+    /** The progress label over the map. */
+    quests: string;
+  };
+  items: Record<string, ItemSpec>;
+  layout: Required<Pick<OfficeLayout, "cols" | "rows" | "rooms" | "doors" | "furniture">>;
+}
+
+const worlds = new Map<string, WorldData>();
+
+export function registerWorld(data: WorldData): void {
+  worlds.set(data.id, data);
+}
+
+export const worldData = (id: string | undefined, fallback: WorldData): WorldData => (id && worlds.get(id)) || fallback;

package/src/paint.ts

@@ -0,0 +1,24 @@
+/** The small tools every painter uses. */
+
+export const TILE = 16;
+
+export interface Palette { primary: string; background: string; text: string; accent: string }
+
+export type Ctx = CanvasRenderingContext2D;
+
+export const LABEL_FONT = "bold 7px ui-monospace, Menlo, Consolas, monospace";
+export const BODY_FONT = "7px ui-monospace, Menlo, Consolas, monospace";
+export const OUTLINE = "#14141f";
+
+export const rect = (c: Ctx, color: string, x: number, y: number, w: number, h: number): void => {
+  c.fillStyle = color;
+  c.fillRect(Math.round(x), Math.round(y), w, h);
+};
+
+export function shade(color: string, amount: number): string {
+  if (!color.startsWith("#")) return color;
+  const hex = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
+  const n = parseInt(hex.slice(1, 7), 16);
+  const channel = (shift: number): number => Math.max(0, Math.min(255, ((n >> shift) & 255) + amount));
+  return `rgb(${channel(16)},${channel(8)},${channel(0)})`;
+}