soccer-jersey-fork 1.0.121 → 1.0.123

package/lib/patterns/patterns.d.ts

@@ -18,6 +18,6 @@ export declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor
 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;
+export declare function addShoulderSideColor(page: Svg, color: string, isLongSleeve: boolean): void;
 export declare function addShirtSideColor(page: Svg, color: string): void;
 export declare const drawCrossLines: (page: Svg, primaryColor: string, secondaryColor: string, direction: StyleDirection) => import("@svgdotjs/svg.js").Pattern;

package/lib/patterns/patterns.js

@@ -345,7 +345,7 @@ secondaryColor, dashDirection) => {
 };
 export const addShortSideColor = (page, color) => {
     page
-        .path(`m 25 100, l -1 40`)
+        .path(`m 25 100 l -1 40`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
     page
@@ -353,25 +353,28 @@ export const addShortSideColor = (page, color) => {
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
 };
-export function addShoulderSideColor(page, color) {
+export function addShoulderSideColor(page, color, isLongSleeve) {
     // left
-    page
-        .path(`m 0 35, l 16.5 -26, 20 -8.5`)
-        .fill("none")
-        .stroke({ width: 2, color, linecap: "butt" });
+    const leftPath = isLongSleeve
+        ? "m 17 10 1.36 -1 L 36 0.5"
+        : `m 0 35 l 16.5 -26 20 -8.5`;
+    page.path(leftPath).fill("none").stroke({ width: 2, color, linecap: "butt" });
+    const rightPath = isLongSleeve
+        ? "M 63.5 0.5 L 82.1 8.52 82.25 9.04" // Starts at collar center (63.5) -> moves right to wrist (82.25)
+        : `m 101 35 l -16.5 -26 -21 -8.5`;
     // right
     page
-        .path(`m 101 35 l -16.5 -26, -21 -8.5`)
+        .path(rightPath)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
 }
 export function addShirtSideColor(page, color) {
     page
-        .path(`m 25.5 45, c 1 10 1 40 0 50`)
+        .path(`m 25.5 45 c 1 10 1 40 0 50`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "round" });
     page
-        .path(`m 76.5 45, c -1 10 -1 40 0 50`)
+        .path(`m 76.5 45 c -1 10 -1 40 0 50`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "round" });
 }

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

@@ -9,11 +9,12 @@ import { SVG } from "@svgdotjs/svg.js";
 import lightenDarkenColor from "./lighten-darken-color";
 import { addShirtSideColor, addShortSideColor, addShoulderSideColor, drawCheckered, drawConcentricCircles, drawCrisscross, drawCrossLines, drawDashes, drawDiamonds, drawSingleBand, drawSingleBandThin, drawSleeveContrastingTwoColors, drawSleeveTwoColors, drawStriped, drawTwoColors, drawWaves, } from "../patterns/patterns";
 export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth = 200, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor = shirtColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, sleeveType, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, shortsStyle, shortsStyleDirection, shortsStyleColor, }) {
+    const isLongSleeve = sleeveType === "long";
     // 3. DRAW SLEEVES FIRST (Background Layer)
-    const pathLeftSleeve = sleeveType === "long"
+    const leftSleevePath = isLongSleeve
         ? "M 17.4 9 C 9.7 13.9 8.6 24.4 7.5 32.6 C 5.7 43 7.3 61 6 90.1 C 7.7 92 8.6 91.9 12.1 92 C 14.8 92 14.8 92.1 17.8 90.7 C 18.4 85.4 18.4 76.6 19.4 64.2 C 20 57.3 20.8 44.8 22.6 37.4 C 22.3 27.6 20 18.7 18 8.6 Z"
         : "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 = sleeveType === "long"
+    const rightSleevePath = isLongSleeve
         ? "M 82.9 8.2 C 90.7 13.2 91.8 23.7 92.9 31.9 C 94.7 42.2 93.1 60.2 94.4 89.3 C 92.7 91.2 91.8 91.1 88.3 91.2 C 85.5 91.2 85.6 91.3 82.6 89.9 C 81.9 84.6 81.9 75.7 80.9 63.3 C 80.3 56.5 79.5 43.9 77.6 36.6 C 77.9 26.8 80.2 17.9 82.3 7.8 Z"
         : "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";
     const pathMainBody = "m83 8c-6.4-2.3-13-5.3-19-8 1.4 5.4-5.4 8.2-10 8.7-5.8.68-13-.075-17-5-1.2-2.1.62-5.1-2.8-2.6-5.6 2.6-11 5.5-17 7.9 5.6 21 3.3 17 6.2 40-.14 15 .16 30-.79 45 1.6 4.7 9.5 4 14 5.2 13 1.8 26 1.2 39-2.3 5.7-1.5 1.5-8.1 2.5-12-.32-15-.32-29-.32-44 5.5-37 1.6-12 4.9-33z";
@@ -26,8 +27,8 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
     sleeveStyleColor = sleeveStyleColor || "#eee";
     sleeveStyleDirection = sleeveStyleDirection || "vertical";
     const sleeveFill = getPatternFill(page, optimizedSleeveColor, sleeveStyle, sleeveStyleColor, "sleeve", sleeveStyleDirection);
-    page.path(pathLeftSleeve).fill(sleeveFill);
-    page.path(pathRightSleeve).fill(sleeveFill);
+    page.path(leftSleevePath).fill(sleeveFill);
+    page.path(rightSleevePath).fill(sleeveFill);
     // neck
     page.path(pathNeck).fill(lightenDarkenColor(shirtColor, -50));
     // shirt
@@ -41,15 +42,19 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
         .from(1, 1)
         .to(1, 0));
     if (shoulderSideColor) {
-        addShoulderSideColor(page, shoulderSideColor);
+        addShoulderSideColor(page, shoulderSideColor, isLongSleeve);
     }
     if (sleeveCuffColor) {
-        const pathLeftSleeveCuff = "m1.5 36 c 5 5 12.5 8 18.5 9";
+        const pathLeftSleeveCuff = isLongSleeve
+            ? "M 7.5 91.5 Q 11.9 92 16.5 91.5"
+            : "m1.5 36 c 5 5 12.5 8 18.5 9";
+        const pathRightSleeveCuff = isLongSleeve
+            ? "M 84 91 Q 88.5 91 93 90.5"
+            : "m100 36 c -5 5 -12.5 8 -18.5 9";
         page
             .path(pathLeftSleeveCuff)
             .fill(sleeveCuffColor)
             .stroke({ color: sleeveCuffColor, width: 3, linecap: "round" });
-        const pathRightSleeveCuff = "m100 36 c -5 5 -12.5 8 -18.5 9";
         page
             .path(pathRightSleeveCuff)
             .fill(sleeveCuffColor)
@@ -67,11 +72,11 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
             .stroke({ color: shirtBottomColor, width: 3, linecap: "round" });
     }
     const SHORT_HEIGHT = 40;
