@blkc-code/render-canvas 0.1.0 → 0.6.0

package/src/index.ts

@@ -13,9 +13,12 @@ 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 { 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/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

@@ -1,24 +1,39 @@
-/** 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;
+  /** 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. */
+  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 +55,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 +65,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 +128,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 +230,20 @@ 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; },
+    setLinksVisible(on) { world.showLinks = on; if (still) paint(); },
+    setInteractive(on) { interactive = on; drag = undefined; if (!on) canvas.style.cursor = "crosshair"; },
+    zoom,
     destroy() {
       destroyed = true;
       cancelAnimationFrame(frame);
@@ -132,6 +251,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/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)})`;
+}

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,25 @@
 
 export type AgentState = "working" | "thinking" | "blocked" | "reviewing" | "idle" | "done" | "away";
 export type TaskState = "todo" | "doing" | "done";
-export type FloorStyle = "wood" | "carpet" | "tile";
-export type FurnitureType =
-  | "desk" | "coffee" | "sofa" | "plant" | "board" | "shelf" | "server" | "table" | "rug" | "water";
+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";
 
-export interface OfficeRoom { id?: string; name?: string; x: number; y: number; w: number; h: number; floor?: FloorStyle }
+/** An office item, or whatever else the world defines. */
+export type FurnitureType = OfficeFurnitureType | (string & {});
+
+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 +29,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 +38,22 @@ export interface OfficeAgent {
 }
 export interface OfficeTask { title: string; state?: TaskState; agent?: string }
 
-export interface OfficeScene {
+/** `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[];
 }