soccer-jersey-fork 1.0.53 → 1.0.55

package/lib/patterns/patterns.d.ts

@@ -9,12 +9,12 @@ export declare const drawStripedThick: (page: Svg, primaryColor: string, seconda
 export declare const drawStripedThin: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawStripedNormal: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawStriped: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection, thickness?: "thin" | "thick" | "normal") => import("@svgdotjs/svg.js").Pattern;
-export declare const drawShirtSideStriped: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
-export declare const drawHoops: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawSingleBandThin: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawDashes: (page: Svg, primaryColor: string, secondaryColor: string, dashDirection: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
-export declare const drawShortsSideStriped: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
-export declare function addShoulderStriped(page: Svg, color: string): void;
+export declare const addShortSideColor: (page: Svg, color: string) => void;
+export declare function addShoulderSideColor(page: Svg, color: string): void;
+export declare function addShirtSideColor(page: Svg, color: string): void;

package/lib/patterns/patterns.js

@@ -69,13 +69,6 @@ export const drawStriped = (page, primaryColor, secondaryColor, direction, thick
             return drawStripedNormal(page, primaryColor, secondaryColor, direction);
     }
 };
-export const drawShirtSideStriped = (page, primaryColor, secondaryColor) => {
-    return page.pattern(51.3, 100, function (add) {
-        add.rect(51.3, 100).fill(primaryColor);
-        // The move 24.2 is the space between the lines
-        add.rect(2, 55).fill(secondaryColor).move(24, 42);
-    });
-};
 export const drawCheckered = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
     add.rect(20, 20).fill(primaryColor);
     add.rect(10, 10).fill(secondaryColor ? secondaryColor : "#eee");
@@ -84,10 +77,6 @@ export const drawCheckered = (page, primaryColor, secondaryColor) => page.patter
         .fill(secondaryColor ? secondaryColor : "#eee")
         .move(10, 10);
 });
-export const drawHoops = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
-    add.rect(20, 20).fill(primaryColor);
-    add.rect(20, 10).fill(secondaryColor ? secondaryColor : "#eee");
-});
 export const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) => {
     switch (bandStyle) {
         case "diagonalRight":
@@ -174,6 +163,31 @@ export const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) =>
             });
     }
 };
+export const drawSingleBandThin = (page, primaryColor, secondaryColor, bandStyle) => {
+    const drawVertical = (x) => {
+        return page.pattern(90, 100, function (add) {
+            add.rect(90, 100).fill(primaryColor);
+            add
+                .rect(5, 100)
+                .fill(secondaryColor ? secondaryColor : "#eee")
+                .move(x, 0);
+        });
+    };
+    switch (bandStyle) {
+        case "horizontal":
+            return page.pattern(100, 90, function (add) {
+                add.rect(100, 90).fill(primaryColor);
+                add
+                    .rect(100, 5)
+                    .fill(secondaryColor ? secondaryColor : "#eee")
+                    .move(0, 35);
+            });
+        case "vertical":
+            return drawVertical(50);
+        default:
+            return drawVertical(60);
+    }
+};
 export const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
     switch (waveStyle) {
         case "horizontal":
@@ -246,16 +260,19 @@ export const drawDashes = (page, primaryColor, secondaryColor, dashDirection) =>
             });
     }
 };
