soccer-jersey-fork 1.0.44 → 1.0.47

package/lib/patterns/patterns.d.ts

@@ -1,10 +1,19 @@
+/*!
+ * This file has been modified from the original.
+ * Original source: https://github.com/nadchif/soccer-jersey/tree/master
+ * Modifications Copyright 2025 Lau Kai Chung
+ */
 import { Svg } from "@svgdotjs/svg.js";
 import { ShirtStyleDirection } from "../types";
-declare const drawStriped: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection, thickness?: "thin" | "thick" | "normal") => import("@svgdotjs/svg.js").Pattern;
-declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
-declare const drawHoops: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
-declare const drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
-declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
-declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
-declare const drawDashes: (page: Svg, primaryColor: string, secondaryColor: string, dashDirection: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
-export { drawStriped, drawHoops, drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, };
+export declare const drawStripedThick: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
+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, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;

package/lib/patterns/patterns.js

@@ -1,4 +1,4 @@
-const drawStripedThick = (page, primaryColor, secondaryColor, direction) => {
+export const drawStripedThick = (page, primaryColor, secondaryColor, direction) => {
     switch (direction) {
         case "horizontal": {
             // Define a pattern tile tall enough for both stripes
@@ -27,7 +27,7 @@ const drawStripedThick = (page, primaryColor, secondaryColor, direction) => {
         }
     }
 };
-const drawStripedThin = (page, primaryColor, secondaryColor, direction) => {
+export const drawStripedThin = (page, primaryColor, secondaryColor, direction) => {
     switch (direction) {
         case "horizontal": {
             return page.pattern(20, 5, function (add) {
@@ -43,7 +43,7 @@ const drawStripedThin = (page, primaryColor, secondaryColor, direction) => {
         }
     }
 };
-const drawStripedNormal = (page, primaryColor, secondaryColor, direction) => {
+export const drawStripedNormal = (page, primaryColor, secondaryColor, direction) => {
     switch (direction) {
         case "horizontal": {
             return page.pattern(20, 8, function (add) {
@@ -59,7 +59,7 @@ const drawStripedNormal = (page, primaryColor, secondaryColor, direction) => {
         }
     }
 };
-const drawStriped = (page, primaryColor, secondaryColor, direction, thickness = "normal") => {
+export const drawStriped = (page, primaryColor, secondaryColor, direction, thickness = "normal") => {
     switch (thickness) {
         case "thick":
             return drawStripedThick(page, primaryColor, secondaryColor, direction);
@@ -69,7 +69,14 @@ const drawStriped = (page, primaryColor, secondaryColor, direction, thickness =
             return drawStripedNormal(page, primaryColor, secondaryColor, direction);
     }
 };
-const drawCheckered = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
+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.2, 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");
     add
@@ -77,11 +84,11 @@ const drawCheckered = (page, primaryColor, secondaryColor) => page.pattern(20, 2
         .fill(secondaryColor ? secondaryColor : "#eee")
         .move(10, 10);
 });
-const drawHoops = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
+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");
 });
-const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) => {
+export const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) => {
     switch (bandStyle) {
         case "diagonalRight":
             return page.pattern(100, 100, function (add) {
@@ -124,7 +131,7 @@ const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) => {
             });
     }
 };
-const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
+export const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
     switch (bandStyle) {
         case "diagonalRight":
             return page.pattern(100, 100, function (add) {
@@ -167,7 +174,7 @@ const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
             });
     }
 };
-const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
+export const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
     switch (waveStyle) {
         case "horizontal":
             return page.pattern(20, 12, function (add) {
@@ -199,7 +206,7 @@ const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
             });
     }
 };
-const drawDashes = (page, primaryColor, secondaryColor, dashDirection) => {
+export const drawDashes = (page, primaryColor, secondaryColor, dashDirection) => {
     switch (dashDirection) {
         case "diagonalLeft":
             return page.pattern(10, 10, function (add) {
@@ -239,4 +246,17 @@ const drawDashes = (page, primaryColor, secondaryColor, dashDirection) => {
             });
     }
 };
-export { drawStriped, drawHoops, drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, };
+// 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.d.ts

@@ -1,3 +1,8 @@
+/*!
+ * This file has been modified from the original.
+ * Original source: https://github.com/nadchif/soccer-jersey/tree/master
+ * Modifications Copyright 2025 Lau Kai Chung
+ */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ReactTeamPage } from "./ReactTeamPage";
 declare const meta: Meta<typeof ReactTeamPage>;

package/lib/stories/ReactTeamPage.stories.js

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

package/lib/types/index.d.ts

@@ -4,7 +4,7 @@
  * Modifications Copyright 2025 Lau Kai Chung
  */
 export interface DrawSoccerJerseyProps {
-    shirtText: string;
+    shirtText?: string;
     textColor: string;
     textOutlineColor?: string;
     textBackgroundColor?: string;
@@ -23,8 +23,12 @@ export interface DrawSoccerJerseyProps {
     imageX?: number;
     imageY?: number;
     shortsColor: string;
+    shortsStyle: ShortsStyle;
+    shortsStyleColor?: string;
+    shortsCuffColor?: string;
     withBadge?: boolean;
     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.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, sleeveCuffColor, shortsColor, image, imageHeight, imageWidth, imageX, imageY, withBadge, withShorts, }: DrawSoccerJerseyProps): string;
+export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, sleeveCuffColor, shortsColor, shortsCuffColor, shortsStyle, shortsStyleColor, image, imageHeight, imageWidth, imageX, imageY, 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, } 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.
@@ -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, sleeveCuffColor, shortsColor, image, imageHeight, imageWidth, imageX, imageY, withBadge, withShorts = true, }) {
+export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor = "plain", sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, sleeveCuffColor, shortsColor, shortsCuffColor, shortsStyle, shortsStyleColor, image, imageHeight, imageWidth, imageX, imageY, withBadge, withShorts = true, }) {
     // Colors and Color Optimizations
     const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
     const optimizedShirtColor = lightenDarkenColor(shirtColor, -10);
@@ -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;
@@ -148,37 +151,49 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
             .fill(sleeveCuffColor)
             .stroke({ color: sleeveCuffColor, width: 3, linecap: "round" });
     }
-    // text
-    const optimizedFontSize = (20 / shirtText.length) * 3;
-    const drawText = (elem) => elem
-        .text(shirtText)
-        .fill(lightenDarkenColor(textColor ? textColor : "#fff", -50))
-        .font({
-        family: "Monospace",
-        size: optimizedFontSize > 30 ? 30 : optimizedFontSize,
-        style: "bold",
-    })
-        .stroke({
-        color: textOutlineColor
-            ? textOutlineColor
-            : lightenDarkenColor(textColor ? textColor : "#fff", 10),
-        width: 0.5,
-    })
-        .center(50, 35);
-    if (textBackgroundColor) {
-        // eslint-disable-next-line new-cap
-        const draftShirtTextElem = drawText(SVG());
-        const dimens = draftShirtTextElem.bbox();
-        page
-            .rect(dimens.width + 4, dimens.height + 4)
-            .fill(lightenDarkenColor(textBackgroundColor, 10))
+    if (shirtText) {
+        // text
+        const optimizedFontSize = (20 / shirtText.length) * 3;
+        const drawText = (elem) => elem
+            .text(shirtText)
+            .fill(lightenDarkenColor(textColor ? textColor : "#fff", -50))
+            .font({
+            family: "Monospace",
+            size: optimizedFontSize > 30 ? 30 : optimizedFontSize,
+            style: "bold",
+        })
+            .stroke({
+            color: textOutlineColor
+                ? textOutlineColor
+                : lightenDarkenColor(textColor ? textColor : "#fff", 10),
+            width: 0.5,
+        })
             .center(50, 35);
+        if (textBackgroundColor) {
+            // eslint-disable-next-line new-cap
+            const draftShirtTextElem = drawText(SVG());
+            const dimens = draftShirtTextElem.bbox();
+            page
+                .rect(dimens.width + 4, dimens.height + 4)
+                .fill(lightenDarkenColor(textBackgroundColor, 10))
+                .center(50, 35);
+        }
+        drawText(page);
     }
-    drawText(page);
     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);
@@ -187,6 +202,26 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
         })
             .from(1, 1)
             .to(1, 0));
+        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`;
+            page
+                .path(pathShortsCuffLeft)
+                .fill("none")
+                .stroke({
+                width: 3,
+                color: shortsCuffColor || "red",
+                linecap: "round",
+            });
+            page
+                .path(pathShortsCuffRight)
+                .fill("none")
+                .stroke({
+                width: 3,
+                color: shortsCuffColor || "red",
+                linecap: "round",
+            });
+        }
     }
     page.width(shirtWidth);
     // +10 is some extra room with the shorts height, so the total should be 150

package/package.json

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