-    const pathShorts = `m 23 98 c 5 6, 50 6, 56 0 l 2 ${SHORT_HEIGHT} c 0 5, -27 5, -27.5 0 l -2 -10, -2 10, c 0 5, -27 5, -27.5 0 l 1 -${SHORT_HEIGHT}`;
-    // page.path(pathShorts).fill(shortsColor).stroke({
-    //   width: 1,
-    //   color: shortsColor,
-    // });
+    const pathShorts = `m 23 98 c 5 6 50 6 56 0 l 2 ${SHORT_HEIGHT} c 0 5 -27 5 -27.5 0 l -2 -10 -2 10 c 0 5 -27 5 -27.5 0 l 1 -${SHORT_HEIGHT}`;
+    // Left Leg Bottom: Sweeps smoothly from X=22 to X=49.5 matching the shorts curve profile
+    const pathShortsCuffLeft = "M 22 140 C 22 141, 48.5 141, 49 140";
+    // Right Leg Bottom: Sweeps smoothly from X=53.5 to X=81 matching the shorts curve profile
+    const pathShortsCuffRight = "M 54.5 140 C 55 141, 80 141, 80.5 140";
     const shortsFill = getPatternFill(page, shortsColor, shortsStyle, shortsStyleColor || "#eee", "shorts", shortsStyleDirection);
     page.path(pathShorts).fill(shortsFill).stroke({
         width: 1,
@@ -91,8 +96,6 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
         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`;
         page
             .path(pathShortsCuffLeft)
             .fill("none")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soccer-jersey-fork",
-  "version": "1.0.121",
+  "version": "1.0.123",
   "description": "Generate soccer jerseys in SVG format",
   "main": "lib/index.js",
   "author": "nadchif (https://github.com/nadchif)",