Merge pull request #11 from Intosoft/feat/web

fix: color options
Intosoft · Mar 2, 2024 · 0119f07 · 0119f07
2 parents d060b80 + 4b9f8c0
commit 0119f07
Show file tree

Hide file tree

Showing 7 changed files with 241 additions and 84 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -1,5 +1,10 @@
-export type EyeFrameShape = "square" | "circle" | "rounded" | "circle-item";
-export type EyeballShape = "square" | "circle" | "circle-item";
+export type EyeFrameShape =
+  | "body"
+  | "square"
+  | "circle"
+  | "rounded"
+  | "circle-item";
+export type EyeballShape = "body" | "square" | "circle" | "circle-item";
 export type BodyShape =
   | "square"
   | "square-small"
@@ -53,26 +58,20 @@ export const defaultConfig: Config = {
   shapes: {
     eyeFrame: "circle",
     body: "rounded-horizontal",
-    eyeball: "circle",
+    eyeball: "square",
   },
   colors: {
     background: "white",
     body: "linear-gradient(90deg, rgba(255,31,234,1) 4%, RGBA(225,147,129,1) 35%, rgba(0,212,255,1) 100%)",
     eyeFrame: {
-      topLeft:
-        "linear-gradient(90deg, RGBA(66, 58, 187, 1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)",
-      topRight:
-        "linear-gradient(90deg, RGBA(66, 58, 187, 1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)",
-      bottomLeft:
-        "linear-gradient(90deg, RGBA(66, 58, 187, 1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)",
+      topLeft: "body",
+      topRight: "body",
+      bottomLeft: "body",
     },
     eyeball: {
-      topLeft:
-        "linear-gradient(90deg, rgba(244,209,74,1) 0%, RGB(5, 5, 5) 35%, rgba(0,212,255,1) 100%)",
-      topRight:
-        "linear-gradient(90deg, rgba(244,209,74,1) 0%, RGB(5, 5, 5) 35%, rgba(0,212,255,1) 100%)",
-      bottomLeft:
-        "linear-gradient(90deg, rgba(244,209,74,1) 0%, RGB(5, 5, 5) 35%, rgba(0,212,255,1) 100%)",
+      topLeft: "body",
+      topRight: "body",
+      bottomLeft: "body",
     },
   },
 };
diff --git a/src/eyeball.ts b/src/eyeball.ts
@@ -92,57 +92,86 @@ const generateEyeballSVG = ({
   size,
   matrixLength,
   position,
+  pathOnly,
 }: GenerateEyeballSVGParams) => {
   if (shape == "circle-item") {
     return "";
   }
+
+  const path = eyeballFunction[shape]({
+    matrixLength: matrixLength,
+    size: size,
+    position,
+  });
+  if (pathOnly) {
+    return path;
+  }
   return `<path
   fill="${isGradientColor(color) ? "url(#eyeball)" : color}"
-  d="${eyeballFunction[shape]({
-    matrixLength,
-    size,
-    position,
-  })}" 
+  d="${path}" 
   stroke-width="0"
  
   />`;
 };
 
 export const generateEyeballSVGFromConfig = (
   config: Config,
-  matrixLength: number
+  matrixLength: number,
+  isFromBody?: boolean
 ) => {
-  const eyeballShape = config.shapes.eyeball;
-  const eyeballColor = config.colors.eyeball;
+  const shape = config.shapes.eyeball;
+  const colors = config.colors.eyeball;
 
   let svgString = "";
-
+  if (shape === "body") {
+    return "";
+  }
   //top-left
-  svgString += generateEyeballSVG({
-    shape: eyeballShape,
-    color: eyeballColor.topLeft,
-    size: config.length,
-    matrixLength,
-    position: "topLeft",
-  });
+
+  if (
+    (colors.topLeft === "body" && isFromBody) ||
+    (colors.topLeft !== "body" && !isFromBody)
+  ) {
+    svgString += generateEyeballSVG({
+      shape: shape,
+      color: colors.topLeft === "body" ? config.colors.body : colors.topLeft,
+      size: config.length,
+      matrixLength,
+      position: "topLeft",
+      pathOnly: colors.topLeft === "body",
+    });
+  }
 
   //top-right
-  svgString += generateEyeballSVG({
-    shape: eyeballShape,
-    color: eyeballColor.topLeft,
-    size: config.length,
-    matrixLength,
-    position: "topRight",
-  });
+  if (
+    (colors.topRight === "body" && isFromBody) ||
+    (colors.topRight !== "body" && !isFromBody)
+  ) {
+    svgString += generateEyeballSVG({
+      shape: shape,
+      color: colors.topRight === "body" ? config.colors.body : colors.topRight,
+      size: config.length,
+      matrixLength,
+      position: "topRight",
+      pathOnly: colors.bottomLeft === "body",
+    });
+  }
 
   //bottom-left
-  svgString += generateEyeballSVG({
-    shape: eyeballShape,
-    color: eyeballColor.topLeft,
-    size: config.length,
-    matrixLength,
-    position: "bottomLeft",
-  });
+  if (
+    (colors.bottomLeft === "body" && isFromBody) ||
+    (colors.bottomLeft !== "body" && !isFromBody)
+  ) {
+    svgString += generateEyeballSVG({
+      shape: shape,
+      color:
+        colors.bottomLeft === "body" ? config.colors.body : colors.bottomLeft,
+      size: config.length,
+      matrixLength,
+      position: "bottomLeft",
+      pathOnly: colors.bottomLeft === "body",
+    });
+  }
 
   return svgString;
 };
