soccer-jersey-fork 1.0.45 → 1.0.48

package/lib/patterns/patterns.d.ts

@@ -9,10 +9,11 @@ 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 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, color: string) => Svg;
+export declare const drawShortsSideStriped: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;

package/lib/patterns/patterns.js

@@ -69,6 +69,13 @@ 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");
@@ -239,10 +246,17 @@ export const drawDashes = (page, primaryColor, secondaryColor, dashDirection) =>
             });
     }
 };
-export const drawShortsSideStriped = (page, color) => {
-    const shortsStripedLeft = `m 26 101 q 1 2 -1 38`;
-    const shortsStripedRight = `m 77 101 q -1 2 1 38`;
-    page.path(shortsStripedLeft).stroke({ width: 2, color, linecap: "square" });
-    page.path(shortsStripedRight).stroke({ width: 2, color, linecap: "square" });
-    return page;
+// export const drawShortsSideStriped = (page: Svg, color: string) => {
+//   const shortsStripedLeft = `m 26 101 q 1 2 -1 38`;
+//   const shortsStripedRight = `m 77 101 q -1 2 1 38`;
+//   page.path(shortsStripedLeft).stroke({ width: 2, color, linecap: "square" });
+//   page.path(shortsStripedRight).stroke({ width: 2, color, linecap: "square" });
+//   return page;
+// };
+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);
+    });
 };

package/lib/stories/ReactTeamPage.stories.js

@@ -11,6 +11,8 @@ export const Default = {
     args: {
         shirtText: "SJ JS",
         shirtColor: "#008800",
+        shirtStyle: "sideStriped",
+        shirtStyleColor: "red",
         sleeveColor: "#008800",
         textColor: "#fff",
         collarColor: "red",
@@ -18,7 +20,7 @@ export const Default = {
         shortsColor: "black",
         image: "https://resources.simcups.com/flags/w80/264.png",
         shortsStyle: "sideStriped",
-        shortsCuffColor: "#6e6dd2",
+        // shortsCuffColor: "#6e6dd2",
     },
 };
 export const ARS = {

package/lib/types/index.d.ts

@@ -30,5 +30,5 @@ export interface DrawSoccerJerseyProps {
     withShorts?: boolean;
 }
 export type ShirtStyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
-export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "hoops" | "singleBand" | "dashed";
+export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "sideStriped" | "waves" | "checkered" | "hoops" | "singleBand" | "dashed";
 export type ShortsStyle = "plain" | "sideStriped";

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, } from "../patterns/patterns";
+import { drawHoops, drawSingleBand, drawStriped, drawCheckered, drawTwoColors, drawWaves, drawDashes, drawShortsSideStriped, drawShirtSideStriped, } from "../patterns/patterns";
 /**
  * @param {object} specs Specifications of the soccer jersey.
  * @param {string} specs.shirtText The text to be displayed on the shirt.
@@ -61,6 +61,9 @@ 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;
@@ -180,7 +183,17 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
     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}`;
-        page.path(pathShorts).fill(shortsColor);
+        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(page
             .gradient("linear", function (add) {
             add.stop(0, "#000", 0.2);
@@ -189,11 +202,6 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
         })
             .from(1, 1)
             .to(1, 0));
-        switch (shortsStyle) {
-            case "sideStriped": {
-                drawShortsSideStriped(page, shortsStyleColor || "red");
-            }
-        }
         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.45",
+  "version": "1.0.48",
   "description": "Generate soccer jerseys in SVG format",
   "main": "lib/index.js",
   "scripts": {