quake2ts 0.0.634 → 0.0.635

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quake2ts",
-  "version": "0.0.634",
+  "version": "0.0.635",
   "description": "Quake II re-release port to TypeScript with WebGL renderer - A complete game engine with physics, networking, and BSP rendering",
   "type": "module",
   "keywords": [

package/packages/test-utils/dist/index.cjs

@@ -50,10 +50,12 @@ __export(index_exports, {
   MockWebGL2RenderingContext: () => MockWebGL2RenderingContext,
   captureAudioEvents: () => captureAudioEvents,
   captureCanvasDrawCalls: () => captureCanvasDrawCalls,
+  captureFramebufferAsPNG: () => captureFramebufferAsPNG,
   captureGameScreenshot: () => captureGameScreenshot,
   captureGameState: () => captureGameState,
   compareScreenshot: () => compareScreenshot,
   compareScreenshots: () => compareScreenshots,
+  compareSnapshots: () => compareSnapshots,
   createBandwidthTestScenario: () => createBandwidthTestScenario,
   createBinaryStreamMock: () => createBinaryStreamMock,
   createBinaryWriterMock: () => createBinaryWriterMock,
@@ -199,9 +201,12 @@ __export(index_exports, {
   createVector3: () => createVector3,
   createViewTestScenario: () => createViewTestScenario,
   createVisualTestScenario: () => createVisualTestScenario,
+  expectSnapshot: () => expectSnapshot,
+  getSnapshotPath: () => getSnapshotPath,
   initHeadlessWebGPU: () => initHeadlessWebGPU,
   intersects: () => import_shared2.intersects,
   ladderTrace: () => import_shared2.ladderTrace,
+  loadPNG: () => loadPNG,
   makeAxisBrush: () => makeAxisBrush,
   makeBrushFromMinsMaxs: () => makeBrushFromMinsMaxs,
   makeBspModel: () => makeBspModel,
@@ -213,7 +218,9 @@ __export(index_exports, {
   mockMonsterAttacks: () => mockMonsterAttacks,
   randomVector3: () => randomVector3,
   renderAndCapture: () => renderAndCapture,
+  renderAndExpectSnapshot: () => renderAndExpectSnapshot,
   runComputeAndReadback: () => runComputeAndReadback,
+  savePNG: () => savePNG,
   serializeUserInfo: () => serializeUserInfo,
   setupBrowserEnvironment: () => setupBrowserEnvironment,
   setupMockAudioContext: () => setupMockAudioContext,
@@ -3259,7 +3266,7 @@ function createMockAssetManager(overrides) {
     getMemoryUsage: import_vitest14.vi.fn().mockReturnValue({ textures: 0, audio: 0 }),
     clearCache: import_vitest14.vi.fn(),
     preloadAssets: import_vitest14.vi.fn().mockResolvedValue(void 0),
-    queueLoad: import_vitest14.vi.fn().mockImplementation((path2) => Promise.resolve({})),
+    queueLoad: import_vitest14.vi.fn().mockImplementation((path3) => Promise.resolve({})),
     ...overrides
   };
 }
@@ -4643,6 +4650,185 @@ var verifySmoothing = (states) => {
   };
 };
 
+// src/visual/snapshots.ts
+var import_pngjs = require("pngjs");
+var import_pixelmatch = __toESM(require("pixelmatch"), 1);
+var import_promises = __toESM(require("fs/promises"), 1);
+var import_fs = require("fs");
+var import_path = __toESM(require("path"), 1);
+function getBytesPerRow(width) {
+  const bytesPerPixel = 4;
+  const unpaddedBytesPerRow = width * bytesPerPixel;
+  const align = 256;
+  const paddedBytesPerRow = Math.max(
+    unpaddedBytesPerRow,
+    Math.ceil(unpaddedBytesPerRow / align) * align
+  );
+  return paddedBytesPerRow;
+}
+async function captureFramebufferAsPNG(device, texture, options) {
+  const { width, height, format = "rgba8unorm" } = options;
+  const bytesPerRow = getBytesPerRow(width);
+  const bufferSize = bytesPerRow * height;
+  const outputBuffer = device.createBuffer({
+    size: bufferSize,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+    label: "captureFramebufferAsPNG output buffer"
+  });
+  const commandEncoder = device.createCommandEncoder({ label: "captureFramebufferAsPNG encoder" });
+  commandEncoder.copyTextureToBuffer(
+    { texture },
+    { buffer: outputBuffer, bytesPerRow, rowsPerImage: height },
+    { width, height, depthOrArrayLayers: 1 }
+  );
+  device.queue.submit([commandEncoder.finish()]);
+  await outputBuffer.mapAsync(GPUMapMode.READ);
+  const mappedRange = outputBuffer.getMappedRange();
+  const rawData = new Uint8Array(mappedRange);
+  const bytesPerPixel = 4;
+  const tightData = new Uint8ClampedArray(width * height * bytesPerPixel);
+  for (let y = 0; y < height; y++) {
+    const srcOffset = y * bytesPerRow;
+    const dstOffset = y * width * bytesPerPixel;
+    const rowSize = width * bytesPerPixel;
+    for (let i = 0; i < rowSize; i++) {
+      tightData[dstOffset + i] = rawData[srcOffset + i];
+    }
+  }
+  outputBuffer.unmap();
+  if (format === "bgra8unorm" || format === "bgra8unorm-srgb") {
+    for (let i = 0; i < tightData.length; i += 4) {
+      const b = tightData[i];
+      const r = tightData[i + 2];
+      tightData[i] = r;
+      tightData[i + 2] = b;
+    }
+  }
+  const png = new import_pngjs.PNG({ width, height });
+  png.data = Buffer.from(tightData);
+  return import_pngjs.PNG.sync.write(png);
+}
+async function savePNG(pixels, width, height, filepath) {
+  const png = new import_pngjs.PNG({ width, height });
+  png.data = Buffer.from(pixels);
+  await import_promises.default.mkdir(import_path.default.dirname(filepath), { recursive: true });
+  return new Promise((resolve, reject) => {
+    const stream = (0, import_fs.createWriteStream)(filepath);
+    stream.on("error", reject);
+    stream.on("finish", resolve);
+    png.pack().pipe(stream);
+  });
+}
+async function loadPNG(filepath) {
+  return new Promise((resolve, reject) => {
+    const stream = (0, import_fs.createReadStream)(filepath);
+    stream.on("error", reject);
+    const png = new import_pngjs.PNG();
+    png.on("error", reject);
+    png.on("parsed", (data) => {
+      resolve({
+        data: new Uint8ClampedArray(data),
+        width: png.width,
+        height: png.height
+      });
+    });
+    stream.pipe(png);
+  });
+}
+async function compareSnapshots(actual, expected, width, height, options) {
+  const {
+    threshold = 0.1,
+    includeAA = false,
+    diffColor = [255, 0, 0],
+    maxDifferencePercent = 0.1
+  } = options || {};
+  if (actual.length !== expected.length) {
+    throw new Error(`Size mismatch: actual length ${actual.length} vs expected length ${expected.length}`);
+  }
+  const diff = new Uint8ClampedArray(width * height * 4);
+  const numDiffPixels = (0, import_pixelmatch.default)(
+    actual,
+    expected,
+    diff,
+    width,
+    height,
+    {
+      threshold,
+      includeAA,
+      diffColor,
+      alpha: 1
+      // Default alpha
+    }
+  );
+  const totalPixels = width * height;
+  const percentDifferent = numDiffPixels / totalPixels * 100;
+  const passed = percentDifferent <= (maxDifferencePercent || 0);
+  return {
+    pixelsDifferent: numDiffPixels,
+    totalPixels,
+    percentDifferent,
+    passed,
+    diffImage: diff
+  };
+}
+function getSnapshotPath(name, type, snapshotDir = "__snapshots__") {
+  const dirMap = {
+    baseline: "baselines",
+    actual: "actual",
+    diff: "diff"
+  };
+  return import_path.default.join(snapshotDir, dirMap[type], `${name}.png`);
+}
+async function expectSnapshot(pixels, options) {
+  const {
+    name,
+    width,
+    height,
+    updateBaseline = false,
+    snapshotDir = import_path.default.join(process.cwd(), "tests", "__snapshots__")
+    // Default to current working dir/tests/__snapshots__
+  } = options;
+  if (!width || !height) {
+    throw new Error("Width and height are required for expectSnapshot");
+  }
+  const baselinePath = getSnapshotPath(name, "baseline", snapshotDir);
+  const actualPath = getSnapshotPath(name, "actual", snapshotDir);
+  const diffPath = getSnapshotPath(name, "diff", snapshotDir);
+  if (updateBaseline || !(0, import_fs.existsSync)(baselinePath)) {
+    console.log(`Creating/Updating baseline for ${name} at ${baselinePath}`);
+    await savePNG(pixels, width, height, baselinePath);
+    return;
+  }
+  let baseline;
+  try {
+    baseline = await loadPNG(baselinePath);
+  } catch (e) {
+    throw new Error(`Failed to load baseline for ${name} at ${baselinePath}: ${e}`);
+  }
+  if (baseline.width !== width || baseline.height !== height) {
+    await savePNG(pixels, width, height, actualPath);
+    throw new Error(`Snapshot dimension mismatch for ${name}: expected ${baseline.width}x${baseline.height}, got ${width}x${height}`);
+  }
+  const result = await compareSnapshots(pixels, baseline.data, width, height, options);
+  if (!result.passed) {
+    await savePNG(pixels, width, height, actualPath);
+    if (result.diffImage) {
+      await savePNG(result.diffImage, width, height, diffPath);
+    }
+    throw new Error(
+      `Snapshot comparison failed for ${name}: ${result.percentDifferent.toFixed(2)}% different (${result.pixelsDifferent} pixels). See ${diffPath} for details.`
+    );
+  }
+}
+async function renderAndExpectSnapshot(setup, renderFn, options) {
+  const pixels = await renderAndCapture(setup, renderFn);
+  await expectSnapshot(pixels, {
+    ...options,
+    width: setup.width,
+    height: setup.height
+  });
+}
+
 // src/e2e/playwright.ts
 async function createPlaywrightTestClient(options = {}) {
   let playwright;
@@ -4725,8 +4911,8 @@ function throttleBandwidth(bytesPerSecond) {
 
 // src/e2e/visual.ts
 var import_canvas3 = require("@napi-rs/canvas");
-var import_promises = __toESM(require("fs/promises"), 1);
-var import_path = __toESM(require("path"), 1);
+var import_promises2 = __toESM(require("fs/promises"), 1);
+var import_path2 = __toESM(require("path"), 1);
 async function captureGameScreenshot(page, name) {
   return await page.screenshot({ path: `${name}.png` });
 }
@@ -4741,18 +4927,18 @@ async function takeScreenshot(canvas, filepath) {
   } else {
     throw new Error("Unsupported canvas type for screenshot");
   }
-  await import_promises.default.mkdir(import_path.default.dirname(filepath), { recursive: true });
-  await import_promises.default.writeFile(filepath, buffer);
+  await import_promises2.default.mkdir(import_path2.default.dirname(filepath), { recursive: true });
+  await import_promises2.default.writeFile(filepath, buffer);
 }
 async function compareScreenshot(canvas, baselinePath) {
   try {
-    await import_promises.default.access(baselinePath);
+    await import_promises2.default.access(baselinePath);
   } catch {
     console.warn(`Baseline not found at ${baselinePath}, saving current as baseline.`);
     await takeScreenshot(canvas, baselinePath);
     return true;
   }
-  const baselineBuffer = await import_promises.default.readFile(baselinePath);
+  const baselineBuffer = await import_promises2.default.readFile(baselinePath);
   const baselineImage = new import_canvas3.Image();
   baselineImage.src = baselineBuffer;
   const width = baselineImage.width;
@@ -4844,10 +5030,12 @@ function createVisualTestScenario(sceneName) {
   MockWebGL2RenderingContext,
   captureAudioEvents,
   captureCanvasDrawCalls,
+  captureFramebufferAsPNG,
   captureGameScreenshot,
   captureGameState,
   compareScreenshot,
   compareScreenshots,
+  compareSnapshots,
   createBandwidthTestScenario,
   createBinaryStreamMock,
   createBinaryWriterMock,
@@ -4993,9 +5181,12 @@ function createVisualTestScenario(sceneName) {
   createVector3,
   createViewTestScenario,
   createVisualTestScenario,
+  expectSnapshot,
+  getSnapshotPath,
   initHeadlessWebGPU,
   intersects,
   ladderTrace,
+  loadPNG,
   makeAxisBrush,
   makeBrushFromMinsMaxs,
   makeBspModel,
@@ -5007,7 +5198,9 @@ function createVisualTestScenario(sceneName) {
   mockMonsterAttacks,
   randomVector3,
   renderAndCapture,
+  renderAndExpectSnapshot,
   runComputeAndReadback,
+  savePNG,
   serializeUserInfo,
   setupBrowserEnvironment,
   setupMockAudioContext,