← snapshot

/**
 * Verifies the orb reacts to the pointer: it should lean toward the cursor,
 * lean harder toward an interactive element, and settle back when the
 * pointer leaves.
 */

import { chromium } from "@playwright/test";

const BASE = process.env.TOUR_BASE ?? "http://localhost:3000";

const drift = (page) =>
  page.evaluate(() => {
    const el = document.querySelector(".jac-orb");
    if (!el) return null;
    const cs = getComputedStyle(el);
    return {
      x: Number.parseFloat(cs.getPropertyValue("--orb-drift-x")) || 0,
      y: Number.parseFloat(cs.getPropertyValue("--orb-drift-y")) || 0,
    };
  });

async function main() {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 1100, height: 800 },
    colorScheme: "dark",
  });
  await page.goto(BASE, { waitUntil: "networkidle" });
  await page.waitForSelector(".jac-orb-canvas", { timeout: 20000 });
  await page.waitForTimeout(1200);

  const settle = async (label, x, y) => {
    await page.mouse.move(x, y);
    await page.waitForTimeout(900);
    const d = await drift(page);
    console.log(`  ${label.padEnd(22)} drift x=${d.x.toFixed(2).padStart(6)}  y=${d.y.toFixed(2).padStart(6)}`);
    return d;
  };

  console.log("pointer response:");
  const left = await settle("pointer far left", 60, 400);
  const right = await settle("pointer far right", 1040, 400);
  const top = await settle("pointer top", 550, 40);
  const bottom = await settle("pointer bottom", 550, 780);

  // Hovering something interactive should pull harder than empty space.
  const offer = page.locator(".jac-offer").first();
  let hovered = null;
  if (await offer.count()) {
    const box = await offer.boundingBox();
    if (box) {
      hovered = await settle(
        "hovering an offer",
        box.x + box.width / 2,
        box.y + box.height / 2,
      );
    }
  }

  const ok =
    left.x < -0.5 &&
    right.x > 0.5 &&
    top.y < -0.3 &&
    bottom.y > 0.3 &&
    Math.sign(left.x) !== Math.sign(right.x);

  console.log(`\nleans toward pointer: ${ok ? "yes" : "NO"}`);
  if (hovered) {
    console.log(
      `hover pull registered: ${Math.abs(hovered.x) + Math.abs(hovered.y) > 0.2 ? "yes" : "NO"}`,
    );
  }

  await browser.close();
  process.exit(ok ? 0 : 1);
}

main().catch((e) => {
  console.error(e);
  process.exit(1);
});