Skip to content

Commit fba3452

Browse files
JacobLinCoolJacobLinCool
committed
refactor: better Item constructor
1 parent 3e4335e commit fba3452

File tree

5 files changed

+90
-150
lines changed

5 files changed

+90
-150
lines changed

‎src/core/card.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export class Generator {
155155
styles.push(...this.config.css);
156156
}
157157

158-
root.children.push(new Item({ type: "style", content: styles.join("\n") }));
158+
root.children.push(new Item("style", { content: styles.join("\n") }));
159159

160160
return root.stringify();
161161
}

‎src/core/elements.ts‎

Lines changed: 47 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,25 @@ import { Item, svg_attrs } from "./item";
22
import { Config, FetchedData } from "./types";
33

44
export function Root(config: Config, data: FetchedData) {
5-
return new Item({
6-
type: "svg",
5+
return new Item("svg", {
6+
id: "root",
77
attr: {
8-
id: "root",
98
width: config.width,
109
height: config.height,
1110
viewBox: `0 0 ${config.width} ${config.height}`,
1211
...svg_attrs,
1312
},
1413
style: { fill: "none" },
1514
children: [
16-
new Item({
17-
type: "title",
15+
new Item("title", {
1816
content: `${data?.profile.username || config.username} | LeetCode Stats Card`,
1917
}),
20-
new Item({
21-
type: "style",
22-
attr: { id: "default-colors" },
18+
new Item("style", {
19+
id: "default-colors",
2320
content: `svg{opacity:0}:root{--bg-0:#fff;--bg-1:#e5e5e5;--bg-2:#d3d3d3;--bg-3:#d3d3d3;--text-0:#000;--text-1:#808080;--text-2:#808080;--text-3:#808080;--color-0:#ffa116;--color-1:#5cb85c;--color-2:#f0ad4e;--color-3:#d9534f}`,
2421
}),
25-
new Item({
26-
type: "rect",
27-
attr: {
28-
id: "background",
29-
},
22+
new Item("rect", {
23+
id: "background",
3024
style: {
3125
transform: "translate(0.5px, 0.5px)",
3226
stroke: "var(--bg-2)",
@@ -42,50 +36,43 @@ export function Root(config: Config, data: FetchedData) {
4236
}
4337

4438
export function Icon() {
45-
const item = new Item({
46-
type: "g",
47-
attr: {
48-
id: "icon",
49-
},
39+
const item = new Item("g", {
40+
id: "icon",
5041
style: {
5142
transform: "translate(20px, 15px) scale(0.27)",
5243
},
5344
});
5445

5546
item.children = [
56-
new Item({
57-
type: "g",
47+
new Item("g", {
5848
style: {
5949
stroke: "none",
6050
fill: "var(--text-0)",
6151
"fill-rule": "evenodd",
6252
},
6353
children: [
64-
new Item({
65-
type: "path",
54+
new Item("path", {
55+
id: "C",
6656
attr: {
67-
id: "C",
6857
d: "M67.506,83.066 C70.000,80.576 74.037,80.582 76.522,83.080 C79.008,85.578 79.002,89.622 76.508,92.112 L65.435,103.169 C55.219,113.370 38.560,113.518 28.172,103.513 C28.112,103.455 23.486,98.920 8.227,83.957 C-1.924,74.002 -2.936,58.074 6.616,47.846 L24.428,28.774 C33.910,18.621 51.387,17.512 62.227,26.278 L78.405,39.362 C81.144,41.577 81.572,45.598 79.361,48.342 C77.149,51.087 73.135,51.515 70.395,49.300 L54.218,36.217 C48.549,31.632 38.631,32.262 33.739,37.500 L15.927,56.572 C11.277,61.552 11.786,69.574 17.146,74.829 C28.351,85.816 36.987,94.284 36.997,94.294 C42.398,99.495 51.130,99.418 56.433,94.123 L67.506,83.066 Z",
6958
},
7059
style: {
7160
fill: "#FFA116",
7261
"fill-rule": "nonzero",
7362
},
7463
}),
75-
new Item({
76-
type: "path",
64+
new Item("path", {
65+
id: "L",
7766
attr: {
78-
id: "L",
7967
d: "M49.412,2.023 C51.817,-0.552 55.852,-0.686 58.423,1.722 C60.994,4.132 61.128,8.173 58.723,10.749 L15.928,56.572 C11.277,61.551 11.786,69.573 17.145,74.829 L36.909,94.209 C39.425,96.676 39.468,100.719 37.005,103.240 C34.542,105.760 30.506,105.804 27.990,103.336 L8.226,83.956 C-1.924,74.002 -2.936,58.074 6.617,47.846 L49.412,2.023 Z",
8068
},
8169
style: {
8270
fill: "#000000",
8371
},
8472
}),
85-
new Item({
86-
type: "path",
73+
new Item("path", {
74+
id: "dash",
8775
attr: {
88-
id: "dash",
8976
d: "M40.606,72.001 C37.086,72.001 34.231,69.142 34.231,65.614 C34.231,62.087 37.086,59.228 40.606,59.228 L87.624,59.228 C91.145,59.228 94,62.087 94,65.614 C94,69.142 91.145,72.001 87.624,72.001 L40.606,72.001 Z",
9077
},
9178
style: {
@@ -100,10 +87,9 @@ export function Icon() {
10087
}
10188

10289
export function Username(username: string, site: string) {
103-
const item = new Item({
104-
type: "a",
90+
const item = new Item("a", {
91+
id: "username",
10592
attr: {
106-
id: "username",
10793
href:
10894
username === "User Not Found"
10995
? "https://github.com/JacobLinCool/LeetCode-Stats-Card"
@@ -114,12 +100,9 @@ export function Username(username: string, site: string) {
114100
transform: "translate(65px, 40px)",
115101
},
116102
children: [
117-
new Item({
118-
type: "text",
103+
new Item("text", {
104+
id: "username-text",
119105
content: username,
120-
attr: {
121-
id: "username-text",
122-
},
123106
style: {
124107
fill: "var(--text-0)",
125108
"font-size": "24px",
@@ -133,12 +116,9 @@ export function Username(username: string, site: string) {
133116
}
134117

135118
export function Ranking(ranking: number) {
136-
const item = new Item({
137-
type: "text",
119+
const item = new Item("text", {
120+
id: "ranking",
138121
content: "#" + (ranking >= 100000 ? "100000+" : ranking.toString()),
139-
attr: {
140-
id: "ranking",
141-
},
142122
style: {
143123
transform: "translate(480px, 40px)",
144124
fill: "var(--text-1)",
@@ -152,18 +132,14 @@ export function Ranking(ranking: number) {
152132
}
153133

154134
export function TotalSolved(total: number, solved: number) {
155-
return new Item({
156-
type: "g",
157-
attr: {
158-
id: "total-solved",
159-
},
135+
return new Item("g", {
136+
id: "total-solved",
160137
style: {
161138
transform: "translate(30px, 85px)",
162139
},
163140
children: [
164-
new Item({
165-
type: "circle",
166-
attr: { id: "total-solved-bg" },
141+
new Item("circle", {
142+
id: "total-solved-bg",
167143
style: {
168144
cx: 40,
169145
cy: 40,
@@ -172,9 +148,8 @@ export function TotalSolved(total: number, solved: number) {
172148
"stroke-width": "6px",
173149
},
174150
}),
175-
new Item({
176-
type: "circle",
177-
attr: { id: "total-solved-ring" },
151+
new Item("circle", {
152+
id: "total-solved-ring",
178153
style: {
179154
cx: 40,
180155
cy: 40,
@@ -187,10 +162,9 @@ export function TotalSolved(total: number, solved: number) {
187162
"stroke-linecap": "round",
188163
},
189164
}),
190-
new Item({
191-
type: "text",
165+
new Item("text", {
192166
content: solved.toString(),
193-
attr: { id: "total-solved-text" },
167+
id: "total-solved-text",
194168
style: {
195169
transform: "translate(40px, 40px)",
196170
"font-size": "28px",
@@ -206,11 +180,8 @@ export function TotalSolved(total: number, solved: number) {
206180
}
207181

208182
export function Solved(problem: FetchedData["problem"]) {
209-
const group = new Item({
210-
type: "g",
211-
attr: {
212-
id: "solved",
213-
},
183+
const group = new Item("g", {
184+
id: "solved",
214185
style: {
215186
transform: "translate(160px, 80px)",
216187
},
@@ -220,32 +191,23 @@ export function Solved(problem: FetchedData["problem"]) {
220191
const colors = ["var(--color-1)", "var(--color-2)", "var(--color-3)"] as const;
221192
for (let i = 0; i < difficulties.length; i++) {
222193
group.children?.push(
223-
new Item({
224-
type: "g",
225-
attr: {
226-
id: `${difficulties[i]}-solved`,
227-
},
194+
new Item("g", {
195+
id: `${difficulties[i]}-solved`,
228196
style: {
229197
transform: `translate(0, ${i * 40}px)`,
230198
},
231199
children: [
232-
new Item({
233-
type: "text",
234-
attr: {
235-
id: `${difficulties[i]}-solved-type`,
236-
},
200+
new Item("text", {
201+
id: `${difficulties[i]}-solved-type`,
237202
style: {
238203
fill: "var(--text-0)",
239204
"font-size": "18px",
240205
"font-weight": "bold",
241206
},
242207
content: difficulties[i][0].toUpperCase() + difficulties[i].slice(1),
243208
}),
244-
new Item({
245-
type: "text",
246-
attr: {
247-
id: `${difficulties[i]}-solved-count`,
248-
},
209+
new Item("text", {
210+
id: `${difficulties[i]}-solved-count`,
249211
style: {
250212
transform: "translate(300px, 0px)",
251213
fill: "var(--text-1)",
@@ -257,30 +219,18 @@ export function Solved(problem: FetchedData["problem"]) {
257219
problem[difficulties[i]].total
258220
}`,
259221
}),
260-
new Item({
261-
type: "line",
262-
attr: {
263-
id: `${difficulties[i]}-solved-bg`,
264-
x1: 0,
265-
y1: 10,
266-
x2: 300,
267-
y2: 10,
268-
},
222+
new Item("line", {
223+
id: `${difficulties[i]}-solved-bg`,
224+
attr: { x1: 0, y1: 10, x2: 300, y2: 10 },
269225
style: {
270226
stroke: "var(--bg-1)",
271227
"stroke-width": "4px",
272228
"stroke-linecap": "round",
273229
},
274230
}),
275-
new Item({
276-
type: "line",
277-
attr: {
278-
id: `${difficulties[i]}-solved-progress`,
279-
x1: 0,
280-
y1: 10,
281-
x2: 300,
282-
y2: 10,
283-
},
231+
new Item("line", {
232+
id: `${difficulties[i]}-solved-progress`,
233+
attr: { x1: 0, y1: 10, x2: 300, y2: 10 },
284234
style: {
285235
stroke: colors[i],
286236
"stroke-width": "4px",
@@ -332,17 +282,16 @@ export const selectors = [
332282
] as const;
333283

334284
export function Gradient(id: string, colors: Record<string, string>, ratio = 0) {
335-
return new Item({
336-
type: "linearGradient",
285+
return new Item("linearGradient", {
286+
id,
337287
attr: {
338-
id,
339288
x1: 0,
340289
y1: 0,
341290
x2: Math.round(Math.cos(ratio) * 100) / 100,
342291
y2: Math.round(Math.sin(ratio) * 100) / 100,
343292
},
344293
children: Object.entries(colors).map(([offset, color]) => {
345-
return new Item({ type: "stop", attr: { offset, "stop-color": color } });
294+
return new Item("stop", { attr: { offset, "stop-color": color } });
346295
}),
347296
});
348297
}

0 commit comments

Comments
 (0)