Boolean operator

tomkennedy22 · May 18, 2024 · 12b53a4 · 12b53a4
1 parent dfbba7f
commit 12b53a4
Show file tree

Hide file tree

Showing 158 changed files with 1,156 additions and 308 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,12 @@
     "@types/node": "^20.12.3",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
+    "@uiw/react-color-alpha": "^2.3.0",
+    "@uiw/react-color-editable-input": "^2.3.0",
+    "@uiw/react-color-editable-input-rgba": "^2.3.0",
+    "@uiw/react-color-hue": "^2.3.0",
+    "@uiw/react-color-saturation": "^2.3.0",
+    "@uiw/react-color-swatch": "^2.3.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.19",
     "babel-plugin-add-module-exports": "^1.0.4",
@@ -66,15 +72,10 @@
     "typescript-eslint": "^7.7.0",
     "vite": "^5.2.7",
     "vitest": "^1.5.0",
-    "zustand": "^4.5.2",
-    "@uiw/react-color-alpha": "^2.3.0",
-    "@uiw/react-color-editable-input": "^2.3.0",
-    "@uiw/react-color-editable-input-rgba": "^2.3.0",
-    "@uiw/react-color-hue": "^2.3.0",
-    "@uiw/react-color-saturation": "^2.3.0",
-    "@uiw/react-color-swatch": "^2.3.0"
+    "zustand": "^4.5.2"
   },
   "dependencies": {
+    "paper-jsdom": "^0.12.17",
     "svg-path-bbox": "1.2.5"
   },
   "exports": {

diff --git a/public/editor/defaultColors.ts b/public/editor/defaultColors.ts
@@ -1,4 +1,4 @@
-import { colors } from "../../src/generate";
+import { colors } from "../../src/globals";
 import { TeamColors } from "../../src/types";
 import { distinct } from "./utils";
 

diff --git a/public/editor/overrideList.ts b/public/editor/overrideList.ts
@@ -1,6 +1,6 @@
 import override from "../../src/override";
 import { svgsIndex } from "../../src/svgs-index";
-import { Face as FaceType, Overrides } from "../../src/types";
+import { FaceConfig, Overrides } from "../../src/types";
 import { GallerySectionConfig, OverrideListItem } from "./types";
 import { deepCopy, doesStrLookLikeColor, luma, setToDict } from "./utils";
 
@@ -82,7 +82,7 @@ export const getOverrideListForItem = (
 };
 
 export const newFaceConfigFromOverride = (
-  faceConfig: FaceType,
+  faceConfig: FaceConfig,
   key: string,
   chosenValue: unknown,
 ) => {

diff --git a/public/editor/stateStore.ts b/public/editor/stateStore.ts
@@ -129,8 +129,8 @@ const gallerySectionInfos: (Pick<
     selectionType: "range",
     renderOptions: {
       rangeConfig: {
-        min: 0.75,
-        max: 1.25,
+        min: 0.9,
+        max: 1.1,
       },
     },
   },
@@ -397,7 +397,7 @@ const gallerySectionConfigList: GallerySectionConfig[] =
       const rangeConfig = gallerySectionConfig.renderOptions.rangeConfig;
 
       const range = rangeConfig.max - rangeConfig.min;
-      const step = roundTwoDecimals(range / 5);
+      const step = roundTwoDecimals(range / 4);
       const sliderStep = Math.max(roundTwoDecimals(range / 35), 0.01);
 
       const valuesToRender = generateRangeFromStep(

diff --git a/src/display.ts b/src/display.ts
@@ -1,6 +1,68 @@
 import override from "./override.js";
 import svgs from "./svgs.js";
 import { FaceConfig, Overrides, RGB, HSL, HEX, FeatureInfo } from "./types";
+// @ts-ignore
+import paper from "paper-jsdom";
+
+const calcChildElement = (
+  svg: SVGSVGElement,
+  insertPosition: "afterbegin" | "beforeend",
+) => {
+  if (insertPosition === "afterbegin") {
+    return svg.firstChild;
+  } else {
+    return svg.lastChild;
+  }
+};
+
+const getOuterStroke = (svgElement: SVGElement): paper.Path => {
+  // Initialize Paper.js project
+  paper.setup(document.createElement("canvas"));
+
+  // Import the SVGElement into Paper.js
+  const importedItem = paper.project.importSVG(svgElement);
+
+  // Recursively find all path items in the imported item and its children
+  function findPathItems(item: paper.Item): paper.PathItem[] {
+    let paths: paper.PathItem[] = [];
+
+    if (item instanceof paper.PathItem) {
+      paths.push(item);
+    }
+
+    if (item.children) {
+      item.children.forEach((child: any) => {
+        paths = paths.concat(findPathItems(child));
+      });
+    }
+
+    return paths;
+  }
+
+  const pathItems = findPathItems(importedItem);
+
+  // Unite all the path items into a single path
+  const unitedPath = pathItems.reduce(
+    (result, path) => {
+      if (result) {
+        result = result.unite(path);
+      } else {
+        result = path;
+      }
+      return result;
+    },
+    null as paper.PathItem | null,
+  ) as paper.Path;
+
+  unitedPath.strokeColor = new paper.Color("black");
+  unitedPath.strokeWidth = 4;
+  unitedPath.fillColor = new paper.Color("transparent");
+
+  // Remove the imported item and its children from the project
+  importedItem.remove();
+
+  return unitedPath;
+};
 
 // Convert hex color to RGB
 export const hexToRgb = (hex: HEX): RGB | null => {
@@ -352,6 +414,13 @@ const drawFeature = (
     return;
   }
 
+  if (
+    ["suit", "suit2", "referee"].includes(face.jersey.id) &&
+    info.name == "body"
+  ) {
+    feature.id = "body";
+  }
+
   // @ts-ignore
   let featureSVGString = svgs[info.name][feature.id];
   if (!featureSVGString) {
@@ -412,17 +481,9 @@ const drawFeature = (
     : "beforeend";
   // let whichChild: 'firstChild' | 'lastChild' = insertPosition == "beforebegin" ? 'firstChild' : 'lastChild';
 
-  const calcChildElement = () => {
-    if (insertPosition === "afterbegin") {
-      return svg.firstChild;
-    } else {
-      return svg.lastChild;
-    }
-  };
-
   for (let i = 0; i < info.positions.length; i++) {
     svg.insertAdjacentHTML(insertPosition, addWrapper(featureSVGString));
-    let childElement = calcChildElement() as SVGSVGElement;
+    let childElement = calcChildElement(svg, insertPosition) as SVGSVGElement;
 
     const position = info.positions[i];
 
@@ -502,7 +563,7 @@ const drawFeature = (
     }
   }
 
-  let childElement = calcChildElement() as SVGSVGElement;
+  let childElement = calcChildElement(svg, insertPosition) as SVGSVGElement;
 
   if (
     info.scaleFatness &&
@@ -657,6 +718,14 @@ export const display = (
 
   for (const info of featureInfos) {
     drawFeature(insideSVG, face, info);
+
+    if (info.name == "hair") {
+      let outerStroke = getOuterStroke(insideSVG);
+      insideSVG.insertAdjacentHTML(
+        "beforeend",
+        outerStroke.exportSVG({ asString: true }),
+      );
+    }
   }
 
   if (face.height !== undefined) {

diff --git a/src/generate.ts b/src/generate.ts
@@ -1,59 +1,8 @@
+import { colors, jerseyColorOptions } from "./globals.js";
 import override from "./override.js";
 import { svgsGenders, svgsIndex } from "./svgs-index.js";
 import { Feature, Gender, Overrides, Race, TeamColors } from "./types.js";
-
-export const jerseyColorOptions: TeamColors[] = [
-  ["#98002E", "#BC9B6A", "#FFFFFF"],
-  ["#F56600", "#522D80", "#FFFFFF"],
-  ["#B3A369", "#003057", "#FFFFFF"],
-  ["#CC0000", "#000000", "#FFFFFF"],
-  ["#0C2340", "#C99700", "#00843D"],
-  ["#003594", "#FFB81C", "#FFFFFF"],
-  ["#630031", "#CF4420", "#FFFFFF"],
-  ["#24135F", "#AD8900", "#000000"],
-  ["#311D00", "#FF3C00", "#FFFFFF"],
-  ["#552583", "#FDB927", "#FFFFFF"],
-  ["#00538C", "#002B5E", "#FFFFFF"],
-  ["#007AC1", "#EF3B24", "#002D62"],
-  ["#007A33", "#FFFFFF", "#BA9653"],
-  ["#98002E", "#F9A01B", "#FFFFFF"],
-  ["#00471B", "#EEE1C6", "#FFFFFF"],
-  ["#F74902", "#000000", "#FFFFFF"],
-  ["#6F263D", "#236192", "#A2AAAD"],
-  ["#BB0000", "#666666", "#FFFFFF"],
-  ["#7A0019", "#FFCC33", "#FFFFFF"],
-  ["#4E2A84", "#FFFFFF", "#000000"],
-  ["#FFCD00", "#000000", "#FFFFFF"],
-];
-
-export const randomGaussian = (min: number, max: number) => {
-  let u = 0,
-    v = 0;
-  while (u === 0) u = Math.random();
-  while (v === 0) v = Math.random();
-  let num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
-
-  num = num / 10.0 + 0.5;
-  if (num > 1 || num < 0) num = randomGaussian(min, max);
-  num *= max - min;
-  num += min;
-  return num;
-};
-
-const pickRandom = (arr: any[]): any => {
-  return arr[Math.floor(Math.random() * arr.length)];
-};
-
-function randomInt(
-  minInclusive: number,
-  max: number,
-  inclusiveMax: boolean = false,
-) {
-  if (inclusiveMax) {
-    max += 1;
-  }
-  return Math.floor(Math.random() * (max - minInclusive)) + minInclusive;
-}
+import { pickRandom, randomGaussian, randomInt } from "./utils.js";
 
 const getID = (type: Feature, gender: Gender): string => {
   const validIDs = svgsIndex[type].filter((_id, index) => {
@@ -65,39 +14,6 @@ const getID = (type: Feature, gender: Gender): string => {
   return validIDs[randomInt(0, validIDs.length)];
 };
 
-export const colors = {
-  white: {
-    skin: ["#f2d6cb", "#ddb7a0"],
-    hair: [
-      "#272421",
-      "#3D2314",
-      "#5A3825",
-      "#CC9966",
-      "#2C1608",
-      "#B55239",
-      "#e9c67b",
-      "#D7BF91",
-    ],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
-  },
-  asian: {
-    // https://imgur.com/a/GrBuWYw
-    skin: ["#fedac7", "#f0c5a3", "#eab687"],
-    hair: ["#272421", "#0f0902"],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
-  },
-  brown: {
-    skin: ["#bb876f", "#aa816f", "#a67358"],
-    hair: ["#272421", "#1c1008"],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
-  },
-  black: {
-    skin: ["#ad6453", "#74453d", "#5c3937"],
-    hair: ["#272421"],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
-  },
-};
-
 const roundTwoDecimals = (x: number) => Math.round(x * 100) / 100;
 
 export const generate = (
@@ -212,7 +128,7 @@ export const generate = (
       id: getID("eye", gender),
       angle: eyeAngle,
       color: eyeColor,
-      size: roundTwoDecimals(0.85 + Math.random() * 0.3),
+      size: roundTwoDecimals(0.9 + Math.random() * 0.2),
       distance: roundTwoDecimals(8 * Math.random() - 6),
       height: roundTwoDecimals(20 * Math.random() - 10),
     },

diff --git a/src/globals.ts b/src/globals.ts
@@ -0,0 +1,58 @@
+import { TeamColors } from "./types";
+
+export const jerseyColorOptions: TeamColors[] = [
+  ["#98002E", "#BC9B6A", "#FFFFFF"],
+  ["#F56600", "#522D80", "#FFFFFF"],
+  ["#B3A369", "#003057", "#FFFFFF"],
+  ["#CC0000", "#000000", "#FFFFFF"],
+  ["#0C2340", "#C99700", "#00843D"],
+  ["#003594", "#FFB81C", "#FFFFFF"],
+  ["#630031", "#CF4420", "#FFFFFF"],
+  ["#24135F", "#AD8900", "#000000"],
+  ["#311D00", "#FF3C00", "#FFFFFF"],
+  ["#552583", "#FDB927", "#FFFFFF"],
+  ["#00538C", "#002B5E", "#FFFFFF"],
+  ["#007AC1", "#EF3B24", "#002D62"],
+  ["#007A33", "#FFFFFF", "#BA9653"],
+  ["#98002E", "#F9A01B", "#FFFFFF"],
+  ["#00471B", "#EEE1C6", "#FFFFFF"],
+  ["#F74902", "#000000", "#FFFFFF"],
+  ["#6F263D", "#236192", "#A2AAAD"],
+  ["#BB0000", "#666666", "#FFFFFF"],
+  ["#7A0019", "#FFCC33", "#FFFFFF"],
+  ["#4E2A84", "#FFFFFF", "#000000"],
+  ["#FFCD00", "#000000", "#FFFFFF"],
+];
+
+export const colors = {
+  white: {
+    skin: ["#f2d6cb", "#ddb7a0"],
+    hair: [
+      "#272421",
+      "#3D2314",
+      "#5A3825",
+      "#CC9966",
+      "#2C1608",
+      "#B55239",
+      "#e9c67b",
+      "#D7BF91",
+    ],
+    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+  },
+  asian: {
+    // https://imgur.com/a/GrBuWYw
+    skin: ["#fedac7", "#f0c5a3", "#eab687"],
+    hair: ["#272421", "#0f0902"],
+    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+  },
+  brown: {
+    skin: ["#bb876f", "#aa816f", "#a67358"],
+    hair: ["#272421", "#1c1008"],
+    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+  },
+  black: {
+    skin: ["#ad6453", "#74453d", "#5c3937"],
+    hair: ["#272421"],
+    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+  },
+};