soccer-jersey-fork 1.0.38 → 1.0.41
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.
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { Svg } from
|
|
2
|
-
|
|
1
|
+
import { Svg } from "@svgdotjs/svg.js";
|
|
2
|
+
import { ShirtStyleDirection } from "../types";
|
|
3
|
+
declare const drawStriped: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection, thickness?: "thin" | "thick" | "normal") => import("@svgdotjs/svg.js").Pattern;
|
|
3
4
|
declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
|
|
4
5
|
declare const drawHoops: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
|
|
5
|
-
declare const
|
|
6
|
-
declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle:
|
|
7
|
-
declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle:
|
|
8
|
-
declare const drawDashes: (page: Svg, primaryColor: string, secondaryColor: string, dashDirection:
|
|
9
|
-
export { drawStriped, drawHoops, drawSingleBand, drawCheckered,
|
|
6
|
+
declare const drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
|
|
7
|
+
declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
|
|
8
|
+
declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
|
|
9
|
+
declare const drawDashes: (page: Svg, primaryColor: string, secondaryColor: string, dashDirection: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
|
|
10
|
+
export { drawStriped, drawHoops, drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, };
|
package/lib/patterns/patterns.js
CHANGED
|
@@ -1,68 +1,120 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
const drawStripedThick = (page, primaryColor, secondaryColor, direction) => {
|
|
2
|
+
switch (direction) {
|
|
3
|
+
case "horizontal": {
|
|
4
|
+
// Define a pattern tile tall enough for both stripes
|
|
5
|
+
const stripeHeight = 10; // The thickness of your primary stripe
|
|
6
|
+
const gapHeight = 8; // The thickness of your secondary stripe
|
|
7
|
+
const patternHeight = stripeHeight + gapHeight; // The total height of the repeating pattern tile
|
|
8
|
+
return page.pattern(20, patternHeight, function (add) {
|
|
9
|
+
// Draw the thick primary stripe at the top of the tile
|
|
10
|
+
add.rect(20, stripeHeight).fill(primaryColor);
|
|
11
|
+
// Draw the thick secondary stripe below it.
|
|
12
|
+
// It starts at a y-position equal to the stripe's height.
|
|
13
|
+
add
|
|
14
|
+
.rect(20, gapHeight)
|
|
15
|
+
.move(0, stripeHeight)
|
|
16
|
+
.fill(secondaryColor ? secondaryColor : "#eee");
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
default: {
|
|
20
|
+
return page.pattern(20, 4, function (add) {
|
|
21
|
+
add.rect(20, 4).fill(primaryColor);
|
|
22
|
+
add
|
|
23
|
+
.rect(10, 4)
|
|
24
|
+
.move(6, 0)
|
|
25
|
+
.fill(secondaryColor ? secondaryColor : "#eee");
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const drawStripedThin = (page, primaryColor, secondaryColor, direction) => {
|
|
31
|
+
switch (direction) {
|
|
32
|
+
case "horizontal": {
|
|
33
|
+
return page.pattern(20, 5, function (add) {
|
|
34
|
+
add.rect(20, 8).fill(secondaryColor);
|
|
35
|
+
add.rect(20, 4).fill(primaryColor);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
default: {
|
|
39
|
+
return page.pattern(8, 4, function (add) {
|
|
40
|
+
add.rect(8, 4).fill(primaryColor);
|
|
41
|
+
add.rect(1, 4).fill(secondaryColor ? secondaryColor : "#eee");
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const drawStripedNormal = (page, primaryColor, secondaryColor, direction) => {
|
|
47
|
+
switch (direction) {
|
|
48
|
+
case "horizontal": {
|
|
49
|
+
return page.pattern(20, 8, function (add) {
|
|
50
|
+
add.rect(20, 8).fill(secondaryColor);
|
|
51
|
+
add.rect(20, 5).fill(primaryColor);
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
default: {
|
|
16
55
|
return page.pattern(10, 4, function (add) {
|
|
17
56
|
add.rect(10, 4).fill(primaryColor);
|
|
18
|
-
add.rect(5, 4).fill(secondaryColor ? secondaryColor :
|
|
57
|
+
add.rect(5, 4).fill(secondaryColor ? secondaryColor : "#eee");
|
|
19
58
|
});
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const drawStriped = (page, primaryColor, secondaryColor, direction, thickness = "normal") => {
|
|
63
|
+
switch (thickness) {
|
|
64
|
+
case "thick":
|
|
65
|
+
return drawStripedThick(page, primaryColor, secondaryColor, direction);
|
|
66
|
+
case "thin":
|
|
67
|
+
return drawStripedThin(page, primaryColor, secondaryColor, direction);
|
|
68
|
+
default:
|
|
69
|
+
return drawStripedNormal(page, primaryColor, secondaryColor, direction);
|
|
20
70
|
}
|
|
21
71
|
};
|
|
22
72
|
const drawCheckered = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
|
|
23
73
|
add.rect(20, 20).fill(primaryColor);
|
|
24
|
-
add.rect(10, 10).fill(secondaryColor ? secondaryColor :
|
|
74
|
+
add.rect(10, 10).fill(secondaryColor ? secondaryColor : "#eee");
|
|
25
75
|
add
|
|
26
76
|
.rect(10, 10)
|
|
27
|
-
.fill(secondaryColor ? secondaryColor :
|
|
77
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
28
78
|
.move(10, 10);
|
|
29
79
|
});
|
|
30
80
|
const drawHoops = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
|
|
31
81
|
add.rect(20, 20).fill(primaryColor);
|
|
32
|
-
add.rect(20, 10).fill(secondaryColor ? secondaryColor :
|
|
82
|
+
add.rect(20, 10).fill(secondaryColor ? secondaryColor : "#eee");
|
|
33
83
|
});
|
|
34
|
-
const
|
|
84
|
+
const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) => {
|
|
35
85
|
switch (bandStyle) {
|
|
36
|
-
case
|
|
86
|
+
case "diagonalRight":
|
|
37
87
|
return page.pattern(100, 100, function (add) {
|
|
38
88
|
add.rect(90, 100).fill(primaryColor);
|
|
39
89
|
add
|
|
40
90
|
.rect(50, 120)
|
|
41
|
-
.fill(secondaryColor ? secondaryColor :
|
|
42
|
-
.move(50, 0)
|
|
91
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
92
|
+
.move(50, 0)
|
|
93
|
+
.rotate(35);
|
|
43
94
|
});
|
|
44
|
-
case
|
|
95
|
+
case "diagonalLeft":
|
|
45
96
|
return page.pattern(100, 100, function (add) {
|
|
46
97
|
add.rect(90, 100).fill(primaryColor);
|
|
47
98
|
add
|
|
48
99
|
.rect(60, 140)
|
|
49
|
-
.fill(secondaryColor ? secondaryColor :
|
|
50
|
-
.move(52, -20)
|
|
100
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
101
|
+
.move(52, -20)
|
|
102
|
+
.rotate(145);
|
|
51
103
|
});
|
|
52
|
-
case
|
|
104
|
+
case "horizontal":
|
|
53
105
|
return page.pattern(100, 100, function (add) {
|
|
54
106
|
add.rect(100, 100).fill(primaryColor);
|
|
55
107
|
add
|
|
56
108
|
.rect(100, 50)
|
|
57
|
-
.fill(secondaryColor ? secondaryColor :
|
|
109
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
58
110
|
.move(0, 52);
|
|
59
111
|
});
|
|
60
|
-
case
|
|
112
|
+
case "vertical":
|
|
61
113
|
return page.pattern(90, 100, function (add) {
|
|
62
114
|
add.rect(90, 100).fill(primaryColor);
|
|
63
115
|
add
|
|
64
116
|
.rect(50, 100)
|
|
65
|
-
.fill(secondaryColor ? secondaryColor :
|
|
117
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
66
118
|
.move(50, 0);
|
|
67
119
|
});
|
|
68
120
|
default:
|
|
@@ -74,38 +126,38 @@ const drawTwoColor = (page, primaryColor, secondaryColor, bandStyle) => {
|
|
|
74
126
|
};
|
|
75
127
|
const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
|
|
76
128
|
switch (bandStyle) {
|
|
77
|
-
case
|
|
129
|
+
case "diagonalRight":
|
|
78
130
|
return page.pattern(100, 100, function (add) {
|
|
79
131
|
add.rect(100, 100).fill(primaryColor);
|
|
80
132
|
add
|
|
81
133
|
.rect(120, 20)
|
|
82
|
-
.fill(secondaryColor ? secondaryColor :
|
|
134
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
83
135
|
.move(0, 40)
|
|
84
136
|
.rotate(120);
|
|
85
137
|
});
|
|
86
|
-
case
|
|
138
|
+
case "diagonalLeft":
|
|
87
139
|
return page.pattern(100, 100, function (add) {
|
|
88
140
|
add.rect(100, 100).fill(primaryColor);
|
|
89
141
|
add
|
|
90
142
|
.rect(120, 20)
|
|
91
|
-
.fill(secondaryColor ? secondaryColor :
|
|
143
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
92
144
|
.move(0, 40)
|
|
93
145
|
.rotate(60);
|
|
94
146
|
});
|
|
95
|
-
case
|
|
147
|
+
case "horizontal":
|
|
96
148
|
return page.pattern(100, 90, function (add) {
|
|
97
149
|
add.rect(100, 90).fill(primaryColor);
|
|
98
150
|
add
|
|
99
151
|
.rect(100, 30)
|
|
100
|
-
.fill(secondaryColor ? secondaryColor :
|
|
152
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
101
153
|
.move(0, 30);
|
|
102
154
|
});
|
|
103
|
-
case
|
|
155
|
+
case "vertical":
|
|
104
156
|
return page.pattern(90, 100, function (add) {
|
|
105
157
|
add.rect(90, 100).fill(primaryColor);
|
|
106
158
|
add
|
|
107
159
|
.rect(20, 100)
|
|
108
|
-
.fill(secondaryColor ? secondaryColor :
|
|
160
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
109
161
|
.move(40, 0);
|
|
110
162
|
});
|
|
111
163
|
default:
|
|
@@ -117,52 +169,74 @@ const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
|
|
|
117
169
|
};
|
|
118
170
|
const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
|
|
119
171
|
switch (waveStyle) {
|
|
120
|
-
case
|
|
172
|
+
case "horizontal":
|
|
121
173
|
return page.pattern(20, 12, function (add) {
|
|
122
174
|
add.rect(20, 12).fill(primaryColor);
|
|
123
|
-
add
|
|
124
|
-
.
|
|
125
|
-
|
|
126
|
-
.move(
|
|
175
|
+
add
|
|
176
|
+
.rect(14, 6)
|
|
177
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
178
|
+
.move(-3, 3)
|
|
179
|
+
.rotate(-15);
|
|
180
|
+
add
|
|
181
|
+
.rect(14, 6)
|
|
182
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
183
|
+
.move(9, 3)
|
|
184
|
+
.rotate(15);
|
|
127
185
|
});
|
|
128
186
|
default:
|
|
129
187
|
return page.pattern(12, 20, function (add) {
|
|
130
188
|
add.rect(12, 20).fill(primaryColor);
|
|
131
|
-
add
|
|
132
|
-
.
|
|
133
|
-
|
|
134
|
-
.move(3,
|
|
189
|
+
add
|
|
190
|
+
.rect(6, 14)
|
|
191
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
192
|
+
.move(3, -3)
|
|
193
|
+
.rotate(-15);
|
|
194
|
+
add
|
|
195
|
+
.rect(6, 14)
|
|
196
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
197
|
+
.move(3, 9)
|
|
198
|
+
.rotate(15);
|
|
135
199
|
});
|
|
136
200
|
}
|
|
137
201
|
};
|
|
138
202
|
const drawDashes = (page, primaryColor, secondaryColor, dashDirection) => {
|
|
139
203
|
switch (dashDirection) {
|
|
140
|
-
case
|
|
204
|
+
case "diagonalLeft":
|
|
141
205
|
return page.pattern(10, 10, function (add) {
|
|
142
206
|
add.rect(10, 10).fill(primaryColor);
|
|
143
|
-
add
|
|
144
|
-
.
|
|
207
|
+
add
|
|
208
|
+
.rect(5, 2)
|
|
209
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
210
|
+
.move(5, 5)
|
|
211
|
+
.rotate(45);
|
|
145
212
|
});
|
|
146
|
-
case
|
|
213
|
+
case "diagonalRight":
|
|
147
214
|
return page.pattern(10, 10, function (add) {
|
|
148
215
|
add.rect(10, 10).fill(primaryColor);
|
|
149
|
-
add
|
|
150
|
-
.
|
|
216
|
+
add
|
|
217
|
+
.rect(5, 2)
|
|
218
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
219
|
+
.move(5, 5)
|
|
220
|
+
.rotate(135);
|
|
151
221
|
});
|
|
152
|
-
case
|
|
222
|
+
case "horizontal":
|
|
153
223
|
return page.pattern(10, 10, function (add) {
|
|
154
224
|
add.rect(10, 10).fill(primaryColor);
|
|
155
|
-
add.rect(5, 2).fill(secondaryColor ? secondaryColor :
|
|
156
|
-
add
|
|
225
|
+
add.rect(5, 2).fill(secondaryColor ? secondaryColor : "#eee");
|
|
226
|
+
add
|
|
227
|
+
.rect(5, 2)
|
|
228
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
157
229
|
.move(5, 5);
|
|
158
230
|
});
|
|
159
231
|
default:
|
|
160
232
|
return page.pattern(10, 10, function (add) {
|
|
161
233
|
add.rect(10, 10).fill(primaryColor);
|
|
162
|
-
add.rect(2, 5).fill(secondaryColor ? secondaryColor :
|
|
163
|
-
add
|
|
234
|
+
add.rect(2, 5).fill(secondaryColor ? secondaryColor : "#eee");
|
|
235
|
+
add
|
|
236
|
+
.rect(2, 5)
|
|
237
|
+
.fill(secondaryColor ? secondaryColor : "#eee")
|
|
164
238
|
.move(5, 5);
|
|
165
239
|
});
|
|
166
240
|
}
|
|
167
241
|
};
|
|
168
|
-
export { drawStriped, drawHoops, drawSingleBand, drawCheckered,
|
|
242
|
+
export { drawStriped, drawHoops, drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, };
|
|
@@ -45,7 +45,7 @@ export const BHA = {
|
|
|
45
45
|
shirtText: "AMERICAN",
|
|
46
46
|
shirtColor: "#398ae7",
|
|
47
47
|
sleeveColor: "#398ae7",
|
|
48
|
-
shirtStyle: "
|
|
48
|
+
shirtStyle: "stripedThin",
|
|
49
49
|
shirtStyleColor: "#fff",
|
|
50
50
|
textColor: "#fff",
|
|
51
51
|
shortsColor: "black",
|
|
@@ -156,7 +156,7 @@ export const SHE = {
|
|
|
156
156
|
shirtText: "## USG",
|
|
157
157
|
shirtColor: "#fff",
|
|
158
158
|
sleeveColor: "#fff",
|
|
159
|
-
shirtStyle: "
|
|
159
|
+
shirtStyle: "stripedThick",
|
|
160
160
|
shirtStyleColor: "#e30613",
|
|
161
161
|
textColor: "#111",
|
|
162
162
|
},
|
|
@@ -166,10 +166,10 @@ export const SOU = {
|
|
|
166
166
|
shirtText: "Sportsbet",
|
|
167
167
|
shirtColor: "#ff0028",
|
|
168
168
|
sleeveColor: "#ff0028",
|
|
169
|
-
shirtStyle: "
|
|
169
|
+
shirtStyle: "singleBand",
|
|
170
170
|
shirtStyleColor: "#fff",
|
|
171
171
|
textColor: "#111",
|
|
172
|
-
shirtStyleDirection: "
|
|
172
|
+
shirtStyleDirection: "diagonalLeft",
|
|
173
173
|
shortsColor: "black",
|
|
174
174
|
},
|
|
175
175
|
};
|
|
@@ -220,7 +220,7 @@ export const PSG = {
|
|
|
220
220
|
shirtText: " All ",
|
|
221
221
|
shirtColor: "#00234a",
|
|
222
222
|
sleeveColor: "#00234a",
|
|
223
|
-
shirtStyle: "
|
|
223
|
+
shirtStyle: "singleBand",
|
|
224
224
|
shirtStyleColor: "#cc1339",
|
|
225
225
|
textColor: "#fff",
|
|
226
226
|
shirtStyleDirection: "vertical",
|
|
@@ -243,7 +243,7 @@ export const BAR = {
|
|
|
243
243
|
shirtText: "Rakuten",
|
|
244
244
|
shirtColor: "#081868",
|
|
245
245
|
sleeveColor: "#081868",
|
|
246
|
-
shirtStyle: "
|
|
246
|
+
shirtStyle: "stripedThick",
|
|
247
247
|
shirtStyleColor: "#84112b",
|
|
248
248
|
textColor: "#fff",
|
|
249
249
|
shortsColor: "black",
|
|
@@ -277,7 +277,7 @@ export const BVB = {
|
|
|
277
277
|
sleeveColor: "#f6ea32",
|
|
278
278
|
shirtStyle: "dashed",
|
|
279
279
|
shirtStyleColor: "#222",
|
|
280
|
-
shirtStyleDirection: "
|
|
280
|
+
shirtStyleDirection: "diagonalRight",
|
|
281
281
|
textColor: "#fff",
|
|
282
282
|
textBackgroundColor: "#333",
|
|
283
283
|
shortsColor: "black",
|
|
@@ -288,7 +288,7 @@ export const CAG = {
|
|
|
288
288
|
shirtText: "+ Inchusa",
|
|
289
289
|
shirtColor: "#e4343b",
|
|
290
290
|
sleeveColor: "#fff",
|
|
291
|
-
shirtStyle: "
|
|
291
|
+
shirtStyle: "twoColors",
|
|
292
292
|
shirtStyleColor: "#1d2c47",
|
|
293
293
|
textColor: "#fff",
|
|
294
294
|
shortsColor: "black",
|
|
@@ -299,9 +299,9 @@ export const MON = {
|
|
|
299
299
|
shirtText: " FEDCOM ",
|
|
300
300
|
shirtColor: "#fff",
|
|
301
301
|
sleeveColor: "#fff",
|
|
302
|
-
shirtStyle: "
|
|
302
|
+
shirtStyle: "twoColors",
|
|
303
303
|
shirtStyleColor: "#e53236",
|
|
304
|
-
shirtStyleDirection: "
|
|
304
|
+
shirtStyleDirection: "diagonalLeft",
|
|
305
305
|
textColor: "#fff",
|
|
306
306
|
shortsColor: "black",
|
|
307
307
|
},
|
package/lib/types/index.d.ts
CHANGED
|
@@ -10,9 +10,9 @@ export interface DrawSoccerJerseyProps {
|
|
|
10
10
|
textBackgroundColor?: string;
|
|
11
11
|
shirtColor: string;
|
|
12
12
|
sleeveColor: string;
|
|
13
|
-
shirtStyle:
|
|
13
|
+
shirtStyle: ShirtStyle;
|
|
14
14
|
shirtStyleColor?: string;
|
|
15
|
-
shirtStyleDirection?:
|
|
15
|
+
shirtStyleDirection?: ShirtStyleDirection;
|
|
16
16
|
isBack?: boolean;
|
|
17
17
|
shirtWidth?: number;
|
|
18
18
|
collarColor?: string;
|
|
@@ -26,3 +26,5 @@ export interface DrawSoccerJerseyProps {
|
|
|
26
26
|
withBadge?: boolean;
|
|
27
27
|
withShorts?: boolean;
|
|
28
28
|
}
|
|
29
|
+
export type ShirtStyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
|
|
30
|
+
export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "hoops" | "singleBand" | "dashed";
|
|
@@ -20,7 +20,7 @@ import { DrawSoccerJerseyProps } from "../types";
|
|
|
20
20
|
* used for the shirt style.
|
|
21
21
|
* @param {string} specs.shirtStyleDirection The style of the single band.
|
|
22
22
|
* Required when using the "single-band" shirt style. Supports
|
|
23
|
-
* "
|
|
23
|
+
* "diagonalRight", "diagonalLeft","horizontal", "vertical"
|
|
24
24
|
* @param {boolean} specs.isBack Set to true to draw the shirt from the
|
|
25
25
|
* back (different neck shape, no badges). Defaults to false.
|
|
26
26
|
* @return {string} A data URL ready for direct use as src attribute
|
|
@@ -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 { drawHoops, drawSingleBand, drawStriped, drawCheckered,
|
|
10
|
+
import { drawHoops, drawSingleBand, drawStriped, drawCheckered, drawTwoColors, drawWaves, drawDashes, } from "../patterns/patterns";
|
|
11
11
|
/**
|
|
12
12
|
* @param {object} specs Specifications of the soccer jersey.
|
|
13
13
|
* @param {string} specs.shirtText The text to be displayed on the shirt.
|
|
@@ -29,7 +29,7 @@ import { drawHoops, drawSingleBand, drawStriped, drawCheckered, drawTwoColor, dr
|
|
|
29
29
|
* used for the shirt style.
|
|
30
30
|
* @param {string} specs.shirtStyleDirection The style of the single band.
|
|
31
31
|
* Required when using the "single-band" shirt style. Supports
|
|
32
|
-
* "
|
|
32
|
+
* "diagonalRight", "diagonalLeft","horizontal", "vertical"
|
|
33
33
|
* @param {boolean} specs.isBack Set to true to draw the shirt from the
|
|
34
34
|
* back (different neck shape, no badges). Defaults to false.
|
|
35
35
|
* @return {string} A data URL ready for direct use as src attribute
|
|
@@ -49,17 +49,17 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
|
|
|
49
49
|
const page = SVG();
|
|
50
50
|
let shirtFill;
|
|
51
51
|
switch (shirtStyle) {
|
|
52
|
-
case "
|
|
53
|
-
shirtFill =
|
|
52
|
+
case "twoColors":
|
|
53
|
+
shirtFill = drawTwoColors(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection ? shirtStyleDirection : "vertical");
|
|
54
54
|
break;
|
|
55
|
-
case "
|
|
56
|
-
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", "thin");
|
|
55
|
+
case "stripedThin":
|
|
56
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection || "vertical", "thin");
|
|
57
57
|
break;
|
|
58
|
-
case "
|
|
59
|
-
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", "thick");
|
|
58
|
+
case "stripedThick":
|
|
59
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection || "vertical", "thick");
|
|
60
60
|
break;
|
|
61
61
|
case "striped":
|
|
62
|
-
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222");
|
|
62
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection || "vertical", "normal");
|
|
63
63
|
break;
|
|
64
64
|
case "dashed":
|
|
65
65
|
shirtFill = drawDashes(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection ? shirtStyleDirection : "vertical");
|
|
@@ -67,7 +67,7 @@ export default function drawSoccerJersey({ shirtText, textColor, textOutlineColo
|
|
|
67
67
|
case "checkered":
|
|
68
68
|
shirtFill = drawCheckered(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222");
|
|
69
69
|
break;
|
|
70
|
-
case "
|
|
70
|
+
case "singleBand":
|
|
71
71
|
shirtFill = drawSingleBand(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection ? shirtStyleDirection : "horizontal");
|
|
72
72
|
break;
|
|
73
73
|
case "hoops":
|