soccer-jersey-fork 1.0.95 → 1.0.97

package/lib/patterns/patterns.d.ts

@@ -13,7 +13,8 @@ export declare const drawSleeveTwoColors: (page: Svg, primaryColor: string, seco
 export declare const drawSleeveContrastingTwoColors: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSingleBandThin: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle?: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
-export declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, direction: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawConcentricCircles: (page: Svg, primaryColor: string, secondaryColor: string, direction: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawDashes: (page: Svg, primaryColor: string, secondaryColor: string, dashDirection: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const addShortSideColor: (page: Svg, color: string) => void;
 export declare function addShoulderSideColor(page: Svg, color: string): void;

package/lib/patterns/patterns.js

@@ -156,9 +156,9 @@ export const drawSleeveTwoColors = (page, primaryColor, secondaryColor, directio
             });
         }
         default: {
-            return page.pattern(29, 100, (add) => {
-                add.rect(29, 100).fill(primaryColor);
-                add.rect(18, 100).fill(secondaryColor).move(-4, 0);
+            return page.pattern(30, 100, (add) => {
+                add.rect(30, 100).fill(primaryColor);
+                add.rect(17, 100).fill(secondaryColor).move(-4, 0);
             });
         }
     }
@@ -229,7 +229,7 @@ export const drawSingleBandThin = (page, primaryColor, secondaryColor, bandStyle
             return drawVertical(60);
     }
 };
-export const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
+export const drawWaves = (page, primaryColor, secondaryColor, direction) => {
     function drawVertical() {
         return page.pattern(12, 20, function (add) {
             add.rect(12, 20).fill(primaryColor);
@@ -237,7 +237,7 @@ export const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
             add.rect(6, 14).fill(secondaryColor).move(3, 9).rotate(15);
         });
     }
-    switch (waveStyle) {
+    switch (direction) {
         case "horizontal":
             return page.pattern(20, 12, function (add) {
                 add.rect(20, 12).fill(primaryColor);
@@ -252,6 +252,24 @@ export const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
             return drawVertical();
     }
 };
+export const drawConcentricCircles = (page, primaryColor, secondaryColor, direction) => {
+    switch (direction) {
+        default: {
+            return page.pattern(100, 100, function (add) {
+                add.rect(100, 100).fill(primaryColor);
+                const numberOfCircles = 12;
+                for (let i = 0; i < numberOfCircles; i++) {
+                    const radius = 10 + i * 8;
+                    add
+                        .circle(radius)
+                        .fill("none")
+                        .stroke({ width: 1, color: secondaryColor })
+                        .center(50, 50);
+                }
+            });
+        }
+    }
+};
 export const drawDashes = (page, primaryColor, 
 // Cannot do secondaryColor = "#eee" because empty string will not get to the default "#eee" in the parameter.
 secondaryColor, dashDirection) => {
@@ -291,22 +309,14 @@ export const addShortSideColor = (page, color) => {
         .stroke({ width: 2, color, linecap: "butt" });
 };
 export function addShoulderSideColor(page, color) {
-    // page
-    //   .path(`m 2 35, l 16.5 -26, 19 -8`)
-    //   .fill("none")
-    //   .stroke({ width: 1, color, linecap: "butt" });
-    // page
-    //   .path(`m 4 36, l 16.5 -25, 19 -8`)
-    //   .fill("none")
-    //   .stroke({ width: 1, color, linecap: "butt" });
     // left
     page
-        .path(`m 0 35, l 16.5 -26, 19 -8`)
+        .path(`m 0 35, l 16.5 -26, 21 -8`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
     // right
     page
-        .path(`m 102 35 l -16.5 -26, -21 -8`)
+        .path(`m 101 35 l -16.5 -26, -21 -8`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
 }

package/lib/types/index.d.ts

@@ -44,5 +44,5 @@ export interface DrawSoccerJerseyProps {
     withShorts?: boolean;
 }
 export type StyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical" | "offsetLeftVertical" | "offsetRightVertical";
-export type ShirtStyle = "plain" | "twoColors" | "contrastingTwoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "checkeredBig" | "diamonds" | "singleBandThin" | "singleBand" | "dashed" | "cross";
+export type ShirtStyle = "plain" | "twoColors" | "contrastingTwoColors" | "concentricCircles" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "checkeredBig" | "diamonds" | "singleBandThin" | "singleBand" | "dashed" | "cross";
 export type SleeveStyle = ShirtStyle;

package/lib/utils/draw-soccer-jersey.js

@@ -7,7 +7,7 @@
 /* eslint-disable max-len */
 import { SVG } from "@svgdotjs/svg.js";
 import lightenDarkenColor from "./lighten-darken-color";
-import { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, addShoulderSideColor, addShortSideColor, addShirtSideColor, drawSingleBandThin, drawDiamonds, drawCrossLines, drawStriped, drawSleeveTwoColors, drawSleeveContrastingTwoColors, } from "../patterns/patterns";
+import { addShirtSideColor, addShortSideColor, addShoulderSideColor, drawCheckered, drawConcentricCircles, drawCrossLines, drawDashes, drawDiamonds, drawSingleBand, drawSingleBandThin, drawSleeveContrastingTwoColors, drawSleeveTwoColors, drawStriped, drawTwoColors, drawWaves, } from "../patterns/patterns";
 /**
  * @param {object} specs Specifications of the soccer jersey.
  * @param  {string} specs.shirtColor The main color (HTML Color Code) of
@@ -59,7 +59,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
                     /**
                      * The points start from the left then spread out to the leftest
                      */
-                    .path("m36 0.5 l -5 5 15 5 l 3 -5 2 0 3 5 15 -5 -4.3 -5 c -4 5 -26 5 -29 0")
+                    .path("m36.5 0.5 l -6 5 15 9 l 3 -5 3 0 3 5 15 -9 -6 -5 c -10 10 -25 5 -27.5 0")
                     .fill(collarColor || "#eee")
                     .stroke({
                     color: collarColor,
@@ -107,7 +107,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
     }
     if (shirtBottomColor) {
         //     const pathBottom = "m23 95 c 25 10 50 5 55 0";
-        const pathBottom = "m23 94 c 5 8 50 6 55 0";
+        const pathBottom = "m23.5 94 c 5 7 50 7 54.5 0";
         page
             .path(pathBottom)
             .fill("none")
@@ -204,6 +204,9 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
 }
 function getPatternFill(page, baseColor, style, styleColor, type, direction = "vertical") {
     switch (style) {
+        case "concentricCircles": {
+            return drawConcentricCircles(page, baseColor, styleColor, direction);
+        }
         case "twoColors": {
             if (type === "sleeve") {
                 return drawSleeveTwoColors(page, baseColor, styleColor, direction);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soccer-jersey-fork",
-  "version": "1.0.95",
+  "version": "1.0.97",
   "description": "Generate soccer jerseys in SVG format",
   "main": "lib/index.js",
   "scripts": {