@funpixel/tools 0.0.0-stage → 0.1.1

package/dist/vendor/verify/src/page/perf.js

@@ -0,0 +1,255 @@
+// The performance sample (the Astra loop: a named view, sampled, one change,
+// the same sample again, compared). Frame intervals after a warm-up, the
+// engine's counters, what the scene holds and what the page has fetched.
+// Numbers only: no budgets and no verdict here; callers compare two runs.
+//
+// Part of @funpixel/verify: one function expression of one argument, loaded by
+// funpixel-services' measure_performance (include_str!, through
+// funpixel-browser's Evaluate) and by local `funtools profile`. See
+// mechanic_check.js for the calling convention.
+//
+// a = { view: string | null, frames, warmup, samples?, gpu? }
+//   view: enter this __FPX_VIEWS__ entry first (its `after` view before it);
+//   null = sample the page as it stands (funtools enters views itself).
+//   samples (opt-in, `funtools profile --compare`): also answer every frame's
+//     interval and JS work, frame_ms_samples / work_ms_samples, in order.
+//   gpu (opt-in): time the GPU work of each frame the way the profiler's
+//     GPUTimerQuery does (EXT_disjoint_timer_query[_webgl2] on the engine's own
+//     context, a TIME_ELAPSED query around each of the page's frame callbacks,
+//     read back a few frames later, a disjoint GPU dropping the lot): gpu_ms =
+//     { frames, p50, p95, max }, or gpu_unavailable naming why (most browsers
+//     hide the extension; a software renderer has none). Omitted fields = not asked.
+//
+// Answers JSON (a refusal is { error: 'view_not_declared', view, declared }):
+//   frames, frame_ms_{avg,p50,p95,p99,max}, fps, long_frames (> 33.4 ms)
+//   work_ms_{p50,p95}: the JS time the page's own frame callbacks took per frame
+//     (update + render submit); not capped by the display's refresh like frame_ms
+//   engine 'three' | 'pixi' | 'unknown'; draw_calls, triangles (per frame:
+//     Three's info accumulated across every pass; else renderer.js's WebGL
+//     counters when installed), geometries, textures, programs, objects
+//   scene: what the frame is made of (Three: meshes, instances, points,
+//     lights, shadow_lights, materials; Pixi: visible, sprites, graphics,
+//     text, particles, filtered), texture_mb (estimated: width × height × 4
+//     per reachable texture, a third more with mipmaps; compressed = its bytes)
+//   load: requests and bytes fetched so far, by kind; dom_ms, load_ms
+//   heap_mb, gpu, software (SwiftShader and friends), canvas_px, dpr
+async (a) => {
+  const FRAMES = Math.max(1, a.frames | 0 || 90);
+  const WARMUP = Math.max(0, a.warmup ?? 20);
+  const VIEW = a.view ?? null;
+  const views = window.__FPX_VIEWS__ || {};
+  if (VIEW) {
+    const v = views[VIEW];
+    if (!v || typeof v.enter !== 'function') {
+      return JSON.stringify({ error: 'view_not_declared', view: VIEW, declared: Object.keys(views) });
+    }
+    if (v.after && views[v.after] && typeof views[v.after].enter === 'function') { await views[v.after].enter(); }
+    await v.enter();
+  }
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  // The page's own frame callbacks are timed while we sample: the JS work of a frame (the game's
+  // update and the engine's render submit), which a display-capped frame interval cannot show.
+  const origRaf = window.requestAnimationFrame;
+  let work = 0;
+  // A game that only set window.renderer (an older contract line) is still read.
+  const three = window.__THREEJS_RENDERER__ || (window.renderer && window.renderer.info ? window.renderer : null);
+  // GPU timing (opt-in): the engine's own context, the profiler's extension and query pattern.
+  let gpu = null, gpuWhy = '';
+  if (a.gpu) {
+    let gl = null;
+    try { gl = (three && three.getContext && three.getContext()) || (window.__PIXI_APP__ && window.__PIXI_APP__.renderer && window.__PIXI_APP__.renderer.gl) || null; } catch (e) { gl = null; }
+    const gl2 = !!gl && typeof gl.createQuery === 'function';
+    const ext = gl && (gl2 ? gl.getExtension('EXT_disjoint_timer_query_webgl2') : gl.getExtension('EXT_disjoint_timer_query'));
+    if (!gl) gpuWhy = 'no WebGL context of the engine to time (__THREEJS_RENDERER__ or __PIXI_APP__)';
+    else if (!ext) gpuWhy = `this browser does not offer ${gl2 ? 'EXT_disjoint_timer_query_webgl2' : 'EXT_disjoint_timer_query'}`;
+    else {
+      const make = () => (gl2 ? gl.createQuery() : ext.createQueryEXT());
+      const begin = (q) => (gl2 ? gl.beginQuery(ext.TIME_ELAPSED_EXT, q) : ext.beginQueryEXT(ext.TIME_ELAPSED_EXT, q));
+      const end = () => (gl2 ? gl.endQuery(ext.TIME_ELAPSED_EXT) : ext.endQueryEXT(ext.TIME_ELAPSED_EXT));
+      const ready = (q) => (gl2 ? gl.getQueryParameter(q, gl.QUERY_RESULT_AVAILABLE) : ext.getQueryObjectEXT(q, ext.QUERY_RESULT_AVAILABLE_EXT));
+      const value = (q) => (gl2 ? gl.getQueryParameter(q, gl.QUERY_RESULT) : ext.getQueryObjectEXT(q, ext.QUERY_RESULT_EXT));
+      const drop = (q) => { try { gl2 ? gl.deleteQuery(q) : ext.deleteQueryEXT(q); } catch (e) { /* gone with the context */ } };
+      gpu = { frame: -1, active: false, pending: [], byFrame: new Map(), disjoint: false, failed: '' };
+      gpu.wrap = (cb, ts) => {
+        if (gpu.frame < 0 || gpu.active || gpu.failed) return cb(ts);
+        let q = null;
+        try { q = make(); begin(q); gpu.active = true; } catch (e) { gpu.failed = String(e && e.message || e); if (q) drop(q); return cb(ts); }
+        try { return cb(ts); } finally {
+          try { end(); gpu.pending.push({ q, frame: gpu.frame }); } catch (e) { gpu.failed = String(e && e.message || e); drop(q); }
+          gpu.active = false;
+        }
+      };
+      gpu.collect = () => {
+        if (gl.getParameter(ext.GPU_DISJOINT_EXT)) { gpu.disjoint = true; for (const p of gpu.pending) drop(p.q); gpu.pending = []; return; }
+        gpu.pending = gpu.pending.filter((p) => {
+          if (!ready(p.q)) return true;
+          const ns = value(p.q);
+          if (typeof ns === 'number') gpu.byFrame.set(p.frame, (gpu.byFrame.get(p.frame) || 0) + ns / 1e6);
+          drop(p.q);
+          return false;
+        });
+      };
+    }
+  }
+  window.requestAnimationFrame = (cb) => origRaf.call(window, (ts) => {
+    const s0 = performance.now();
+    try { return gpu ? gpu.wrap(cb, ts) : cb(ts); } finally { work += performance.now() - s0; }
+  });
+  // A page that stops drawing (a paused tab, a game that renders on input only) must not hang the call.
+  const raf = () => Promise.race([new Promise((r) => origRaf.call(window, r)), sleep(250).then(() => performance.now())]);
+  const draws = window.__FPX_DRAWS__; // renderer.js { op: 'install' }: every WebGL draw call, any engine
+  // Three resets renderer.info at the START of every render() call, so with an
+  // EffectComposer the counter only ever holds the last full-screen pass (a live
+  // racer read "1 draw call"). Own the reset for the sampling window and
+  // accumulate across every pass of every frame.
+  const infoOwned = !!(three && three.info);
+  let autoResetWas = true, callsSum = 0, trisSum = 0;
+  if (infoOwned) { autoResetWas = three.info.autoReset; three.info.autoReset = false; }
+  for (let i = 0; i < WARMUP; i++) await raf();
+  const t = [], w = [];
+  let last = await raf();
+  // Counters start at the frame the first interval starts from, so each sample holds one frame's draws.
+  if (infoOwned) three.info.reset();
+  const d0 = draws ? { calls: draws.calls, tris: draws.tris } : null;
+  for (let i = 0; i < FRAMES; i++) {
+    work = 0;
+    if (gpu) { gpu.frame = i; gpu.collect(); }
+    const now = await raf(); t.push(now - last); w.push(work); last = now;
+    if (infoOwned) { callsSum += three.info.render.calls; trisSum += three.info.render.triangles; three.info.reset(); }
+  }
+  if (gpu) {
+    gpu.frame = -1;
+    // Query results arrive a few frames late; wait for them, bounded.
+    for (let k = 0; k < 12 && gpu.pending.length && !gpu.disjoint; k++) { await raf(); gpu.collect(); }
+  }
+  if (infoOwned) three.info.autoReset = autoResetWas;
+  window.requestAnimationFrame = origRaf;
+  const inOrder = a.samples ? { t: t.slice(), w: w.slice() } : null;
+  t.sort((x, y) => x - y);
+  w.sort((x, y) => x - y);
+  const q = (p) => t[Math.min(t.length - 1, Math.floor(p * t.length))];
+  const avg = t.reduce((x, y) => x + y, 0) / t.length;
+  const r2 = (x) => +x.toFixed(2);
+  const out = {
+    frames: t.length,
+    frame_ms_avg: r2(avg), frame_ms_p50: r2(q(0.5)), frame_ms_p95: r2(q(0.95)), frame_ms_p99: r2(q(0.99)),
+    frame_ms_max: r2(t[t.length - 1]),
+    work_ms_p50: r2(w[Math.floor(0.5 * w.length)]), work_ms_p95: r2(w[Math.min(w.length - 1, Math.floor(0.95 * w.length))]),
+    fps: +(1000 / avg).toFixed(1), long_frames: t.filter((x) => x > 33.4).length,
+    engine: 'unknown', gpu: 'unknown', software: false, scene: {},
+  };
+  if (inOrder) { out.frame_ms_samples = inOrder.t.map(r2); out.work_ms_samples = inOrder.w.map(r2); }
+  if (a.gpu) {
+    const g = gpu ? [...gpu.byFrame.values()].sort((x, y) => x - y) : [];
+    if (g.length) out.gpu_ms = { frames: g.length, p50: r2(g[Math.floor(0.5 * g.length)]), p95: r2(g[Math.min(g.length - 1, Math.floor(0.95 * g.length))]), max: r2(g[g.length - 1]) };
+    else out.gpu_unavailable = gpuWhy || (gpu && gpu.disjoint ? 'the GPU reported a disjoint (a reset or a power change): timings dropped' : gpu && gpu.failed ? `the timer query failed: ${gpu.failed}` : 'no GPU timing came back while it sampled');
+  }
+  if (d0 && draws.calls > d0.calls) {
+    out.draw_calls = Math.round((draws.calls - d0.calls) / t.length);
+    out.triangles = Math.round((draws.tris - d0.tris) / t.length);
+  }
+  const mb = (bytes) => +(bytes / 1048576).toFixed(1);
+  const texBytes = (w, h, mips) => w * h * 4 * (mips ? 4 / 3 : 1);
+  if (three && three.info) {
+    out.engine = 'three';
+    const m = three.info.memory;
+    out.draw_calls = Math.round(callsSum / Math.max(1, t.length));
+    out.triangles = Math.round(trisSum / Math.max(1, t.length));
+    out.geometries = m.geometries; out.textures = m.textures;
+    out.programs = (three.info.programs || []).length;
+    const root = window.__THREEJS_SCENE__;
+    if (root && typeof root.traverse === 'function') {
+      const s = { meshes: 0, instances: 0, points: 0, lights: 0, shadow_lights: 0, materials: 0, texture_mb: 0 };
+      const mats = new Set(), texs = new Set();
+      let n = 0;
+      const addTex = (x) => { if (x && x.isTexture) texs.add(x); };
+      root.traverse((o) => {
+        n++;
+        if (o.isInstancedMesh) { s.meshes++; s.instances += o.count; } else if (o.isMesh || o.isSkinnedMesh) s.meshes++;
+        if (o.isPoints) s.points += o.geometry?.attributes?.position?.count ?? 0;
+        if (o.isLight) { s.lights++; if (o.castShadow) s.shadow_lights++; }
+        for (const mat of [].concat(o.material || [])) {
+          if (mats.has(mat)) continue;
+          mats.add(mat);
+          for (const k in mat) addTex(mat[k]);
+          if (mat.uniforms) for (const k in mat.uniforms) addTex(mat.uniforms[k]?.value);
+        }
+      });
+      addTex(root.background); addTex(root.environment);
+      let bytes = 0;
+      for (const x of texs) {
+        const mips = x.mipmaps && x.mipmaps.length ? x.mipmaps : null;
+        if (x.isCompressedTexture && mips) { for (const mp of mips) bytes += mp.data?.byteLength ?? 0; continue; }
+        const img = x.image || {};
+        const w = img.width ?? img.videoWidth ?? 0, h = img.height ?? img.videoHeight ?? 0;
+        bytes += texBytes(w, h, x.generateMipmaps) * (x.isCubeTexture ? 6 : 1);
+      }
+      s.materials = mats.size; s.texture_mb = mb(bytes);
+      out.objects = n; out.scene = s;
+    }
+  } else if (window.__PIXI_APP__) {
+    out.engine = 'pixi';
+    const app = window.__PIXI_APP__;
+    const s = { visible: 0, sprites: 0, graphics: 0, text: 0, particles: 0, filtered: 0, texture_mb: 0 };
+    let n = 0;
+    const walk = (c, shown) => {
+      n++;
+      const vis = shown && c.visible !== false && c.renderable !== false && (c.alpha ?? 1) > 0;
+      if (vis) {
+        s.visible++;
+        if (c.filters && c.filters.length) s.filtered++;
+        if (c.particleChildren) s.particles += c.particleChildren.length;
+        else if (c.context && typeof c.clear === 'function') s.graphics++;
+        else if (typeof c.text === 'string') s.text++;
+        else if (c.texture && c.anchor) s.sprites++;
+      }
+      for (const ch of c.children || []) walk(ch, vis);
+    };
+    walk(app.stage, true);
+    out.objects = n;
+    try {
+      const mt = app.renderer.texture && app.renderer.texture.managedTextures;
+      if (mt) {
+        out.textures = mt.length;
+        let bytes = 0;
+        for (const src of mt) bytes += texBytes(src.pixelWidth || src.width || 0, src.pixelHeight || src.height || 0, !!src.autoGenerateMipmaps);
+        s.texture_mb = mb(bytes);
+      }
+    } catch (e) { /* a renderer without the texture system: no count */ }
+    out.scene = s;
+  }
+  try {
+    const nav = performance.getEntriesByType('navigation')[0];
+    const load = { requests: 0, kb: 0, by_kind: {}, dom_ms: 0, load_ms: 0 };
+    if (nav) { load.dom_ms = Math.round(nav.domContentLoadedEventEnd); load.load_ms = Math.round(nav.loadEventEnd); load.kb += (nav.encodedBodySize || 0) / 1024; load.requests++; }
+    const kindOf = (e) => {
+      const u = e.name.split('?')[0].toLowerCase();
+      if (/\.(m?js)$/.test(u) || e.initiatorType === 'script') return 'script';
+      if (/\.(png|jpe?g|webp|avif|gif|ktx2|basis|svg)$/.test(u) || e.initiatorType === 'img') return 'image';
+      if (/\.(mp3|m4a|ogg|wav|aac)$/.test(u)) return 'audio';
+      if (/\.(glb|gltf|bin|drc)$/.test(u)) return 'model';
+      if (/\.(woff2?|ttf|otf)$/.test(u)) return 'font';
+      return 'other';
+    };
+    for (const e of performance.getEntriesByType('resource')) {
+      const kb = (e.encodedBodySize || e.transferSize || 0) / 1024, k = kindOf(e);
+      load.requests++; load.kb += kb;
+      load.by_kind[k] = +((load.by_kind[k] || 0) + kb).toFixed(1);
+    }
+    load.kb = +load.kb.toFixed(1);
+    out.load = load;
+  } catch (e) { /* no resource timing: no load block */ }
+  if (performance.memory) out.heap_mb = mb(performance.memory.usedJSHeapSize);
+  try {
+    const c = document.createElement('canvas');
+    const gl = c.getContext('webgl2') || c.getContext('webgl');
+    const d = gl && gl.getExtension('WEBGL_debug_renderer_info');
+    if (d) out.gpu = String(gl.getParameter(d.UNMASKED_RENDERER_WEBGL));
+    out.software = /swiftshader|llvmpipe|software/i.test(out.gpu);
+  } catch (e) { /* no WebGL: gpu stays unknown */ }
+  let cv = null, area = 0;
+  for (const c of document.querySelectorAll('canvas')) { if (c.width * c.height > area) { area = c.width * c.height; cv = c; } }
+  if (cv) out.canvas_px = [cv.width, cv.height];
+  out.dpr = window.devicePixelRatio;
+  return JSON.stringify(out);
+}

