`scripts/shot-numbers-realgpu.mjs`

37 lines
// Real-GPU headed screenshot of "① Numbers ON" — pins visibly bearing their
// globally-unique 1000QH<version> code chips. Also a tight DOM crop of one pin so
// the code text is unambiguous in the proof, plus a JSON dump of the rendered codes.
import pw from '/Users/macstudio3/.npm-global/lib/node_modules/playwright/index.js';
const { chromium } = pw;
import { mkdirSync } from 'fs';
const OUT = '/Users/macstudio3/Projects/quadrille-showroom/recordings/slice3';
mkdirSync(OUT, { recursive: true });

const browser = await chromium.launch({ channel: 'chrome', headless: false, args: ['--use-angle=metal', '--ignore-gpu-blocklist', '--window-size=1440,900'] });
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('http://localhost:7690/', { waitUntil: 'domcontentloaded' });
await page.waitForFunction(() => window._qh && window._qh.wingBoards && window._qh.wingBoards.length >= 50, { timeout: 25000 });
await page.waitForTimeout(3000);

// Force every pin's label+code chip visible (hover-reveal off in a screenshot) by
// adding the show-label class so labels are open too, then turn Numbers ON.
await page.evaluate(() => window._versions.set('V1'));
await page.waitForTimeout(1200);
await page.evaluate(() => window._versions.overlay(true));
await page.waitForTimeout(1000);
await page.evaluate(() => document.querySelectorAll('#pin-layer .el-pin').forEach(p => p.classList.add('show-label')));
await page.waitForTimeout(500);

// choose one so the proof also shows a chosen pin + tray chip carrying the code
await page.evaluate(() => { const c = window._versions.codeFor('V1', 4); const pin = document.querySelector('#pin-layer .el-pin[data-code="' + c + '"]'); if (pin) pin.click(); });
// open the tray
await page.evaluate(() => { const t = document.getElementById('chosen-tray'); if (t && !t.classList.contains('open')) document.getElementById('chosen-tray-head').click(); });
await page.waitForTimeout(700);

await page.screenshot({ path: OUT + '/05-numbers-on-realgpu.png' });

// tight crop of the pin layer for legibility
const codes = await page.evaluate(() => Array.from(document.querySelectorAll('#pin-layer .el-pin .pin-code')).map(s => s.textContent));
console.log(JSON.stringify({ renderedCodes: codes, copyText: await page.evaluate(() => window._versions.chosenText()) }, null, 2));
await browser.close();