oxedyne/daimond/dev/shot_tiledlg.mjs
2.6 KiB, 1 run
created by r2519314175:199, which is this file's identity for as long as the history lasts, whatever it is later renamed to
download · who wrote it · its history
| 1 | // shot_tiledlg.mjs — photograph the rebuilt Diamond settings dialog. |
| 2 | // |
| 3 | // notes3 asked for four things in this one dialog: the DETAIL control gone, |
| 4 | // "WHEN THIS DIAMOND ACTS" renamed and reduced to a bare `+` until an action |
| 5 | // exists, the bottom "Done" replaced by a closer cross, and the chips that were |
| 6 | // really labels made to stop wearing pills. It also gained two colour pickers. |
| 7 | // |
| 8 | // Geometry checks can say the boxes do not overlap; they cannot say the row of |
| 9 | // controls looks deliberate. This is for the half a person has to read. |
| 10 | // |
| 11 | // node dev/shot_tiledlg.mjs |
| 12 | // |
| 13 | // Needs dev/serve.mjs (DAIMOND_PORT). No gateway, no mock LLM. |
| 14 | import fs from 'node:fs'; |
| 15 | import { open, scratch } from './harness.mjs'; |
| 16 | |
| 17 | const OUT = scratch('shots', 'tiledlg'); |
| 18 | fs.mkdirSync(OUT, { recursive: true }); |
| 19 | |
| 20 | const s = await open({ name: 'tiledlg', connect: false }); |
| 21 | const { page } = s; |
| 22 | try { |
| 23 | await page.waitForTimeout(1800); |
| 24 | |
| 25 | // The seeded Diamonds are the ones a reader will actually meet, so the shot is |
| 26 | // of a real tile rather than a fixture named "Test". |
| 27 | const opened = await page.evaluate(() => { |
| 28 | const box = document.querySelector('.diamond-box'); |
| 29 | if (!box) return 'no Diamond on the rail'; |
| 30 | const cog = box.querySelector('.tile-cog'); |
| 31 | if (!cog) return 'no cog on the tile'; |
| 32 | cog.click(); |
| 33 | return ''; |
| 34 | }); |
| 35 | if (opened) throw new Error(opened); |
| 36 | await page.waitForSelector('.tile-dlg-card', { timeout: 8000 }); |
| 37 | await page.waitForTimeout(600); |
| 38 | |
| 39 | const card = await page.$('.tile-dlg-card'); |
| 40 | await card.screenshot({ path: `${OUT}/dialog.png` }); |
| 41 | |
| 42 | // What the dialog is made of, so the image has something to be read against. |
| 43 | const shape = await page.evaluate(() => { |
| 44 | const card = document.querySelector('.tile-dlg-card'); |
| 45 | const txt = (el) => (el && (el.textContent || '').trim()) || null; |
| 46 | return { |
| 47 | title: txt(card.querySelector('.tile-dlg-title h2')), |
| 48 | closer: !!card.querySelector('.tile-dlg-x'), |
| 49 | closerInFoot: !!card.querySelector('.tile-dlg-foot .tile-dlg-x'), |
| 50 | levelControl: card.querySelectorAll('[data-level]').length, |
| 51 | headings: [...card.querySelectorAll('.tile-dlg-head')].map((e) => txt(e)), |
| 52 | labels: [...card.querySelectorAll('.tile-dlg-label')].map((e) => txt(e)), |
| 53 | chipsLeft: card.querySelectorAll('.tile-model-chip').length, |
| 54 | swatches: [...card.querySelectorAll('.tile-dlg-swatch')].map((e) => e.id || e.name || 'swatch'), |
| 55 | footButtons: [...card.querySelectorAll('.tile-dlg-foot button')].map((e) => txt(e)), |
| 56 | }; |
| 57 | }); |
| 58 | console.log(JSON.stringify(shape, null, 1)); |
| 59 | console.log('\nshot: ' + OUT + '/dialog.png'); |
| 60 | } finally { |
| 61 | await s.close(); |
| 62 | } |