-export const drawShortsSideStriped = (page, primaryColor, secondaryColor) => {
-    return page.pattern(53, 50, function (add) {
-        add.rect(53, 50).fill(primaryColor);
-        // The move 24.2 is the space between the lines
-        add.rect(1, 40).radius(1, 1).fill(secondaryColor).move(24.5, 0);
-    });
+export const addShortSideColor = (page, color) => {
+    page
+        .path(`m 25 100, l -1 40`)
+        .fill("none")
+        .stroke({ width: 2, color, linecap: "butt" });
+    page
+        .path(`m 77 100 l 2 40`)
+        .fill("none")
+        .stroke({ width: 2, color, linecap: "butt" });
 };
-export function addShoulderStriped(page, color) {
+export function addShoulderSideColor(page, color) {
     page
-        .path(`m 0 34, l 16.5 -26, 18 -8`)
+        .path(`m 0 35, l 16.5 -26, 18 -8`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
     page
@@ -263,3 +280,13 @@ export function addShoulderStriped(page, color) {
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
 }
+export function addShirtSideColor(page, color) {
+    page
+        .path(`m 25.5 45, l -0.5 50`)
+        .fill("none")
+        .stroke({ width: 2, color, linecap: "round" });
+    page
+        .path(`m 76 45, l 0.5 50`)
+        .fill("none")
+        .stroke({ width: 2, color, linecap: "round" });
+}

package/lib/stories/ReactTeamPage.stories.js

@@ -11,7 +11,8 @@ export const Default = {
     args: {
         shirtText: "SJ JS",
         shirtColor: "#008800",
-        shirtStyle: "sideStriped",
+        shirtStyle: "singleBandThin",
+        shirtStyleDirection: "vertical",
         shirtStyleColor: "red",
         sleeveColor: "#008800",
         textColor: "#fff",
@@ -26,18 +27,18 @@ export const Default = {
                 x: 45,
                 y: 45,
             },
-            {
-                src: "https://resources.simcups.com/flags/w80/264.png",
-                width: 20,
-                height: 20,
-                x: 60,
-                y: 60,
-            },
+            // {
+            //   src: "https://resources.simcups.com/flags/w80/264.png",
+            //   width: 20,
+            //   height: 20,
+            //   x: 60,
+            //   y: 60,
+            // },
         ],
         shortsStyle: "sideStriped",
         shortsCuffColor: "#6e6dd2",
-        shoulderStyle: "striped",
-        shoulderStyleColor: "red",
+        shoulderSideColor: "red",
+        shortsSideColor: "red",
     },
 };
 export const ARS = {

package/lib/types/index.d.ts

@@ -10,6 +10,7 @@ export interface DrawSoccerJerseyProps {
     textBackgroundColor?: string;
     shirtColor: string;
     sleeveColor: string;
+    shirtSideColor?: string;
     shirtStyle: ShirtStyle;
     shirtStyleColor?: string;
     shirtStyleDirection?: ShirtStyleDirection;
@@ -25,15 +26,13 @@ export interface DrawSoccerJerseyProps {
         height: number;
     }[];
     shortsColor: string;
-    shortsStyle: ShortsStyle;
-    shortsStyleColor?: string;
+    shortsSideColor?: string;
     shortsCuffColor?: string;
-    shoulderStyle: ShoulderStyle;
-    shoulderStyleColor?: string;
+    shoulderSideColor?: string;
     withBadge?: boolean;
     withShorts?: boolean;
 }
 export type ShirtStyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
-export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "sideStriped" | "waves" | "checkered" | "hoops" | "singleBand" | "dashed";
+export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "singleBandThin" | "singleBand" | "dashed";
 export type ShoulderStyle = "plain" | "striped";
 export type ShortsStyle = "plain" | "sideStriped";

package/lib/utils/draw-soccer-jersey.d.ts

@@ -26,4 +26,4 @@ import { DrawSoccerJerseyProps } from "../types";
  * @return {string} A data URL ready for direct use as src attribute
  *  on <img />
  */
-export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, shoulderStyleColor, shoulderStyle, sleeveCuffColor, shortsColor, shortsCuffColor, shortsStyle, shortsStyleColor, images, withBadge, withShorts, }: DrawSoccerJerseyProps): string;
+export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts, }: DrawSoccerJerseyProps): string;

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 { drawHoops, drawSingleBand, drawStriped, drawCheckered, drawTwoColors, drawWaves, drawDashes, drawShortsSideStriped, drawShirtSideStriped, addShoulderStriped, } from "../patterns/patterns";
+import { drawSingleBand, drawStriped, drawCheckered, drawTwoColors, drawWaves, drawDashes, addShoulderSideColor, addShortSideColor, addShirtSideColor, drawSingleBandThin, } from "../patterns/patterns";
 /**
  * @param {object} specs Specifications of the soccer jersey.
  * @param {string} specs.shirtText The text to be displayed on the shirt.
@@ -35,7 +35,7 @@ import { drawHoops, drawSingleBand, drawStriped, drawCheckered, drawTwoColors, d
  * @return {string} A data URL ready for direct use as src attribute
  *  on <img />
  */