diff --git a/src/eyeframes.ts b/src/eyeframes.ts
@@ -1,7 +1,6 @@
 import { isGradientColor } from "./utils/gradient";
 import {
   GenerateEyeFrameSVGParams,
-  StylePathGeneratorParams,
   StyledEyePathGeneratorParams,
 } from "./types";
 import { getPositionForEyes } from "./utils";
@@ -165,17 +164,23 @@ const generateEyeFrameSVG = ({
   size,
   matrixLength,
   position,
+  pathOnly,
 }: GenerateEyeFrameSVGParams) => {
   if (shape == "circle-item") {
     return "";
   }
-  return `<path
-  fill="none"
-  d="${eyeFrameFunction[shape]({
+
+  const path = eyeFrameFunction[shape]({
     matrixLength: matrixLength,
     size: size,
     position,
-  })}" 
+  });
+  if (pathOnly) {
+    return path;
+  }
+  return `<path
+  fill="none"
+  d="${path}" 
   stroke-width="${size / matrixLength}"
   stroke="${isGradientColor(color) ? "url(#eyeFrame)" : color}"
  
@@ -184,39 +189,63 @@ const generateEyeFrameSVG = ({
 
 export const generateEyeFrameSVGFromConfig = (
   config: Config,
-  matrixLength: number
+  matrixLength: number,
+  isFromBody?: boolean
 ) => {
   const shape = config.shapes.eyeFrame;
-  const colors = config.colors.eyeball;
+  const colors = config.colors.eyeFrame;
 
   let svgString = "";
 
+  if (shape === "body") {
+    return "";
+  }
+
   //top-left
-  svgString += generateEyeFrameSVG({
-    shape,
-    color: colors.topLeft,
-    size: config.length,
-    matrixLength,
-    position: "topLeft",
-  });
+  if (
+    (colors.topLeft === "body" && isFromBody) ||
+    (colors.topLeft !== "body" && !isFromBody)
+  ) {
+    svgString += generateEyeFrameSVG({
+      shape,
+      color: colors.topLeft === "body" ? config.colors.body : colors.topLeft,
+      size: config.length,
+      matrixLength,
+      position: "topLeft",
+      pathOnly: colors.topLeft === "body",
+    });
+  }
 
   //top-right
-  svgString += generateEyeFrameSVG({
-    shape,
-    color: colors.topLeft,
-    size: config.length,
-    matrixLength,
-    position: "topRight",
-  });
+  if (
+    (colors.topRight === "body" && isFromBody) ||
+    (colors.topRight !== "body" && !isFromBody)
+  ) {
+    svgString += generateEyeFrameSVG({
+      shape,
+      color: colors.topRight === "body" ? config.colors.body : colors.topRight,
+      size: config.length,
+      matrixLength,
+      position: "topRight",
+      pathOnly: colors.topLeft === "body",
+    });
+  }
 
   //bottom-left
-  svgString += generateEyeFrameSVG({
-    shape,
-    color: colors.topLeft,
-    size: config.length,
-    matrixLength,
-    position: "bottomLeft",
-  });
+  if (
+    (colors.bottomLeft === "body" && isFromBody) ||
+    (colors.bottomLeft !== "body" && !isFromBody)
+  ) {
+    svgString += generateEyeFrameSVG({
+      shape,
+      color:
+        colors.bottomLeft === "body" ? config.colors.body : colors.bottomLeft,
+      size: config.length,
+      matrixLength,
+      position: "bottomLeft",
+      pathOnly: colors.topLeft === "body",
+    });
+  }
 
   return svgString;
 };
diff --git a/src/path/index.ts b/src/path/index.ts
@@ -12,6 +12,8 @@ import {
 } from "./square";
 import { Config } from "../config";
 import { checkNeighbors } from "../utils/path";
+import { generateEyeFrameSVGFromConfig } from "../eyeframes";
+import { generateEyeballSVGFromConfig } from "../eyeball";
 interface GeneratePathProps {
   size: number;
   matrix: number[][];
@@ -47,7 +49,9 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
             if (config.shapes.eyeFrame === "circle-item") {
               path += generateCirclePath({ i, j, cellSize });
             }
-            return;
+            if (config.shapes.eyeFrame !== "body") {
+              return;
+            }
           }
         }
 
@@ -56,7 +60,9 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
             if (config.shapes.eyeball === "circle-item") {
               path += generateCirclePath({ i, j, cellSize });
             }
-            return;
+            if (config.shapes.eyeball !== "body") {
+              return;
+            }
           }
         }
         if (config.shapes.body === "square") {
@@ -214,5 +220,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
     });
   });
 
+  path += generateEyeFrameSVGFromConfig(config, matrix.length, true);
+  path += generateEyeballSVGFromConfig(config, matrix.length, true);
   return path;
 };
diff --git a/src/types.ts b/src/types.ts
@@ -12,6 +12,7 @@ export interface GenerateEyeballSVGParams {
   size: number;
   matrixLength: number;
   position: EyePosition;
+  pathOnly: boolean;
 }
 
 export interface GenerateEyeFrameSVGParams {
@@ -20,6 +21,7 @@ export interface GenerateEyeFrameSVGParams {
   size: number;
   matrixLength: number;
   position: EyePosition;
+  pathOnly: boolean;
 }
 
 export interface StyledEyePathGeneratorParams extends StylePathGeneratorParams {