soccer-jersey-fork 1.0.118 → 1.0.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/stories/jersey.stories.js +1 -0
  2. package/lib/types/index.d.ts +1 -0
  3. package/lib/utils/draw-soccer-jersey.d.ts +1 -1
  4. package/lib/utils/draw-soccer-jersey.js +15 -11
  5. package/package.json +1 -1
package/lib/stories/jersey.stories.js CHANGED
@@ -35,5 +35,6 @@ export const Default = {
35
35
  shirtSideColor: "",
36
36
  shortsSideColor: "#b3020c",
37
37
  shoulderSideColor: "",
38
+ sleeveType: "short",
38
39
  },
39
40
  };
package/lib/types/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface DrawSoccerJerseyProps {
19
19
  collarType?: "round" | "polo" | "classic";
20
20
  collarColor?: string;
21
21
  sleeveCuffColor?: string;
22
+ sleeveType: "long" | "short";
22
23
  texts: {
23
24
  text: string;
24
25
  size: number;
package/lib/utils/draw-soccer-jersey.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { DrawSoccerJerseyProps } from "../types";
2
- 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;
2
+ export default function drawSoccerJersey({ shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, sleeveType, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, shortsStyle, shortsStyleDirection, shortsStyleColor, }: DrawSoccerJerseyProps): string;
package/lib/utils/draw-soccer-jersey.js CHANGED
@@ -8,16 +8,26 @@
8
8
  import { SVG } from "@svgdotjs/svg.js";
9
9
  import lightenDarkenColor from "./lighten-darken-color";
10
10
  import { addShirtSideColor, addShortSideColor, addShoulderSideColor, drawCheckered, drawConcentricCircles, drawCrisscross, drawCrossLines, drawDashes, drawDiamonds, drawSingleBand, drawSingleBandThin, drawSleeveContrastingTwoColors, drawSleeveTwoColors, drawStriped, drawTwoColors, drawWaves, } from "../patterns/patterns";
11
- 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, }) {
12
- // paths
13
- 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";
14
- 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";
11
+ 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, }) {
12
+ // 3. DRAW SLEEVES FIRST (Background Layer)
13
+ const pathLeftSleeve = sleeveType === "long"
14
+ ? "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"
15
+ : "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";
16
+ const pathRightSleeve = sleeveType === "long"
17
+ ? "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"
18
+ : "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";
15
19
  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";
16
20
  const pathNeck = "m63 .064c-3.8.47-7.5 1.9-11 1.9-5 .31-11-.47-16-1.9-1.7.6-.78 2.8-1.8 4.1-3 5.1-6 10-9 15h50c-3.8-6.4-7.6-13-11-19z";
17
21
  // eslint-disable-next-line new-cap
18
22
  const page = SVG();
19
23
  shirtStyleColor = shirtStyleColor || "#eee";
20
24
  let shirtFill = getPatternFill(page, shirtColor, shirtStyle, shirtStyleColor, "shirt", shirtStyleDirection);
25
+ const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -5);
26
+ sleeveStyleColor = sleeveStyleColor || "#eee";
27
+ sleeveStyleDirection = sleeveStyleDirection || "vertical";
28
+ const sleeveFill = getPatternFill(page, optimizedSleeveColor, sleeveStyle, sleeveStyleColor, "sleeve", sleeveStyleDirection);
29
+ page.path(pathLeftSleeve).fill(sleeveFill);
30
+ page.path(pathRightSleeve).fill(sleeveFill);
21
31
  // neck
22
32
  page.path(pathNeck).fill(lightenDarkenColor(shirtColor, -50));
23
33
  // shirt
@@ -30,12 +40,6 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
30
40
  })
31
41
  .from(1, 1)
32
42
  .to(1, 0));
33
- const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -5);
34
- sleeveStyleColor = sleeveStyleColor || "#eee";
35
- sleeveStyleDirection = sleeveStyleDirection || "vertical";
36
- const sleeveFill = getPatternFill(page, optimizedSleeveColor, sleeveStyle, sleeveStyleColor, "sleeve", sleeveStyleDirection);
37
- page.path(pathLeftSleeve).fill(sleeveFill);
38
- page.path(pathRightSleeve).fill(sleeveFill);
39
43
  if (shoulderSideColor) {
40
44
  addShoulderSideColor(page, shoulderSideColor);
41
45
  }
@@ -178,7 +182,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
178
182
  /**
179
183
  * The points start from the left then spread out to the leftest
180
184
  */
181
- .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")
185
+ .path("M 36.26 0.02 l -6 5 15 9 4.44 -6.68 -0.13 -0.48 4.68 7.16 15 -9 -6 -5 c -10 10 -25 5 -27.5 0")
182
186
  .fill(collarColor || "#eee")
183
187
  .stroke({
184
188
  color: collarColor,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "soccer-jersey-fork",
3
- "version": "1.0.118",
3
+ "version": "1.0.119",
4
4
  "description": "Generate soccer jerseys in SVG format",
5
5
  "main": "lib/index.js",
6
6
  "author": "nadchif (https://github.com/nadchif)",