Add size selector, colour, and original-project credits to the demo

Size selector: a few width/height presets (40x12 up to 160x50) so the
ASCII resolution is adjustable. worker.js now reads width/height from
its own URL (query params app.js sets when it spawns it) instead of a
hardcoded 80x25, and font-size is computed in JS from the actual
viewport and grid dimensions rather than a flat CSS clamp(), so larger
grids scale down to fit instead of overflowing.

Colour: aalib's stdout driver only ever advertised AA_NORMAL_MASK, so
aa_render() never picked any other attribute class -- attrbuffer was
always 0, no matter what a consumer did with it. web/patches/aastdout.c
also advertises DIM/BOLD/REVERSE (not BOLDFONT: that's a font-switch
request meaningful only to curses/X11's alternate font resources, and
not EXTENDED: see the existing note on why that mode is unsafe here)
and emits a second attribute-class plane alongside the character plane.
worker.js run-length-encodes each row into (attribute, text) segments;
app.js renders them as styled spans -- a green phosphor-CRT palette in
place of the original's VGA text attributes.

Credits: links to the original aa-lib and bb project pages, the
system-requirements blurb from bb's original page, its last-modified
date, and the original bb.jpg logo (fetched from
aa-project.sourceforge.net, last-modified 1997, matching the date in
the blurb).

Claude-Session: https://claude.ai/code/session_01F6QKUwwiAxLNkYn4dv5TfW

Author: chrisns

web/Dockerfile

@@ -59,7 +59,14 @@ RUN for f in src/aaslnkbd.c src/aaslang.c src/aacurkbd.c src/aacurmou.c src/aacu
 # setjmp/longjmp aren't supported on wasm32 without the (non-standard)
 # exception-handling proposal, so drop the resize-interrupt trick entirely --
 # it's meaningless here regardless.
+# aastdout.c's driver only advertises AA_NORMAL_MASK, so aa_render() never
+# picks any other attribute class -- attrbuffer is always 0, no color/dim/
+# bold/reverse variation is possible no matter what the web page does with
+# it. Advertise DIM/BOLD/REVERSE too, and emit an attribute plane alongside
+# the character plane (see the file for the exact format web/worker.js
+# expects).
 COPY web/patches/aastdin.c src/aastdin.c
+COPY web/patches/aastdout.c src/aastdout.c
 RUN cp /usr/share/misc/config.guess /usr/share/misc/config.sub . \
     && ./configure --host=wasm32-wasi --disable-shared --enable-static \
     && make && make install
@@ -81,4 +88,4 @@ RUN cp /usr/share/misc/config.guess /usr/share/misc/config.sub . \
 
 FROM scratch AS export
 COPY --from=build /bb-1.3.0/bb /bb.wasm
-COPY web/index.html web/wasi-shim.js web/worker.js web/app.js /
+COPY web/index.html web/wasi-shim.js web/worker.js web/app.js web/bb-logo.jpg /

web/app.js

@@ -1,23 +1,95 @@
 const screen = document.getElementById("screen");
 const status = document.getElementById("status");
+const sizesEl = document.getElementById("sizes");
+
+const SIZES = [
+  { label: "40×12", w: 40, h: 12 },
+  { label: "80×25", w: 80, h: 25 },
+  { label: "120×37", w: 120, h: 37 },
+  { label: "160×50", w: 160, h: 50 },
+];
+const DEFAULT_SIZE = SIZES[1];
 
 const FPS = 20;
 const MAX_QUEUE = 4; // drop backlog rather than let display lag behind
 
