@blkc-code/render-canvas 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blkc-code/render-canvas",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "Canvas renderer for BLKC: draws canvas Blocks such as the Pixel Office",
   "main": "dist/index.js",

package/src/draw.ts

@@ -351,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();
@@ -369,7 +376,7 @@ 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") painterFor(world).furniture(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)") {

package/src/office.ts

@@ -76,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));
   };
@@ -192,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;
@@ -233,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();

package/src/types.ts

@@ -22,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;

package/src/world.ts

@@ -8,10 +8,13 @@ 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
 
@@ -29,7 +32,7 @@ const str = (value: unknown, max = 120): string => (typeof value === "string" ?
 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 {
@@ -165,8 +168,8 @@ function buildLayout(scene: OfficeLayout, pack: WorldData): Pick<World, "links"
   const custom = Array.isArray(scene?.rooms) && scene.rooms.length > 0;
   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, 40) : pack.layout.rooms;
-  const rawDoors = custom ? list<OfficeDoor>(scene.doors, 60) : pack.layout.doors;
+  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.
@@ -175,7 +178,7 @@ function buildLayout(scene: OfficeLayout, pack: WorldData): Pick<World, "links"
     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),
@@ -195,7 +198,10 @@ function buildLayout(scene: OfficeLayout, pack: WorldData): Pick<World, "links"
 
   const furniture: Item[] = rawItems
     .filter((item) => item && Object.hasOwn(pack.items, item.type))
-    .map((item) => ({ type: item.type, x: int(item.x, -99), y: int(item.y, -99) }));
+    .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 = pack.items[item.type] as ItemSpec;
     if (spec.solid === false) continue;
@@ -218,7 +224,7 @@ function buildLayout(scene: OfficeLayout, pack: WorldData): Pick<World, "links"
     if (use === "lounge") spots.lounge.push(point);
     if (use === "board") spots.board.push(point);
   }
-  const links = list<{ from: string; to: string }>(scene?.links, 60)
+  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 };

package/src/worlds/office-data.ts

@@ -17,6 +17,7 @@ export const OFFICE_ITEMS: WorldData["items"] = {
   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 } },

package/src/worlds/office-paint.ts

@@ -167,6 +167,14 @@ function drawFurniture(c: Ctx, item: Item, world: World, time: number, palette:
       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)";