| 180 | } |
| 181 | |
| 182 | export function Solved(problem: FetchedData["problem"]) { |
| 183 | const group = new Item("g", { |
| 184 | id: "solved", |
| 185 | style: { |
| 186 | transform: "translate(160px, 80px)", |
| 187 | }, |
| 188 | }); |
| 189 | |
| 190 | const difficulties = ["easy", "medium", "hard"] as const; |
| 191 | const colors = ["var(--color-1)", "var(--color-2)", "var(--color-3)"] as const; |
| 192 | for (let i = 0; i < difficulties.length; i++) { |
| 193 | group.children?.push( |
| 194 | new Item("g", { |
| 195 | id: `${difficulties[i]}-solved`, |
| 196 | style: { |
| 197 | transform: `translate(0, ${i * 40}px)`, |
| 198 | }, |
| 199 | children: [ |
| 200 | new Item("text", { |
| 201 | id: `${difficulties[i]}-solved-type`, |
| 202 | style: { |
| 203 | fill: "var(--text-0)", |
| 204 | "font-size": "18px", |
| 205 | "font-weight": "bold", |
| 206 | }, |
| 207 | content: difficulties[i][0].toUpperCase() + difficulties[i].slice(1), |
| 208 | }), |
| 209 | new Item("text", { |
| 210 | id: `${difficulties[i]}-solved-count`, |
| 211 | style: { |
| 212 | transform: "translate(300px, 0px)", |
| 213 | fill: "var(--text-1)", |
| 214 | "font-size": "16px", |
| 215 | "font-weight": "bold", |
| 216 | "text-anchor": "end", |
| 217 | }, |
| 218 | content: `${problem[difficulties[i]].solved} / ${ |
| 219 | problem[difficulties[i]].total |
| 220 | }`, |
| 221 | }), |
| 222 | new Item("line", { |
| 223 | id: `${difficulties[i]}-solved-bg`, |
| 224 | attr: { x1: 0, y1: 10, x2: 300, y2: 10 }, |
| 225 | style: { |
| 226 | stroke: "var(--bg-1)", |
| 227 | "stroke-width": "4px", |
| 228 | "stroke-linecap": "round", |
| 229 | }, |
| 230 | }), |
| 231 | new Item("line", { |
| 232 | id: `${difficulties[i]}-solved-progress`, |
| 233 | attr: { x1: 0, y1: 10, x2: 300, y2: 10 }, |
| 234 | style: { |
| 235 | stroke: colors[i], |
| 236 | "stroke-width": "4px", |
| 237 | "stroke-dasharray": `${ |
| 238 | 300 * |
| 239 | (problem[difficulties[i]].solved / problem[difficulties[i]].total) |