const { chromium } = require('@playwright/test');
(async () => {
  const browser = await chromium.launch();
  const ctx = await browser.newContext();
  await ctx.addInitScript(() => localStorage.setItem('wal.tutorial.seen', '1'));
  const page = await ctx.newPage();
  await page.goto('http://localhost/geograsim/App/sims/wal/game.html');
  await page.waitForTimeout(800);
  await page.click('[data-era-cta="1850"]');
  // Mehrere Snapshots: 100ms / 500ms / 2000ms nach Click
  for (const t of [100, 500, 1500, 3000]) {
    await page.waitForTimeout(t === 100 ? 100 : 400);
    const r = await page.evaluate(() => {
      const m = document.getElementById('modal');
      const rect = m?.getBoundingClientRect();
      const cs = m ? getComputedStyle(m) : null;
      return {
        active: m?.classList.contains('active'),
        display: cs?.display,
        zIndex: cs?.zIndex,
        visible: rect ? rect.width > 0 && rect.height > 0 : false,
        title: document.getElementById('modalTitle')?.textContent,
      };
    });
    console.log('t≈' + t + 'ms:', JSON.stringify(r));
  }
  await browser.close();
})();