From 333b88f3672793a399d9529841be6dba3ee55367 Mon Sep 17 00:00:00 2001 From: Thomas Kennedy Date: Sun, 19 May 2024 10:58:59 -0500 Subject: [PATCH] Change randomWeight, add id class to svg elements --- src/display.ts | 29 ++++++++++++++++++++++------- src/generate.ts | 12 +++++++----- svgs/facialHair/goatee7.svg | 8 +++++--- svgs/facialHair/logan.svg | 5 +++-- svgs/hair/crop.svg | 2 +- tools/lib/svg-metadata.js | 12 ++++++------ 6 files changed, 44 insertions(+), 24 deletions(-) diff --git a/src/display.ts b/src/display.ts index 842fe57..529f8bb 100644 --- a/src/display.ts +++ b/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) => `${svgString}`; @@ -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,12 +836,10 @@ 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"); } @@ -835,7 +847,10 @@ export const display = ( // 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"), + ); } } diff --git a/src/generate.ts b/src/generate.ts index 8cb0a90..706e937 100644 --- a/src/generate.ts +++ b/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); diff --git a/svgs/facialHair/goatee7.svg b/svgs/facialHair/goatee7.svg index 86e72af..622ea26 100644 --- a/svgs/facialHair/goatee7.svg +++ b/svgs/facialHair/goatee7.svg @@ -1,3 +1,5 @@ - - - \ No newline at end of file + + + + + diff --git a/svgs/facialHair/logan.svg b/svgs/facialHair/logan.svg index 0564c58..37fd194 100644 --- a/svgs/facialHair/logan.svg +++ b/svgs/facialHair/logan.svg @@ -1,3 +1,4 @@ - - + + + \ No newline at end of file diff --git a/svgs/hair/crop.svg b/svgs/hair/crop.svg index 9a49842..c5fe325 100644 --- a/svgs/hair/crop.svg +++ b/svgs/hair/crop.svg @@ -1,3 +1,3 @@ - + diff --git a/tools/lib/svg-metadata.js b/tools/lib/svg-metadata.js index 5420373..74d9f87 100644 --- a/tools/lib/svg-metadata.js +++ b/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 },