From ce996a08ff8ce4083fb8ea584bc3b7cd2880a1e9 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Tue, 9 Apr 2024 13:28:43 +0500
Subject: [PATCH] fix distance circle

---
 src/components/DistanceCircle.tsx | 99 +++++++++++++++++++++++--------
 src/components/Marks.tsx          | 42 -------------
 2 files changed, 73 insertions(+), 68 deletions(-)
 delete mode 100644 src/components/Marks.tsx

diff --git a/src/components/DistanceCircle.tsx b/src/components/DistanceCircle.tsx
index 8943950..0a53f4e 100644
--- a/src/components/DistanceCircle.tsx
+++ b/src/components/DistanceCircle.tsx
@@ -5,37 +5,84 @@ interface DistanceCircleProps {
 const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
   return (
     <svg
-      className="transition-[width] duration-300 ease-in-out"
-      width={(1600 * selectedRange) / 850}
-      viewBox="0 0 1600 1600"
+      width="2160"
+      height="2160"
+      viewBox="0 0 2160 2160"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className="absolute top-0 left-0 w-full h-full transition-all duration-300 ease-in-out"
     >
-      <circle
-        cx="800"
-        cy="800"
-        r="798.5"
-        fill="url(#paint0_radial_193_12559)"
-        fillOpacity="0.6"
-        stroke="white"
-        strokeWidth={(3 * 850) / selectedRange}
-      />
-      <defs>
-        <radialGradient
-          id="paint0_radial_193_12559"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(800 800) rotate(90) scale(800)"
-        >
-          <stop stopColor="#0079C2" stop-opacity="0" />
-          <stop offset="0.82" stopColor="#0079C2" stop-opacity="0.08" />
-          <stop offset="1" stopColor="#0079C2" />
-        </radialGradient>
-      </defs>
+      <svg
+        className="transition-all duration-300 ease-in-out"
+        width={(0.8 * 1600 * selectedRange) / 850}
+        x={1080 - (0.8 * 1600 * selectedRange) / 1700}
+        y={0}
+        viewBox="0 0 1600 1600"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="800"
+          cy="800"
+          r="798.5"
+          fill="url(#paint0_radial_193_12559)"
+          fillOpacity="0.6"
+          stroke="white"
+          strokeWidth={(3 * 850) / selectedRange}
+        />
+        <defs>
+          <radialGradient
+            id="paint0_radial_193_12559"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(800 800) rotate(90) scale(800)"
+          >
+            <stop stopColor="#0079C2" stopOpacity="0" />
+            <stop offset="0.82" stopColor="#0079C2" stopOpacity="0.08" />
+            <stop offset="1" stopColor="#0079C2" />
+          </radialGradient>
+        </defs>
+      </svg>
     </svg>
   );
 };
 
+// const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
+//   return (
+//     <svg
+//       className="transition-[width] duration-300 ease-in-out"
+//       width={(1600 * selectedRange) / 850}
+//       viewBox="0 0 1600 1600"
+//       fill="none"
+//       xmlns="http://www.w3.org/2000/svg"
+//     >
+//       <circle
+//         cx="800"
+//         cy="800"
+//         r="798.5"
+//         fill="url(#paint0_radial_193_12559)"
+//         fillOpacity="0.6"
+//         stroke="white"
+//         strokeWidth={(3 * 850) / selectedRange}
+//       />
+//       <defs>
+//         <radialGradient
+//           id="paint0_radial_193_12559"
+//           cx="0"
+//           cy="0"
+//           r="1"
+//           gradientUnits="userSpaceOnUse"
+//           gradientTransform="translate(800 800) rotate(90) scale(800)"
+//         >
+//           <stop stopColor="#0079C2" stop-opacity="0" />
+//           <stop offset="0.82" stopColor="#0079C2" stop-opacity="0.08" />
+//           <stop offset="1" stopColor="#0079C2" />
+//         </radialGradient>
+//       </defs>
+//     </svg>
+//   );
+// };
+
 export default DistanceCircle;
diff --git a/src/components/Marks.tsx b/src/components/Marks.tsx
deleted file mode 100644
index 0915175..0000000
--- a/src/components/Marks.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-const Marks = () => {
-  return (
-    <div className="absolute z-50 w-full h-full">
-      <svg>
-        <svg
-          x="25"
-          y="20"
-          xmlns="http://www.w3.org/2000/svg"
-          width="72"
-          height="72"
-          viewBox="0 0 72 72"
-          fill="none"
-        >
-          <g>
-            <rect x="2" y="2" width="68" height="68" rx="34" fill="#002347" />
-            <rect
-              x="2"
-              y="2"
-              width="68"
-              height="68"
-              rx="34"
-              stroke="white"
-              strokeWidth="4"
-            />
-            <svg x="0" y="2">
-              <path
-                x="2"
-                y="2"
-                d="M29.75 27.5H26.375C24.511 27.5 23 29.011 23 30.875V48.875C23 50.739 24.511 52.25 26.375 52.25H46.625C48.489 52.25 50 50.739 50 48.875V30.875C50 29.011 48.489 27.5 46.625 27.5H43.25M29.75 27.5V33.125M29.75 27.5H43.25M29.75 27.5V25.25C29.75 24.3636 29.9246 23.4858 30.2638 22.6669C30.603 21.8479 31.1002 21.1038 31.727 20.477C32.3538 19.8502 33.0979 19.353 33.9169 19.0138C34.7358 18.6746 35.6136 18.5 36.5 18.5C37.3864 18.5 38.2642 18.6746 39.0831 19.0138C39.9021 19.353 40.6462 19.8502 41.273 20.477C41.8998 21.1038 42.397 21.8479 42.7362 22.6669C43.0754 23.4858 43.25 24.3636 43.25 25.25V27.5M43.25 27.5V33.125"
-                stroke="white"
-                strokeWidth="3.75"
-                strokeLinecap="square"
-              />
-            </svg>
-          </g>
-        </svg>
-      </svg>
-    </div>
-  );
-};
-
-export default Marks;