cls
9dfa06ffee
Docker image / Build (linux/amd64) (push) Has been cancelled
Docker image / Build (linux/arm64) (push) Has been cancelled
Docker image / Merge release multi-arch manifest (push) Has been cancelled
Docker image / Merge debug multi-arch manifest (push) Has been cancelled
Docker image / Build public push gateway (linux/amd64) (push) Has been cancelled
Docker image / Build public push gateway (linux/arm64) (push) Has been cancelled
Docker image / Publish public push gateway image (push) Has been cancelled
Sprig image / Build (linux/amd64) (push) Has been cancelled
Sprig image / Build (linux/arm64) (push) Has been cancelled
Sprig image / Merge multi-arch manifest (push) Has been cancelled
Harbor Buzz Orchestra / Python tests and lint (push) Has been cancelled
CI / Detect Changed Paths (push) Has been cancelled
CI / Rust Lint (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Desktop Core (push) Has been cancelled
CI / Desktop Smoke E2E (1) (push) Has been cancelled
CI / Desktop Smoke E2E (2) (push) Has been cancelled
CI / Desktop Smoke E2E (3) (push) Has been cancelled
CI / Desktop Smoke E2E (4) (push) Has been cancelled
CI / Desktop (push) Has been cancelled
CI / Desktop E2E Relay (push) Has been cancelled
CI / Desktop E2E Integration (1/2) (push) Has been cancelled
CI / Desktop E2E Integration (2/2) (push) Has been cancelled
CI / Desktop E2E Integration (push) Has been cancelled
CI / Backend Integration (relay e2e) (push) Has been cancelled
CI / Relay E2E (push) Has been cancelled
CI / Web (push) Has been cancelled
CI / Mobile (push) Has been cancelled
CI / Security (push) Has been cancelled
CI / Dead Token Reference Guard (push) Has been cancelled
CI / Server Cross-Compile (aarch64-unknown-linux-musl) (push) Has been cancelled
CI / Server Cross-Compile (x86_64-unknown-linux-musl) (push) Has been cancelled
CI / Windows Rust (x86_64-pc-windows-msvc) (push) Has been cancelled
CI / Desktop Build (macOS) (push) Has been cancelled
helm chart / lint + unittest + render matrix (push) Has been cancelled
helm chart / install on kind (gated) (push) Has been cancelled
helm chart / publish chart to GHCR (push) Has been cancelled
Mesh Lifecycle / Relay-Driven Mesh Lifecycle Smoke (push) Has been cancelled
Sprig / Build (aarch64-unknown-linux-musl) (push) Has been cancelled
Sprig / Build (x86_64-unknown-linux-musl) (push) Has been cancelled
Sprig / Publish rolling release (push) Has been cancelled
Sprig / Publish tagged release (push) Has been cancelled
Signed-off-by: cls_宁波本机 <908705107@qq.com>
128 lines
4.3 KiB
JavaScript
128 lines
4.3 KiB
JavaScript
#!/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_DIRECTORY = path.resolve(HERE, "../../src/shared/ui/assets");
|
||
const DPR = 2;
|
||
|
||
// Approved texture parameters, archived from the former runtime SVG filter.
|
||
const THRESHOLD_BIAS = 0.302;
|
||
const SLOPE = 8;
|
||
const FREQUENCY = 0.999;
|
||
const OCTAVES = 3;
|
||
const SEED = 5315;
|
||
|
||
const TEXTURES = [
|
||
{
|
||
filename: "card-texture.png",
|
||
color: "white",
|
||
cardSize: 640,
|
||
outset: 96,
|
||
blur: 66,
|
||
innerBand: 112,
|
||
},
|
||
{
|
||
filename: "card-texture-dark.png",
|
||
color: "#171b21",
|
||
cardSize: 640,
|
||
outset: 96,
|
||
blur: 66,
|
||
innerBand: 112,
|
||
},
|
||
{
|
||
filename: "card-texture-compact.png",
|
||
color: "white",
|
||
cardSize: 320,
|
||
outset: 24,
|
||
blur: 24,
|
||
innerBand: 44,
|
||
},
|
||
{
|
||
filename: "card-texture-dark-compact.png",
|
||
color: "#171b21",
|
||
cardSize: 320,
|
||
outset: 24,
|
||
blur: 24,
|
||
innerBand: 44,
|
||
},
|
||
];
|
||
|
||
await mkdir(OUTPUT_DIRECTORY, { recursive: true });
|
||
|
||
const browser = await chromium.launch();
|
||
try {
|
||
for (const texture of TEXTURES) {
|
||
const captureSize = texture.cardSize + texture.outset * 2;
|
||
const dilate = Math.round(texture.blur * 0.85);
|
||
const output = path.join(OUTPUT_DIRECTORY, texture.filename);
|
||
const page = await browser.newPage({
|
||
deviceScaleFactor: DPR,
|
||
viewport: { height: captureSize, width: captureSize },
|
||
});
|
||
|
||
await page.setContent(`<!doctype html>
|
||
<style>
|
||
html, body { margin: 0; width: 100%; height: 100%; background: transparent; }
|
||
#stage { position: relative; width: ${captureSize}px; height: ${captureSize}px; }
|
||
#core {
|
||
position: absolute;
|
||
inset: ${texture.outset + texture.blur / 2}px;
|
||
background: ${texture.color};
|
||
filter: blur(${texture.blur / 3}px);
|
||
}
|
||
</style>
|
||
<div id="stage">
|
||
<svg width="${captureSize}" height="${captureSize}" aria-hidden="true">
|
||
<defs>
|
||
<filter id="texture" x="0" y="0" width="100%" height="100%"
|
||
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
<feMorphology in="SourceAlpha" operator="dilate" radius="${dilate}" result="squared" />
|
||
<feGaussianBlur in="squared" stdDeviation="${texture.blur}" result="ramp" />
|
||
<feTurbulence type="fractalNoise" baseFrequency="${FREQUENCY}"
|
||
numOctaves="${OCTAVES}" seed="${SEED}" result="grain" />
|
||
<feColorMatrix in="grain" result="grainAlpha" type="matrix"
|
||
values="0 0 0 0 0
|
||
0 0 0 0 0
|
||
0 0 0 0 0
|
||
1 0 0 0 0" />
|
||
<feComposite in="ramp" in2="grainAlpha" operator="arithmetic"
|
||
k1="0" k2="1" k3="-1" k4="${-THRESHOLD_BIAS}" result="dithered" />
|
||
<feComponentTransfer in="dithered" result="specks">
|
||
<feFuncA type="linear" slope="${SLOPE}" intercept="0" />
|
||
</feComponentTransfer>
|
||
<feFlood flood-color="${texture.color}" result="surfaceColor" />
|
||
<feComposite in="surfaceColor" in2="specks" operator="in" />
|
||
</filter>
|
||
</defs>
|
||
<rect x="${texture.outset}" y="${texture.outset}" width="${texture.cardSize}" height="${texture.cardSize}"
|
||
fill="${texture.color}" filter="url(#texture)" />
|
||
</svg>
|
||
<span id="core"></span>
|
||
</div>`);
|
||
|
||
await page.locator("#stage").screenshot({
|
||
omitBackground: true,
|
||
path: output,
|
||
});
|
||
await page.close();
|
||
|
||
console.log(`Generated ${output}`);
|
||
console.log(`Asset: ${captureSize * DPR}×${captureSize * DPR}px @${DPR}x`);
|
||
console.log(
|
||
`Runtime slice: ${(texture.outset + texture.innerBand) * DPR}px; outset: ${texture.outset}px`,
|
||
);
|
||
}
|
||
} finally {
|
||
await browser.close();
|
||
}
|