In-game tools

component Ball {
    y: f32 = 3
    vy: f32 = 0
    // The share of its speed a ball keeps at each bounce.
    bounce: f32 = 0.75
    // How hard it last hit the floor, in metres a second, and how many times it has.
    impact: f32 = 0
    hits: u32 = 0
}

/* What each panel reads. The inspector reads the entity world through an adapter; the console a
   ring of entries the page appends to; the profiler the frame's times and the GPU's. */
const selection = createSelection();
selectOnly(selection, entities[0] as number);
const inspectable = entitiesInspectable(world, [Ball]);
/* Five lines, which the console shows whole on a phone held sideways: the overlay does not scroll
   it yet, so a longer ring would show its oldest lines and hide the newest. */
const log = createLogRing(5);
const ROW = 16;
const consoleView = createConsoleView({ rowHeight: ROW });
consoleView.filter.minSeverity = level(flag('level', 'debug'));
const history = createFrameHistory(120);
const timings = createGpuPassTimings();

function panels() {
  return [
    bindPanel(
      inspectorPanel,
      () => ({ world: inspectable }),
      createInspectorView({ selection, rowHeight: ROW }),
    ),
    bindPanel(consolePanel, () => ({ log }), consoleView),
    bindPanel(
      profilerPanel,
      () => ({ timings, history, residency: null }),
      createProfilerView({ rowHeight: ROW }),
    ),
  ];
}

/* Closed until F3. The overlay lays itself out in a column of its own space and paints through
   four calls, which here go to a 2D canvas over the stage. Where that space sits on the page is the
   page's choice: here, below the hint and above the switches, so the page's own controls stay
   clear. */
let side: 'left' | 'right' = flag('side', 'right') === 'left' ? 'left' : 'right';
let overlay: ToolsOverlay = makeOverlay(flag('open', 'no') === 'yes');
function makeOverlay(open: boolean): ToolsOverlay {
  return createToolsOverlay({ panels: panels(), key: 'F3', side, visible: open });
}

const layer = document.querySelector<HTMLCanvasElement>('#tools');
const ink = layer?.getContext('2d') ?? null;
const painter: OverlayPainter = {
  rect(x, y, w, h, colour) {
    if (ink === null) return;
    ink.fillStyle = colour;
    ink.fillRect(x, y, w, h);
  },
  text(content, x, y, colour) {
    if (ink === null) return;
    ink.fillStyle = colour;
    ink.font = '12px ui-monospace, monospace';
    ink.fillText(content, x + 8, y);
  },
  clip(x, y, w, h) {
    if (ink === null) return;
    ink.save();
    ink.beginPath();
    ink.rect(x, y, w, h);
    ink.clip();
  },
  unclip() {
    ink?.restore();
  },
};

let top = 0;
function fit(): void {
  if (layer === null || ink === null) return;
  const scale = devicePixelRatio;
  const above = document.querySelector('#hint')?.getBoundingClientRect().bottom ?? 0;
  const below = document.querySelector('#controls')?.getBoundingClientRect().top ?? innerHeight;
  top = Math.round(above + 8);
  layer.width = Math.round(innerWidth * scale);
  layer.height = Math.round(innerHeight * scale);
  ink.setTransform(scale, 0, 0, scale, 0, top * scale);
  overlay.resize(innerWidth, Math.max(0, Math.round(below - 8) - top));
}
addEventListener('resize', fit);

/* Every event goes to the overlay first; what it takes, the game never sees. */
addEventListener('keydown', (event) => {
  if (overlay.route(keyEvent(event.key, event.shiftKey, event.ctrlKey))) {
    event.preventDefault();
    return;
  }
  if (event.key === 'Tab') {
    event.preventDefault();
    const at = entities.indexOf(primarySelection(selection) ?? -1);
    selectOnly(selection, entities[(at + 1) % entities.length] as number);
    overlay.invalidate();
  } else if (event.key === '[' || event.key === ']') {
    nudgeBounce(event.key === ']' ? 0.05 : -0.05);
  } else if (event.key === 'r' || event.key === 'R') {
    drop();
    selectOnly(selection, entities[0] as number);
    appendLog(log, 'info', 'every ball dropped again');
    overlay.invalidate();
  }
});
/* Pointer events in the overlay's space, which starts `top` pixels down the page. */
addEventListener('pointerdown', (event) => {
  if (overlay.route(pointerEvent('down', event.clientX, event.clientY - top, event.button)))
    event.preventDefault();
});
addEventListener('pointerup', (event) => {
  overlay.route(pointerEvent('up', event.clientX, event.clientY - top, event.button));
});
addEventListener(
  'wheel',
  (event) => {
    if (overlay.route(wheelEvent(event.clientX, event.clientY - top, event.deltaX, event.deltaY)))
      event.preventDefault();
  },
  { passive: false },
);

