zengm-games · dumbmatter · Mar 23, 2025 · Mar 21, 2025 · Mar 21, 2025 · Mar 21, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# Development
+
+- #58 - New `generateRelative` function to generate a face that is similar to an exisiting face, like a sibling/parent/child.
+
 # 4.2.2 (2024-08-04)
 
 - The `Face` React component should now be imported as:

diff --git a/README.md b/README.md
@@ -81,6 +81,18 @@ Or both together:
 const face = generate(undefined, { gender: "female", race: "asian" });
 ```
 
+### Relatives
+
+There is a separate `generateRelative` function to make a relative of an existing face object. Call it like:
+
+```javascript
+const { generate, generateRelative } = require("facesjs");
+const face1 = generate();
+const face2 = generateRelative({ gender: "male", relative: face1 });
+```
+
+This works by randomizing only some features of the existing face, so the new face is fairly similar to the existing one, like an immediate family member.
+
 ### React integration
 
 You can use the `display` function within any frontend JS framework, but for ease of use with the most popular one, this package includes a `Face` component for React.

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "@phosphor-icons/react": "^2.1.6",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
+    "@types/dlv": "^1.1.5",
     "@types/node": "^20.14.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -76,6 +77,8 @@
     "zustand": "^4.5.2"
   },
   "dependencies": {
+    "dlv": "^1.1.3",
+    "dset": "^3.1.4",
     "svg-path-bbox": "^2.0.0"
   },
   "peerDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/editor/EditJsonModal.tsx b/public/editor/EditJsonModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import override from "../../src/override";
-import { Overrides } from "../../src/types";
+import { Overrides } from "../../src/common";
 import { useStateStore } from "./stateStore";
 import {
   Textarea,

diff --git a/public/editor/FeatureGallery.tsx b/public/editor/FeatureGallery.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import override from "../../src/override";
-import { FaceConfig } from "../../src/types";
+import { FaceConfig } from "../../src/common";
 import { useStateStore } from "./stateStore";
 import { Shuffle, LockSimpleOpen, LockSimple } from "@phosphor-icons/react";
 import {

diff --git a/public/editor/TopBar.tsx b/public/editor/TopBar.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Gender, Race } from "../../src/types";
+import { Gender, genders, Race, races } from "../../src/common";
 import { useStateStore } from "./stateStore";
 import {
   House,
@@ -23,6 +23,7 @@ import {
 } from "@nextui-org/react";
 import { capitalizeFirstLetter } from "./utils";
 import { shuffleEntireFace } from "./shuffleFace";
+import { OtherSetting } from "./types";
 
 export const TopBar = () => {
   const stateStore = useStateStore();
@@ -33,11 +34,11 @@ export const TopBar = () => {
     gallerySectionConfigList,
     shuffleGenderSettingObject,
     shuffleRaceSettingObject,
+    shuffleOtherSettingObject,
     setShuffleGenderSettingObject,
     setShuffleRaceSettingObject,
+    setShuffleOtherSettingObject,
   } = stateStore;
-  const genders: Gender[] = ["male", "female"];
-  const races: Race[] = ["white", "black", "brown", "asian"];
 
   const [genderInvalidOptions, setGenderInvalidOptions] = useState(false);
   const [raceInvalidOptions, setRaceInvalidOptions] = useState(false);
@@ -115,6 +116,17 @@ export const TopBar = () => {
                         );
                       })}
                     </CheckboxGroup>
+                    <CheckboxGroup
+                      label="Other"
+                      value={shuffleOtherSettingObject}
+                       => {
+                        setShuffleOtherSettingObject(
+                          otherList as OtherSetting[],
+                        );
+                      }}
+                    >
+                      <Checkbox value="relative">Relative</Checkbox>
+                    </CheckboxGroup>
                   </div>
                 </div>
               )}

diff --git a/public/editor/defaultColors.ts b/public/editor/defaultColors.ts
@@ -1,5 +1,5 @@
 import { colors } from "../../src/generate";
-import { TeamColors } from "../../src/types";
+import { TeamColors } from "../../src/common";
 import { distinct } from "./utils";
 
 export const jerseyColorOptions: TeamColors[] = [

diff --git a/public/editor/downloadFace.ts b/public/editor/downloadFace.ts
@@ -1,4 +1,4 @@
-import { FaceConfig } from "../../src/types";
+import { FaceConfig } from "../../src/common";
 import { getCurrentTimestampAsString } from "./utils";
 
 // https://blog.logrocket.com/programmatically-downloading-files-browser/

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 { FaceConfig as FaceType, Overrides } from "../../src/types";
+import { FaceConfig as FaceType, Overrides } from "../../src/common";
 import { deepCopy } from "../../src/utils";
 import { GallerySectionConfig, OverrideListItem } from "./types";
 import { doesStrLookLikeColor, luma, setToDict } from "./utils";
@@ -15,7 +15,7 @@ export const getOverrideListForItem = (
       const featureName = gallerySectionConfig.key.split(".")[0];
 
       const svgNames = [
-        ...(svgsIndex as Record<string, string[]>)[featureName],
+        ...(svgsIndex as Record<string, readonly string[]>)[featureName],
       ];
       svgNames.sort((a, b) => {
         if (a === "none" || a === "bald") return -1;

diff --git a/public/editor/shuffleFace.ts b/public/editor/shuffleFace.ts
@@ -1,9 +1,10 @@
-import { FaceConfig, Overrides } from "../../src/types";
+import { FaceConfig, Overrides } from "../../src/common";
 import { generate } from "../../src/generate";
 import { CombinedState, GallerySectionConfig } from "./types";
 import { deleteFromDict, pickRandom } from "./utils";
 import { jerseyColorOptions } from "./defaultColors";
-import { deepCopy } from "../../src/utils";
+import { deepCopy, randChoice } from "../../src/utils";
+import { generateRelative } from "../../src/generateRelative";
 
 type GenerateOptions = Parameters<typeof generate>[1];
 
@@ -12,8 +13,26 @@ export const shuffleEntireFace = (
   gallerySectionConfigList: GallerySectionConfig[],
   stateStore: CombinedState,
 ) => {
-  const { setFaceStore, shuffleGenderSettingObject, shuffleRaceSettingObject } =
-    stateStore;
+  const {
+    setFaceStore,
+    shuffleGenderSettingObject,
+    shuffleRaceSettingObject,
+    shuffleOtherSettingObject,
+  } = stateStore;
+
+  if (shuffleOtherSettingObject.includes("relative")) {
+    // Special case for relative - ignore randomizeEnabled and race
+    const gender =
+      shuffleGenderSettingObject.length === 1
+        ? shuffleGenderSettingObject[0]
+        : randChoice(["male", "female"] as const);
+
+    const newFace = generateRelative({ gender, relative: faceConfig });
+    setFaceStore(newFace);
+
+    return;
+  }
+
   const faceConfigCopy: Overrides = deepCopy(faceConfig);
 
   const options: GenerateOptions = {};

diff --git a/public/editor/stateStore.ts b/public/editor/stateStore.ts
@@ -12,7 +12,7 @@ import {
   distinctSkinColors,
   jerseyColorOptions,
 } from "./defaultColors";
-import { FaceConfig, Gender, Race } from "../../src/types";
+import { FaceConfig } from "../../src/common";
 
 const gallerySectionInfos: (Pick<
   GallerySectionConfig,
@@ -401,21 +401,29 @@ const createGallerySlice: StateCreator<CombinedState, [], [], CombinedState> = (
 
   shuffleGenderSettingObject: ["male"],
   shuffleRaceSettingObject: ["white", "brown", "black", "asian"],
+  shuffleOtherSettingObject: [],
 
-  setShuffleGenderSettingObject: (options: Gender[]) =>
-    set((state: CombinedState) => {
+  setShuffleGenderSettingObject: (options) =>
+    set((state) => {
       return {
         ...state,
         shuffleGenderSettingObject: options,
       };
     }),
-  setShuffleRaceSettingObject: (options: Race[]) =>
-    set((state: CombinedState) => {
+  setShuffleRaceSettingObject: (options) =>
+    set((state) => {
       return {
         ...state,
         shuffleRaceSettingObject: options,
       };
     }),
+  setShuffleOtherSettingObject: (options) =>
+    set((state) => {
+      return {
+        ...state,
+        shuffleOtherSettingObject: options,
+      };
+    }),
 });
 
 export const useStateStore = create<CombinedState>()(

diff --git a/public/editor/types.ts b/public/editor/types.ts
@@ -8,6 +8,8 @@ export type FaceState = {
   setFaceStore: (newFace: FaceConfig) => void;
 };
 
+export type OtherSetting = "relative";
+
 export type GalleryState = {
   gallerySize: GallerySize;
   gallerySectionConfigList: GallerySectionConfig[];
@@ -23,8 +25,10 @@ export type GalleryState = {
 
   shuffleGenderSettingObject: Gender[];
   shuffleRaceSettingObject: Race[];
+  shuffleOtherSettingObject: OtherSetting[];
   setShuffleGenderSettingObject: (options: Gender[]) => void;
   setShuffleRaceSettingObject: (options: Race[]) => void;
+  setShuffleOtherSettingObject: (options: OtherSetting[]) => void;
 };
 
 type GallerySectionConfigBase = {