"""Confirm the title-screen animations move and screenshot the result."""
import time

from playwright.sync_api import sync_playwright

with sync_playwright() as pw:
    b = pw.chromium.launch()
    page = b.new_page(viewport={"width": 1280, "height": 820})
    page.goto("http://localhost:7861/game", wait_until="networkidle")
    time.sleep(0.5)

    def sample():
        return page.evaluate("""() => {
          const slot = document.querySelector('#ts-cast .cast-slot');
          const logo = document.querySelector('.ts-logo');
          return { castY: Math.round(slot.getBoundingClientRect().top * 100) / 100,
                   logoY: Math.round(logo.getBoundingClientRect().top * 100) / 100 };
        }""")

    a = sample(); time.sleep(0.7); c = sample()
    keysColor = page.evaluate(
        "() => getComputedStyle(document.querySelector('.ts-keys')).color")
    print("cast Y moved:", a["castY"], "->", c["castY"], "=", a["castY"] != c["castY"])
    print("logo Y moved:", a["logoY"], "->", c["logoY"], "=", a["logoY"] != c["logoY"])
    print("keybar color:", keysColor)
    page.screenshot(path="tests/shots/title_anim.png")
    b.close()