/* An edit is a command: pushed onto the overlay's stack, it is applied once and can be taken
   back with Ctrl+Z while the overlay is open. */
function nudgeBounce(by: number): void {
  const ball = primarySelection(selection);
  if (ball === null) return;
  const now = world.read(ball, Ball, 'bounce') as number;
  const next = Math.round(Math.min(0.95, Math.max(0, now + by)) * 100) / 100;
  const command = setFieldCommand(inspectable, [ball], 'Ball', ['bounce'], [next]);
  if (command === null) return;
  overlay.undo.push(command);
  appendLog(
    log,
    'debug',
    `ball ${entities.indexOf(ball) + 1} bounce ${now.toFixed(2)} to ${next.toFixed(2)}`,
  );
  overlay.invalidate();
}

/* What the balls did this step, said once each. Every entry names where the rule lives, so a click
   on it in the console moves the source cursor there. */
const seen = new Map<Entity, { hits: number; resting: boolean }>();
function report(): void {
  entities.forEach((ball, index) => {
    const hits = world.read(ball, Ball, 'hits') as number;
    const resting = (world.read(ball, Ball, 'vy') as number) === 0;
    const before = seen.get(ball) ?? { hits: 0, resting: false };
    if (hits > before.hits) {
      const impact = world.read(ball, Ball, 'impact') as number;
      const severity: Severity = impact > 6 ? 'warn' : 'info';
      appendLog(
        log,
        severity,
        `ball ${index + 1} hit the floor at ${impact.toFixed(1)} m/s`,
        'examples/tools/balls.drs',
        26,
      );
    }
    if (resting && !before.resting) appendLog(log, 'info', `ball ${index + 1} has come to rest`);
    seen.set(ball, { hits, resting });
  });
}

/* The frame's time from the clock, and the GPU's in the engine's three brackets: the renderer
   opens shadows and reflection itself, and the game opens rest around the rest of its drawing.
   A sample arrives a few frames after its frame, and never where the device cannot time. */
pushFrame(history, now - last);
meter.sample((now - last) / 1000, now);
last = now;
const timer = renderer.gpuTimer;
timer.beginFrame();
drawShadows();
renderer.beginFrame([0.08, 0.09, 0.12]);
timer.begin('rest');
drawScene();
timer.end();
renderer.endFrame();
timer.endFrame();
const sample = timer.poll();
if (sample !== null) recordGpuSample(timings, sample);

/* The overlay over all of it, rebuilt each frame because the profiler changes every frame. */
if (ink !== null) ink.clearRect(0, -top, innerWidth, innerHeight);
overlay.invalidate();
overlay.frame(now);
paintOverlay(painter, overlay);

/**
 * A lockstep session as the network panel reads it: handed over as it is. The loop the game made is
 * read beside it for how far each tick rewound, which the session does not count.
 */
export function networkTools(
  session: LockstepSession<WorldSnapshot>,
  loop: RewindLoop<WorldSnapshot>,
  snapshotBytes: number,
): { panel: PanelBinding; afterTick(): void } {
  const recorder = createSessionRecorder();
  const view = createNetworkView({});
  let replayed = loop.stats.replayedTicks;
  return {
    panel: bindPanel(
      networkPanel,
      () => ({ session: sessionReadout(session, recorder, snapshotBytes) }),
      view,
    ),
    /** Once a tick, after the session has advanced: any new disagreement, and how far it rewound. */
    afterTick() {
      observeSession(recorder, session);
      const now = loop.stats.replayedTicks;
      pushRollback(view.rollback, now - replayed);
      replayed = now;
    },
  };
}

/**
 * What is around the player, into the console, when a key asks. The reports are filled in place,
 * so asking every frame allocates nothing but the text.
 */
const reports = createContactReports();
const scratch = new Int32Array(256);

export function logContacts(colliders: ColliderSet, player: Aabb, log: LogRing): void {
  const count = describeContacts(colliders, player, 0.25, scratch, reports);
  if (count === 0) appendLog(log, 'info', 'no collider within 25 cm');
  for (let at = 0; at < count; at += 1) {
    const near = reports[at] as ContactReport;
    /* Overlap on all three axes is inside, and the smallest is the way out. */
    const inside = near.depthX > 0 && near.depthY > 0 && near.depthZ > 0;
    const depth = Math.min(near.depthX, near.depthY, near.depthZ);
    appendLog(
      log,
      inside ? 'warn' : 'info',
      inside
        ? `collider ${near.index} is ${(depth * 100).toFixed(1)} cm inside`
        : `collider ${near.index} is ${(near.distanceM * 100).toFixed(1)} cm away`,
    );
  }
}