Draw freight on the card, and teach the bot to build a railroad

src/sim/board-svg.ts

@@ -194,6 +194,44 @@ export function officeSvg(cells: CellView[], runningRow: number): string {
     out += `<text class="bs-cn" x="6" y="12">${esc(cell.label)}</text>`;
     out += `<text class="bs-coord" x="${W - 5}" y="12" text-anchor="end">${cell.row},${cell.col}</text>`;
 
+    /**
+     * THE LOAD PIPELINE, on the card itself.
+     *
+     * A load crosses green -> MEN | AT | WORK -> the spotted car, and that journey is the whole of
+     * freight. It was drawn only in the side panel, so advancing a load changed nothing on the card
+     * the player was looking at. The printed cards put these squares under the track for exactly
+     * this reason.
+     */
+    const f = cell.facility;
+    if (f) {
+      const cellW = 13;
+      const box = (bx: number, by: number, filled: boolean, cls: string, label?: string): string =>
+        `<rect class="bs-wb ${cls}${filled ? ' bs-occ' : ''}" x="${bx}" y="${by}" width="${cellW}" height="12" rx="2"/>` +
+        (label ? `<text class="bs-wl" x="${bx + cellW / 2}" y="${by + 9}" text-anchor="middle">${esc(label)}</text>` : '');
+
+      let bx = 7;
+      const by = H - 42;
+      // Green: what is waiting to be worked.
+      for (let i = 0; i < Math.max(1, f.greenCap); i++) {
+        out += box(bx, by, i < f.green.length, 'bs-green');
+        bx += cellW + 2;
+      }
+      out += `<text class="bs-arrow" x="${bx + 1}" y="${by + 9}">›</text>`;
+      bx += 8;
+      // MEN | AT | WORK — a load sits in one of these while it is being worked.
+      for (let i = 0; i < f.maw.length; i++) {
+        out += box(bx, by, f.maw[i] !== null, 'bs-maw', ['M', 'A', 'W'][i]);
+        bx += cellW + 2;
+      }
+      out += `<text class="bs-arrow" x="${bx + 1}" y="${by + 9}">›</text>`;
+      bx += 8;
+      // Red: what has come off an arriving car and is waiting to be cleared.
+      for (let i = 0; i < Math.max(1, f.redCap); i++) {
+        out += box(bx, by, i < f.red.length, 'bs-red');
+        bx += cellW + 2;
+      }
+    }
+
     // Standing room, drawn as the printed squares: filled means occupied.
     const spots = cell.facility ? Math.max(1, cell.facility.trackCap) : cell.cars.length;
     for (let i = 0; i < Math.min(spots, 4); i++) {
@@ -205,7 +243,9 @@ export function officeSvg(cells: CellView[], runningRow: number): string {
     }
 
     if (cell.enhancements.length > 0) {
-      out += `<text class="bs-enh" x="6" y="${H - 30}">${esc(cell.enhancements.join(' · '))}</text>`;
+      // Above the load pipeline, not on it: an `onCard` enhancement can land on a facility, and at
+      // the old baseline the label printed straight through the green/MEN|AT|WORK/red squares.
+      out += `<text class="bs-enh" x="6" y="${H - 46}">${esc(cell.enhancements.join(' · '))}</text>`;
     }
     if (cell.tray) {
       out += `<g class="bs-crew"><rect x="${W / 2 - 26}" y="${RAIL - 10}" width="52" height="20" rx="3"/>` +
@@ -274,6 +314,15 @@ export const BOARD_CSS = `
 .bs-crew rect{fill:#8a6d1f;stroke:#e0c060;stroke-width:1.2}
 .bs-tlab{fill:#eaf6ec;font:600 11px ui-monospace,monospace}
 .bs-carlab{fill:#cfd6e0;font:9px ui-monospace,monospace}
+.bs-wb{fill:#20262e;stroke:#4a5361;stroke-width:1}
+.bs-wb.bs-green{stroke:#3f7a52}
+.bs-wb.bs-green.bs-occ{fill:rgba(63,122,82,.55)}
+.bs-wb.bs-maw{stroke:#8a6d1f}
+.bs-wb.bs-maw.bs-occ{fill:rgba(190,150,40,.65)}
+.bs-wb.bs-red{stroke:#8a5a5a}
+.bs-wb.bs-red.bs-occ{fill:rgba(170,70,70,.6)}
+.bs-wl{fill:#8d97a5;font:7px ui-monospace,monospace}
+.bs-arrow{fill:#5f6b7a;font:10px ui-monospace,monospace}
 .bs-cn{fill:#e6e9ee;font:600 11px ui-monospace,monospace}
 .bs-coord{fill:#5f6b7a;font:9px ui-monospace,monospace}
 .bs-name{fill:#e6e9ee;font:600 11px ui-monospace,monospace}