| 132 | } |
| 133 | |
| 134 | export function TotalSolved(total: number, solved: number) { |
| 135 | return new Item("g", { |
| 136 | id: "total-solved", |
| 137 | style: { |
| 138 | transform: "translate(30px, 85px)", |
| 139 | }, |
| 140 | children: [ |
| 141 | new Item("circle", { |
| 142 | id: "total-solved-bg", |
| 143 | style: { |
| 144 | cx: "40px", |
| 145 | cy: "40px", |
| 146 | r: "40px", |
| 147 | stroke: "var(--bg-1)", |
| 148 | "stroke-width": "6px", |
| 149 | }, |
| 150 | }), |
| 151 | new Item("circle", { |
| 152 | id: "total-solved-ring", |
| 153 | style: { |
| 154 | cx: "40px", |
| 155 | cy: "40px", |
| 156 | r: "40px", |
| 157 | transform: "rotate(-90deg)", |
| 158 | "transform-origin": "40px 40px", |
| 159 | "stroke-dasharray": `${(80 * Math.PI * solved) / total} 10000`, |
| 160 | stroke: "var(--color-0)", |
| 161 | "stroke-width": "6px", |
| 162 | "stroke-linecap": "round", |
| 163 | }, |
| 164 | }), |
| 165 | new Item("text", { |
| 166 | content: solved.toString(), |
| 167 | id: "total-solved-text", |
| 168 | style: { |
| 169 | transform: "translate(40px, 40px)", |
| 170 | "font-size": "28px", |
| 171 | "alignment-baseline": "central", |
| 172 | "dominant-baseline": "central", |
| 173 | "text-anchor": "middle", |
| 174 | fill: "var(--text-0)", |
| 175 | "font-weight": "bold", |
| 176 | }, |
| 177 | }), |
| 178 | ], |
| 179 | }); |
| 180 | } |
| 181 | |
| 182 | export function Solved(problem: FetchedData["problem"]) { |
| 183 | const group = new Item("g", { |