-export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor = "plain", sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, shoulderStyleColor, shoulderStyle, sleeveCuffColor, shortsColor, shortsCuffColor, shortsStyle, shortsStyleColor, images, withBadge, withShorts = true, }) {
+export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor = "plain", sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts = true, }) {
     // Colors and Color Optimizations
     const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
     const optimizedShirtColor = lightenDarkenColor(shirtColor, -10);
@@ -61,9 +61,6 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
         case "striped":
             shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection || "vertical", "normal");
             break;
-        case "sideStriped":
-            shirtFill = drawShirtSideStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222");
-            break;
         case "dashed":
             shirtFill = drawDashes(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection ? shirtStyleDirection : "vertical");
             break;
@@ -73,9 +70,16 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
         case "singleBand":
             shirtFill = drawSingleBand(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection ? shirtStyleDirection : "horizontal");
             break;
-        case "hoops":
-            shirtFill = drawHoops(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222");
+        case "singleBandThin":
+            shirtFill = drawSingleBandThin(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection ? shirtStyleDirection : "horizontal");
             break;
+        // case "hoops":
+        //   shirtFill = drawHoops(
+        //     page,
+        //     optimizedShirtColor,
+        //     shirtStyleColor ? shirtStyleColor : "#222",
+        //   );
+        //   break;
         case "waves":
             shirtFill = drawWaves(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection == "vertical" || shirtStyleDirection == "horizontal"
                 ? shirtStyleDirection
@@ -179,27 +183,16 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
         }
         drawText(page);
     }
-    if (shoulderStyle) {
-        switch (shoulderStyle) {
-            case "striped": {
-                addShoulderStriped(page, shoulderStyleColor || "red");
-            }
-        }
+    if (shirtSideColor) {
+        addShirtSideColor(page, shirtSideColor);
+    }
+    if (shoulderSideColor) {
+        addShoulderSideColor(page, shoulderSideColor);
     }
     const shortsHeight = withShorts ? 40 : 0;
     if (withShorts) {
         const pathShorts = `m 23 98 c 5 6, 50 6, 56 0 l 2 ${shortsHeight} c 0 5, -27 5, -27.5 0 l -2 -10, -2 10, c 0 5, -27 5, -27.5 0 l 1 -${shortsHeight}`;
-        let shortsFill;
-        switch (shortsStyle) {
-            case "sideStriped": {
-                shortsFill = drawShortsSideStriped(page, shortsColor, shortsStyleColor || "red");
-                break;
-            }
-            default: {
-                shortsFill = shortsColor;
-            }
-        }
-        page.path(pathShorts).fill(shortsFill);
+        page.path(pathShorts).fill(shortsColor);
         page.path(pathShorts).fill(page
             .gradient("linear", function (add) {
             add.stop(0, "#000", 0.2);
@@ -208,6 +201,9 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
         })
             .from(1, 1)
             .to(1, 0));
+        if (shortsSideColor) {
+            addShortSideColor(page, shortsSideColor);
+        }
         if (shortsCuffColor) {
             const pathShortsCuffLeft = `m 23 138 c 5 5, 22 5, 26.5 0`;
             const pathShortsCuffRight = `m 54 138 c 5 5, 22 5, 26.5 0`;

package/package.json

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