import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";

const styles = readFileSync(new URL("../styles.css", import.meta.url), "utf8");

function declarationBlock(selector: string): string {
  const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  return styles.match(new RegExp(`(?:^|\\n)\\s*${escapedSelector}\\s*\\{([^}]*)\\}`))?.[1] ?? "";
}

describe("gameplay HUD layering", () => {
  it("contains world-space labels below the DOM HUD", () => {
    const sceneShell = declarationBlock(".scene-shell");
    const hud = declarationBlock(".hud");

    expect(sceneShell).toMatch(/z-index:\s*0\s*;/);
    expect(sceneShell).toMatch(/isolation:\s*isolate\s*;/);
    expect(hud).toMatch(/z-index:\s*(?:[1-9]|[1-9]\d+)\s*;/);
  });
});