import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1600, height: 900 } });
page.on('pageerror', (e) => console.log('PAGEERROR', e.message));
await page.goto('http://localhost:5199/');
await page.waitForSelector('#btn-new');
await page.evaluate(() => localStorage.clear());
await page.click('#btn-new');
await page.waitForTimeout(500);
await page.keyboard.down('ArrowDown');
await page.waitForTimeout(2600);
await page.keyboard.up('ArrowDown');
await page.waitForTimeout(300);
// sample game canvas pixels: a map-grass point vs an apron point
const probe = await page.evaluate(() => {
  const c = document.getElementById('game');
  const x = c.getContext('2d');
  const dpr = Math.min(devicePixelRatio || 1, 2);
  const px = (sx, sy) => Array.from(x.getImageData(sx * dpr, sy * dpr, 1, 1).data);
  const g = window.__game;
  // compute screen y of world row 16.3 (apron) and row 14 (map grass)
  const a = g.screenPos(6, 16); // apron-ish below fence (tile center y=16.5)
  const m = g.screenPos(6, 13);
  return { apron: { at: a, c: px(Math.round(a.x), Math.round(a.y)) }, map: { at: m, c: px(Math.round(m.x), Math.round(m.y)) } };
});
console.log(JSON.stringify(probe, null, 1));
await page.screenshot({ path: '/tmp/probe-full.png', fullPage: true });
await browser.close();