package/dist/vendor/verify/src/page/phone_check.js

@@ -0,0 +1,229 @@
+// One frame of the phone check (plan m13; the GDK's phone-check reference),
+// run inside the page after it loaded at a phone viewport with touch on.
+//
+// Part of @funpixel/verify: one function expression of one argument (see
+// mechanic_check.js for the calling convention). The edge's `mobile_check`
+// sends it through funpixel-browser's Evaluate, one call per frame, and takes
+// the frame's picture with the same call; whether the frame DREW is judged
+// from that picture, not here (a WebGL canvas cannot be read back in-page).
+//
+// a = { press: bool, settle_ms, press_ms, max_controls, fps_ms, min_target }
+//
+// Answers JSON:
+//   controls  — every named, visible control: its size, and when pressed
+//               whether anything changed (true), nothing did while the
+//               picture was observable (false), or it could not be told (null)
+//   started   — the start control pressed first, or null
+//   hud       — points in the middle of the play area with something painted
+//               over them (observed: false when there is no canvas)
+//   fps       — frames sampled (up to 30) and 1000 / p95 frame time
+//               (observed: false under 10 frames: a hidden or paused tab)
+//   state     — whether the page declares __FPX_STATE__
+async (a) => {
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const raf = () => new Promise((r) => requestAnimationFrame(r));
+  const HIT = 'button, a[href], [role="button"], [data-fpx-touch], input, select';
+  const START = /^(play|start|tap to start|tap to play|go|fight|new game|begin|continue|play again)\b/i;
+
+  // Seen by a player: laid out, on the screen, and hidden by neither itself nor
+  // an ancestor. Opacity multiplies down the tree and visibility inherits, so a
+  // faded screen's children are faded too (one game: a chapter card at
+  // opacity 0 counted as HUD all chapter, a hidden title's text was flagged in
+  // every play view; another: a label inside a faded-out button).
+  // checkVisibility answers where the browser has it; the
+  // walk up the ancestors is the fallback, and also catches a stack of
+  // part-faded layers that multiplies to nothing.
+  const shown = (el) => {
+    if (typeof el.checkVisibility === 'function' && !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return false;
+    const v = getComputedStyle(el).visibility;
+    if (v === 'hidden' || v === 'collapse') return false;
+    let alpha = 1;
+    for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+      const s = getComputedStyle(e);
+      alpha *= s.display === 'none' ? 0 : Number(s.opacity);
+      if (alpha <= 0.05) return false;
+    }
+    return true;
+  };
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) return false;
+    const s = getComputedStyle(el);
+    return s.display !== 'none' && shown(el)
+      && r.bottom > 0 && r.right > 0 && r.top < innerHeight && r.left < innerWidth;
+  };
+  const nameOf = (el) => {
+    const n = el.getAttribute('aria-label') || el.getAttribute('data-fpx-touch')
+      || el.getAttribute('title') || (el.textContent || '').trim() || el.getAttribute('value') || '';
+    return n.replace(/\s+/g, ' ').slice(0, 48);
+  };
+  const controls = () => [...document.querySelectorAll(HIT)]
+    .filter(visible)
+    .map((el) => ({ el, name: nameOf(el), r: el.getBoundingClientRect() }))
+    .filter((c) => c.name);
+  // A link to another page would unload the one under test.
+  const leaves = (el) => {
+    if (el.tagName !== 'A') return false;
+    try {
+      const to = new URL(el.getAttribute('href'), location.href);
+      return to.protocol !== 'javascript:' && (to.origin + to.pathname) !== (location.origin + location.pathname);
+    } catch (e) { return true; }
+  };
+
+  const canvas = () => {
+    let best = null, area = 0;
+    for (const c of document.querySelectorAll('canvas')) {
+      const r = c.getBoundingClientRect();
+      if (r.width * r.height > area) { area = r.width * r.height; best = c; }
+    }
+    return best;
+  };
+  // A 32x32 sample of the canvas, or null when it cannot be read back.
+  const sample = () => {
+    const c = canvas();
+    if (!c) return null;
+    try {
+      const off = document.createElement('canvas');
+      off.width = 32; off.height = 32;
+      const ctx = off.getContext('2d');
+      ctx.drawImage(c, 0, 0, 32, 32);
+      const d = ctx.getImageData(0, 0, 32, 32).data;
+      let any = false;
+      for (let i = 3; i < d.length; i += 4) if (d[i] !== 0) { any = true; break; }
+      return any ? d : null; // fully transparent = an unreadable WebGL buffer
+    } catch (e) { return null; }
+  };
+  const diff = (x, y) => {
+    if (!x || !y) return null;
+    let n = 0;
+    for (let i = 0; i < x.length; i += 4) {
+      if (Math.abs(x[i] - y[i]) + Math.abs(x[i + 1] - y[i + 1]) + Math.abs(x[i + 2] - y[i + 2]) > 24) n++;
+    }
+    return n / (x.length / 4);
+  };
+  const stateDeclared = typeof window.__FPX_STATE__ === 'function';
+  const state = () => {
+    if (!stateDeclared) return null;
+    try { return JSON.stringify(window.__FPX_STATE__()); } catch (e) { return null; }
+  };
+  let mutations = 0;
+  new MutationObserver((l) => { mutations += l.length; })
+    .observe(document.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });
+
+  const pointer = (el, type, x, y) => el.dispatchEvent(new PointerEvent(type, {
+    bubbles: true, cancelable: true, composed: true, pointerId: 7, pointerType: 'touch',
+    isPrimary: true, clientX: x, clientY: y, buttons: type === 'pointerdown' ? 1 : 0,
+  }));
+  // Press like a thumb: pointer down, hold, up, then the click a tap makes.
+  const press = async (el) => {
+    const r = el.getBoundingClientRect();
+    const x = r.left + r.width / 2, y = r.top + r.height / 2;
+    pointer(el, 'pointerdown', x, y);
+    await sleep(a.press_ms);
+    pointer(el, 'pointerup', x, y);
+    el.click();
+  };
+  // How much the picture moves on its own over one press window.
+  const idle = async () => {
+    const s0 = sample();
+    await sleep(a.press_ms + a.settle_ms);
+    return diff(s0, sample());
+  };
+  const tryPress = async (c, idleMove) => {
+    const out = { name: c.name, w: Math.round(c.r.width), h: Math.round(c.r.height), pressed: false, changed: null };
+    if (leaves(c.el)) { out.skipped = 'link'; return out; }
+    const st0 = state(), s0 = sample(), m0 = mutations;
+    await press(c.el);
+    out.pressed = true;
+    await sleep(a.settle_ms);
+    const st1 = state(), moved = diff(s0, sample());
+    const stateChanged = st0 !== null && st1 !== null && st0 !== st1;
+    const domChanged = mutations > m0;
+    const pictureChanged = moved !== null && moved > (idleMove ?? 0) + 0.02;
+    if (stateChanged || domChanged || pictureChanged) out.changed = true;
+    else if (moved !== null || !canvas()) out.changed = false; // the picture was observed and held still
+    return out;
+  };
+
+  await sleep(a.settle_ms);
+  const found = [];
+  let started = null;
+  if (a.press) {
+    const idleMove = await idle();
+    const first = controls().find((c) => START.test(c.name));
+    if (first) {
+      started = first.name;
+      found.push(await tryPress(first, idleMove));
+      await sleep(a.settle_ms);
+    }
+    const seen = new Set(found.map((c) => c.name));
+    for (const c of controls()) {
+      if (found.length >= a.max_controls) break;
+      if (seen.has(c.name)) continue;
+      seen.add(c.name);
+      found.push(await tryPress(c, idleMove));
+    }
+  }
+  const sizes = controls().map((c) => ({ name: c.name, w: Math.round(c.r.width), h: Math.round(c.r.height) }));
+
+  // HUD over play: points in the middle 60% of the play area with something
+  // painted on top (text, a background, an image) that is not a control.
+  const hud = { observed: false, points: 0, covered: 0, by: [] };
+  const c = canvas();
+  if (c) {
+    hud.observed = true;
+    const r = c.getBoundingClientRect();
+    const layers = [...document.querySelectorAll('body *')].filter((el) => {
+      if (el === c || el.contains(c) || el.matches(HIT) || el.closest(HIT)) return false;
+      const s = getComputedStyle(el);
+      if (s.position !== 'fixed' && s.position !== 'absolute') return false;
+      if (!visible(el)) return false;
+      const bg = s.backgroundColor.match(/rgba?\(([^)]+)\)/);
+      const alpha = bg ? Number((bg[1].split(',')[3] ?? '1').trim()) : 0;
+      const paints = alpha > 0.1 || s.backgroundImage !== 'none'
+        || el.tagName === 'IMG' || el.tagName === 'svg'
+        || [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim());
+      return paints;
+    });
+    const grid = [0.2, 0.35, 0.5, 0.65, 0.8];
+    for (const fx of grid) {
+      for (const fy of grid) {
+        const x = r.left + r.width * fx, y = r.top + r.height * fy;
+        hud.points++;
+        const over = layers.find((el) => {
+          const b = el.getBoundingClientRect();
+          return x >= b.left && x <= b.right && y >= b.top && y <= b.bottom;
+        });
+        if (over) {
+          hud.covered++;
+          const n = over.id ? `#${over.id}` : (over.className && typeof over.className === 'string'
+            ? `.${over.className.trim().split(/\s+/)[0]}` : over.tagName.toLowerCase());
+          if (!hud.by.includes(n)) hud.by.push(n);
+        }
+      }
+    }
+  }
+
+  // Frame rate: 1000 / p95 frame time, never the mean. Up to 30 frames or
+  // `fps_ms`; a frame that never comes (a hidden tab pauses rAF) is waited
+  // out, so a slow page still yields its few frames and a paused one none.
+  const frame = () => Promise.race([raf(), sleep(500).then(() => null)]);
+  const times = [];
+  let last = await frame();
+  const until = performance.now() + a.fps_ms;
+  while (times.length < 30 && performance.now() < until) {
+    const t = await frame();
+    if (t !== null && last !== null) times.push(t - last);
+    last = t;
+  }
+  times.sort((x, y) => x - y);
+  const p95 = times.length ? times[Math.min(times.length - 1, Math.floor(times.length * 0.95))] : 0;
+  const fps = {
+    observed: times.length >= 10,
+    frames: times.length,
+    p95_ms: Math.round(p95 * 10) / 10,
+    fps_p95: p95 > 0 ? Math.round(10000 / p95) / 10 : 0,
+  };
+
+  return JSON.stringify({ controls: found, sizes, started, hud, fps, state: stateDeclared });
+}

