soccer-jersey-fork 1.0.25 → 1.0.26

package/lib/stories/ReactTeamPage.stories.js

@@ -16,8 +16,8 @@ export const Default = {
         collarColor: "red",
         sleeveCuffColor: "yellow",
         shortColor: "black",
-        customImage: {
-            src: 'https://resources.simcups.com/flags/w80/264.png'
+        customImageConfig: {
+            src: "https://resources.simcups.com/flags/w80/264.png",
         },
     },
 };

package/lib/types/index.d.ts

@@ -12,13 +12,14 @@ export interface DrawSoccerJerseyProps {
     shirtWidth?: number;
     collarColor?: string;
     sleeveCuffColor?: string;
-    customImage?: {
+    customImageConfig?: {
         src: string;
         width?: number;
         height?: number;
         x?: number;
         y?: number;
     };
-    withDefaultBadge?: boolean;
     shortColor: string;
+    withDefaultBadge?: boolean;
+    withShorts?: boolean;
 }

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

@@ -27,4 +27,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, customImage, withDefaultBadge, shortColor }: DrawSoccerJerseyProps): string;
+export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, sleeveCuffColor, customImageConfig, shortColor, withDefaultBadge, withShorts, }: DrawSoccerJerseyProps): string;

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

@@ -30,7 +30,7 @@ import { drawHoops, drawSingleBand, drawStriped, drawCheckered, drawTwoColor, dr
  * @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, customImage, withDefaultBadge = true, shortColor }) {
+export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor = "plain", sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, sleeveCuffColor, customImageConfig, shortColor, withDefaultBadge = true, withShorts = true, }) {
     // Colors and Color Optimizations
     const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
     const optimizedShirtColor = lightenDarkenColor(shirtColor, -10);
@@ -90,17 +90,19 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
     })
         .from(1, 1)
         .to(1, 0));
-    if (collarColor) {
-        const pathCollar = "m35 0 q 17 20 30 0";
-        page.path(pathCollar).fill("none").stroke({ color: collarColor, width: 2 });
-    }
-    // badge
     if (!isBack) {
-        if (customImage) {
+        if (collarColor) {
+            const pathCollar = "m35 0 q 17 20 30 0";
+            page
+                .path(pathCollar)
+                .fill("none")
+                .stroke({ color: collarColor, width: 2 });
+        }
+        if (customImageConfig) {
             page
-                .image(customImage.src)
-                .size(customImage.width || 20, customImage.height || 20)
-                .move(customImage.x || 40, customImage.y || 45);
+                .image(customImageConfig.src)
+                .size(customImageConfig.width || 20, customImageConfig.height || 20)
+                .move(customImageConfig.x || 40, customImageConfig.y || 45);
         }
         if (withDefaultBadge) {
             page
@@ -168,9 +170,13 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
             .center(50, 35);
     }
     drawText(page);
-    page.width(shirtWidth);
-    const pathShorts = "m 23 98 c 5 6, 50 6, 56 0 l 2 40 c 0 5, -27 5, -27.5 0 l -2 -10, -2 10, c 0 5, -27 5, -27.5 0 l 1 -40";
-    page.path(pathShorts).fill(shortColor);
-    page.viewbox("0 0 102 180");
+    const shortsHeight = withShorts ? 40 : 0;
+    if (withShorts) {
+        page.width(shirtWidth);
+        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(shortColor);
+    }
+    // +10 is some extra room with the shorts height, so the total should be 150
+    page.viewbox(`0 0 102 ${100 + shortsHeight + 10}`);
     return page.svg();
 }

package/package.json

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