soccer-jersey-fork 1.0.85 → 1.0.87

package/lib/patterns/patterns.d.ts

@@ -4,16 +4,18 @@
  * Modifications Copyright 2025 Lau Kai Chung
  */
 import { Svg } from "@svgdotjs/svg.js";
-import { ShirtStyleDirection } from "../types";
-export declare const drawStriped: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection, thickness?: "thin" | "thick" | "normal") => import("@svgdotjs/svg.js").Pattern;
-export declare const drawBigCheckered: (page: Svg, primaryColor: string, secondaryColor: string, direction?: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
-export declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string, size: "sm" | "lg", direction?: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
+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: 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 drawSingleBandThin: (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 drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawSleeveContrastingTwoColors: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawSleeveTwoColors: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawSingleBandThin: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle?: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle: 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 addShirtSideColor(page: Svg, color: string): void;

package/lib/patterns/patterns.js

@@ -164,6 +164,18 @@ export const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) =>
             });
     }
 };
+export const drawSleeveContrastingTwoColors = (page, primaryColor, secondaryColor) => {
+    return page.pattern(100, 100, function (add) {
+        add.rect(100, 100).fill(primaryColor);
+        add.rect(50, 100).fill(secondaryColor);
+    });
+};
+export const drawSleeveTwoColors = (page, primaryColor, secondaryColor) => {
+    return page.pattern(29, 100, (add) => {
+        add.rect(29, 100).fill(primaryColor);
+        add.rect(18, 100).fill(secondaryColor).move(-4, 0);
+    });
+};
 export const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
     switch (bandStyle) {
         case "diagonalRight":

package/lib/types/index.d.ts

@@ -5,15 +5,15 @@
  */
 export interface DrawSoccerJerseyProps {
     shirtColor: string;
-    sleeveColor: string;
     shirtSideColor?: string;
     shirtStyle: ShirtStyle;
     shirtStyleColor?: string;
+    sleeveColor: string;
     sleeveStyle?: SleeveStyle;
     sleeveStyleColor?: string;
-    sleeveStyleDirection?: ShirtStyleDirection;
+    sleeveStyleDirection?: StyleDirection;
     shirtBottomColor?: string;
-    shirtStyleDirection?: ShirtStyleDirection;
+    shirtStyleDirection?: StyleDirection;
     isBack?: boolean;
     shirtWidth?: number;
     collarType?: "round" | "folded";
@@ -42,6 +42,6 @@ export interface DrawSoccerJerseyProps {
     withBadge?: boolean;
     withShorts?: boolean;
 }
-export type ShirtStyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
-export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "checkeredBig" | "diamonds" | "singleBandThin" | "singleBand" | "dashed" | "cross";
+export type StyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
+export type ShirtStyle = "plain" | "twoColors" | "contrastingTwoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "checkeredBig" | "diamonds" | "singleBandThin" | "singleBand" | "dashed" | "cross";
 export type SleeveStyle = ShirtStyle;

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

@@ -18,4 +18,4 @@ import { DrawSoccerJerseyProps } from "../types";
  * @return {string} A data URL ready for direct use as src attribute
  *  on <img />
  */
-export default function drawSoccerJersey({ shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, collarType, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts, texts, }: 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, withBadge, withShorts, isBack, }: 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 { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, addShoulderSideColor, addShortSideColor, addShirtSideColor, drawSingleBandThin, drawDiamonds, drawCrossLines, drawStriped, } from "../patterns/patterns";
+import { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, addShoulderSideColor, addShortSideColor, addShirtSideColor, drawSingleBandThin, drawDiamonds, drawCrossLines, drawStriped, drawSleeveTwoColors, drawSleeveContrastingTwoColors, } from "../patterns/patterns";
 /**
  * @param {object} specs Specifications of the soccer jersey.
  * @param  {string} specs.shirtColor The main color (HTML Color Code) of
@@ -27,7 +27,7 @@ import { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, ad
  * @return {string} A data URL ready for direct use as src attribute
  *  on <img />
  */
-export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor = shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, collarType, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts = true, texts, }) {
+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, withBadge, withShorts = true, isBack = false, }) {
     // 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";
@@ -81,7 +81,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor = s
             page.circle(8).fill(lightenDarkenColor(shirtColor, 60)).move(64, 25);
         }
     }
-    const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
+    const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -5);
     sleeveStyleColor = sleeveStyleColor || "#eee";
     sleeveStyleDirection = sleeveStyleDirection || "vertical";
     const sleeveFill = getPatternFill(page, optimizedSleeveColor, sleeveStyle, sleeveStyleColor, "sleeve", sleeveStyleDirection);
@@ -195,30 +195,38 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor = s
     page.viewbox(`0 0 102 ${100 + (withShorts ? shortsHeight + 10 : 0)}`);
     return page.svg();
 }
