80 lines
3.3 KiB
JavaScript
80 lines
3.3 KiB
JavaScript
import { chromium } from 'playwright';
|
|
import { readFileSync } from 'fs';
|
|
|
|
const perlerPath = '/Users/guchen/.hermes/workspace/pindou/src/data/palettes/compiled/perler.json';
|
|
const palette = JSON.parse(readFileSync(perlerPath, 'utf-8'));
|
|
const colors = [0, 4, 5, 16, 9].map(i => palette[i]).filter(Boolean);
|
|
const SIZE = 10;
|
|
const grid = [];
|
|
const legendMap = new Map();
|
|
for (let row = 0; row < SIZE; row++) {
|
|
const rowData = [];
|
|
for (let col = 0; col < SIZE; col++) {
|
|
const c = colors[(row + col) % colors.length];
|
|
rowData.push({ color: c, row, col });
|
|
if (!legendMap.has(c.id)) legendMap.set(c.id, { color: c, count: 0, symbol: String.fromCharCode(65 + legendMap.size) });
|
|
legendMap.get(c.id).count++;
|
|
}
|
|
grid.push(rowData);
|
|
}
|
|
const legend = Array.from(legendMap.values());
|
|
const sd = { grid, legend, totalBeads: SIZE*SIZE, usedColors: legend.length, status: 'done', canvasWidth: SIZE, canvasHeight: SIZE, fitMode: 'fit', sourceImage: null, extractedImage: null };
|
|
|
|
const BROWSER = await chromium.launch({ headless: true });
|
|
const PAGE = await BROWSER.newPage();
|
|
const logs = [];
|
|
PAGE.on('console', msg => logs.push(`[${msg.type()}] ${msg.text()}`));
|
|
const errors = [];
|
|
PAGE.on('pageerror', err => errors.push(err.message));
|
|
|
|
const BASE = 'https://gch3n.online/pindou/';
|
|
|
|
await PAGE.goto(BASE, { waitUntil: 'domcontentloaded', timeout: 15000 });
|
|
await PAGE.evaluate((data) => {
|
|
sessionStorage.setItem('bead-process-state', JSON.stringify(data));
|
|
console.log('Injected sessionStorage, key exists:', !!sessionStorage.getItem('bead-process-state'));
|
|
}, sd);
|
|
|
|
await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
|
|
await PAGE.waitForTimeout(3000);
|
|
|
|
const state = await PAGE.evaluate(() => {
|
|
const body = document.body?.textContent?.substring(0, 500);
|
|
const all = Array.from(document.querySelectorAll('*')).map(el => ({
|
|
tag: el.tagName,
|
|
class: el.className?.toString()?.substring(0, 50),
|
|
text: el.textContent?.substring(0, 80),
|
|
})).filter(x => x.text && x.text.trim());
|
|
|
|
const canvases = document.querySelectorAll('canvas');
|
|
const canvasInner = document.querySelector('.canvas-inner');
|
|
const app = document.querySelector('#app');
|
|
|
|
return {
|
|
hash: window.location.hash,
|
|
appHTML: app?.innerHTML?.substring(0, 500),
|
|
canvasCount: canvases.length,
|
|
canvasInnerHTML: canvasInner?.innerHTML?.substring(0, 200),
|
|
canvasInnerExists: !!canvasInner,
|
|
bodyText: body,
|
|
// Just key elements
|
|
keyElements: all.filter(x => x.text && x.text.trim().length > 0 && !x.text.includes('{') && !x.text.includes('function')).slice(0, 20),
|
|
};
|
|
});
|
|
|
|
console.log('=== Page State ===');
|
|
console.log('hash:', state.hash);
|
|
console.log('bodyText:', state.bodyText?.substring(0, 300));
|
|
console.log('canvasInnerExists:', state.canvasInnerExists);
|
|
console.log('canvasInnerHTML:', state.canvasInnerHTML);
|
|
console.log('canvasCount:', state.canvasCount);
|
|
console.log('appHTML:', state.appHTML?.substring(0, 300));
|
|
console.log('\n=== Console Logs ===');
|
|
logs.forEach(l => console.log(l));
|
|
console.log('\n=== Page Errors ===');
|
|
errors.forEach(l => console.log(l));
|
|
|
|
await PAGE.screenshot({ path: '/Users/guchen/.openclaw/workspace/pindou-online-v2.png', fullPage: true });
|
|
console.log('\nScreenshot: pindou-online-v2.png');
|
|
await BROWSER.close();
|