From bc8e0dda606adabbd566c554b2649e0b83199e53 Mon Sep 17 00:00:00 2001
From: Alessandro Bortolin <bortolin.alessandro@outlook.it>
Date: Mon, 22 Jul 2024 13:51:28 +0200
Subject: [PATCH] Simplify algobadge image

---
 package.json                            |  2 +
 src/app/(training)/(home)/algobadge.tsx | 72 +++++++++++++++----------
 yarn.lock                               |  4 +-
 3 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 45e57ae..4fa72aa 100644
--- 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
index 846aa38..f58b501 100644
--- a/src/app/(training)/(home)/algobadge.tsx
+++ b/src/app/(training)/(home)/algobadge.tsx
@@ -1,27 +1,34 @@
 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
@@ -29,19 +36,26 @@ export function Algobadge({ className }: { className?: string }) {
       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
index 25c7b4c..dff4749 100644
--- 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==