-const queue = [];
-const worker = new Worker("worker.js", { type: "module" });
+const ESCAPE = { "&": "&amp;", "<": "&lt;", ">": "&gt;" };
+const escapeHtml = (s) => s.replace(/[&<>]/g, (c) => ESCAPE[c]);
+
+// Attribute classes from aa_render(), per aalib's aamktabl.c: 0 normal,
+// 1 dim, 2 bold, 3 boldfont (unused here -- font-switching only makes
+// sense for curses/X11), 4 reverse. Anything else is a fill-table miss
+// (aarender.c falls back to an unused sentinel table slot); style it as
+// normal rather than give it special meaning.
+function rowsToHtml(rows) {
+  let html = "";
+  for (const row of rows) {
+    for (const [attr, text] of row) {
+      const cls = attr >= 0 && attr <= 4 ? attr : 0;
+      html += `<span class="a${cls}">${escapeHtml(text)}</span>`;
+    }
+    html += "\n";
+  }
+  return html;
+}
+
+let worker = null;
+let queue = [];
+let cols = DEFAULT_SIZE.w;
+let rows = DEFAULT_SIZE.h;
+
+function startWorker(size) {
+  if (worker) worker.terminate();
+  queue = [];
+  status.textContent = "Loading bb.wasm…";
+  screen.after(status);
+  worker = new Worker(`worker.js?w=${size.w}&h=${size.h}`, { type: "module" });
+  worker.onmessage = (event) => {
+    const msg = event.data;
+    if (msg.type === "meta") {
+      cols = msg.width;
+      rows = msg.height;
+      fitFont();
+      return;
+    }
+    status.remove();
+    queue.push(msg.rows);
+    while (queue.length > MAX_QUEUE) queue.shift();
+  };
+  worker.onerror = (event) => {
+    status.textContent = `Failed to run bb.wasm: ${event.message}`;
+    screen.after(status);
+  };
+}
+
+function fitFont() {
+  const reserved = ["logo", "sizes", "status"]
+    .map((id) => document.getElementById(id))
+    .reduce((sum, el) => sum + (el && el.isConnected ? el.getBoundingClientRect().height + 12 : 0), 0);
+  const footer = document.querySelector("footer").getBoundingClientRect().height;
+  const availWidth = window.innerWidth - 32;
+  const availHeight = window.innerHeight - reserved - footer - 48;
+  const fontByWidth = availWidth / cols / 0.6; // ~character-width:font-size ratio for monospace
+  const fontByHeight = availHeight / rows / 1.2; // ~line-height:font-size ratio
+  const fontSize = Math.max(3, Math.min(fontByWidth, fontByHeight, 22));
+  screen.style.fontSize = `${fontSize}px`;
+}
 
-worker.onmessage = (event) => {
-  status.remove();
-  queue.push(event.data);
-  while (queue.length > MAX_QUEUE) queue.shift();
-};
+for (const size of SIZES) {
+  const button = document.createElement("button");
+  button.textContent = size.label;
+  button.setAttribute("aria-pressed", size === DEFAULT_SIZE);
+  button.onclick = () => {
+    for (const b of sizesEl.children) b.setAttribute("aria-pressed", b === button);
+    startWorker(size);
+  };
+  sizesEl.appendChild(button);
+}
 
-worker.onerror = (event) => {
-  status.textContent = `Failed to run bb.wasm: ${event.message}`;
-};
+window.addEventListener("resize", fitFont);
+startWorker(DEFAULT_SIZE);
 
 setInterval(() => {
-  const frame = queue.shift();
-  if (frame !== undefined) screen.textContent = frame;
+  const rows = queue.shift();
+  if (rows !== undefined) screen.innerHTML = rowsToHtml(rows);
 }, 1000 / FPS);

web/bb-logo.jpg

@@ -17,26 +17,84 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 1rem;
+    gap: 0.75rem;
+    padding: 1rem 0;
+    box-sizing: border-box;
+  }
+  #logo {
+    image-rendering: pixelated;
+    width: 119px;
+    height: 87px;
   }
   pre#screen {
     margin: 0;
     line-height: 1.15;
-    font-size: clamp(6px, 1.1vw, 14px);
     white-space: pre;
   }
