Merge pull request #43 from dapi-labs/seed

seed generation

Author: wwayne

README.md

@@ -42,12 +42,22 @@ yarn add react-nice-avatar
     ```js
     import Avatar, { genConfig } from 'react-nice-avatar'
     ```
-2. Generate a random configuration, save it so that you can always rendering a same avatar with the configuration.
+2. Generate a configuration
+   
+    Config can be generated with a seed, seed is a string of name, email or anything you like
     ```js
-    const config = genConfig(AvatarConfig?) 
+    const config = genConfig("[email protected]") 
     ```
 
-    `tip`: AvatarConfig is an Object, plz check the **Options** below for what attributes can be passed in
+    or it can be generate with customized object, plz check the Options below for what attributes can be passed in
+    ```js
+    const config = genConfig({ sex: "man", hairStyle: "mohawk" }) 
+    ```
+    
+    or generate a random config by passing nothing to the function genConfig
+    ```js
+    const config = genConfig() 
+    ```
 
 3. Render the component with specific width / height and configuration.
     ```jsx
@@ -126,15 +136,3 @@ The options can be passed into genConfig or as React props
 ## License
 
 Released under [MIT](/LICENSE) by [@dapi-labs](https://github.com/dapi-labs).
-
----
-
-<br />
-
-<div align="center">
-   <a href="https://dapiok.com">
-      <img src="https://user-images.githubusercontent.com/5305874/131276202-ee5f6941-531c-4c01-bbc4-3ff8aca0e629.png" width="260" alt="dapi">
-   </a>
-</div>
-
-<br />

demo/src/App/index.scss

@@ -4,3 +4,7 @@
   background: #000;
   color: #fff;
 }
+
+.inputField {
+  background: rgba(255, 255, 255, 0.1);
+}

demo/src/App/index.tsx

@@ -54,6 +54,12 @@ class App extends Component {
     }
   }
 
+  onInputKeyUp (e) {
+    this.setState({
+      config: genConfig(e.target.value)
+    })
+  }
+
   render() {
     const { config, shape } = this.state
     return (
@@ -74,6 +80,10 @@ class App extends Component {
             updateConfig={this.updateConfig.bind(this)}
             updateShape={this.updateShape.bind(this)}
             download={this.download.bind(this)} />
+          <input
+            className="w-64 h-10 p-2 rounded mt-10 inputField text-center outline-none"
+            placeholder="input name or email ..."
+            onKeyUp={this.onInputKeyUp.bind(this)} />
         </main>
 
         {/* Avatar list */}

demo/tsconfig.json

@@ -8,7 +8,10 @@
     "target": "es5",            // specify ECMAScript target version
     "allowJs": true,            // allow a partial TypeScript and JavaScript codebase
     "allowSyntheticDefaultImports": true, // import default
-    "baseUrl": "."
+    "baseUrl": ".",
+    "path": {
+      "react-nice-avatar/*": "../src/*"
+    }
   },
   "include": [
     "./src",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-nice-avatar",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "react library for generating avatar",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/types.ts

@@ -47,7 +47,7 @@ export interface NiceAvatarProps extends AvatarConfig {
   shape?: "circle" | "rounded" | "square"
 }
 
-export type GenConfigFunc = (config?: AvatarFullConfig) => Required<AvatarFullConfig>
+export type GenConfigFunc = (config?: AvatarFullConfig | string) => Required<AvatarFullConfig>
 
 export declare const genConfig: GenConfigFunc
 

src/utils.ts

@@ -21,7 +21,9 @@ interface PickRandomOpt<T> {
   avoidList?: T[],
   usually?: T[]
 }
+
 type PickRandomFromList = <T>(data: T[], opt?: PickRandomOpt<T | undefined>) => T;
+
 export const pickRandomFromList: PickRandomFromList = (data, { avoidList = [], usually = [] } = {}) => {
   // Filter out avoid options
   const avoidSet = new Set(
@@ -66,6 +68,7 @@ interface DefaultOptions {
   bgColor: string[],
   gradientBgColor: string[]
 }
+
 export const defaultOptions: DefaultOptions = {
   sex: ["man", "woman"],
   faceColor: ["#F9C9B6", "#AC6651"],
@@ -93,21 +96,61 @@ export const defaultOptions: DefaultOptions = {
     "linear-gradient(45deg, #56b5f0 0%, #45ccb5 100%)"
   ]
 };
+
+const stringToHashCode = (str: string) : number => {
+  if (str.length === 0) return 0
+  let hash = 0
+  let char
+  for (let i = 0; i < str.length; i++) {
+    char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return Math.abs(hash);
+}
+
+type PickByHashCodeOpts = {
+  avoidList?: string[],
+  usually?: string[]
+}
+const pickByHashCode = (code: number, type: keyof DefaultOptions, opts?: PickByHashCodeOpts): string => {
+  const avoidList = opts && opts.avoidList || []
+  const usually = opts && opts.usually || []
+
+  // Filter out avoid options
+  const avoidSet = new Set<string>(avoidList)
+  let myDefaultOptions = defaultOptions[type].filter(item => !avoidSet.has(item))
+
+  // Increase selecting possibility of usually options
+  myDefaultOptions = usually
+    .filter(Boolean)
+    .reduce(
+      (acc, cur) => acc.concat(new Array(15).fill(cur)),
+      [] as string[]
+    )
+    .concat(myDefaultOptions)
+
+  const index = code % myDefaultOptions.length
+  return myDefaultOptions[index]
+}
+
 export const genConfig: GenConfigFunc = (userConfig = {}) => {
+  const isSeedConfig = typeof userConfig === 'string';
+  const hashCode = isSeedConfig && stringToHashCode(userConfig) || 0
   const response = {} as Required<AvatarFullConfig>;
-  response.sex = userConfig.sex || pickRandomFromList(defaultOptions.sex);
-  response.faceColor = userConfig.faceColor || pickRandomFromList(defaultOptions.faceColor);
-  response.earSize = userConfig.earSize || pickRandomFromList(defaultOptions.earSize);
-  response.eyeStyle = userConfig.eyeStyle || pickRandomFromList(defaultOptions.eyeStyle);
-  response.noseStyle = userConfig.noseStyle || pickRandomFromList(defaultOptions.noseStyle);
-  response.mouthStyle = userConfig.mouthStyle || pickRandomFromList(defaultOptions.mouthStyle);
-  response.shirtStyle = userConfig.shirtStyle || pickRandomFromList(defaultOptions.shirtStyle);
-  response.glassesStyle = userConfig.glassesStyle || pickRandomFromList(defaultOptions.glassesStyle, { usually: ["none"] });
+  response.sex = isSeedConfig ? pickByHashCode(hashCode, 'sex') as Sex : (userConfig.sex || pickRandomFromList(defaultOptions.sex));
+  response.faceColor = isSeedConfig ? pickByHashCode(hashCode, 'faceColor') : (userConfig.faceColor || pickRandomFromList(defaultOptions.faceColor));
+  response.earSize = isSeedConfig ? pickByHashCode(hashCode, 'earSize') as EarSize : (userConfig.earSize || pickRandomFromList(defaultOptions.earSize));
+  response.eyeStyle = isSeedConfig ? pickByHashCode(hashCode, 'eyeStyle') as EyeStyle : (userConfig.eyeStyle || pickRandomFromList(defaultOptions.eyeStyle));
+  response.noseStyle = isSeedConfig ? pickByHashCode(hashCode, 'noseStyle') as NoseStyle : (userConfig.noseStyle || pickRandomFromList(defaultOptions.noseStyle));
+  response.mouthStyle = isSeedConfig ? pickByHashCode(hashCode, 'mouthStyle') as MouthStyle : (userConfig.mouthStyle || pickRandomFromList(defaultOptions.mouthStyle));
+  response.shirtStyle = isSeedConfig ? pickByHashCode(hashCode, 'shirtStyle') as ShirtStyle : (userConfig.shirtStyle || pickRandomFromList(defaultOptions.shirtStyle));
+  response.glassesStyle = isSeedConfig ? pickByHashCode(hashCode, 'glassesStyle', { usually: ["none"] }) as GlassesStyle : (userConfig.glassesStyle || pickRandomFromList(defaultOptions.glassesStyle, { usually: ["none"] }));
 
   // Hair
   let hairColorAvoidList: string[] = [];
   let hairColorUsually: string[] = [];
-  if (!userConfig.hairColor) {
+  if (isSeedConfig || !userConfig.hairColor) {
     switch (response.sex) {
       case "woman": {
         hairColorAvoidList = response.faceColor === defaultOptions.faceColor[1] && ["#77311D"] || [];
@@ -118,48 +161,63 @@ export const genConfig: GenConfigFunc = (userConfig = {}) => {
       }
     }
   }
-  response.hairColor = userConfig.hairColor || pickRandomFromList(defaultOptions.hairColor, {
-    avoidList: hairColorAvoidList,
-    usually: hairColorUsually
-  });
+  response.hairColor = isSeedConfig
+    ? pickByHashCode(hashCode, 'hairColor', {
+      avoidList: hairColorAvoidList,
+      usually: hairColorUsually
+    })
+    : (userConfig.hairColor || pickRandomFromList(defaultOptions.hairColor, {
+      avoidList: hairColorAvoidList,
+      usually: hairColorUsually
+    }));
 
-  let myHairStyle = userConfig.hairStyle;
-  if (!myHairStyle) {
+  if (isSeedConfig || !userConfig.hairStyle) {
     switch (response.sex) {
       case "man": {
-        myHairStyle = pickRandomFromList(defaultOptions.hairStyleMan, { usually: ["normal", "thick"] });
+        response.hairStyle = isSeedConfig
+          ? pickByHashCode(hashCode, 'hairStyleMan', { usually: ["normal", "thick"] }) as HairStyleMan
+          : pickRandomFromList(defaultOptions.hairStyleMan, { usually: ["normal", "thick"] });
         break;
       }
       case "woman": {
-        myHairStyle = pickRandomFromList(defaultOptions.hairStyleWoman);
+        response.hairStyle = isSeedConfig
+          ? pickByHashCode(hashCode, 'hairStyleWoman') as HairStyleWoman
+          : pickRandomFromList(defaultOptions.hairStyleWoman);
         break;
       }
     }
   }
-  response.hairStyle = myHairStyle;
 
   // Hat
-  response.hatStyle = userConfig.hatStyle || pickRandomFromList(defaultOptions.hatStyle, { usually: ["none"] });
-  response.hatColor = userConfig.hatColor || pickRandomFromList(defaultOptions.hatColor);
+  response.hatStyle = isSeedConfig
+    ? pickByHashCode(hashCode, 'hatStyle', { usually: ["none"] }) as HatStyle
+    : (userConfig.hatStyle || pickRandomFromList(defaultOptions.hatStyle, { usually: ["none"] }));
+  response.hatColor = isSeedConfig ? pickByHashCode(hashCode, 'hatColor') : (userConfig.hatColor || pickRandomFromList(defaultOptions.hatColor));
   const _hairOrHatColor = response.hatStyle === "none" && response.hairColor || response.hatColor;
 
   // Eyebrow
-  if (userConfig.eyeBrowStyle) {
+  if (!isSeedConfig && userConfig.eyeBrowStyle) {
     response.eyeBrowStyle = userConfig.eyeBrowStyle
   } else {
     response.eyeBrowStyle = response.sex === "woman"
-      ? pickRandomFromList(defaultOptions.eyeBrowWoman)
+      ? isSeedConfig
+        ? pickByHashCode(hashCode, 'eyeBrowWoman') as EyeBrowStyle
+        : pickRandomFromList(defaultOptions.eyeBrowWoman)
       : "up"
   }
 
   // Shirt color
-  response.shirtColor = userConfig.shirtColor || pickRandomFromList(defaultOptions.shirtColor, { avoidList: [_hairOrHatColor] });
+  response.shirtColor = isSeedConfig
+    ? pickByHashCode(hashCode, 'shirtColor', { avoidList: [_hairOrHatColor] })
+    : userConfig.shirtColor || pickRandomFromList(defaultOptions.shirtColor, { avoidList: [_hairOrHatColor] });
 
   // Background color
-  if (userConfig.isGradient) {
+  if (!isSeedConfig && userConfig.isGradient) {
     response.bgColor = userConfig.bgColor || pickRandomFromList(defaultOptions.gradientBgColor);
   } else {
-    response.bgColor = userConfig.bgColor || pickRandomFromList(defaultOptions.bgColor, { avoidList: [_hairOrHatColor, response.shirtColor] });
+    response.bgColor = isSeedConfig
+      ? pickByHashCode(hashCode, 'bgColor', { avoidList: [_hairOrHatColor, response.shirtColor] })
+      : userConfig.bgColor || pickRandomFromList(defaultOptions.bgColor, { avoidList: [_hairOrHatColor, response.shirtColor] });
   }
 
   return response;