soccer-jersey-fork 1.0.75 → 1.0.77
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.
package/lib/patterns/patterns.js
CHANGED
|
@@ -42,8 +42,8 @@ const drawStripedThick = (page, primaryColor, secondaryColor = "#eee", direction
|
|
|
42
42
|
};
|
|
43
43
|
const drawStripedThin = (page, primaryColor, secondaryColor = "#eee", direction) => {
|
|
44
44
|
const drawVertical = () => {
|
|
45
|
-
return page.pattern(
|
|
46
|
-
add.rect(
|
|
45
|
+
return page.pattern(9, 4, function (add) {
|
|
46
|
+
add.rect(9, 4).fill(primaryColor);
|
|
47
47
|
add.rect(1, 4).fill(secondaryColor);
|
|
48
48
|
});
|
|
49
49
|
};
|
package/lib/types/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export interface DrawSoccerJerseyProps {
|
|
|
16
16
|
shirtStyleDirection?: ShirtStyleDirection;
|
|
17
17
|
isBack?: boolean;
|
|
18
18
|
shirtWidth?: number;
|
|
19
|
+
collarType?: "round" | "folded";
|
|
19
20
|
collarColor?: string;
|
|
20
21
|
sleeveCuffColor?: string;
|
|
21
22
|
texts: {
|
|
@@ -43,4 +44,4 @@ export interface DrawSoccerJerseyProps {
|
|
|
43
44
|
}
|
|
44
45
|
export type ShirtStyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
|
|
45
46
|
export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "diamonds" | "singleBandThin" | "singleBand" | "dashed" | "cross";
|
|
46
|
-
export type SleeveStyle =
|
|
47
|
+
export type SleeveStyle = ShirtStyle;
|
|
@@ -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, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts, texts, }: DrawSoccerJerseyProps): string;
|
|
21
|
+
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;
|
|
@@ -27,9 +27,7 @@ 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, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts = true, texts, }) {
|
|
31
|
-
// Colors and Color Optimizations
|
|
32
|
-
const optimizedShirtColor = lightenDarkenColor(shirtColor, -10);
|
|
30
|
+
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, }) {
|
|
33
31
|
// paths
|
|
34
32
|
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";
|
|
35
33
|
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";
|
|
@@ -38,47 +36,95 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
38
36
|
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";
|
|
39
37
|
// eslint-disable-next-line new-cap
|
|
40
38
|
const page = SVG();
|
|
41
|
-
let shirtFill;
|
|
42
39
|
shirtStyleColor = shirtStyleColor || "#eee";
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
40
|
+
let shirtFill = getPatternFill(page, shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection);
|
|
41
|
+
// switch (shirtStyle) {
|
|
42
|
+
// case "twoColors":
|
|
43
|
+
// shirtFill = drawTwoColors(
|
|
44
|
+
// page,
|
|
45
|
+
// optimizedShirtColor,
|
|
46
|
+
// shirtStyleColor,
|
|
47
|
+
// shirtStyleDirection ? shirtStyleDirection : "vertical",
|
|
48
|
+
// );
|
|
49
|
+
// break;
|
|
50
|
+
// case "stripedThin":
|
|
51
|
+
// shirtFill = drawStriped(
|
|
52
|
+
// page,
|
|
53
|
+
// optimizedShirtColor,
|
|
54
|
+
// shirtStyleColor,
|
|
55
|
+
// shirtStyleDirection || "vertical",
|
|
56
|
+
// "thin",
|
|
57
|
+
// );
|
|
58
|
+
// break;
|
|
59
|
+
// case "stripedThick":
|
|
60
|
+
// shirtFill = drawStriped(
|
|
61
|
+
// page,
|
|
62
|
+
// optimizedShirtColor,
|
|
63
|
+
// shirtStyleColor,
|
|
64
|
+
// shirtStyleDirection || "vertical",
|
|
65
|
+
// "thick",
|
|
66
|
+
// );
|
|
67
|
+
// break;
|
|
68
|
+
// case "striped":
|
|
69
|
+
// shirtFill = drawStriped(
|
|
70
|
+
// page,
|
|
71
|
+
// optimizedShirtColor,
|
|
72
|
+
// shirtStyleColor,
|
|
73
|
+
// shirtStyleDirection || "vertical",
|
|
74
|
+
// "normal",
|
|
75
|
+
// );
|
|
76
|
+
// break;
|
|
77
|
+
// case "dashed":
|
|
78
|
+
// shirtFill = drawDashes(
|
|
79
|
+
// page,
|
|
80
|
+
// optimizedShirtColor,
|
|
81
|
+
// shirtStyleColor,
|
|
82
|
+
// shirtStyleDirection ? shirtStyleDirection : "vertical",
|
|
83
|
+
// );
|
|
84
|
+
// break;
|
|
85
|
+
// case "checkered":
|
|
86
|
+
// shirtFill = drawCheckered(
|
|
87
|
+
// page,
|
|
88
|
+
// optimizedShirtColor,
|
|
89
|
+
// shirtStyleColor,
|
|
90
|
+
// shirtStyleDirection,
|
|
91
|
+
// );
|
|
92
|
+
// break;
|
|
93
|
+
// case "diamonds":
|
|
94
|
+
// shirtFill = drawDiamonds(page, optimizedShirtColor, shirtStyleColor);
|
|
95
|
+
// break;
|
|
96
|
+
// case "singleBand":
|
|
97
|
+
// shirtFill = drawSingleBand(
|
|
98
|
+
// page,
|
|
99
|
+
// optimizedShirtColor,
|
|
100
|
+
// shirtStyleColor,
|
|
101
|
+
// shirtStyleDirection ? shirtStyleDirection : "horizontal",
|
|
102
|
+
// );
|
|
103
|
+
// break;
|
|
104
|
+
// case "singleBandThin":
|
|
105
|
+
// shirtFill = drawSingleBandThin(
|
|
106
|
+
// page,
|
|
107
|
+
// optimizedShirtColor,
|
|
108
|
+
// shirtStyleColor,
|
|
109
|
+
// shirtStyleDirection,
|
|
110
|
+
// );
|
|
111
|
+
// break;
|
|
112
|
+
// case "waves":
|
|
113
|
+
// shirtFill = drawWaves(
|
|
114
|
+
// page,
|
|
115
|
+
// optimizedShirtColor,
|
|
116
|
+
// shirtStyleColor,
|
|
117
|
+
// shirtStyleDirection == "vertical" || shirtStyleDirection == "horizontal"
|
|
118
|
+
// ? shirtStyleDirection
|
|
119
|
+
// : "vertical",
|
|
120
|
+
// );
|
|
121
|
+
// break;
|
|
122
|
+
// case "cross":
|
|
123
|
+
// shirtFill = drawCrossLines(page, optimizedShirtColor, shirtStyleColor);
|
|
124
|
+
// break;
|
|
125
|
+
// default:
|
|
126
|
+
// shirtFill = optimizedShirtColor as unknown as Element;
|
|
127
|
+
// }
|
|
82
128
|
// neck
|
|
83
129
|
page
|
|
84
130
|
.path(isBack ? pathNeckBack : pathNeck)
|
|
@@ -94,66 +140,39 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
94
140
|
.from(1, 1)
|
|
95
141
|
.to(1, 0));
|
|
96
142
|
if (!isBack) {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
143
|
+
switch (collarType) {
|
|
144
|
+
case "folded": {
|
|
145
|
+
page
|
|
146
|
+
/**
|
|
147
|
+
* The points start from the left then spread out to the leftest
|
|
148
|
+
*/
|
|
149
|
+
.path("m36 0.5 l -5 5 15 5 l 3 -5 3 5 16 -5 -4 -5 c -3 5 -25 5 -28.5 0")
|
|
150
|
+
.fill(collarColor || "#eee")
|
|
151
|
+
.stroke({
|
|
152
|
+
color: collarColor,
|
|
153
|
+
width: 1,
|
|
154
|
+
});
|
|
155
|
+
break;
|
|
156
|
+
}
|
|
157
|
+
default: {
|
|
158
|
+
if (collarColor) {
|
|
159
|
+
const pathCollar = "m35 0 q 17 20 30 0";
|
|
160
|
+
page
|
|
161
|
+
.path(pathCollar)
|
|
162
|
+
.fill("none")
|
|
163
|
+
.stroke({ color: collarColor, width: 2 });
|
|
164
|
+
}
|
|
165
|
+
}
|
|
103
166
|
}
|
|
104
167
|
if (withBadge) {
|
|
105
|
-
page
|
|
106
|
-
.circle(8)
|
|
107
|
-
.fill(lightenDarkenColor(optimizedShirtColor, 60))
|
|
108
|
-
.move(64, 25);
|
|
109
|
-
// page
|
|
110
|
-
// .polygon("0,3 3,0 4,3")
|
|
111
|
-
// .fill(lightenDarkenColor(optimizedShirtColor, -20))
|
|
112
|
-
// .move(30, 21);
|
|
168
|
+
page.circle(8).fill(lightenDarkenColor(shirtColor, 60)).move(64, 25);
|
|
113
169
|
}
|
|
114
170
|
}
|
|
115
|
-
const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
|
|
116
|
-
let sleeveFill;
|
|
117
171
|
sleeveStyleColor = sleeveStyleColor || "#eee";
|
|
118
|
-
|
|
119
|
-
|
|
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
|
-
case "stripedThick": {
|
|
128
|
-
sleeveFill = drawStriped(page, optimizedSleeveColor, sleeveStyleColor, sleeveStyleDirection || "horizontal", "thick");
|
|
129
|
-
break;
|
|
130
|
-
}
|
|
131
|
-
default: {
|
|
132
|
-
sleeveFill = optimizedSleeveColor;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
172
|
+
sleeveStyleDirection = sleeveStyleDirection || "vertical";
|
|
173
|
+
const sleeveFill = getPatternFill(page, sleeveColor, sleeveStyle, sleeveStyleColor, sleeveStyleDirection);
|
|
135
174
|
page.path(pathLeftSleeve).fill(sleeveFill);
|
|
136
175
|
page.path(pathRightSleeve).fill(sleeveFill);
|
|
137
|
-
// if (sleeveStyle === "plain") {
|
|
138
|
-
// page.path(pathLeftSleeve).fill(
|
|
139
|
-
// page
|
|
140
|
-
// .gradient("linear", function (add) {
|
|
141
|
-
// add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
|
|
142
|
-
// add.stop(1, optimizedSleeveColor);
|
|
143
|
-
// })
|
|
144
|
-
// .from(1, 1)
|
|
145
|
-
// .to(0, 0),
|
|
146
|
-
// );
|
|
147
|
-
// page.path(pathRightSleeve).fill(
|
|
148
|
-
// page
|
|
149
|
-
// .gradient("linear", function (add) {
|
|
150
|
-
// add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
|
|
151
|
-
// add.stop(1, optimizedSleeveColor);
|
|
152
|
-
// })
|
|
153
|
-
// .from(0, 1)
|
|
154
|
-
// .to(1, 0),
|
|
155
|
-
// );
|
|
156
|
-
// }
|
|
157
176
|
if (sleeveCuffColor) {
|
|
158
177
|
const pathLeftSleeveCuff = "m2 36 l 17 9";
|
|
159
178
|
page
|
|
@@ -183,12 +202,9 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
183
202
|
const shortsHeight = withShorts ? 40 : 0;
|
|
184
203
|
if (withShorts) {
|
|
185
204
|
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}`;
|
|
186
|
-
page
|
|
187
|
-
.path(pathShorts)
|
|
188
|
-
.fill(shortsColor)
|
|
189
|
-
.stroke({
|
|
205
|
+
page.path(pathShorts).fill(shortsColor).stroke({
|
|
190
206
|
width: 1,
|
|
191
|
-
color:
|
|
207
|
+
color: shortsColor,
|
|
192
208
|
});
|
|
193
209
|
page.path(pathShorts).fill(page
|
|
194
210
|
.gradient("linear", function (add) {
|
|
@@ -249,7 +265,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
249
265
|
const dimens = draftShirtTextElem.bbox();
|
|
250
266
|
page
|
|
251
267
|
.rect(dimens.width + 4, dimens.height + 4)
|
|
252
|
-
.fill(
|
|
268
|
+
.fill(backgroundColor)
|
|
253
269
|
.center(x, y);
|
|
254
270
|
}
|
|
255
271
|
drawText(page);
|
|
@@ -265,3 +281,44 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
265
281
|
page.viewbox(`0 0 102 ${100 + (withShorts ? shortsHeight + 10 : 0)}`);
|
|
266
282
|
return page.svg();
|
|
267
283
|
}
|
|
284
|
+
function getPatternFill(page, optimizedShirtColor, style, shirtStyleColor, shirtStyleDirection = "vertical") {
|
|
285
|
+
let shirtFill;
|
|
286
|
+
switch (style) {
|
|
287
|
+
case "twoColors":
|
|
288
|
+
shirtFill = drawTwoColors(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
289
|
+
break;
|
|
290
|
+
case "stripedThin":
|
|
291
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection, "thin");
|
|
292
|
+
break;
|
|
293
|
+
case "stripedThick":
|
|
294
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection, "thick");
|
|
295
|
+
break;
|
|
296
|
+
case "striped":
|
|
297
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection, "normal");
|
|
298
|
+
break;
|
|
299
|
+
case "dashed":
|
|
300
|
+
shirtFill = drawDashes(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
301
|
+
break;
|
|
302
|
+
case "checkered":
|
|
303
|
+
shirtFill = drawCheckered(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
304
|
+
break;
|
|
305
|
+
case "diamonds":
|
|
306
|
+
shirtFill = drawDiamonds(page, optimizedShirtColor, shirtStyleColor);
|
|
307
|
+
break;
|
|
308
|
+
case "singleBand":
|
|
309
|
+
shirtFill = drawSingleBand(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
310
|
+
break;
|
|
311
|
+
case "singleBandThin":
|
|
312
|
+
shirtFill = drawSingleBandThin(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
313
|
+
break;
|
|
314
|
+
case "waves":
|
|
315
|
+
shirtFill = drawWaves(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
316
|
+
break;
|
|
317
|
+
case "cross":
|
|
318
|
+
shirtFill = drawCrossLines(page, optimizedShirtColor, shirtStyleColor);
|
|
319
|
+
break;
|
|
320
|
+
default:
|
|
321
|
+
shirtFill = optimizedShirtColor;
|
|
322
|
+
}
|
|
323
|
+
return shirtFill;
|
|
324
|
+
}
|