Change randomWeight, add id class to svg elements

src/display.ts

@@ -50,7 +50,7 @@ const clipToParent = (
     fullSvg,
     insertLocation,
   ) as SVGSVGElement;
-  newlyAddedElement.setAttribute("class", "clipToParent Output");
+  addClassToElement(newlyAddedElement, "clipToParent");
 };
 
 const findPathItems = (item: paper.Item): paper.PathItem[] => {
@@ -90,12 +90,15 @@ const getOuterStroke = (svgElement: SVGElement): string => {
   const importedItem = paper.project.importSVG(svgElement);
 
   const pathItems = findPathItems(importedItem);
-
-  // Unite all the path items into a single path
+  for (let path of pathItems) {
+    if (path.clockwise) {
+      path.reverse();
+    }
+  }
   const unitedPath = unitePaths(pathItems);
 
   unitedPath.strokeColor = new paper.Color("black");
-  unitedPath.strokeWidth = 5;
+  unitedPath.strokeWidth = 6;
   unitedPath.fillColor = new paper.Color("transparent");
 
   // Remove the imported item and its children from the project
@@ -262,6 +265,13 @@ const getHairAccent = (hairColor: string): string => {
   }
 };
 
+const addClassToElement = (element: SVGGraphicsElement, className: string) => {
+  const existingClass = element.getAttribute("class");
+  const existingClassSet = new Set(existingClass?.split(" ") || []);
+  existingClassSet.add(className);
+  element.setAttribute("class", Array.from(existingClassSet).join(" "));
+};
+
 const addWrapper = (svgString: string, objectTitle?: string) =>
   `<g class="${objectTitle}">${svgString}</g>`;
 
@@ -550,6 +560,10 @@ const drawFeature = (
     );
     let childElement = getChildElement(svg, insertPosition) as SVGSVGElement;
 
+    for (let granchildElement of childElement.children) {
+      addClassToElement(granchildElement as SVGGraphicsElement, feature.id);
+    }
+
     const position = info.positions[i];
 
     if (position !== null) {
@@ -822,20 +836,21 @@ export const display = (
     let svgIndex = svgsIndex[info.name].indexOf(feature.id);
     let metadata = svgsMetadata[info.name][svgIndex];
 
-    // Set base SVG project after head is added
     if (info.name == "head") {
       baseFace = paper.project.importSVG(insideSVG);
     }
 
-    console.log({ metadata, info, feature });
     if (metadata.clip) {
       clipToParent(insideSVG, baseFace.clone(), "beforeend");
     }
 
     // After we add hair (which is last feature on face), add outer stroke to wrap entire face
     if (info.name == "hair") {
       let outerStroke = getOuterStroke(insideSVG);
-      insideSVG.insertAdjacentHTML("beforeend", outerStroke);
+      insideSVG.insertAdjacentHTML(
+        "beforeend",
+        addWrapper(outerStroke, "outerStroke"),
+      );
     }
   }
 

src/generate.ts

@@ -20,18 +20,19 @@ const getID = (type: Feature, gender: Gender): string => {
 };
 
 const getIDWithOccurance = (type: Feature, gender: Gender): string => {
-  const validIDsWeightMap: [any, number][] = svgsIndex[type]
+  const validIDsWeightMap: [string, number][] = svgsMetadata[type]
     .filter((_id, index) => {
       return (
         svgsMetadata[type][index].gender === "both" ||
-        svgsGenders[type][index] === gender
+        svgsMetadata[type][index].gender === gender
       );
     })
-    .map((_id, index) => {
-      return [svgsIndex[type][index], svgsMetadata[type][index].occurance];
+    .map((metadata) => {
+      return [metadata.name, metadata.occurance];
     });
 
-  return weightedRandomChoice(validIDsWeightMap);
+  const chosenID = weightedRandomChoice(validIDsWeightMap);
+  return chosenID;
 };
 
 const roundTwoDecimals = (x: number) => Math.round(x * 100) / 100;
@@ -57,6 +58,7 @@ export const generate = (
   })();
 
   const gender = options && options.gender ? options.gender : "male";
+  console.log("generate", { gender, options, overrides, playerRace });
 
   let teamColors: TeamColors = pickRandom(jerseyColorOptions);
   const eyeAngle = randomInt(-10, 15, true);

tools/lib/svg-metadata.js

@@ -10,12 +10,12 @@ export const svgMetadata = {
   },
   blemish: {
     none: { gender: "both", occurance: 10, clip: false },
-    "eye-scar-left": { gender: "male", occurance: 1, clip: false },
-    "eye-scar-right": { gender: "male", occurance: 1, clip: false },
-    "chin-mole": { gender: "both", occurance: 1, clip: false },
-    "cheek-mole": { gender: "both", occurance: 1, clip: false },
-    "chin-mole-left": { gender: "both", occurance: 1, clip: false },
-    "cheek-mole-left": { gender: "both", occurance: 1, clip: false },
+    "eye-scar-left": { gender: "male", occurance: 0.1, clip: false },
+    "eye-scar-right": { gender: "male", occurance: 0.1, clip: false },
+    "chin-mole": { gender: "both", occurance: 2, clip: false },
+    "cheek-mole": { gender: "both", occurance: 2, clip: false },
+    "chin-mole-left": { gender: "both", occurance: 2, clip: false },
+    "cheek-mole-left": { gender: "both", occurance: 2, clip: false },
   },
   body: {
     body: { gender: "both", occurance: 1, clip: false },