@funpixel/tools 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,44 @@
+// Is this frame play, or a loading or splash screen? A capture that lands on a splash must never
+// count as a moment (one game: captures fooled by a 3.7 s splash; another, 1 Oct: shots of a
+// loading card scored as the moment). Three signs, each read only when the page offers it:
+//   state  — __FPX_STATE__()'s screen / phase / view / mode names a splash, a loader or a boot
+//   dom    — a shown element named splash / loading / loader / preload / boot covering ≥ 40% of the page
+//   scene  — the Three renderer drew nothing last frame (info.render.calls 0), or images still loading
+// Read-only. Part of @funpixel/verify: one function expression of one argument. See
+// mechanic_check.js for the calling convention.
+//
+// a = { cover (0.4) }
+//
+// Answers JSON:
+//   loading — true when any sign says so; why — the signs, in words
+//   screen  — the state's screen word, or null; drawn — draw calls last frame, or null
+(a) => {
+  const COVER = (a && a.cover) || 0.4;
+  const LOADING = /splash|load|boot|preload|spinner/i;
+  const out = { loading: false, why: [], screen: null, drawn: null };
+  try {
+    const s = typeof window.__FPX_STATE__ === 'function' ? window.__FPX_STATE__() : null;
+    if (s && typeof s === 'object') {
+      const word = [s.screen, s.phase, s.view, s.mode].find((x) => typeof x === 'string') ?? null;
+      out.screen = word;
+      for (const x of [s.screen, s.phase, s.view, s.mode]) if (typeof x === 'string' && LOADING.test(x)) { out.loading = true; out.why.push(`the game says ${x}`); break; }
+      if (s.loading === true) { out.loading = true; out.why.push('the game says loading'); }
+    }
+  } catch (e) { /* a state that throws says nothing */ }
+  const area = innerWidth * innerHeight || 1;
+  for (const el of document.querySelectorAll('[class*="splash" i],[id*="splash" i],[class*="loading" i],[id*="loading" i],[class*="loader" i],[id*="loader" i],[class*="preload" i],[id*="boot" i]')) {
+    const cs = getComputedStyle(el);
+    if (cs.display === 'none' || cs.visibility === 'hidden' || Number(cs.opacity) < 0.5) continue;
+    const r = el.getBoundingClientRect();
+    const w = Math.max(0, Math.min(r.right, innerWidth) - Math.max(r.left, 0)), h = Math.max(0, Math.min(r.bottom, innerHeight) - Math.max(r.top, 0));
+    if ((w * h) / area >= COVER) { out.loading = true; out.why.push(`a ${el.id ? `#${el.id}` : `.${String(el.className).split(/\s+/)[0]}`} covers ${Math.round(((w * h) / area) * 100)}% of the page`); break; }
+  }
+  const r = window.__THREEJS_RENDERER__ || window.renderer;
+  if (r && r.info && r.info.render && typeof r.info.render.calls === 'number') {
+    out.drawn = r.info.render.calls;
+    if (r.info.render.calls === 0 && r.info.render.frame > 0) { out.loading = true; out.why.push('the renderer drew nothing last frame'); }
+  }
+  const pending = [...document.images].filter((i) => !i.complete).length;
+  if (pending > 2) out.why.push(`${pending} images still loading`);
+  return JSON.stringify(out);
+}

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

@@ -0,0 +1,197 @@
+// Press the game's real start control, the way a player does, and say whether
+// the game started (plan pl4/g9: "verify through the real Play button"). The
+// hooks can enter play by calling a view's enter() directly, which proves
+// nothing about the button a player presses: a dead Play button passed every
+// check the Claude Code run made until it wrote its own Playwright script.
+//
+// "Started" is the GAME's word first. ADAPT_2 found a dead Play button passing
+// because the press itself (the control's pressed or focus style) changed the
+// page. When __FPX_STATE__() names where the game is (`screen`, `phase`,
+// `view`, `scene`, `countdown` or `started`), the game started exactly when
+// one of those moved during settle_ms, and nothing else counts: a countdown on
+// the title counts only when the state says so. Only a game whose state names
+// none of them, or that has no state, is judged by the page: the control gone,
+// the DOM changed outside the control, or the canvas moved past its idle motion.
+//
+// Part of @funpixel/verify: one function expression of one argument, loaded by
+// funpixel-browser (include_str!), by the edge's game tools and by local
+// `funtools`. See mechanic_check.js for the calling convention.
+//
+// a = { selector, timeout_ms, press_ms, settle_ms }
+//   selector — CSS; the convention is [data-fpx-start]
+//
+// Answers JSON:
+//   found    — a visible element matched within timeout_ms
+//   pressed  — it was pressed (pointer down, hold, up, then the click)
+//   changed  — true: the game started (its stated place moved; with no place
+//              in the state, the state, the page or the picture changed);
+//              false: it did not while that was observable; null: could not
+//              be told (a WebGL canvas that cannot be read back and no
+//              __FPX_STATE__, with no DOM change), which is never a pass
+//   name     — the control's label; screen_before / screen_after — the
+//              __FPX_STATE__().screen around the press, when declared
+//   error    — an invalid selector, or the press threw
+async (a) => {
+  // Under the held clock (step_clock.js) a wait is game time: the clock moves by it.
+  const C = typeof window.__FPX_STEP_CLOCK__ === 'object' && window.__FPX_STEP_CLOCK__ && window.__FPX_STEP_CLOCK__.held === true ? window.__FPX_STEP_CLOCK__ : null;
+  const sleep = C ? (ms) => C.sleep(ms) : (ms) => new Promise((r) => setTimeout(r, ms));
+  const selector = String(a.selector || '[data-fpx-start]');
+  const out = { selector, found: false, pressed: false, changed: null, name: '', screen_before: null, screen_after: null, error: '' };
+
+  // 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 find = () => [...document.querySelectorAll(selector)].find(visible) || null;
+  let el = null;
+  try {
+    const until = performance.now() + Math.max(0, a.timeout_ms || 0);
+    for (;;) {
+      el = find();
+      if (el || performance.now() >= until) break;
+      await sleep(100);
+    }
+  } catch (e) {
+    out.error = `invalid selector: ${String(e && e.message || e)}`;
+    return JSON.stringify(out);
+  }
+  if (!el) return JSON.stringify(out);
+  out.found = true;
+  out.name = (el.getAttribute('aria-label') || el.getAttribute('title') || (el.textContent || '').trim()
+    || el.getAttribute('value') || el.tagName.toLowerCase()).replace(/\s+/g, ' ').slice(0, 48);
+
+  const readState = () => {
+    if (typeof window.__FPX_STATE__ !== 'function') return null;
+    try { return window.__FPX_STATE__(); } catch (e) { return null; }
+  };
+  const snap = (s) => { try { return s === null ? null : JSON.stringify(s); } catch (e) { return null; } };
+  const screenOf = (s) => (s && typeof s === 'object' && typeof s.screen === 'string' ? s.screen : null);
+  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;
+      for (let i = 3; i < d.length; i += 4) if (d[i] !== 0) return d;
+      return null; // fully transparent = an unreadable WebGL buffer
+    } catch (e) { return null; }
+  };
+  const moved = (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);
+  };
+  // Where the game says it is: its place fields as one string, or null when it names none.
+  const PLACE = ['screen', 'phase', 'view', 'scene', 'countdown', 'started'];
+  const placeOf = (s) => {
+    if (!s || typeof s !== 'object') return null;
+    const keys = PLACE.filter((k) => ['string', 'number', 'boolean'].includes(typeof s[k]));
+    return keys.length ? JSON.stringify(keys.map((k) => [k, s[k]])) : null;
+  };
+  // A change inside the pressed control is its own pressed or focus style, not the game.
+  let mutations = 0;
+  const watch = new MutationObserver((l) => {
+    for (const m of l) if (m.target !== el && !el.contains(m.target)) mutations++;
+  });
+  watch.observe(document.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });
+
+  // An idle window first: a HUD that ticks or a title that animates on its own
+  // is not the button working.
+  const idle0 = sample();
+  await sleep(300);
+  const idleMutations = mutations;
+  const idleMove = moved(idle0, sample()) ?? 0;
+  const m0 = mutations;
+  const s0 = readState();
+  const place0 = placeOf(s0);
+  out.screen_before = screenOf(s0);
+  const picture0 = sample();
+  const r = el.getBoundingClientRect();
+  const x = r.left + r.width / 2, y = r.top + r.height / 2;
+  const touch = matchMedia('(pointer: coarse)').matches;
+  const pointer = (type) => el.dispatchEvent(new PointerEvent(type, {
+    bubbles: true, cancelable: true, composed: true, pointerId: 11, pointerType: touch ? 'touch' : 'mouse',
+    isPrimary: true, clientX: x, clientY: y, button: 0, buttons: type === 'pointerdown' ? 1 : 0,
+  }));
+  const mouse = (type) => el.dispatchEvent(new MouseEvent(type, {
+    bubbles: true, cancelable: true, composed: true, clientX: x, clientY: y, button: 0, buttons: type === 'mousedown' ? 1 : 0,
+  }));
+  try {
+    pointer('pointerdown');
+    if (!touch) mouse('mousedown');
+    await sleep(a.press_ms || 80);
+    pointer('pointerup');
+    if (!touch) mouse('mouseup');
+    el.click();
+    out.pressed = true;
+  } catch (e) {
+    out.error = `the press threw: ${String(e && e.message || e)}`;
+  }
+  // The place is read through the settle, so a start that moves on again
+  // (title, then countdown, then playing) is seen whenever it moved.
+  let placeMoved = false;
+  for (const until = performance.now() + (a.settle_ms || 600); ;) {
+    if (place0 !== null) {
+      const p = placeOf(readState());
+      if (p !== null && p !== place0) placeMoved = true;
+    }
+    const left = until - performance.now();
+    if (left <= 0) break;
+    await sleep(Math.min(100, left));
+  }
+  watch.disconnect();
+  const s1 = readState();
+  out.screen_after = screenOf(s1);
+  if (place0 !== null && placeOf(s1) !== null) {
+    // The game names where it is, so that alone says whether it started.
+    out.changed = placeMoved;
+    return JSON.stringify(out);
+  }
+  // No place in the state: the state as a whole, then the page, then the picture.
+  const stateChanged = s0 !== null && s1 !== null && snap(s0) !== snap(s1);
+  const pictureMoved = moved(picture0, sample());
+  const gone = !el.isConnected || !visible(el);
+  const domChanged = idleMutations === 0 && mutations > m0;
+  const pictureChanged = pictureMoved !== null && pictureMoved > idleMove + 0.02;
+  if (stateChanged || domChanged || gone || pictureChanged) out.changed = true;
+  else if (s0 !== null || pictureMoved !== null || (!canvas() && idleMutations === 0)) out.changed = false;
+  return JSON.stringify(out);
+}