soccer-jersey-fork 1.0.100 → 1.0.102

package/lib/patterns/patterns.js

@@ -328,12 +328,12 @@ export const addShortSideColor = (page, color) => {
 export function addShoulderSideColor(page, color) {
     // left
     page
-        .path(`m 0 35, l 16.5 -26, 20 -8`)
+        .path(`m 0 35, l 16.5 -26, 20 -8.5`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
     // right
     page
-        .path(`m 101 35 l -16.5 -26, -21 -8`)
+        .path(`m 101 35 l -16.5 -26, -21 -8.5`)
         .fill("none")
         .stroke({ width: 2, color, linecap: "butt" });
 }

package/lib/types/index.d.ts

@@ -14,9 +14,8 @@ export interface DrawSoccerJerseyProps {
     sleeveStyleDirection?: StyleDirection;
     shirtBottomColor?: string;
     shirtStyleDirection?: StyleDirection;
-    isBack?: boolean;
     shirtWidth?: number;
-    collarType?: "round" | "folded";
+    collarType?: "round" | "polo" | "classic";
     collarColor?: string;
     sleeveCuffColor?: string;
     texts: {
@@ -40,7 +39,9 @@ export interface DrawSoccerJerseyProps {
     shortsSideColor?: string;
     shortsCuffColor?: string;
     shoulderSideColor?: string;
-    withShorts?: boolean;
+    shortsStyle?: ShirtStyle;
+    shortsStyleColor?: string;
+    shortsStyleDirection?: StyleDirection;
 }
 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" | "crisscross";

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

@@ -1,21 +1,2 @@
 import { DrawSoccerJerseyProps } from "../types";
-/**
- * @param {object} specs Specifications of the soccer jersey.
- * @param  {string} specs.shirtColor The main color (HTML Color Code) of
- * the shirt.
- * @param  {string} specs.sleeveColor The color (HTML Color Code) of the shirt
- *  sleeves;
- * @param  {string} specs.shirtStyle The Style of the shirt (torso region).
- * Supports "plain", "two-color", "striped", "striped-thin","striped-thick","checkered",
- *  "hoops","single-band", "waves", "dashed";
- * @param {string}  specs.shirtStyleColor The color (HTML Color Code) of
- * used for the shirt style.
- * @param  {string} specs.shirtStyleDirection The style of the single band.
- *  Required when using the "single-band" shirt style. Supports
- * "diagonalRight", "diagonalLeft","horizontal", "vertical"
- * @param {boolean} specs.isBack Set to true to draw the shirt from the
- *  back (different neck shape, no badges). Defaults to false.
- * @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, 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, shortsStyle, shortsStyleDirection, shortsStyleColor, }: DrawSoccerJerseyProps): string;

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

@@ -8,26 +8,7 @@
 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";
-/**
- * @param {object} specs Specifications of the soccer jersey.
- * @param  {string} specs.shirtColor The main color (HTML Color Code) of
- * the shirt.
- * @param  {string} specs.sleeveColor The color (HTML Color Code) of the shirt
- *  sleeves;
- * @param  {string} specs.shirtStyle The Style of the shirt (torso region).
- * Supports "plain", "two-color", "striped", "striped-thin","striped-thick","checkered",
- *  "hoops","single-band", "waves", "dashed";
- * @param {string}  specs.shirtStyleColor The color (HTML Color Code) of
- * used for the shirt style.
- * @param  {string} specs.shirtStyleDirection The style of the single band.
- *  Required when using the "single-band" shirt style. Supports
- * "diagonalRight", "diagonalLeft","horizontal", "vertical"
- * @param {boolean} specs.isBack Set to true to draw the shirt from the
- *  back (different neck shape, no badges). Defaults to false.
- * @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, 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, shortsStyle, shortsStyleDirection, shortsStyleColor, }) {
     // 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";
@@ -39,9 +20,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
     shirtStyleColor = shirtStyleColor || "#eee";
     let shirtFill = getPatternFill(page, shirtColor, shirtStyle, shirtStyleColor, "shirt", shirtStyleDirection);
     // neck
-    page
-        .path(isBack ? pathNeckBack : pathNeck)
-        .fill(lightenDarkenColor(shirtColor, -50));
+    page.path(pathNeck).fill(lightenDarkenColor(shirtColor, -50));
     // shirt
     page.path(pathMainBody).fill(shirtFill);
     page.path(pathMainBody).fill(page
@@ -52,29 +31,37 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
     })
         .from(1, 1)
         .to(1, 0));
-    if (!isBack) {
-        switch (collarType) {
-            case "folded": {
+    switch (collarType) {
+        case "polo": {
+            page
+                /**
+                 * The points start from the left then spread out to the leftest
+                 */
+                .path("m36.5 0.5 l -6 5 15 9 l 3 -5 3 0 3 5 15 -9 -6 -5 c -10 10 -25 5 -27.5 0")
+                .fill(collarColor || "#eee")
+                .stroke({
+                color: collarColor,
+                width: 1,
+            });
+            break;
+        }
+        case "classic": {
+            page
+                .path("m36 0 l-6 10 q5-6 22 0 z m29 0 l6 10 q-5-6-22 0 z")
+                .fill(collarColor || "#eee")
+                .stroke({
+                color: collarColor,
+                width: 1,
+            });
+            break;
+        }
+        default: {
+            if (collarColor) {
+                const pathCollar = "m35 0 q 17 20 30 0";
                 page
-                    /**
-                     * The points start from the left then spread out to the leftest
-                     */
-                    .path("m36.5 0.5 l -6 5 15 9 l 3 -5 3 0 3 5 15 -9 -6 -5 c -10 10 -25 5 -27.5 0")
-                    .fill(collarColor || "#eee")
-                    .stroke({
-                    color: collarColor,
-                    width: 1,
-                });
-                break;
-            }
-            default: {
-                if (collarColor) {
-                    const pathCollar = "m35 0 q 17 20 30 0";
-                    page
-                        .path(pathCollar)
-                        .fill("none")
-                        .stroke({ color: collarColor, width: 2 });
-                }
+                    .path(pathCollar)
+                    .fill("none")
+                    .stroke({ color: collarColor, width: 2 });
             }
         }
     }
@@ -110,44 +97,49 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
             .fill("none")
             .stroke({ color: shirtBottomColor, width: 3, linecap: "round" });
     }
-    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).stroke({
-            width: 1,
-            color: shortsColor,
+    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 shortsFill = getPatternFill(page, shortsColor, shortsStyle, shortsStyleColor || shortsColor, "shorts", shortsStyleDirection);
+    page.path(pathShorts).fill(shortsFill).stroke({
+        width: 1,
+        color: shortsColor,
+    });
+    // page.path(pathShorts).fill(
+    //   page
+    //     .gradient("linear", function (add) {
+    //       add.stop(0, "#000", 0.2);
+    //       add.stop(0.44, "#ddd", 0.1);
+    //       add.stop(1, "#fff", 0.1);
+    //     })
+    //     .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`;
+        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.path(pathShorts).fill(page
-            .gradient("linear", function (add) {
-            add.stop(0, "#000", 0.2);
-            add.stop(0.44, "#ddd", 0.1);
-            add.stop(1, "#fff", 0.1);
-        })
-            .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`;
-            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",
-            });
-        }
     }
     if (images && images.length > 0) {
         for (const { src, width = 20, height = 20, x = 45, y = 45 } of images) {
@@ -196,7 +188,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
     }
     page.width(shirtWidth);
     // +10 is some extra room with the shorts height, so the total should be 150
-    page.viewbox(`0 0 102 ${100 + (withShorts ? shortsHeight + 10 : 0)}`);
+    page.viewbox(`0 0 102 ${100 + (SHORT_HEIGHT + 10)}`);
     return page.svg();
 }
 function getPatternFill(page, baseColor, style, styleColor, type, direction = "vertical") {

package/package.json

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