update miletruth page

shot-miletruth.mjs

@@ -0,0 +1,49 @@
+import { chromium } from 'playwright';
+
+const shots = [
+  { name: 'desktop-1440', w: 1440, h: 1000 },
+  { name: 'laptop-1280', w: 1280, h: 900 },
+  { name: 'tablet-1024', w: 1024, h: 950 },
+  { name: 'mobile-390', w: 390, h: 844 },
+];
+
+for (const s of shots) {
+  // fresh browser each time: reusing one exhausts software WebGL contexts
+  const browser = await chromium.launch({
+    args: ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader'],
+  });
+  const page = await browser.newPage({ viewport: { width: s.w, height: s.h }, deviceScaleFactor: 1 });
+  const errs = [];
+  page.on('pageerror', e => errs.push('pageerror: ' + e.message));
+
+  await page.goto('http://localhost:3000/miletruth', { waitUntil: 'load', timeout: 90000 });
+  const toSec = () => page.evaluate(() => {
+    const el = document.querySelector('#solution-miletruth-ai');
+    if (el) window.scrollTo(0, window.scrollY + el.getBoundingClientRect().top - 8);
+  });
+  await toSec();
+  await page.waitForTimeout(18000);
+  await toSec();
+  await page.waitForTimeout(2500);
+
+  const info = await page.evaluate(() => {
+    const sec = document.querySelector('#solution-miletruth-ai');
+    const scene = sec.querySelector('.mtn-scene');
+    const sb = scene.getBoundingClientRect();
+    return {
+      canvas: sec.querySelectorAll('canvas').length,
+      labels: [...scene.querySelectorAll('.mtn-lbl')].map(e => {
+        const r = e.getBoundingClientRect();
+        const clip = r.left < sb.left || r.right > sb.right || r.top < sb.top || r.bottom > sb.bottom;
+        return e.querySelector('.mtn-lbl-n').textContent + (clip ? ' CLIPPED' : '');
+      }),
+      stepRows: new Set([...sec.querySelectorAll('.sw-mt-step')].map(e => Math.round(e.getBoundingClientRect().top))).size,
+      overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
+    };
+  });
+  console.log(`${s.name}: ` + JSON.stringify(info));
+  if (errs.length) console.log('  ERRORS:', errs.slice(0, 3));
+
+  await page.screenshot({ path: `/tmp/mt-${s.name}.png`, timeout: 90000 });
+  await browser.close();
+}