Limit Order Book & Trade Tape

// Limit order book with Poisson-arrival limits/cancels/market orders.
// Top: cumulative depth chart. Bottom: scrolling trade tape.
// HUD: best bid/ask, spread, mid, microprice.

const N = 60, TICK = 0.01, REF = 100.0;
const TAPE_MAX = 40;
const LIM_R = 26, MKT_R = 0.55, CXL_R = 18, SZ_MEAN = 8;

let bids, asks, bbIdx, baIdx, tape, frame, lastPx, drift;

function poisson(lam) {
  if (lam <= 0) return 0;
  const L = Math.exp(-lam);
  let k = 0, p = 1;
  do { k++; p *= Math.random(); } while (p > L && k < 200);
  return k - 1;
}
function expRand(m) { return Math.max(1, Math.round(-m * Math.log(1 - Math.random()))); }
function lvl() { return Math.min(N - 1, Math.floor(-Math.log(1 - Math.random()) * 4)); }

function rebest() {
  let i = 0; while (i < N && bids[i] === 0) i++;
  if (i > 0 && i < N) {
    for (let j = 0; j < N - i; j++) bids[j] = bids[j + i];
    for (let j = N - i; j < N; j++) bids[j] = 0;
    bbIdx += i;
  }
  let k = 0; while (k < N && asks[k] === 0) k++;
  if (k > 0 && k < N) {
    for (let j = 0; j < N - k; j++) asks[j] = asks[j + k];
    for (let j = N - k; j < N; j++) asks[j] = 0;
    baIdx += k;
  }
  if (baIdx + bbIdx < 1) baIdx = 1 - bbIdx;
}
function eat(book, idxSign, idxBase) {
  let rem = expRand(SZ_MEAN * 2), l = 0;
  while (rem > 0 && l < N) {
    if (book[l] <= 0) { l++; continue; }
    const t = Math.min(rem, book[l]);
    book[l] -= t; rem -= t;
    const px = REF + (drift + idxSign * (idxBase + l)) * TICK;
    tape.push({ px, sz: t, side: idxSign, t: frame });
    lastPx = px;
    if (book[l] <= 0) l++;
  }
}

function init() {
  bids = new Float32Array(N); asks = new Float32Array(N);
  bbIdx = 1; baIdx = 1; tape = []; frame = 0; lastPx = REF; drift = 0;
  for (let i = 0; i < N; i++) {
    bids[i] = expRand(SZ_MEAN) * (1 + Math.exp(-i * 0.12)) * 4;
    asks[i] = expRand(SZ_MEAN) * (1 + Math.exp(-i * 0.12)) * 4;
  }
}

function step() {
  let n = poisson(LIM_R);
  for (let i = 0; i < n; i++) bids[lvl()] += expRand(SZ_MEAN);
  n = poisson(LIM_R);
  for (let i = 0; i < n; i++) asks[lvl()] += expRand(SZ_MEAN);
  n = poisson(CXL_R);
  for (let i = 0; i < n; i++) { const l = lvl(); bids[l] = Math.max(0, bids[l] - expRand(SZ_MEAN * 0.7)); }
  n = poisson(CXL_R);
  for (let i = 0; i < n; i++) { const l = lvl(); asks[l] = Math.max(0, asks[l] - expRand(SZ_MEAN * 0.7)); }
  n = poisson(MKT_R); for (let i = 0; i < n; i++) eat(asks, 1, baIdx);
  n = poisson(MKT_R); for (let i = 0; i < n; i++) eat(bids, -1, bbIdx);
  while (tape.length > TAPE_MAX) tape.shift();
  if (Math.random() < 0.02) drift += (Math.random() < 0.5 ? -1 : 1);
  rebest();
}

const fmt = p => p.toFixed(2);

