Eye color V1

public/editor/CompareFaceModal.tsx

@@ -61,7 +61,7 @@ const CompareFaceGrid = ({
       {featureAOverrideList.flatMap((featureAOverride, indexA) =>
         featureBOverrideList.map((featureBOverride, indexB) => {
           const faceConfigCopy = deepCopy(faceConfig);
-          let faceOverride = {};
+          const faceOverride = {};
           setToDict(faceOverride, featureA, featureAOverride.value);
           setToDict(faceOverride, featureB, featureBOverride.value);
           override(faceConfigCopy, faceOverride);

public/editor/defaultColors.ts

@@ -37,3 +37,9 @@ export const distinctHairColors = distinct(
     .map((c) => c.hair)
     .flat(),
 );
+
+export const distinctEyeColors = distinct(
+  Object.values(colors)
+    .map((c) => c.eyes)
+    .flat(),
+);

public/editor/stateStore.ts

@@ -5,6 +5,7 @@ import { generateRangeFromStep, getFromDict, roundTwoDecimals } from "./utils";
 import {
   distinctHairColors,
   distinctSkinColors,
+  distinctEyeColors,
   jerseyColorOptions,
 } from "./defaultColors";
 import { FaceConfig, Gender, Race, Sport } from "../../src/types";
@@ -123,6 +124,15 @@ const gallerySectionInfos: (Pick<
     text: "Eye Shape",
     selectionType: "svgs",
   },
+  {
+    key: "eye.color",
+    text: "Eye Color",
+    selectionType: "color",
+    colorFormat: "hex",
+    renderOptions: {
+      valuesToRender: distinctEyeColors,
+    },
+  },
   {
     key: "eye.size",
     text: "Eye Size",

src/display.ts

@@ -650,6 +650,28 @@ const drawFeature = (
       translate(childElement, distance, 0, "left", "top");
     }
 
+    if (info.name === "eye") {
+      for (const granchildElement of childElement.children) {
+        if (granchildElement.getAttribute("fill") === `$[eyeReflection${i}]`) {
+          granchildElement.setAttribute("fill", "white");
+          if (i === 1) {
+            const parentTransform =
+              childElement.getAttribute("transform") || "";
+            const rotateRegex = /rotate\(([^)]+)\)/;
+            const match = parentTransform.match(rotateRegex);
+            const parentRotate = match ? match[0] : null;
+            // @ts-ignore
+            addTransform(granchildElement as SVGGraphicsElement, parentRotate);
+          }
+        } else if (
+          granchildElement.getAttribute("fill") ===
+          `$[eyeReflection${(i + 1) % 2}]`
+        ) {
+          granchildElement.setAttribute("fill", "none");
+        }
+      }
+    }
+
     if (info.name === "earring") {
       translate(
         childElement as SVGGraphicsElement,

src/generate.ts

@@ -172,7 +172,7 @@ export const generate = (
       id: Math.random() < 0.5 ? getID("facialHair", false, { gender }) : "none",
     },
     eye: {
-      id: getID("eye", false, { gender }),
+      id: getID("eye", true, { gender }),
       angle: eyeAngle,
       color: eyeColor,
       size: roundTwoDecimals(0.9 + Math.random() * 0.2),

src/globals.ts

@@ -37,22 +37,22 @@ export const colors = {
       "#e9c67b",
       "#D7BF91",
     ],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+    eyes: ["#a5b8d2", "#5c3937", "#634E34", "#2e536f", "#497665"],
   },
   asian: {
     // https://imgur.com/a/GrBuWYw
     skin: ["#fedac7", "#f0c5a3", "#eab687"],
     hair: ["#272421", "#0f0902"],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+    eyes: ["#5c3937", "#634E34"],
   },
   brown: {
     skin: ["#bb876f", "#aa816f", "#a67358"],
     hair: ["#272421", "#1c1008"],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+    eyes: ["#5c3937", "#634E34"],
   },
   black: {
     skin: ["#ad6453", "#74453d", "#5c3937"],
     hair: ["#272421"],
-    eyes: ["#b3d1ff", "#a5b8d2", "#8a7d5e"],
+    eyes: ["#5c3937", "#634E34"],
   },
 };