#!/usr/bin/env node
/**
* Generates the baked nine-slice texture used by Card variant="textured".
*
* This file is the source of truth for the procedural visual. It deliberately
* lives outside runtime code: edit the parameters below, run this script, then
* visually compare the generated asset before committing it.
*/
import { chromium } from "@playwright/test";
import { mkdir } from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
const HERE = path.dirname(fileURLToPath(import.meta.url));
const OUTPUT = path.resolve(
HERE,
"../../src/shared/ui/assets/card-texture.png",
);
// CSS-pixel source geometry. Screenshotting at DPR 2 produces a crisp asset.
const CARD_SIZE = 640;
const OUTSET = 96;
const CAPTURE_SIZE = CARD_SIZE + OUTSET * 2;
const DPR = 2;
// Approved texture parameters, archived from the former runtime SVG filter.
const BLUR = 66;
const DILATE = Math.round(BLUR * 0.85);
const THRESHOLD_BIAS = 0.302;
const SLOPE = 8;
const FREQUENCY = 0.999;
const OCTAVES = 3;
const SEED = 5315;
await mkdir(path.dirname(OUTPUT), { recursive: true });
const browser = await chromium.launch();
try {
const page = await browser.newPage({
deviceScaleFactor: DPR,
viewport: { height: CAPTURE_SIZE, width: CAPTURE_SIZE },
});
await page.setContent(`
`);
await page.locator("#stage").screenshot({
omitBackground: true,
path: OUTPUT,
});
} finally {
await browser.close();
}
console.log(`Generated ${OUTPUT}`);
console.log(`Asset: ${CAPTURE_SIZE * DPR}×${CAPTURE_SIZE * DPR}px @${DPR}x`);
console.log(`Runtime slice: ${(OUTSET + 112) * DPR}px; outset: ${OUTSET}px`);