Make kz fully dynamic

Also fix the plank background being blurry

scripts/common.ts

@@ -192,3 +192,62 @@ async function createFrame(colors: number[], percent: number, width: number, hei
         limitInputPixels: false
     }).composite(parts).png().toBuffer();
 }
+
+export const rgb = (hex: number) => ({ r: (hex >> 16) & 0xFF, g: (hex >> 8) & 0xFF, b: hex & 0xFF });
+const kzBorderColor = rgb(0x6B3F7F)
+const kzFillColor = rgb(0xD67FFF);
+const plankSize = 4;
+// the things I do to not have to make this a file
+const plank = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH6AUfFCAKmCc95gAAATJJREFUKM9lUsFqwzAMlSXFXRYIYQRy6GX/tq/Zh/ZQGKUEOi9WpOyg1jWpL1Gen+X3/BS+vz6TCDxW2zQAoGZZ1et6JRF0UiSab1skUrMkklV9O4k4omZ+hv2TVfsuOC8SAQAh+paazbdtGu6/fLos9wrD4+a1aFht8+J0WZzAx4/Dq4ck0jZNEgEI820b+7sQQmRnF1TNXIyaubaxB5cKAKDK3rIdntTiyhtNQ2wrnM/XXGvd+Vlt25nkaYg19XzNfRdKGkV6yYFrxwAwDVHNPDhHXFWhcds0u05PiwCRaOyfD5BV+XzNq22urzjZZVLjew9VAlDdwz/z6kz0UfG3KsGVAStK+i74RDEhtojQiXetJ5QQk0gkotccAIBCWNQAlgPhosaYH1HI75+9v6F7+AdOcdbDy169/gAAAABJRU5ErkJggg==", "base64");
+export async function makeKZ(squareSize: number, gridSize = 16) {
+    const kzBorderSize = squareSize * 0.0625;
+    const kzPlank = await sharp(plank).resize(squareSize, squareSize).toBuffer();
+    const plankStart = gridSize - plankSize;
+    const kzParts: OverlayOptions[] = [];
+    // i = top to bottom
+    // j = left to right
+    for (let i = 0; i < gridSize; i++) {
+        for (let j = 0; j < gridSize; j++) {
+            if (i < plankSize && j >= plankStart) {
+                kzParts.push({
+                    input: kzPlank,
+                    top: squareSize * i,
+                    left: squareSize * j
+                });
+            } else {
+                kzParts.push({
+                    input: {
+                        create: {
+                            width: kzBorderSize,
+                            height: squareSize,
+                            channels: 3,
+                            background: kzBorderColor
+                        }
+                    },
+                    top: squareSize * i,
+                    left: squareSize * j
+                },{
+                    input: {
+                        create: {
+                            width: squareSize,
+                            height: kzBorderSize,
+                            channels: 3,
+                            background: kzBorderColor
+                        }
+                    },
+                    top: squareSize * i,
+                    left: squareSize * j
+                });
+            }
+        }
+    }
+    return sharp({
+        create: {
+            width: squareSize * 16,
+            height: squareSize * 16,
+            channels: 3,
+            background: kzFillColor
+        },
+        limitInputPixels: false
+    }).composite(kzParts).png().toBuffer();
+}

scripts/images.ts

@@ -1,9 +1,9 @@
 import type { PathLike } from "fs";
 import { access } from "fs/promises";
 import { dirname, resolve } from "path";
-import sharp from "sharp";
+import sharp, { type OverlayOptions } from "sharp";
 import { parseArgs } from "util";
-import { formatImage } from "./common";
+import { formatImage, makeKZ } from "./common";
 import { readFile } from "fs/promises";
 import { writeFile } from "fs/promises";
 import { rm } from "fs/promises";
@@ -34,10 +34,6 @@ const { values: args } = parseArgs({
             short: "k",
             default: "data-kz"
         },
-        kzfile: {
-            type: "string",
-            default: "kz.png"
-        },
         throw: {
             type: "boolean",
             short: "t",
@@ -52,7 +48,6 @@ const dirExists = async(path: PathLike) => access(path).then(() => true, () => f
 const imagesPath = resolve(args.images ?? "images.json");
 const imageDir = resolve(args.imagedir ?? dirname(imagesPath));
 const outDir = resolve(args.outdir ?? "data");
-const kzFile = resolve(args.kzfile ?? "frames/kz.png");
 const kzOutDir = resolve(args.kzoutdir ?? "data-kz");
 const framePercent = 0.03125;
 const frameColors = [0xA47627, 0xA45226, 0x944421, 0xAC581D, 0x8C341C, 0xAC641D, 0xAB6C25, 0xA44424, 0xAC572C, 0xAC4C24, 0xA87824];
@@ -62,12 +57,8 @@ if (!await dirExists(imageDir)) {
     process.exit(1);
 }
 
-if (!await Bun.file(kzFile).exists()) {
-    console.error("Kz file %s does not exist.", kzFile);
-    process.exit(1);
-}
-
 const ap = (p: string) => resolve(p, "assets/minecraft/textures/painting");
+// const ap = (p: string) => resolve(p, "../img");
 await rm(`${outDir}/assets`, { recursive: true, force: true });
 await rm(`${kzOutDir}/assets`, { recursive: true, force: true });
 await mkdir(ap(outDir), { recursive: true });
@@ -90,8 +81,8 @@ interface Images {
 const images = await Bun.file(imagesPath).json() as Images;
 const [baseWidth, baseHeight] = images.sizes["1x1"];
 
+let kz = await makeKZ(baseWidth);
 const kzCleanup: string[] = [];
-let kz = await sharp(kzFile, { limitInputPixels: false }).toBuffer();
 for (const image of images.images) {
     let img: string | string[];
     if (await stat(`${imageDir}/${image.name}`).then(s => s.isDirectory(), () => false)) {