soccer-jersey-fork 1.0.70 → 1.0.72

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 (6) hide show
  1. package/lib/patterns/patterns.d.ts +1 -3
  2. package/lib/patterns/patterns.js +14 -7
  3. package/lib/types/index.d.ts +4 -0
  4. package/lib/utils/draw-soccer-jersey.d.ts +1 -1
  5. package/lib/utils/draw-soccer-jersey.js +80 -59
  6. package/package.json +1 -1
package/lib/patterns/patterns.d.ts CHANGED
@@ -5,9 +5,7 @@
5
5
  */
6
6
  import { Svg } from "@svgdotjs/svg.js";
7
7
  import { ShirtStyleDirection } from "../types";
8
- export declare const drawStripedThick: (page: Svg, primaryColor: string, secondaryColor: string | undefined, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
9
- export declare const drawStripedThin: (page: Svg, primaryColor: string, secondaryColor: string | undefined, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
10
- export declare const drawStripedNormal: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
8
+ export declare const drawStriped: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection, thickness?: "thin" | "thick" | "normal") => import("@svgdotjs/svg.js").Pattern;
11
9
  export declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string, direction?: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
12
10
  export declare const drawDiamonds: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
13
11
  export declare const drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
package/lib/patterns/patterns.js CHANGED
@@ -1,4 +1,14 @@
1
- export const drawStripedThick = (page, primaryColor, secondaryColor = "#eee", direction) => {
1
+ export const drawStriped = (page, primaryColor, secondaryColor, direction, thickness = "normal") => {
2
+ switch (thickness) {
3
+ case "thick":
4
+ return drawStripedThick(page, primaryColor, secondaryColor, direction);
5
+ case "thin":
6
+ return drawStripedThin(page, primaryColor, secondaryColor, direction);
7
+ default:
8
+ return drawStripedNormal(page, primaryColor, secondaryColor, direction);
9
+ }
10
+ };
11
+ const drawStripedThick = (page, primaryColor, secondaryColor = "#eee", direction) => {
2
12
  const drawVertical = () => {
3
13
  return page.pattern(20, 4, function (add) {
4
14
  add.rect(20, 4).fill(primaryColor);
@@ -30,7 +40,7 @@ export const drawStripedThick = (page, primaryColor, secondaryColor = "#eee", di
30
40
  }
31
41
  }
32
42
  };
33
- export const drawStripedThin = (page, primaryColor, secondaryColor = "#eee", direction) => {
43
+ const drawStripedThin = (page, primaryColor, secondaryColor = "#eee", direction) => {
34
44
  const drawVertical = () => {
35
45
  return page.pattern(8, 4, function (add) {
36
46
  add.rect(8, 4).fill(primaryColor);
@@ -55,7 +65,7 @@ export const drawStripedThin = (page, primaryColor, secondaryColor = "#eee", dir
55
65
  }
56
66
  }
57
67
  };
58
- export const drawStripedNormal = (page, primaryColor, secondaryColor, direction) => {
68
+ const drawStripedNormal = (page, primaryColor, secondaryColor, direction) => {
59
69
  const drawVertical = () => {
60
70
  return page.pattern(10, 4, function (add) {
61
71
  add.rect(10, 4).fill(primaryColor);
@@ -76,10 +86,7 @@ export const drawStripedNormal = (page, primaryColor, secondaryColor, direction)
76
86
  });
77
87
  }
78
88
  default: {
79
- return page.pattern(10, 4, function (add) {
80
- add.rect(10, 4).fill(primaryColor);
81
- add.rect(5, 4).fill(secondaryColor);
82
- });
89
+ return drawVertical();
83
90
  }
84
91
  }
85
92
  };
package/lib/types/index.d.ts CHANGED
@@ -9,6 +9,9 @@ export interface DrawSoccerJerseyProps {
9
9
  shirtSideColor?: string;
10
10
  shirtStyle: ShirtStyle;
11
11
  shirtStyleColor?: string;
12
+ sleeveStyle?: SleeveStyle;
13
+ sleeveStyleColor?: string;
14
+ sleeveStyleDirection?: ShirtStyleDirection;
12
15
  shirtBottomColor?: string;
13
16
  shirtStyleDirection?: ShirtStyleDirection;
14
17
  isBack?: boolean;
@@ -40,3 +43,4 @@ export interface DrawSoccerJerseyProps {
40
43
  }
41
44
  export type ShirtStyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
42
45
  export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "diamonds" | "singleBandThin" | "singleBand" | "dashed" | "cross";
46
+ export type SleeveStyle = "plain" | "striped" | "stripedThin";
package/lib/utils/draw-soccer-jersey.d.ts CHANGED
@@ -18,4 +18,4 @@ import { DrawSoccerJerseyProps } from "../types";
18
18
  * @return {string} A data URL ready for direct use as src attribute
19
19
  * on <img />
20
20
  */
21
- export default function drawSoccerJersey({ shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts, texts, }: DrawSoccerJerseyProps): string;
21
+ export default function drawSoccerJersey({ shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts, texts, }: DrawSoccerJerseyProps): string;
package/lib/utils/draw-soccer-jersey.js CHANGED
@@ -7,7 +7,7 @@
7
7
  /* eslint-disable max-len */
8
8
  import { SVG } from "@svgdotjs/svg.js";
9
9
  import lightenDarkenColor from "./lighten-darken-color";
10
- import { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, addShoulderSideColor, addShortSideColor, addShirtSideColor, drawSingleBandThin, drawDiamonds, drawStripedThin, drawStripedNormal, drawStripedThick, drawCrossLines, } from "../patterns/patterns";
10
+ import { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, addShoulderSideColor, addShortSideColor, addShirtSideColor, drawSingleBandThin, drawDiamonds, drawCrossLines, drawStriped, } from "../patterns/patterns";
11
11
  /**
12
12
  * @param {object} specs Specifications of the soccer jersey.
13
13
  * @param {string} specs.shirtColor The main color (HTML Color Code) of
@@ -27,9 +27,8 @@ import { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, ad
27
27
  * @return {string} A data URL ready for direct use as src attribute
28
28
  * on <img />
29
29
  */
30
- export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts = true, texts, }) {
30
+ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts = true, texts, }) {
31
31
  // Colors and Color Optimizations
32
- const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
33
32
  const optimizedShirtColor = lightenDarkenColor(shirtColor, -10);
34
33
  // paths
35
34
  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";
@@ -39,46 +38,46 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
39
38
  const pathNeckBack = "m63 .064C 60.12,5.3 53.35,6.6 49.86 6.6 44.86 7 40.4 4 36 .064c-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";
40
39
  // eslint-disable-next-line new-cap
41
40
  const page = SVG();
42
- let shirtFill = optimizedShirtColor;
43
- if (shirtStyleColor) {
44
- switch (shirtStyle) {
45
- case "twoColors":
46
- shirtFill = drawTwoColors(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection ? shirtStyleDirection : "vertical");
47
- break;
48
- case "stripedThin":
49
- shirtFill = drawStripedThin(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection || "vertical");
50
- break;
51
- case "stripedThick":
52
- shirtFill = drawStripedThick(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection || "vertical");
53
- break;
54
- case "striped":
55
- shirtFill = drawStripedNormal(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection || "vertical");
56
- break;
57
- case "dashed":
58
- shirtFill = drawDashes(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection ? shirtStyleDirection : "vertical");
59
- break;
60
- case "checkered":
61
- shirtFill = drawCheckered(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
62
- break;
63
- case "diamonds":
64
- shirtFill = drawDiamonds(page, optimizedShirtColor, shirtStyleColor);
65
- break;
66
- case "singleBand":
67
- shirtFill = drawSingleBand(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection ? shirtStyleDirection : "horizontal");
68
- break;
69
- case "singleBandThin":
70
- shirtFill = drawSingleBandThin(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
71
- break;
72
- case "waves":
73
- shirtFill = drawWaves(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection == "vertical" ||
74
- shirtStyleDirection == "horizontal"
75
- ? shirtStyleDirection
76
- : "vertical");
77
- break;
78
- case "cross":
79
- shirtFill = drawCrossLines(page, optimizedShirtColor, shirtStyleColor);
80
- break;
81
- }
41
+ let shirtFill;
42
+ shirtStyleColor = shirtStyleColor || "#eee";
43
+ switch (shirtStyle) {
44
+ case "twoColors":
45
+ shirtFill = drawTwoColors(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection ? shirtStyleDirection : "vertical");
46
+ break;
47
+ case "stripedThin":
48
+ shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection || "vertical", "thin");
49
+ break;
50
+ case "stripedThick":
51
+ shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection || "vertical", "thick");
52
+ break;
53
+ case "striped":
54
+ shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection || "vertical", "normal");
55
+ break;
56
+ case "dashed":
57
+ shirtFill = drawDashes(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection ? shirtStyleDirection : "vertical");
58
+ break;
59
+ case "checkered":
60
+ shirtFill = drawCheckered(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
61
+ break;
62
+ case "diamonds":
63
+ shirtFill = drawDiamonds(page, optimizedShirtColor, shirtStyleColor);
64
+ break;
65
+ case "singleBand":
66
+ shirtFill = drawSingleBand(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection ? shirtStyleDirection : "horizontal");
67
+ break;
68
+ case "singleBandThin":
69
+ shirtFill = drawSingleBandThin(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
70
+ break;
71
+ case "waves":
72
+ shirtFill = drawWaves(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection == "vertical" || shirtStyleDirection == "horizontal"
73
+ ? shirtStyleDirection
74
+ : "vertical");
75
+ break;
76
+ case "cross":
77
+ shirtFill = drawCrossLines(page, optimizedShirtColor, shirtStyleColor);
78
+ break;
79
+ default:
80
+ shirtFill = optimizedShirtColor;
82
81
  }
83
82
  // neck
84
83
  page
@@ -113,22 +112,44 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
113
112
  // .move(30, 21);
114
113
  }
115
114
  }
116
- // left sleeve
117
- page.path(pathLeftSleeve).fill(page
118
- .gradient("linear", function (add) {
119
- add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
120
- add.stop(1, optimizedSleeveColor);
121
- })
122
- .from(1, 1)
123
- .to(0, 0));
124
- // right sleeve
125
- page.path(pathRightSleeve).fill(page
126
- .gradient("linear", function (add) {
127
- add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
128
- add.stop(1, optimizedSleeveColor);
129
- })
130
- .from(0, 1)
131
- .to(1, 0));
115
+ const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
116
+ let sleeveFill;
117
+ sleeveStyleColor = sleeveStyleColor || sleeveColor;
118
+ switch (sleeveStyle) {
119
+ case "striped": {
120
+ sleeveFill = drawStriped(page, optimizedSleeveColor, sleeveStyleColor, sleeveStyleDirection || "horizontal", "normal");
121
+ break;
122
+ }
123
+ case "stripedThin": {
124
+ sleeveFill = drawStriped(page, optimizedSleeveColor, sleeveStyleColor, sleeveStyleDirection || "horizontal", "thin");
125
+ break;
126
+ }
127
+ default: {
128
+ sleeveFill = optimizedSleeveColor;
129
+ }
130
+ }
131
+ page.path(pathLeftSleeve).fill(sleeveFill);
132
+ page.path(pathRightSleeve).fill(sleeveFill);
133
+ // if (sleeveStyle === "plain") {
134
+ // page.path(pathLeftSleeve).fill(
135
+ // page
136
+ // .gradient("linear", function (add) {
137
+ // add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
138
+ // add.stop(1, optimizedSleeveColor);
139
+ // })
140
+ // .from(1, 1)
141
+ // .to(0, 0),
142
+ // );
143
+ // page.path(pathRightSleeve).fill(
144
+ // page
145
+ // .gradient("linear", function (add) {
146
+ // add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
147
+ // add.stop(1, optimizedSleeveColor);
148
+ // })
149
+ // .from(0, 1)
150
+ // .to(1, 0),
151
+ // );
152
+ // }
132
153
  if (sleeveCuffColor) {
133
154
  const pathLeftSleeveCuff = "m2 36 l 17 9";
134
155
  page
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "soccer-jersey-fork",
3
- "version": "1.0.70",
3
+ "version": "1.0.72",
4
4
  "description": "Generate soccer jerseys in SVG format",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {