termlings 0.1.4 → 0.1.6

package/bin/termlings.js

@@ -377,11 +377,13 @@ function getTraitColors(traits2, bw2 = false) {
   if (bw2) {
     const fg = hueToGray(traits2.faceHue);
     const dg = Math.round(fg * 0.55);
+    const bg = Math.round(fg * 0.18);
     const hg = hueToGray(traits2.hatHue);
     return {
       faceRgb: [fg, fg, fg],
       darkRgb: [dg, dg, dg],
-      hatRgb: [hg, hg, hg]
+      hatRgb: [hg, hg, hg],
+      bgRgb: [bg, bg, bg]
     };
   }
   const faceHueDeg = traits2.faceHue * 30;
@@ -389,30 +391,35 @@ function getTraitColors(traits2, bw2 = false) {
   return {
     faceRgb: hslToRgb(faceHueDeg, 0.5, 0.5),
     darkRgb: hslToRgb(faceHueDeg, 0.5, 0.28),
-    hatRgb: hslToRgb(hatHueDeg, 0.5, 0.5)
+    hatRgb: hslToRgb(hatHueDeg, 0.5, 0.5),
+    bgRgb: hslToRgb(faceHueDeg, 0.5, 0.1)
   };
 }
-function renderSVG(dna2, pixelSize = 10, frame = 0, background = "#000", padding = 1, bw2 = false) {
+function renderSVG(dna2, pixelSize = 10, frame = 0, background = "auto", padding = 1, bw2 = false) {
   const traits2 = decodeDNA(dna2);
   const grid = generateGrid(traits2, frame);
-  const { faceRgb: faceRgb2, darkRgb: darkRgb2, hatRgb: hatRgb2 } = getTraitColors(traits2, bw2);
+  const { faceRgb: faceRgb2, darkRgb: darkRgb2, hatRgb: hatRgb2, bgRgb: bgRgb2 } = getTraitColors(traits2, bw2);
   const toHex = (r, g, b) => `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
   const faceHex = toHex(...faceRgb2);
   const darkHex = toHex(...darkRgb2);
   const hatHex = toHex(...hatRgb2);
+  const resolvedBg = background === "auto" ? toHex(...bgRgb2) : background;
   const cols = 9;
   const rows = grid.length;
   const pad = padding;
-  const w = (cols + pad * 2) * pixelSize;
-  const h = (rows + pad * 2) * pixelSize;
+  const side = Math.max(cols, rows) + pad * 2;
+  const w = side * pixelSize;
+  const h = side * pixelSize;
+  const ox = Math.floor((side - cols) / 2);
+  const oy = Math.floor((side - rows) / 2);
   const half = Math.round(pixelSize / 2);
   const quarter = Math.round(pixelSize / 4);
   const rects = [];
   for (let y = 0; y < rows; y++) {
     for (let x = 0; x < cols; x++) {
       const cell = grid[y][x];
-      const rx = (x + pad) * pixelSize;
-      const ry = (y + pad) * pixelSize;
+      const rx = (x + ox) * pixelSize;
+      const ry = (y + oy) * pixelSize;
       if (cell === "f") {
         rects.push(`<rect x="${rx}" y="${ry}" width="${pixelSize}" height="${pixelSize}" fill="${faceHex}"/>`);
       } else if (cell === "l") {
@@ -443,7 +450,7 @@ function renderSVG(dna2, pixelSize = 10, frame = 0, background = "#000", padding
       }
     }
   }
-  const bg = background ? `<rect width="${w}" height="${h}" fill="${background}"/>
+  const bg = resolvedBg ? `<rect width="${w}" height="${h}" fill="${resolvedBg}"/>
 ` : "";
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" shape-rendering="crispEdges">
 ${bg}${rects.join("\n")}
@@ -492,13 +499,14 @@ function renderTerminal(dna2, frame = 0, bw2 = false) {
   }
   return lines.join("\n");
 }
-function renderLayeredSVG(dna2, pixelSize = 10, bw2 = false) {
+function renderLayeredSVG(dna2, pixelSize = 10, bw2 = false, padding = 0) {
   const traits2 = decodeDNA(dna2);
-  const { faceRgb: faceRgb2, darkRgb: darkRgb2, hatRgb: hatRgb2 } = getTraitColors(traits2, bw2);
+  const { faceRgb: faceRgb2, darkRgb: darkRgb2, hatRgb: hatRgb2, bgRgb: bgRgb2 } = getTraitColors(traits2, bw2);
   const toHex = (r, g, b) => `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
   const faceHex = toHex(...faceRgb2);
   const darkHex = toHex(...darkRgb2);
   const hatHex = toHex(...hatRgb2);
+  const bgHex = toHex(...bgRgb2);
   const half = Math.round(pixelSize / 2);
   const quarter = Math.round(pixelSize / 4);
   const cols = 9;
@@ -511,8 +519,12 @@ function renderLayeredSVG(dna2, pixelSize = 10, bw2 = false) {
   const legVariant = LEGS[traits2.legs];
   const legFrameCount2 = legVariant.length;
   const totalRows = hatRows.length + 1 + 1 + 2 + 2 + 1;
-  const w = cols * pixelSize;
-  const h = totalRows * pixelSize;
+  const pad = padding;
+  const side = Math.max(cols, totalRows) + pad * 2;
+  const w = side * pixelSize;
+  const h = side * pixelSize;
+  const ox = Math.floor((side - cols) / 2);
+  const oy = Math.floor((side - totalRows) / 2);
   function px(cell, rx, ry) {
     if (cell === "_") return "";
     if (cell === "f") return `<rect x="${rx}" y="${ry}" width="${pixelSize}" height="${pixelSize}" fill="${faceHex}"/>`;
@@ -531,7 +543,7 @@ function renderLayeredSVG(dna2, pixelSize = 10, bw2 = false) {
     let out = "";
     for (let y = 0; y < rows.length; y++) {
       for (let x = 0; x < cols; x++) {
-        out += px(rows[y][x], x * pixelSize, (startY + y) * pixelSize);
+        out += px(rows[y][x], (x + ox) * pixelSize, (startY + y + oy) * pixelSize);
       }
     }
     return out;
@@ -550,7 +562,7 @@ function renderLayeredSVG(dna2, pixelSize = 10, bw2 = false) {
   const legs2 = legFrameCount2 > 2 ? renderRows([legVariant[2]], lY) : "";
   const legs3 = legFrameCount2 > 3 ? renderRows([legVariant[3]], lY) : "";
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" shape-rendering="crispEdges"><g class="tg-bob">${staticRects}<g class="tg-mouth-0">${mouth0}</g><g class="tg-mouth-1">${mouth1}</g><g class="tg-body-0">${body0}</g><g class="tg-body-1">${body1}</g><g class="tg-body-2">${body2}</g></g><g class="tg-legs-0">${legs0}</g>` + (legs1 ? `<g class="tg-legs-1">${legs1}</g>` : "") + (legs2 ? `<g class="tg-legs-2">${legs2}</g>` : "") + (legs3 ? `<g class="tg-legs-3">${legs3}</g>` : "") + `</svg>`;
-  return { svg, legFrames: legFrameCount2, rows: totalRows };
+  return { svg, legFrames: legFrameCount2, rows: totalRows, bgHex };
 }
 function getAvatarCSS() {
   return `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termlings",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "license": "MIT",
   "description": "Open-source pixel creatures for web and the terminal.",

package/src/index.ts

@@ -443,15 +443,18 @@ export function getTraitColors(traits: DecodedDNA, bw = false): {
   faceRgb: [number, number, number];
   darkRgb: [number, number, number];
   hatRgb: [number, number, number];
+  bgRgb: [number, number, number];
 } {
   if (bw) {
     const fg = hueToGray(traits.faceHue);
     const dg = Math.round(fg * 0.55);
+    const bg = Math.round(fg * 0.18);
     const hg = hueToGray(traits.hatHue);
     return {
       faceRgb: [fg, fg, fg],
       darkRgb: [dg, dg, dg],
       hatRgb: [hg, hg, hg],
+      bgRgb: [bg, bg, bg],
     };
   }
   const faceHueDeg = traits.faceHue * 30;
@@ -460,6 +463,7 @@ export function getTraitColors(traits: DecodedDNA, bw = false): {
     faceRgb: hslToRgb(faceHueDeg, 0.5, 0.5),
     darkRgb: hslToRgb(faceHueDeg, 0.5, 0.28),
     hatRgb: hslToRgb(hatHueDeg, 0.5, 0.5),
+    bgRgb: hslToRgb(faceHueDeg, 0.5, 0.1),
   };
 }
 
@@ -467,11 +471,11 @@ export function getTraitColors(traits: DecodedDNA, bw = false): {
  * Render a DNA string as an SVG string with transparent background.
  * Each pixel is rendered as a square rect. 1-cell padding around the grid.
  */
-export function renderSVG(dna: string, pixelSize = 10, frame = 0, background: string | null = '#000', padding = 1, bw = false): string {
+export function renderSVG(dna: string, pixelSize = 10, frame = 0, background: string | null = 'auto', padding = 1, bw = false): string {
   const traits = decodeDNA(dna);
   const grid = generateGrid(traits, frame);
 
-  const { faceRgb, darkRgb, hatRgb } = getTraitColors(traits, bw);
+  const { faceRgb, darkRgb, hatRgb, bgRgb } = getTraitColors(traits, bw);
 
   const toHex = (r: number, g: number, b: number) =>
     `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
@@ -479,12 +483,16 @@ export function renderSVG(dna: string, pixelSize = 10, frame = 0, background: st
   const faceHex = toHex(...faceRgb);
   const darkHex = toHex(...darkRgb);
   const hatHex = toHex(...hatRgb);
+  const resolvedBg = background === 'auto' ? toHex(...bgRgb) : background;
 
   const cols = 9;
   const rows = grid.length;
   const pad = padding;
-  const w = (cols + pad * 2) * pixelSize;
-  const h = (rows + pad * 2) * pixelSize;
+  const side = Math.max(cols, rows) + pad * 2;
+  const w = side * pixelSize;
+  const h = side * pixelSize;
+  const ox = Math.floor((side - cols) / 2);
+  const oy = Math.floor((side - rows) / 2);
 
   const half = Math.round(pixelSize / 2);
   const quarter = Math.round(pixelSize / 4);
@@ -492,8 +500,8 @@ export function renderSVG(dna: string, pixelSize = 10, frame = 0, background: st
   for (let y = 0; y < rows; y++) {
     for (let x = 0; x < cols; x++) {
       const cell = grid[y][x];
-      const rx = (x + pad) * pixelSize;
-      const ry = (y + pad) * pixelSize;
+      const rx = (x + ox) * pixelSize;
+      const ry = (y + oy) * pixelSize;
       if (cell === "f") {
         rects.push(`<rect x="${rx}" y="${ry}" width="${pixelSize}" height="${pixelSize}" fill="${faceHex}"/>`);
       } else if (cell === "l") {
@@ -530,7 +538,7 @@ export function renderSVG(dna: string, pixelSize = 10, frame = 0, background: st
     }
   }
 
-  const bg = background ? `<rect width="${w}" height="${h}" fill="${background}"/>\n` : '';
+  const bg = resolvedBg ? `<rect width="${w}" height="${h}" fill="${resolvedBg}"/>\n` : '';
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" shape-rendering="crispEdges">\n${bg}${rects.join("\n")}\n</svg>`;
 }
 
@@ -596,14 +604,15 @@ export function renderTerminal(dna: string, frame = 0, bw = false): string {
  * Returns the SVG string, number of leg frames, and total row count.
  * Used by framework components for CSS-only animation (no JS timers).
  */
-export function renderLayeredSVG(dna: string, pixelSize = 10, bw = false): {
+export function renderLayeredSVG(dna: string, pixelSize = 10, bw = false, padding = 0): {
   svg: string;
   legFrames: number;
   rows: number;
+  bgHex: string;
 } {
   const traits = decodeDNA(dna);
 
-  const { faceRgb, darkRgb, hatRgb } = getTraitColors(traits, bw);
+  const { faceRgb, darkRgb, hatRgb, bgRgb } = getTraitColors(traits, bw);
 
   const toHex = (r: number, g: number, b: number) =>
     `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
@@ -611,6 +620,7 @@ export function renderLayeredSVG(dna: string, pixelSize = 10, bw = false): {
   const faceHex = toHex(...faceRgb);
   const darkHex = toHex(...darkRgb);
   const hatHex = toHex(...hatRgb);
+  const bgHex = toHex(...bgRgb);
 
   const half = Math.round(pixelSize / 2);
   const quarter = Math.round(pixelSize / 4);
@@ -627,8 +637,12 @@ export function renderLayeredSVG(dna: string, pixelSize = 10, bw = false): {
 
   // hat + face + eyes + 2 mouth + 2 body + 1 legs
   const totalRows = hatRows.length + 1 + 1 + 2 + 2 + 1;
-  const w = cols * pixelSize;
-  const h = totalRows * pixelSize;
+  const pad = padding;
+  const side = Math.max(cols, totalRows) + pad * 2;
+  const w = side * pixelSize;
+  const h = side * pixelSize;
+  const ox = Math.floor((side - cols) / 2);
+  const oy = Math.floor((side - totalRows) / 2);
 
   function px(cell: Pixel, rx: number, ry: number): string {
     if (cell === "_") return "";
@@ -649,7 +663,7 @@ export function renderLayeredSVG(dna: string, pixelSize = 10, bw = false): {
     let out = "";
     for (let y = 0; y < rows.length; y++) {
       for (let x = 0; x < cols; x++) {
-        out += px(rows[y][x], x * pixelSize, (startY + y) * pixelSize);
+        out += px(rows[y][x], (x + ox) * pixelSize, (startY + y + oy) * pixelSize);
       }
     }
     return out;
@@ -691,7 +705,7 @@ export function renderLayeredSVG(dna: string, pixelSize = 10, bw = false): {
     (legs3 ? `<g class="tg-legs-3">${legs3}</g>` : "") +
     `</svg>`;
 
-  return { svg, legFrames: legFrameCount, rows: totalRows };
+  return { svg, legFrames: legFrameCount, rows: totalRows, bgHex };
 }
 
 /**