+  /* aalib attribute classes (see web/patches/aastdout.c): a green
+     phosphor-CRT palette, in place of the original's VGA text
+     attributes (normal/dim/bold/reverse). */
+  .a0 { color: #4da34d; }
+  .a1 { color: #235923; }
+  .a2 { color: #aef7ae; }
+  .a3 { color: #4da34d; }
+  .a4 { color: #000; background: #4da34d; }
   #status { color: #666; }
+  #sizes {
+    display: flex;
+    gap: 0.4rem;
+  }
+  #sizes button {
+    background: #111;
+    color: #999;
+    border: 1px solid #333;
+    font: inherit;
+    font-size: 0.8rem;
+    padding: 0.2rem 0.6rem;
+    cursor: pointer;
+  }
+  #sizes button:hover { border-color: #666; color: #ccc; }
+  #sizes button[aria-pressed="true"] { color: #0f0; border-color: #0f0; }
   footer {
     color: #444;
-    font-size: 0.8rem;
+    font-size: 0.75rem;
+    text-align: center;
+    max-width: 40rem;
+    line-height: 1.4;
   }
   footer a { color: #666; }
+  footer .blurb {
+    color: #333;
+    font-style: italic;
+    margin-top: 0.4rem;
+  }
 </style>
 </head>
 <body>
+  <img id="logo" src="bb-logo.jpg" alt="bb logo">
+  <div id="sizes"></div>
   <pre id="screen"></pre>
   <div id="status">Loading bb.wasm&hellip;</div>
-  <footer><a href="https://github.com/chrisns/docker-bb">chrisns/docker-bb</a> — bb compiled to wasm32-wasi with zig cc, run client-side</footer>
+  <footer>
+    <div>
+      <a href="https://github.com/chrisns/docker-bb">chrisns/docker-bb</a>
+      — bb compiled to wasm32-wasi with zig cc, run client-side.
+      Original: <a href="https://aa-project.sourceforge.net/aalib/">aa-lib</a>
+      &middot;
+      <a href="https://aa-project.sourceforge.net/bb/">bb</a>
+      (last modified Wed Mar 26 1997)
+    </div>
+    <div class="blurb">
+      &ldquo;This demo requires computer at least as fast as 486/33 with coprocesor.
+      But speed of 486/66 or pentium is highly recomended (especially for hight
+      resolution SVGA modes). This demo does not require real operating system -
+      works even under MS-DOS. For dual monitor modes you need secondary
+      hercules / MDA compatible card. To compile demo you need 32 or 64 bit ANSI C
+      compiler (no it does not compile under Borland one) and libraries listed
+      bellow. PC speaker driver eats lots of CPU so running it at computers
+      slower than pentium is really not good idea.&rdquo;
+    </div>
+  </footer>
   <script type="module" src="app.js"></script>
 </body>
 </html>

web/index.html

@@ -0,0 +1,92 @@
+#include "config.h"
+#include <stdio.h>
+#include "aalib.h"
+#include "aaint.h"
+
+/* Advertise DIM/BOLD/REVERSE in addition to NORMAL so aa_render() actually
+ * varies c->attrbuffer per cell (aamktabl.c's ALOWED() only ever picks
+ * attribute classes the driver's supported mask includes -- with just
+ * AA_NORMAL_MASK, as upstream shipped, attrbuffer is always 0). Not
+ * AA_BOLDFONT_MASK: that's a font-switch request for drivers with actual
+ * alternate font resources (curses/X11), meaningless for plain text output.
+ * Not AA_EXTENDED: see the -extended note in web/worker.js.
+ */
+static int stdout_init(__AA_CONST struct aa_hardware_params *p,__AA_CONST  void *none, struct aa_hardware_params *dest, void **n)
+{
+    __AA_CONST static struct aa_hardware_params def={NULL, AA_NORMAL_MASK | AA_DIM_MASK | AA_BOLD_MASK | AA_REVERSE_MASK};
+    *dest=def;
+    return 1;
+}
+static void stdout_uninit(aa_context * c)
+{
+}
+static void stdout_getsize(aa_context * c, int *width, int *height)
+{
+}
+
+/* Frame format consumed by web/worker.js: a WIDTH*HEIGHT+HEIGHT-byte
+ * character plane (as upstream), immediately followed by a same-sized
+ * attribute plane (each cell's class index 0-4 as a single ASCII digit),
+ * then the usual form-feed + newline trailer.
+ */
+static void stdout_flush(aa_context * c)
+{
+    int x, y;
+    for (y = 0; y < aa_scrheight(c); y++) {
+	for (x = 0; x < aa_scrwidth(c); x++) {
+	    putc(c->textbuffer[x + y * aa_scrwidth(c)], stdout);
+	}
+	putc('\n', stdout);
+    }
+    for (y = 0; y < aa_scrheight(c); y++) {
+	for (x = 0; x < aa_scrwidth(c); x++) {
+	    putc('0' + (c->attrbuffer[x + y * aa_scrwidth(c)] & 7), stdout);
+	}
+	putc('\n', stdout);
+    }
+    putc('\f', stdout);
+    putc('\n', stdout);
+    fflush(stdout);
+}
+static void stdout_gotoxy(aa_context * c, int x, int y)
+{
+}
+__AA_CONST struct aa_driver stdout_d =
+{
+    "stdout", "Standard output driver",
+    stdout_init,
+    stdout_uninit,
+    stdout_getsize,
+    NULL,
+    NULL,
+    stdout_gotoxy,
+    stdout_flush,
+    NULL
+};
+
+
+static void stderr_flush(aa_context * c)
+{
+    int x, y;
+    for (y = 0; y < aa_scrheight(c); y++) {
+	for (x = 0; x < aa_scrwidth(c); x++) {
+	    putc(c->textbuffer[x + y * aa_scrwidth(c)], stderr);
+	}
+	putc('\n', stderr);
+    }
+    putc('\f', stderr);
+    putc('\n', stderr);
+    fflush(stderr);
+}
+__AA_CONST struct aa_driver stderr_d =
+{
+    "stderr", "Standard error driver",
+    stdout_init,
+    stdout_uninit,
+    stdout_getsize,
+    NULL,
+    NULL,
+    stdout_gotoxy,
+    stderr_flush,
+    NULL
+};

web/patches/aastdout.c

@@ -3,20 +3,48 @@
 import { WASI } from "./wasi-shim.js";
 
 // -width/-height pin aalib's stdout driver to an exact, known frame size.
-// aalib's stdout driver (aastdout.c) writes each frame as WIDTH*HEIGHT
-// content bytes (HEIGHT newline-terminated rows) followed by a form-feed
-// and a newline. No -extended: that mode uses aalib's full 256-value
-// palette as raw byte codes meant for the linux/curses drivers' custom
-// font remapping, not as printable text -- fed into textContent, those
-// bytes produce invalid-UTF-8 replacement glyphs and, worse, spurious
-// embedded newlines wherever a "pixel" happens to equal 0x0A or 0x0C.
-// The plain character set is safe, printable ASCII. Even so, count
-// bytes for framing rather than scanning for the trailer -- more robust
-// regardless of what's in the content.
-const WIDTH = 80;
-const HEIGHT = 25;
-const FRAME_BYTES = WIDTH * HEIGHT + HEIGHT;
-const FRAME_STRIDE = FRAME_BYTES + 2; // + trailing "\f\n"
+// The patched web/patches/aastdout.c (see that file) writes each frame as
+// two WIDTH*HEIGHT+HEIGHT-byte planes -- a character plane, then an
+// attribute-class plane (each cell's class 0-4 as an ASCII digit) -- then
+// a form-feed and a newline. No -extended: that mode uses aalib's full
+// 256-value character palette as raw byte codes meant for the linux/
+// curses drivers' custom font remapping, not as printable text -- fed
+// into the page, those bytes produce invalid-UTF-8 replacement glyphs
+// and, worse, spurious embedded newlines wherever a "pixel" happens to
+// equal 0x0A or 0x0C. The plain character set is safe, printable ASCII.
+// Even so, count bytes for framing rather than scanning for the
+// trailer -- more robust regardless of what's in the content.
+const params = new URL(self.location.href).searchParams;
+const WIDTH = Number(params.get("w")) || 80;
+const HEIGHT = Number(params.get("h")) || 25;
+const ROW_BYTES = WIDTH + 1; // + row newline
+const PLANE_BYTES = ROW_BYTES * HEIGHT;
+const FRAME_STRIDE = 2 * PLANE_BYTES + 2; // char plane + attr plane + "\f\n"
+
+postMessage({ type: "meta", width: WIDTH, height: HEIGHT });
+
+function toRows(frame) {
+  const chars = frame.subarray(0, PLANE_BYTES);
+  const attrs = frame.subarray(PLANE_BYTES, 2 * PLANE_BYTES);
+  const decoder = new TextDecoder();
+  const rows = [];
+  for (let y = 0; y < HEIGHT; y++) {
+    const rowOffset = y * ROW_BYTES;
+    const segments = [];
+    let start = 0;
+    let currentAttr = attrs[rowOffset] - 0x30;
+    for (let x = 1; x <= WIDTH; x++) {
+      const attr = x < WIDTH ? attrs[rowOffset + x] - 0x30 : -1;
+      if (attr !== currentAttr) {
+        segments.push([currentAttr, decoder.decode(chars.subarray(rowOffset + start, rowOffset + x))]);
+        start = x;
+        currentAttr = attr;
+      }
+    }
+    rows.push(segments);
+  }
+  return rows;
+}
 
 let pending = new Uint8Array(0);
 
@@ -28,8 +56,7 @@ function append(bytes) {
 
   let offset = 0;
   while (offset + FRAME_STRIDE <= pending.length) {
-    const frame = pending.subarray(offset, offset + FRAME_BYTES);
-    postMessage(new TextDecoder().decode(frame));
+    postMessage({ type: "frame", rows: toRows(pending.subarray(offset, offset + FRAME_STRIDE)) });
     offset += FRAME_STRIDE;
   }
   pending = pending.subarray(offset);