added size pops to M3terHead and added function to generate attributes

Author: iChristwin

docs/m3ter-alias.md

@@ -17,7 +17,7 @@ Effortlessly create captivating names that instantly distinguish each device, an
    export default function Home() {
      return (
        <h2 style={{ "text-transform": "capitalize" }}>
-         <M3terAlias seed={"device_DID_string"} />
+         {M3terAlias(seed="device_DID_string")}
        </h2>
      );
    }

docs/m3ter-attributes.md

@@ -0,0 +1,38 @@
+# M3ter Attributes
+
+Object describing m3ter-head attributes generated from the seed
+
+### Usage:
+
+1. Import the `m3terAttributes` component into your React code:
+
+   ```javascript
+   import * as React from "react";
+   import { m3terAttributes } from "m3ters";
+   ```
+
+2. Generate the attributes within your component, providing your input string:
+
+   ```jsx
+   export default function Home() {
+     const attributes = m3terAttributes("device_DID_string");
+     console.log(attributes);
+   }
+   ```
+
+3. Your function should return text content like shown below
+
+   ```json
+   {
+     "name": "mighty distinct nanogear",
+     "eyes": "happy",
+     "mouth": "smile2",
+     "texture": "dots",
+     "color": "#0592f9",
+     "seed": "device_DID_string"
+   }
+   ```
+
+## Licensing
+
+You are free to embed under the terms of the [CC0 1.0 Universal](./LICENSE) License.

docs/m3ter-head.md

@@ -17,7 +17,7 @@ Avatars to infuse a touch of whimsy and individuality into the M3tering Protocol
    export default function Home() {
      return (
        <>
-         <M3terHead seed={"device_DID_string"} />
+         <M3terHead seed={"device_DID_string"} size={80} />
        </>
      );
    }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3ters",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "CC0-1.0",
   "author": "iChristwin",
   "description": "React toolkit tailored to M3tering Protocol for handling ugly crypto strings",
@@ -47,4 +47,4 @@
   "files": [
     "dist"
   ]
-}
+}

src/components/M3terAlias.jsx

@@ -1,24 +1,20 @@
 import React from "react";
-import seedrandom from "seedrandom";
 
 import { Eyes } from "./Eyes";
 import { Mouth } from "./Mouth";
 import { Texture } from "./Texture";
+import { m3terProps } from "../utils/props";
 
-export const M3terHead = (seed) => {
-  const random = seedrandom(seed);
-  let eyes = Math.round(random() * 15);
-  let mouth = Math.round(random() * 11);
-  let texture = Math.round(random() * 5);
-  let color = "#" + random().toString(16).slice(2, 8);
+export const M3terHead = ({ seed, size = 500 }) => {
+  const { eyesIndex, mouthIndex, textureIndex, color } = m3terProps(seed);
 
   return (
     <svg
       version="1.1"
-      id="m3ter-head"
+      id={seed}
       xmlns="http://www.w3.org/2000/svg"
-      width="500"
-      height="500"
+      width={size}
+      height={size}
       viewBox="-34 -15 250 250"
     >
       <mask id="facemask" mask-type="alpha" maskUnits="userSpaceOnUse">
@@ -32,10 +28,10 @@ export const M3terHead = (seed) => {
       </mask>
       <g mask="url(#facemask)">
         <rect x="-20" y="-20" width="225" height="220" fill={color} />
-        <Texture type={texture} />
+        <Texture type={textureIndex} />
       </g>
-      <Eyes type={eyes} />
-      <Mouth type={mouth} />
+      <Eyes type={eyesIndex} />
+      <Mouth type={mouthIndex} />
     </svg>
   );
 };

src/components/M3terHead.jsx

@@ -0,0 +1,7 @@
+import { m3terProps } from "../utils";
+import { Adjectives, Nouns } from "../words";
+
+export const m3terAlias = (seed) => {
+  const { adjIndex1, adjIndex2, nounIndex } = m3terProps(seed);
+  return `${Adjectives[adjIndex1]} ${Adjectives[adjIndex2]} ${Nouns[nounIndex]}`;
+};

src/components/alias.js

@@ -0,0 +1,15 @@
+import { m3terAlias } from "./alias";
+import { m3terProps, eyeTypes, mouthType, textureType } from "../utils";
+
+export const m3terAttributes = (seed) => {
+  const { eyesIndex, mouthIndex, textureIndex, color } = m3terProps(seed);
+
+  return {
+    name: m3terAlias(seed),
+    eyes: eyeTypes[eyesIndex],
+    mouth: mouthType[mouthIndex],
+    texture: textureType[textureIndex],
+    color,
+    seed,
+  };
+};

src/components/attributes.js

@@ -1,4 +1,3 @@
-import React from "react";
-
-export * from "./M3terAlias.jsx";
+export * from "./alias";
+export * from "./attributes";
 export * from "./M3terHead.jsx";

src/components/index.js

@@ -1,3 +1,2 @@
-import React from "react";
-
 export * from "./components";
+export * from "./utils";

src/index.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 export { Arturito } from "./Arturito";
 export { Bulging } from "./Bulging";
 export { Dizzy } from "./Dizzy";

src/parts/Eyes/index.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 export { Arturito } from "./Arturito";
 export { Bite } from "./Bite";
 export { Diagram } from "./Diagram";

src/parts/Mouths/index.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 export { Camo1 } from "./Camo1";
 export { Camo2 } from "./Camo2";
 export { Dirty1 } from "./Dirty1";

src/parts/Textures/index.js

@@ -0,0 +1,2 @@
+export * from "./props";
+export * from "./types";

src/utils/index.js

@@ -0,0 +1,23 @@
+import seedrandom from "seedrandom";
+
+export function m3terProps(seed) {
+  const random = seedrandom(seed);
+  const eyesIndex = Math.round(random() * 15);
+  const mouthIndex = Math.round(random() * 11);
+  const textureIndex = Math.round(random() * 5);
+  const color = "#" + random().toString(16).slice(2, 8);
+
+  const adjIndex1 = Math.round(random() * 1808);
+  const adjIndex2 = Math.round(random() * 1808);
+  const nounIndex = Math.round(random() * 96);
+
+  return {
+    eyesIndex,
+    mouthIndex,
+    textureIndex,
+    color,
+    adjIndex1,
+    adjIndex2,
+    nounIndex,
+  };
+}

src/utils/props.js

@@ -0,0 +1,41 @@
+export const eyeTypes = [
+  "arturito",
+  "bulging",
+  "dizzy",
+  "eva",
+  "frame1",
+  "frame2",
+  "glow",
+  "happy",
+  "hearts",
+  "robocop",
+  "round",
+  "roundFrame01",
+  "roundFrame02",
+  "sensor",
+  "shade01",
+];
+
+export const mouthType = [
+  "none",
+  "arturito",
+  "bite",
+  "diagram",
+  "grill01",
+  "grill02",
+  "grill03",
+  "robocop",
+  "smile01",
+  "smile02",
+  "square01",
+  "square02",
+];
+
+export const textureType = [
+  "none",
+  "camo01",
+  "camo02",
+  "dirty01",
+  "dirty02",
+  "dots",
+];