Simplify algobadge image

olimpiadi-informatica · Jul 25, 2024 · bc8e0dd · bc8e0dd
1 parent 1d30526
commit bc8e0dd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@olinfo/terry-api": "^0.1",
     "@olinfo/training-api": "^0.2",
     "@shikijs/monaco": "^1.5",
+    "@types/d3-path": "^3.1",
     "@types/lodash-es": "^4.17",
     "@types/mdx": "^2.0",
     "@types/node": "^20",
@@ -34,6 +35,7 @@
     "@types/wicg-file-system-access": "^2023.10.5",
     "autoprefixer": "^10.0",
     "clsx": "^2.1",
+    "d3-path": "^3.1",
     "katex": "^0.16",
     "lodash-es": "^4.17",
     "lucide-react": ">=0.395, <1",

diff --git a/src/app/(training)/(home)/algobadge.tsx b/src/app/(training)/(home)/algobadge.tsx
@@ -1,47 +1,61 @@
 import { Fragment } from "react";
 
+import { path } from "d3-path";
 import { Check, LockKeyhole, PencilLine } from "lucide-react";
 
 export function Algobadge({ className }: { className?: string }) {
-  const path = [
-    "M2,0.4",
-    "L2,0.5   Q2,0.75   1.5,0.75", // ⤶
-    "L1,0.75  Q0.5,0.75 0.5,1", // ⤹
-    "L0.5,2   Q0.5,2.25 1,2.25", // ⤷
-    "L2,2.25  Q2.5,2.25 2.5,2.5", // ⤵
-    "L2.5,3.5 Q2.5,3.75 2,3.75", // ⤶
-    "L1,3.75  Q0.5,3.75 0.5,4", // ⤹
-    "L0.5,5   Q0.5,5.25 1,5.25", // ⤷
-    "         Q2,5.25   2,5.5", // ⤵
-    "L2,5.7 M2,5.9 L2,6.1 M2,6.3 L2,6.5", // ⇣
+  const nodes = [
+    { x: 2, y: 0, icon: "check" },
+    { x: 0.5, y: 1.5, icon: "check" },
+    { x: 2.5, y: 3, icon: "pencil" },
+    { x: 0.5, y: 4.5, icon: "lock" },
+    { x: 2, y: 5.7, icon: "" },
   ];
 
-  const nodes = [
-    [2, 0, "check"],
-    [0.5, 1.5, "check"],
-    [2.5, 3, "pencil"],
-    [0.5, 4.5, "lock"],
-  ] as const;
+  const line = path();
+  line.moveTo(nodes[0].x, nodes[0].y);
+  for (let i = 1; i < nodes.length; i++) {
+    line.bezierCurveTo(
+      nodes[i - 1].x,
+      nodes[i].y + 0.1,
+      nodes[i].x,
+      nodes[i - 1].y - 0.1,
+      nodes[i].x,
+      nodes[i].y,
+    );
+  }
+  for (let i = 0; i < 2; i++) {
+    const last = nodes.at(-1)!;
+    line.moveTo(last.x, last.y + 0.15 + i * 0.35);
+    line.lineTo(last.x, last.y + 0.35 + i * 0.35);
+  }
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 -0.5 3 7"
       className={className}
       aria-hidden="true">
-      <path d={path.join("")} strokeWidth={0.05} className="stroke-base-content" fillOpacity={0} />
-      {nodes.map(([cx, cy, icon], i) => (
+      <path
+        d={line.toString()}
+        strokeWidth={0.05}
+        className="stroke-base-content"
+        fillOpacity={0}
+      />
+      {nodes.map(({ x, y, icon }, i) => (
         <Fragment key={i}>
-          <circle
-            cx={cx}
-            cy={cy}
-            r={0.4}
-            strokeWidth={0.05}
-            className="fill-base-200 stroke-base-content"
-          />
-          {icon === "check" && <Check x={cx - 0.25} y={cy - 0.25} size={0.5} />}
-          {icon === "pencil" && <PencilLine x={cx - 0.2} y={cy - 0.2} size={0.4} />}
-          {icon === "lock" && <LockKeyhole x={cx - 0.2} y={cy - 0.2} size={0.4} />}
+          {icon && (
+            <circle
+              cx={x}
+              cy={y}
+              r={0.4}
+              strokeWidth={0.05}
+              className="fill-base-200 stroke-base-content"
+            />
+          )}
+          {icon === "check" && <Check x={x - 0.25} y={y - 0.25} size={0.5} />}
+          {icon === "pencil" && <PencilLine x={x - 0.2} y={y - 0.2} size={0.4} />}
+          {icon === "lock" && <LockKeyhole x={x - 0.2} y={y - 0.2} size={0.4} />}
         </Fragment>
       ))}
     </svg>

diff --git a/yarn.lock b/yarn.lock
@@ -814,7 +814,7 @@
   dependencies:
     "@types/d3-color" "*"
 
-"@types/d3-path@*":
+"@types/d3-path@*", "@types/d3-path@^3.1":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
   integrity sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==
@@ -1500,7 +1500,7 @@ d3-ease@^3.0.1:
   dependencies:
     d3-color "1 - 3"
 
-d3-path@^3.1.0:
+d3-path@^3.1, d3-path@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
   integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==