function tick({ ctx, width, height }) {
  frame++; step();
  ctx.fillStyle = "#06080d"; ctx.fillRect(0, 0, width, height);

  const headH = 56;
  const depthH = Math.floor((height - headH) * 0.62);
  const tapeY = headH + depthH + 6;
  const tapeH = height - tapeY - 4;

  const bb = REF + (drift - bbIdx) * TICK;
  const ba = REF + (drift + baIdx) * TICK;
  const mid = 0.5 * (bb + ba);
  const spread = ba - bb;
  const qb = bids[0] || 1e-9, qa = asks[0] || 1e-9;
  const micro = (bb * qa + ba * qb) / (qa + qb);
  const bias = micro - mid;

  ctx.fillStyle = "#0a1018"; ctx.fillRect(0, 0, width, headH);
  ctx.strokeStyle = "#1a2030"; ctx.strokeRect(0.5, 0.5, width - 1, headH - 1);
  ctx.font = "bold 12px ui-monospace, monospace";
  ctx.textAlign = "left"; ctx.fillStyle = "#e8ecf4";
  ctx.fillText("LIMIT ORDER BOOK", 10, 18);
  ctx.font = "10px ui-monospace, monospace"; ctx.fillStyle = "#5a6478";
  ctx.fillText("Poisson limits, cancels, market hits", 10, 34);
  ctx.fillStyle = "#3a4458";
  ctx.fillText("last " + fmt(lastPx), 10, 48);

  ctx.textAlign = "right";
  ctx.font = "11px ui-monospace, monospace";
  ctx.fillStyle = "#7cf08a"; ctx.fillText("bid  " + fmt(bb), width - 8, 16);
  ctx.fillStyle = "#ff7a8a"; ctx.fillText("ask  " + fmt(ba), width - 8, 30);
  ctx.fillStyle = "#ffcf66"; ctx.fillText("spr  " + spread.toFixed(2), width - 8, 44);

  ctx.textAlign = "center";
  ctx.font = "bold 14px ui-monospace, monospace"; ctx.fillStyle = "#e8ecf4";
  ctx.fillText("mid " + fmt(mid), width / 2, 22);
  ctx.font = "10px ui-monospace, monospace"; ctx.fillStyle = "#9fb4d8";
  ctx.fillText("microprice " + micro.toFixed(4), width / 2, 38);
  ctx.fillStyle = bias > 0 ? "#7cf08a" : (bias < 0 ? "#ff7a8a" : "#9fb4d8");
  ctx.fillText((bias >= 0 ? "+" : "") + bias.toFixed(4) + " bias", width / 2, 50);

  // Depth chart
  const cx = width / 2;
  const halfW = (width - 20) / 2;
  let sB = 0, sA = 0;
  const cumB = new Float32Array(N), cumA = new Float32Array(N);
  for (let i = 0; i < N; i++) { sB += bids[i]; cumB[i] = sB; sA += asks[i]; cumA[i] = sA; }
  const maxC = Math.max(sB, sA, 1);

  ctx.fillStyle = "#080c14"; ctx.fillRect(10, headH + 4, width - 20, depthH - 4);
  ctx.strokeStyle = "#141a26"; ctx.strokeRect(10.5, headH + 4.5, width - 21, depthH - 5);
  ctx.strokeStyle = "rgba(120,150,200,0.08)"; ctx.lineWidth = 1;
  for (let g = 1; g < 4; g++) {
    const yy = headH + 4 + (depthH - 4) * g / 4;
    ctx.beginPath(); ctx.moveTo(10, yy); ctx.lineTo(width - 10, yy); ctx.stroke();
  }
  const dT = headH + 10, dB = headH + depthH - 4, dh = dB - dT;

  ctx.fillStyle = "rgba(70,200,120,0.25)"; ctx.strokeStyle = "#7cf08a"; ctx.lineWidth = 1.5;
  ctx.beginPath(); ctx.moveTo(cx, dB);
  for (let i = 0; i < N; i++) {
    const x = cx - (i / (N - 1)) * halfW;
    const y = dB - (cumB[i] / maxC) * dh;
    ctx.lineTo(x, y);
  }
  ctx.lineTo(cx - halfW, dB); ctx.closePath(); ctx.fill(); ctx.stroke();

  ctx.fillStyle = "rgba(255,90,110,0.25)"; ctx.strokeStyle = "#ff7a8a";
  ctx.beginPath(); ctx.moveTo(cx, dB);
  for (let i = 0; i < N; i++) {
    const x = cx + (i / (N - 1)) * halfW;
    const y = dB - (cumA[i] / maxC) * dh;
    ctx.lineTo(x, y);
  }
  ctx.lineTo(cx + halfW, dB); ctx.closePath(); ctx.fill(); ctx.stroke();

  ctx.strokeStyle = "rgba(255,207,102,0.5)"; ctx.setLineDash([4, 3]);
  ctx.beginPath(); ctx.moveTo(cx, dT); ctx.lineTo(cx, dB); ctx.stroke();
  ctx.setLineDash([]);

  ctx.font = "9px ui-monospace, monospace"; ctx.fillStyle = "#3a4458"; ctx.textAlign = "center";
  for (let g = 0; g <= 4; g++) {
    const xL = cx - halfW + halfW * g / 4;
    const xR = cx + halfW * g / 4;
    const off = (N - 1) * (1 - g / 4);
    if (g < 4) ctx.fillText("-" + (off * TICK).toFixed(2), xL, dB + 11);
    if (g > 0) ctx.fillText("+" + (off * TICK).toFixed(2), xR, dB + 11);
  }
  ctx.fillText("mid", cx, dB + 11);
  ctx.textAlign = "left"; ctx.font = "10px ui-monospace, monospace"; ctx.fillStyle = "#9fb4d8";
  ctx.fillText("cumulative depth", 16, headH + 18);
  ctx.textAlign = "right"; ctx.fillStyle = "#5a6478";
  ctx.fillText("max " + maxC.toFixed(0), width - 16, headH + 18);

  // Tape
  ctx.fillStyle = "#080c14"; ctx.fillRect(10, tapeY, width - 20, tapeH);
  ctx.strokeStyle = "#141a26"; ctx.strokeRect(10.5, tapeY + 0.5, width - 21, tapeH - 1);
  ctx.textAlign = "left";
  ctx.font = "bold 10px ui-monospace, monospace"; ctx.fillStyle = "#9fb4d8";
  ctx.fillText("TRADE TAPE", 16, tapeY + 14);
  ctx.font = "9px ui-monospace, monospace"; ctx.fillStyle = "#3a4458";
  ctx.fillText("time   side   price    size", 16, tapeY + 26);

  const rowH = 11;
  const rows = Math.max(1, Math.floor((tapeH - 32) / rowH));
  ctx.font = "10px ui-monospace, monospace";
  for (let i = 0; i < Math.min(rows, tape.length); i++) {
    const tr = tape[tape.length - 1 - i];
    const yy = tapeY + 38 + i * rowH;
    const age = frame - tr.t;
    const a = Math.max(0.25, 1 - age / 90);
    const dt = (age / 60).toFixed(1);
    ctx.fillStyle = "rgba(140,160,200," + (a * 0.7) + ")";
    ctx.fillText("-" + dt + "s", 16, yy);
    ctx.fillStyle = tr.side > 0 ? "rgba(255,122,138," + a + ")" : "rgba(124,240,138," + a + ")";
    ctx.fillText(tr.side > 0 ? "BUY " : "SELL", 64, yy);
    ctx.fillStyle = "rgba(232,236,244," + a + ")";
    ctx.fillText(fmt(tr.px), 110, yy);
    ctx.fillStyle = "rgba(159,180,216," + a + ")";
    ctx.fillText(tr.sz.toFixed(0), 170, yy);
  }
}