package/dist/vendor/verify/src/page/play.js

@@ -0,0 +1,117 @@
+// Two seconds of play, classified, for any game, hooks or none:
+//   blank              nothing drawn (a flat canvas, or none) and no text
+//   crashed            an uncaught error before any input, and nothing moved
+//   crashedUnderInput  an input threw, and the screen froze after it
+//   static             nothing moved, idle or under input
+//   plays              the screen changed
+// a = { op: 'install' } records uncaught errors from then on (installed with
+// the other listeners, before anything is pressed); a = { op: 'run',
+// idle_samples, sample_ms, presses, inputs: [{kind:'key',code}|{kind:'pointer',sel}] }.
+// A FIXED number of samples and presses, never "as many as fit", so the hosted
+// and the local probe press the game the same number of times.
+//
+// Frames are read inside requestAnimationFrame, after the game's own callback,
+// so a WebGL canvas without preserveDrawingBuffer still reads back; the page's
+// text counts too, so a DOM game or a HUD over a flat canvas is not blank. A
+// canvas that cannot be read (tainted) and no text change: not observed.
+// Returns JSON { observed, kind, samples, idle_changes, input_changes,
+// errors_idle, errors_input, first_error }.
+//
+// Part of @funpixel/verify: one function expression of one argument, loaded by
+// funpixel-browser (include_str!) and by local `funtools verify`. See
+// mechanic_check.js for the calling convention.
+async (a) => {
+  const w = window;
+  if (a.op === 'install') {
+    if (w.__FPX_ERRORS__) return 'already';
+    const log = [];
+    w.__FPX_ERRORS__ = log;
+    const note = (m) => { if (log.length < 50) log.push(String(m || 'error').slice(0, 200)); };
+    addEventListener('error', (e) => note(e.message || (e.error && e.error.message)));
+    addEventListener('unhandledrejection', (e) => note(e.reason && e.reason.message ? e.reason.message : String(e.reason)));
+    return 'installed';
+  }
+  const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+  const raf = () => Promise.race([new Promise(r => requestAnimationFrame(r)), sleep(200)]);
+  const errors = () => (w.__FPX_ERRORS__ ? w.__FPX_ERRORS__.length : 0);
+  // 32x32, area-averaged: a plain 16x16 drawImage point-samples the canvas,
+  // so a ball and a paddle on a flat backdrop fell between the samples and a
+  // game that draws every frame read as blank (a false FAIL, h9).
+  const N = 32;
+  const off = document.createElement('canvas');
+  off.width = N; off.height = N;
+  const ctx = off.getContext('2d', { willReadFrequently: true });
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  const sample = async () => {
+    await raf();
+    let best = null;
+    for (const c of document.querySelectorAll('canvas')) if (c !== off && (!best || c.width * c.height > best.width * best.height)) best = c;
+    let canvas = 'none', hash = 0, flat = true;
+    if (best && best.width > 0 && best.height > 0) {
+      try {
+        ctx.clearRect(0, 0, N, N);
+        ctx.drawImage(best, 0, 0, N, N);
+        const d = ctx.getImageData(0, 0, N, N).data;
+        let h = 2166136261;
+        for (let i = 0; i < d.length; i++) {
+          h = Math.imul(h ^ (d[i] >> 3), 16777619) >>> 0;
+          if ((i & 3) !== 3 && Math.abs(d[i] - d[i & 3]) > 6) flat = false;
+        }
+        canvas = 'read'; hash = h;
+      } catch (e) { canvas = 'unreadable'; }
+    }
+    const text = ((document.body && document.body.innerText) || '').replace(/\s+/g, ' ').trim().slice(0, 4000);
+    return { canvas, hash, flat, text };
+  };
+  const keyFor = (code) => (code.startsWith('Key') && code.length === 4) ? code[3].toLowerCase()
+    : (code.startsWith('Digit') && code.length === 6) ? code[5] : (code === 'Space' ? ' ' : code);
+  const press = async (inp) => {
+    if (inp.kind === 'key') {
+      const init = { key: keyFor(inp.code), code: inp.code, bubbles: true, cancelable: true };
+      const t = document.activeElement || document.body;
+      t.dispatchEvent(new KeyboardEvent('keydown', init)); await raf(); await sleep(60);
+      t.dispatchEvent(new KeyboardEvent('keyup', init));
+    } else if (inp.kind === 'pointer') {
+      const el = document.querySelector(inp.sel); if (!el) return;
+      const r = el.getBoundingClientRect();
+      const init = { bubbles: true, cancelable: true, pointerId: 1, pointerType: 'touch', isPrimary: true,
+                     clientX: r.left + r.width / 2, clientY: r.top + r.height / 2, button: 0, buttons: 1 };
+      el.dispatchEvent(new PointerEvent('pointerdown', init)); await raf(); await sleep(60);
+      el.dispatchEvent(new PointerEvent('pointerup', { ...init, buttons: 0 }));
+    }
+  };
+  const differs = (x, y) => x.hash !== y.hash || x.text !== y.text;
+  const idle = [], input = [];
+  for (let i = 0; i < a.idle_samples; i++) { idle.push(await sample()); await sleep(a.sample_ms); }
+  const e1 = errors();
+  let frozeAfter = -1;
+  const inputs = a.inputs || [];
+  for (let i = 0; i < (inputs.length ? a.presses : 0); i++) {
+    try { await press(inputs[i % inputs.length]); } catch (e) {}
+    input.push(await sample());
+    if (frozeAfter < 0 && errors() > e1) frozeAfter = input.length - 1;
+    await sleep(a.sample_ms);
+  }
+  const e2 = errors();
+  let idleChanges = 0, inputChanges = 0, changedAfterError = false;
+  for (let i = 1; i < idle.length; i++) if (differs(idle[i - 1], idle[i])) idleChanges++;
+  for (let i = 0; i < input.length; i++) {
+    const prev = i ? input[i - 1] : idle[idle.length - 1];
+    if (prev && differs(prev, input[i])) { inputChanges++; if (frozeAfter >= 0 && i > frozeAfter) changedAfterError = true; }
+  }
+  const all = idle.concat(input);
+  const readable = all.every(s => s.canvas !== 'unreadable');
+  const blank = all.every(s => (s.canvas === 'none' || s.flat) && s.text === '');
+  let kind = '';
+  if (e1 > 0 && idleChanges + inputChanges === 0) kind = 'crashed';
+  else if (readable && blank) kind = 'blank';
+  else if (frozeAfter >= 0 && !changedAfterError) kind = 'crashedUnderInput';
+  else if (idleChanges + inputChanges > 0) kind = 'plays';
+  else if (readable) kind = 'static';
+  const log = w.__FPX_ERRORS__ || [];
+  return JSON.stringify({
+    observed: kind !== '', kind, samples: all.length, idle_changes: idleChanges, input_changes: inputChanges,
+    errors_idle: e1, errors_input: e2 - e1, first_error: log.length ? log[0] : '',
+  });
+}