@usenavii/core 0.2.0 → 0.3.0

package/dist/index.js

@@ -557,6 +557,76 @@ function renderTopper(id, anchor, palette) {
   }
 }
 
+// src/parts/outfit.ts
+function renderOutfit(id, anchor, palette) {
+  if (id === "none") return "";
+  const cx = anchor.cx;
+  const cy = anchor.mouthY + (anchor.groundY - anchor.mouthY) * 0.55;
+  const ink = palette.ink;
+  const accent = palette.accent;
+  switch (id) {
+    case "collar":
+      return [
+        `<path d="M${cx - 9} ${cy} L${cx - 2} ${cy - 4} L${cx - 2} ${cy + 5} Z" fill="${accent}" stroke="${ink}" stroke-width="0.7" />`,
+        `<path d="M${cx + 9} ${cy} L${cx + 2} ${cy - 4} L${cx + 2} ${cy + 5} Z" fill="${accent}" stroke="${ink}" stroke-width="0.7" />`,
+        // tiny button at center
+        `<circle cx="${cx}" cy="${cy + 4}" r="0.9" fill="${ink}" />`
+      ].join("");
+    case "scarf":
+      return [
+        // wrap band
+        `<path d="M${cx - 14} ${cy - 2} Q${cx} ${cy + 3} ${cx + 14} ${cy - 2} L${cx + 14} ${cy + 3} Q${cx} ${cy + 8} ${cx - 14} ${cy + 3} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.6" />`,
+        // tail 1 (left)
+        `<path d="M${cx - 6} ${cy + 5} L${cx - 9} ${cy + 12} L${cx - 4} ${cy + 12} L${cx - 2} ${cy + 5} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.5" />`,
+        // tail 2 (slightly right)
+        `<path d="M${cx + 1} ${cy + 6} L${cx + 4} ${cy + 13} L${cx - 1} ${cy + 13} L${cx - 2} ${cy + 6} Z" fill="${palette.bodyFrom}" stroke="${ink}" stroke-width="0.5" />`
+      ].join("");
+    case "bowtie":
+      return [
+        // left wing
+        `<path d="M${cx - 1} ${cy} L${cx - 9} ${cy - 4} L${cx - 9} ${cy + 4} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.7" />`,
+        // right wing
+        `<path d="M${cx + 1} ${cy} L${cx + 9} ${cy - 4} L${cx + 9} ${cy + 4} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.7" />`,
+        // center knot
+        `<rect x="${cx - 1.4}" y="${cy - 2.4}" width="2.8" height="4.8" rx="0.8" fill="${palette.bodyFrom}" stroke="${ink}" stroke-width="0.5" />`
+      ].join("");
+    case "sunflower": {
+      const fx = cx - 8;
+      const fy = cy + 2;
+      const petals = [];
+      for (let i = 0; i < 8; i++) {
+        const a = i / 8 * Math.PI * 2;
+        const px = fx + Math.cos(a) * 3.2;
+        const py = fy + Math.sin(a) * 3.2;
+        petals.push(
+          `<ellipse cx="${px.toFixed(2)}" cy="${py.toFixed(2)}" rx="2.4" ry="1.3" fill="#FACC15" stroke="${ink}" stroke-width="0.35" transform="rotate(${(a * 180 / Math.PI).toFixed(1)} ${px.toFixed(2)} ${py.toFixed(2)})" />`
+        );
+      }
+      return [
+        // stem (tucked behind)
+        `<path d="M${fx + 2} ${fy + 2} Q${fx + 4} ${fy + 6} ${fx + 1} ${fy + 10}" stroke="#16A34A" stroke-width="1.1" fill="none" stroke-linecap="round" />`,
+        // leaf
+        `<path d="M${fx + 3} ${fy + 6} Q${fx + 7} ${fy + 4} ${fx + 6} ${fy + 8} Q${fx + 4} ${fy + 8} ${fx + 3} ${fy + 6} Z" fill="#22C55E" stroke="${ink}" stroke-width="0.35" />`,
+        ...petals,
+        // center disc
+        `<circle cx="${fx}" cy="${fy}" r="2" fill="#92400E" stroke="${ink}" stroke-width="0.4" />`,
+        // texture dots on disc
+        `<circle cx="${fx - 0.6}" cy="${fy - 0.5}" r="0.4" fill="#451A03" />`,
+        `<circle cx="${fx + 0.7}" cy="${fy + 0.3}" r="0.4" fill="#451A03" />`,
+        `<circle cx="${fx - 0.4}" cy="${fy + 0.8}" r="0.4" fill="#451A03" />`
+      ].join("");
+    }
+    case "necklace":
+      return [
+        // chain (curve from collarbone left → drop → right)
+        `<path d="M${cx - 10} ${cy} Q${cx} ${cy + 8} ${cx + 10} ${cy}" stroke="${accent}" stroke-width="0.8" fill="none" stroke-linecap="round" />`,
+        // pendant
+        `<circle cx="${cx}" cy="${cy + 7}" r="1.6" fill="${accent}" stroke="${ink}" stroke-width="0.5" />`,
+        `<circle cx="${cx}" cy="${cy + 7}" r="0.7" fill="${palette.blush}" />`
+      ].join("");
+  }
+}
+
 // src/parts/index.ts
 var BODY_IDS = [
   "orb",
@@ -655,6 +725,7 @@ function selectAvatar(seed2, options = {}) {
     accessory,
     background,
     topper,
+    outfit: "none",
     hueShift,
     bodyScale,
     eyeGapShift,
@@ -738,10 +809,13 @@ function renderAvatarInner(spec, options = {}) {
   const antennaWrapped = antennaSvg ? `<g${transformAntenna(spec.antennaTilt ?? 0, anchor)}><g class="antenna">${antennaSvg}</g></g>` : "";
   const tileBg = resolveTileBg(options.tileBg, spec.palette);
   const tileCircle = tileBg ? `<circle cx="50" cy="50" r="50" fill="${tileBg}" />` : "";
+  const outfitSvg = renderOutfit(spec.outfit ?? "none", anchor, spec.palette);
   const parts = [
     tileCircle,
     renderBackground(spec.background, spec.palette, bgOverride),
     bodyWrapped,
+    // outfit sits on the body but below the face, so face features stay readable
+    outfitSvg,
     renderTopper(spec.topper, anchor, spec.palette),
     wrap("eyes", renderEyes(spec.eyes, spec.palette, anchor)),
     renderMouth(spec.mouth, spec.palette, anchor, spec.mouthCurveScale ?? 1),
@@ -857,6 +931,7 @@ function build(spec = {}, options = {}) {
     accessory: spec.accessory ?? "none",
     background: spec.background ?? "none",
     topper: spec.topper ?? "none",
+    outfit: spec.outfit ?? "none",
     hueShift: spec.hueShift ?? 0,
     bodyScale: spec.bodyScale ?? 1,
     eyeGapShift: spec.eyeGapShift ?? 0,