-function getPatternFill(page, baseColor, style, styleColor, type, styleDirection = "vertical") {
+function getPatternFill(page, baseColor, style, styleColor, type, direction = "vertical") {
     switch (style) {
-        case "twoColors":
-            return drawTwoColors(page, baseColor, styleColor, styleDirection);
+        case "twoColors": {
+            if (type === "sleeve") {
+                return drawSleeveTwoColors(page, baseColor, styleColor);
+            }
+            else {
+                return drawTwoColors(page, baseColor, styleColor, direction);
+            }
+        }
+        case "contrastingTwoColors":
+            return drawSleeveContrastingTwoColors(page, baseColor, styleColor);
         case "stripedThin":
-            return drawStriped(page, baseColor, styleColor, styleDirection, "thin");
+            return drawStriped(page, baseColor, styleColor, direction, "thin");
         case "stripedThick":
-            return drawStriped(page, baseColor, styleColor, styleDirection, "thick");
+            return drawStriped(page, baseColor, styleColor, direction, "thick");
         case "striped":
-            return drawStriped(page, baseColor, styleColor, styleDirection, "normal");
+            return drawStriped(page, baseColor, styleColor, direction, "normal");
         case "dashed":
-            return drawDashes(page, baseColor, styleColor, styleDirection);
+            return drawDashes(page, baseColor, styleColor, direction);
         case "checkered":
-            return drawCheckered(page, baseColor, styleColor, "sm", styleDirection);
+            return drawCheckered(page, baseColor, styleColor, "sm", direction);
         case "checkeredBig":
-            return drawCheckered(page, baseColor, styleColor, "lg", styleDirection);
+            return drawCheckered(page, baseColor, styleColor, "lg", direction);
         case "diamonds":
             return drawDiamonds(page, baseColor, styleColor);
         case "singleBand":
-            return drawSingleBand(page, baseColor, styleColor, styleDirection);
+            return drawSingleBand(page, baseColor, styleColor, direction);
         case "singleBandThin":
-            return drawSingleBandThin(page, baseColor, styleColor, styleDirection);
+            return drawSingleBandThin(page, baseColor, styleColor, direction);
         case "waves":
-            return drawWaves(page, baseColor, styleColor, styleDirection);
+            return drawWaves(page, baseColor, styleColor, direction);
         case "cross":
             return drawCrossLines(page, baseColor, styleColor);
         default:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soccer-jersey-fork",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "Generate soccer jerseys in SVG format",
   "main": "lib/index.js",
   "scripts": {
@@ -14,17 +14,6 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
-  "keywords": [
-    "soccer",
-    "shirt",
-    "svg",
-    "fpl"
-  ],
-  "author": "nadchif (https://github.com/nadchif)",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nadchif/soccer-jersey.git"
-  },
   "license": "MIT",
   "files": [
     "lib",

package/README.md

@@ -1,146 +0,0 @@
-# Soccer-Jersey
-
-Generate Soccer Jersey SVG images. Generates Data URIs that can be used directly as image src.
-
-## Pros & pros
-Save network data, by dynamically generating soccer jersey assets suited for each player. Great for large projects where you would want to customize Soccer Jersey for each player.
-
-## Install
-
-```
-npm i soccer-jersey
-```
-
-## Live Demos
-[View live demos & examples](https://nadchif.github.io/soccer-jersey/)
-
-## Usage
-
-### API
-```
-   SoccerJersey.draw({
-    shirtText: <string>,
-    textColor: <string>,
-    textOutlineColor?: <string>,
-    textBackgroundColor?: <string>,
-    shirtColor: <string>,
-    sleeveColor: <string>,
-    shirtStyle: <'plain' | 'two-color' | 'striped' | 'striped-thin' | 'striped-thick' | 'waves' 
-                | 'checkered' | 'hoops' | 'single-band' | 'dashed'>,
-    shirtStyleColor?: <string>,
-    shirtStyleDirection?: <'diagonal-right' | 'diagonal-left' | 'horizontal' | 'vertical'>,
-    isBack?: <boolean>,
-}, 
-encodeToDataUri?: boolean): string
-```
-
-
-### React
-
-```
-import SoccerJersey from "soccer-jersey";
-
-const TeamPage = () => {
-
-  const jerseyImgSrc =  SoccerJersey.draw({  
-      shirtText: "ARS",
-      shirtColor: "#f00000",
-      sleeveColor: "#fff",
-      shirtStyle: "checkered",
-      shirtStyleColor: "#dc0001",
-      textColor: "#fff",
-    }); // data:image/svg+xml;base64,......
-
-...
-
-  return (
-    <div>
-      <h1>ARS</h1>
-      <img src={jerseyImgSrc} />
-    </div>
-  );
-}
-```
-
-### Vanilla
-```
-
-<div>
-  <h1>BHA</h1>
-  <img id="jerseyImg" />
-<div>
-
-...
-
-<script "dist/soccer-jersey.min.js"></script>
-  <script>
-    var jerseyImgSrc =  SoccerJersey.draw({  
-        shirtText: "BHA",
-        shirtColor: "#026fd0",
-        sleeveColor: "#026fd0",
-        shirtStyle: "striped-thin",
-        shirtStyleColor: "#fff",
-        textColor: "#fff",
-      }); // data:image/svg+xml;base64,......
-    var imgNode = document.getElementById("jerseyImg");
-    imgNode.setAttribute('src', jerseyImgSrc);
-  </script>
-</body>
-```
-
-
-### Angular
-
-Create "safe" pipe to allow dynamic Data URIs. 
-```
-// safe-html.pipe.ts
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer, SafeHtml} from '@angular/platform-browser';
-
-@Pipe({ name: 'safe' })
-
-export class SafeHtmlPipe implements PipeTransform {
-  constructor(private sanitizer: DomSanitizer) {}
-  transform(url): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
-  }
-}
-```
-Add Pipe to Declerations
-
-```
-import { SafeHtmlPipe } from './safe-html.pipe';
-
-...
-
-@NgModule({
-  declarations: [
-    ...
-    SafeHtmlPipe,
-  ]
-})
-```
-Use in components
-```
-@Component({
-...
-  template: `
-    <div>
-      <h1>MCI</h1>
-      <img [src]="jerseyImgSrc | safe">
-    </div>
-  `,
-...
-})
-export class AppComponent {
-  ...
-  jerseyImgSrc = SoccerJersey.draw({
-    shirtText: 'MCI',
-    shirtColor: '#98c5e9',
-    sleeveColor: '#98c5e9',
-    shirtStyle: 'plain',
-    textColor: '#00285e',
-  });
-}
-```