soccer-jersey-fork 1.0.89 → 1.0.91

package/lib/patterns/patterns.d.ts

@@ -6,7 +6,6 @@
 import { Svg } from "@svgdotjs/svg.js";
 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 drawBigCheckered: (page: Svg, primaryColor: string, secondaryColor: string, direction?: StyleDirection) => 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 drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;

package/lib/patterns/patterns.js

@@ -90,23 +90,6 @@ const drawStripedNormal = (page, primaryColor, secondaryColor, direction) => {
         }
     }
 };
-export const drawBigCheckered = (page, primaryColor, secondaryColor, direction) => {
-    const draw = () => {
-        return page.pattern(100, 100, function (add) {
-            add.rect(100, 100).fill(primaryColor);
-            add.rect(50, 50).fill(secondaryColor);
-            add.rect(50, 50).fill(secondaryColor).move(50, 50);
-        });
-    };
-    switch (direction) {
-        case "diagonalLeft": {
-            return draw().rotate(45);
-        }
-        default: {
-            return draw();
-        }
-    }
-};
 export const drawCheckered = (page, primaryColor, secondaryColor, size, direction) => {
     const tileSize = size === "sm" ? 20 : 100;
     const patternSize = tileSize / 2;
@@ -209,14 +192,20 @@ export const drawSingleBandThin = (page, primaryColor, secondaryColor, bandStyle
     const drawVertical = (x) => {
         return page.pattern(90, 100, function (add) {
             add.rect(90, 100).fill(primaryColor);
-            add.rect(5, 100).fill(secondaryColor).move(x, 0);
+            add.rect(10, 100).fill(secondaryColor).move(x, 0);
         });
     };
     switch (bandStyle) {
+        case "diagonalLeft": {
+            return drawVertical(10).rotate(325);
+        }
+        case "diagonalRight": {
+            return drawVertical(15).rotate(215);
+        }
         case "horizontal":
             return page.pattern(100, 90, function (add) {
                 add.rect(100, 90).fill(primaryColor);
-                add.rect(100, 5).fill(secondaryColor).move(0, 35);
+                add.rect(100, 10).fill(secondaryColor).move(0, 35);
             });
         case "vertical":
             return drawVertical(48);

package/lib/stories/ReactTeamPage.stories.js

@@ -9,25 +9,29 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        shirtStyle: "plain",
-        sleeveColor: "#FFCD00",
-        sleeveCuffColor: "#FFCD00",
-        collarColor: "#FFCD00",
-        shirtColor: "#418FDE",
-        shortsColor: "#418FDE",
+        shirtStyle: "singleBand",
+        sleeveColor: "#ffffff",
+        sleeveCuffColor: "#E1001A",
+        collarColor: "#E1001A",
+        shirtColor: "#ffffff",
+        shortsColor: "#ffffff",
         withBadge: false,
-        texts: [{ text: "Tuvalu", x: 51, y: 43, size: 10, color: "#FFCD00" }],
+        texts: [
+            { text: "10", x: 69, y: 130, size: 12, color: "#000000" },
+            { text: "VfB", x: 52, y: 47, size: 16, color: "#ffffff" },
+        ],
         images: [
             {
-                src: "https://resources.simcups.com/flags/w80/226.png",
+                src: "https://resources.simcups.com/flags/w80/1254.svg",
                 x: 60,
                 y: 20,
                 width: 12,
                 height: 12,
             },
         ],
-        shortsCuffColor: "#FFCD00",
-        shoulderSideColor: "#FFCD00",
-        sleeveStyleColor: "",
+        shirtStyleDirection: "horizontal",
+        shirtStyleColor: "#E1001A",
+        shoulderSideColor: "",
+        shortsSideColor: "#E1001A",
     },
 };

package/lib/types/index.d.ts

@@ -27,6 +27,7 @@ export interface DrawSoccerJerseyProps {
         color: string;
         outlineColor?: string;
         backgroundColor?: string;
+        backgroundShape?: "ellipse" | "square";
     }[];
     images: {
         src: string;

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

@@ -157,7 +157,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
      */
     if (texts && texts.length > 0) {
         for (const textItem of texts) {
-            const { text, color, size, outlineColor, backgroundColor, x, y } = textItem;
+            const { text, color, size, outlineColor, backgroundColor, backgroundShape, x, y, } = textItem;
             const drawText = (elem) => {
                 return elem
                     .text(text)
@@ -177,10 +177,17 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
                 // eslint-disable-next-line new-cap
                 const draftShirtTextElem = drawText(SVG());
                 const dimens = draftShirtTextElem.bbox();
-                page
-                    .rect(dimens.width + 4, dimens.height + 4)
-                    .fill(backgroundColor)
-                    .center(x, y);
+                let backgroundShapeElement;
+                switch (backgroundShape) {
+                    case "ellipse": {
+                        backgroundShapeElement = page.ellipse(dimens.width + 8, dimens.height + 8);
+                        break;
+                    }
+                    default: {
+                        backgroundShapeElement = page.rect(dimens.width + 4, dimens.height + 4);
+                    }
+                }
+                backgroundShapeElement.fill(backgroundColor).center(x, y);
             }
             drawText(page);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soccer-jersey-fork",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "description": "Generate soccer jerseys in SVG format",
   "main": "lib/index.js",
   "scripts": {
@@ -47,6 +47,6 @@
     "vite": "^7.1.6"
   },
   "dependencies": {
-    "@svgdotjs/svg.js": "github:svgdotjs/svg.js"
+    "@svgdotjs/svg.js": "^3.2.5"
   }
 }