soccer-jersey-fork 1.0.97 → 1.0.100

package/lib/patterns/patterns.d.ts

@@ -8,6 +8,7 @@ import { StyleDirection } from "../types";
 export declare const drawStriped: (page: Svg, primaryColor: string, secondaryColor: string, direction: StyleDirection, thickness?: "thin" | "thick" | "normal") => import("@svgdotjs/svg.js").Pattern;
 export declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string, size: "sm" | "lg", direction?: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawDiamonds: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawCrisscross: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSleeveTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, direction: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSleeveContrastingTwoColors: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;

package/lib/patterns/patterns.js

@@ -118,6 +118,15 @@ export const drawDiamonds = (page, primaryColor, secondaryColor) => {
         add.rect(3, 3).fill(secondaryColor).center(2, 2).rotate(45);
     });
 };
+export const drawCrisscross = (page, primaryColor, secondaryColor) => {
+    return page.pattern(10, 10, (add) => {
+        add.rect(10, 10).fill(primaryColor);
+        // Diagonal line from top-left to bottom-right of the tile
+        add.line(0, 0, 10, 10).stroke({ color: secondaryColor, width: 1 });
+        // Diagonal line from top-right to bottom-left of the tile
+        add.line(10, 0, 0, 10).stroke({ color: secondaryColor, width: 1 });
+    });
+};
 export const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) => {
     switch (bandStyle) {
         case "diagonalRight":
@@ -285,13 +294,21 @@ secondaryColor, dashDirection) => {
                 add.rect(5, 2).fill(secondaryColor).move(5, 5).rotate(135);
             });
         case "horizontal":
-            return page.pattern(10, 10, function (add) {
+            return page.pattern(10, 10, (add) => {
                 add.rect(10, 10).fill(primaryColor);
                 add.rect(5, 2).fill(secondaryColor);
                 add.rect(5, 2).fill(secondaryColor).move(5, 5);
             });
+        // default:
+        //   return page.pattern(25, 15, (add) => {
+        //     add.rect(25, 15).fill(primaryColor);
+        //     add.rect(5, 2).fill(secondaryColor).move(0, 5).rotate(135);
+        //     add.rect(5, 2).fill(secondaryColor).move(5, 5).rotate(135);
+        //     add.rect(5, 2).fill(secondaryColor).move(15, 5).rotate(45);
+        //     add.rect(5, 2).fill(secondaryColor).move(20, 5).rotate(45);
+        //   });
         default:
-            return page.pattern(10, 10, function (add) {
+            return page.pattern(10, 10, (add) => {
                 add.rect(10, 10).fill(primaryColor);
                 add.rect(2, 5).fill(secondaryColor);
                 add.rect(2, 5).fill(secondaryColor).move(5, 5);
@@ -311,7 +328,7 @@ export const addShortSideColor = (page, color) => {
 export function addShoulderSideColor(page, color) {
     // left
     page
-        .path(`m 0 35, l 16.5 -26, 21 -8`)
+        .path(`m 0 35, l 16.5 -26, 20 -8`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
     // right

package/lib/stories/jersey.stories.js

@@ -10,13 +10,12 @@ export default meta;
 export const Default = {
     args: {
         shirtColor: "#d40410",
-        sleeveColor: "#ffffff",
+        sleeveColor: "#773838",
         shirtStyle: "striped",
         shirtStyleColor: "#DA000C",
         shirtBottomColor: "",
         shirtStyleDirection: "vertical",
         collarColor: "",
-        sleeveStyle: "twoColors",
         sleeveStyleColor: "#DA000C",
         sleeveStyleDirection: "horizontal",
         sleeveCuffColor: "",
@@ -27,6 +26,5 @@ export const Default = {
         shirtSideColor: "",
         shortsSideColor: "#b3020c",
         shoulderSideColor: "",
-        withBadge: true,
     },
 };

package/lib/types/index.d.ts

@@ -40,9 +40,8 @@ export interface DrawSoccerJerseyProps {
     shortsSideColor?: string;
     shortsCuffColor?: string;
     shoulderSideColor?: string;
-    withBadge?: boolean;
     withShorts?: boolean;
 }
 export type StyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical" | "offsetLeftVertical" | "offsetRightVertical";
-export type ShirtStyle = "plain" | "twoColors" | "contrastingTwoColors" | "concentricCircles" | "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" | "crisscross";
 export type SleeveStyle = ShirtStyle;

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

@@ -18,4 +18,4 @@ import { DrawSoccerJerseyProps } from "../types";
  * @return {string} A data URL ready for direct use as src attribute
  *  on <img />
  */
-export default function drawSoccerJersey({ shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, withBadge, withShorts, isBack, }: DrawSoccerJerseyProps): string;
+export default function drawSoccerJersey({ shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, withShorts, isBack, }: 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 { addShirtSideColor, addShortSideColor, addShoulderSideColor, drawCheckered, drawConcentricCircles, drawCrossLines, drawDashes, drawDiamonds, drawSingleBand, drawSingleBandThin, drawSleeveContrastingTwoColors, drawSleeveTwoColors, drawStriped, drawTwoColors, drawWaves, } from "../patterns/patterns";
+import { addShirtSideColor, addShortSideColor, addShoulderSideColor, drawCheckered, drawConcentricCircles, drawCrisscross, 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
@@ -27,7 +27,7 @@ import { addShirtSideColor, addShortSideColor, addShoulderSideColor, drawChecker
  * @return {string} A data URL ready for direct use as src attribute
  *  on <img />
  */
-export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth = 200, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor = shirtColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, withBadge, withShorts = true, isBack = false, }) {
+export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth = 200, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor = shirtColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, withShorts = true, isBack = false, }) {
     // paths
     const pathLeftSleeve = "m18 8.5c-4 3-6.1 7.7-8.9 12-3.1 4.9-6 9.9-8.8 15 6 4 12 8.2 19 10 4.1.38 4.3-5.3 3.8-8.2-.29-9.7-3-19-5-29z";
     const pathRightSleeve = "m83 8.1c4 3 6.1 7.7 8.9 12 3.1 4.9 6 9.9 8.8 15-6 4-12 8.2-19 10-4.1.38-4.3-5.3-3.8-8.2.3-9.7 3-19 5-29z";
@@ -77,9 +77,6 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
                 }
             }
         }
-        if (withBadge) {
-            page.circle(8).fill(lightenDarkenColor(shirtColor, 60)).move(64, 25);
-        }
     }
     const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -5);
     sleeveStyleColor = sleeveStyleColor || "#eee";
@@ -239,6 +236,8 @@ function getPatternFill(page, baseColor, style, styleColor, type, direction = "v
             return drawWaves(page, baseColor, styleColor, direction);
         case "cross":
             return drawCrossLines(page, baseColor, styleColor);
+        case "crisscross":
+            return drawCrisscross(page, baseColor, styleColor);
         default:
             return baseColor;
     }

package/package.json

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