From 1f4b5bb87ef71f517731650bb855da99c0e84823 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Thu, 11 Apr 2024 11:37:32 +0500
Subject: [PATCH] animate distance circle

---
 src/components/DistanceCircle.tsx             |  28 ++-
 .../InfrastructureFilters.tsx                 |  16 +-
 src/components/MarksContainer.tsx             |   2 +
 src/components/icons/marks/MarkSportIcon.tsx  |  28 +++
 src/marks.json                                | 200 ++++++++++++++++++
 5 files changed, 256 insertions(+), 18 deletions(-)
 create mode 100644 src/components/icons/marks/MarkSportIcon.tsx

diff --git a/src/components/DistanceCircle.tsx b/src/components/DistanceCircle.tsx
index a0facb1..0e6e8d7 100644
--- a/src/components/DistanceCircle.tsx
+++ b/src/components/DistanceCircle.tsx
@@ -1,23 +1,29 @@
+import { useLayoutEffect, useState } from "react";
+
 interface DistanceCircleProps {
   selectedRange: number;
 }
 
+const defaultScreenSize = 2150;
+
 const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
+  const [screenWidth, setScreenWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const _screenWidth = window.innerWidth;
+    setScreenWidth(_screenWidth);
+  }, [setScreenWidth]);
+
   return (
-    <svg
-      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"
-    >
+    <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
       <svg
         className="transition-all duration-300 ease-in-out"
-        width={(0.8 * 1600 * selectedRange) / 850}
+        width={
+          ((screenWidth / defaultScreenSize) * (0.8 * 1600 * selectedRange)) /
+          850
+        }
         x={1080 - (0.8 * 1600 * selectedRange) / 1700}
         y={0}
-        style={{ transition: "all .3s ease" }}
         viewBox="0 0 1600 1600"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -46,7 +52,7 @@ const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
           </radialGradient>
         </defs>
       </svg>
-    </svg>
+    </div>
   );
 };
 
diff --git a/src/components/InfrastructurePage/InfrastructureFilters.tsx b/src/components/InfrastructurePage/InfrastructureFilters.tsx
index edc5704..1da8926 100644
--- a/src/components/InfrastructurePage/InfrastructureFilters.tsx
+++ b/src/components/InfrastructurePage/InfrastructureFilters.tsx
@@ -34,7 +34,6 @@ const InfrastructureFilters = ({
     const filteredMarks = marks.filter(
       (mark) => mark.icon === filter && mark.distance <= selectedRange
     );
-    console.log("filteredMarks", filteredMarks);
 
     setFilteredMarks(filteredMarks);
   }, [selectedRange, filter, marks, setFilteredMarks]);
@@ -42,9 +41,12 @@ const InfrastructureFilters = ({
   return (
     <>
       <div>
-        <h2 className="font-tenor text-2xl mb-8">Инфраструктура</h2>
-        <h3 className="text-[18px] mb-5">Окружение:</h3>
-        <div className="flex flex-col gap-2 mb-8 border-b border-[#9595A2] pb-8">
+        {/* <h2 className="font-tenor 2xl:text-2xl text-xl 2xl:mb-8 mb-5"> */}
+        <h2 className="font-tenor text-xl  mb-5">Инфраструктура</h2>
+        {/* <h3 className="text-[18px] 2xl:mb-5 mb-3">Окружение:</h3> */}
+        <h3 className="text-[18px] mb-3">Окружение:</h3>
+        {/* <div className="flex flex-col 2xl:gap-2 gap-[6px] 2xl:mb-8 mb-5 border-b border-[#9595A2] 2xl:pb-8 pb-5"> */}
+        <div className="flex flex-col 2xl:gap-2 gap-[6px] mb-5 border-b border-[#9595A2] pb-5">
           {environments.map((env) => (
             <button
               data-set={env.type}
@@ -54,15 +56,15 @@ const InfrastructureFilters = ({
                 filter !== env.type
                   ? "opacity-60 border-b-2 border-b-transparent"
                   : "border-b-2 border-b-[#0079C2]"
-              } flex gap-2 font-medium text-sm px-[2px] py-2 transition-all duration-300 ease-in-out`}
+              } flex gap-2 font-medium 2xl:text-sm xl:text-xs px-[2px] py-2 transition-all duration-300 ease-in-out`}
             >
               {env.icon}
               <div>{env.label}</div>
             </button>
           ))}
         </div>
-        <div className="flex flex-col gap-2 border-b border-[#9595A2] pb-8">
-          <h3 className="text-[18px] mb-5">Транспорт:</h3>
+        <div className="flex flex-col gap-2 border-b border-[#9595A2] 2xl:pb-8 pb-5">
+          <h3 className="text-[18px] 2xl:mb-5 mb-3">Транспорт:</h3>
           {transports.map((trans) => (
             <button
               data-set={trans.type}
diff --git a/src/components/MarksContainer.tsx b/src/components/MarksContainer.tsx
index 7f0b468..1986bd9 100644
--- a/src/components/MarksContainer.tsx
+++ b/src/components/MarksContainer.tsx
@@ -3,12 +3,14 @@ import MarkEducationIcon from "./icons/marks/MarkEducationIcon";
 import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
 import MarkHeathyIcon from "./icons/marks/MarkHeathyIcon";
 import MarkShopIcon from "./icons/marks/MarkShopIcon";
+import { MarkSportIcon } from "./icons/marks/MarkSportIcon";
 
 const markIcons: { [key: string]: React.ReactNode } = {
   shop: <MarkShopIcon />,
   food: <MarkFoodIcon />,
   heathy: <MarkHeathyIcon />,
   education: <MarkEducationIcon />,
+  sport: <MarkSportIcon />,
 };
 
 interface MarksContainerProps {
diff --git a/src/components/icons/marks/MarkSportIcon.tsx b/src/components/icons/marks/MarkSportIcon.tsx
new file mode 100644
index 0000000..58e6b3b
--- /dev/null
+++ b/src/components/icons/marks/MarkSportIcon.tsx
@@ -0,0 +1,28 @@
+const MarkSportIcon = () => {
+  return (
+    <svg
+      x={9.5}
+      y={9.5}
+      width="45"
+      height="45"
+      viewBox="0 0 45 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_177_12572)">
+        <path
+          d="M18.5222 26.4775L26.4772 18.5226M34.631 10.3688L36.6198 8.38002M8.37968 36.6201L10.3684 34.6314M18.5222 8.97656L24.8862 2.61267L42.3871 20.1136L36.0231 26.4775L18.5222 8.97656ZM2.61233 24.8865L8.97629 18.5226L26.4772 36.0235L20.1132 42.3874L2.61233 24.8865Z"
+          stroke="white"
+          stroke-width="2.8125"
+          stroke-linecap="square"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_177_12572">
+          <rect width="45" height="45" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+export { MarkSportIcon };
diff --git a/src/marks.json b/src/marks.json
index 6a2a077..81e0c7e 100644
--- a/src/marks.json
+++ b/src/marks.json
@@ -350,5 +350,205 @@
     "y": 1080,
     "icon": "education",
     "distance": 500
+  },
+  {
+    "id": "education_6",
+    "label": "Гимназия №9",
+    "x": 1620,
+    "y": 940,
+    "icon": "education",
+    "distance": 800
+  },
+  {
+    "id": "education_7",
+    "label": "УрФУ ИНЭУ",
+    "x": 1360,
+    "y": 1230,
+    "icon": "education",
+    "distance": 500
+  },
+  {
+    "id": "education_8",
+    "label": "Империя",
+    "x": 1320,
+    "y": 1280,
+    "icon": "education",
+    "distance": 500
+  },
+  {
+    "id": "education_9",
+    "label": "Гимназия №2",
+    "x": 1080,
+    "y": 1350,
+    "icon": "education",
+    "distance": 400
+  },
+  {
+    "id": "education_10",
+    "label": "Детский сад №472",
+    "x": 730,
+    "y": 1180,
+    "icon": "education",
+    "distance": 500
+  },
+  {
+    "id": "education_11",
+    "label": "Детский сад №251",
+    "x": 760,
+    "y": 1120,
+    "icon": "education",
+    "distance": 400
+  },
+  {
+    "id": "education_12",
+    "label": "Детский сад №252 Кораблик",
+    "x": 550,
+    "y": 1110,
+    "icon": "education",
+    "distance": 700
+  },
+  {
+    "id": "education_13",
+    "label": "Детский сад №414",
+    "x": 640,
+    "y": 1310,
+    "icon": "education",
+    "distance": 700
+  },
+  {
+    "id": "sport_1",
+    "label": "Clinch",
+    "x": 700,
+    "y": 1130,
+    "icon": "sport",
+    "distance": 500
+  },
+  {
+    "id": "sport_2",
+    "label": "Точка",
+    "x": 970,
+    "y": 1180,
+    "icon": "sport",
+    "distance": 250
+  },
+  {
+    "id": "sport_3",
+    "label": "Aversfit",
+    "x": 1160,
+    "y": 1220,
+    "icon": "sport",
+    "distance": 300
+  },
+  {
+    "id": "sport_4",
+    "label": "Локомотив-изумруд",
+    "x": 1260,
+    "y": 1320,
+    "icon": "sport",
+    "distance": 450
+  },
+  {
+    "id": "sport_5",
+    "label": "Powerhouse Gym",
+    "x": 1470,
+    "y": 1340,
+    "icon": "sport",
+    "distance": 700
+  },
+  {
+    "id": "sport_6",
+    "label": "Бассейн Дворца Молодежи",
+    "x": 1030,
+    "y": 1450,
+    "icon": "sport",
+    "distance": 550
+  },
+  {
+    "id": "sport_7",
+    "label": "Happy Gymnastic",
+    "x": 660,
+    "y": 1230,
+    "icon": "sport",
+    "distance": 600
+  },
+  {
+    "id": "sport_8",
+    "label": "Encore Fitness",
+    "x": 1100,
+    "y": 910,
+    "icon": "sport",
+    "distance": 250
+  },
+  {
+    "id": "sport_9",
+    "label": "Реформа",
+    "x": 1090,
+    "y": 790,
+    "icon": "sport",
+    "distance": 400
+  },
+  {
+    "id": "sport_10",
+    "label": "Topstretching",
+    "x": 1010,
+    "y": 820,
+    "icon": "sport",
+    "distance": 350
+  },
+  {
+    "id": "sport_11",
+    "label": "Динамо",
+    "x": 1410,
+    "y": 580,
+    "icon": "sport",
+    "distance": 850
+  },
+  {
+    "id": "sport_12",
+    "label": "ДИВС",
+    "x": 1050,
+    "y": 570,
+    "icon": "sport",
+    "distance": 650
+  },
+  {
+    "id": "sport_13",
+    "label": "New Fit",
+    "x": 1250,
+    "y": 990,
+    "icon": "sport",
+    "distance": 400
+  },
+  {
+    "id": "sport_14",
+    "label": "Облака",
+    "x": 1360,
+    "y": 1030,
+    "icon": "sport",
+    "distance": 450
+  },
+  {
+    "id": "sport_15",
+    "label": "Bright Fit",
+    "x": 1540,
+    "y": 1200,
+    "icon": "sport",
+    "distance": 700
+  },
+  {
+    "id": "sport_15",
+    "label": "Bright Fit",
+    "x": 1540,
+    "y": 1200,
+    "icon": "sport",
+    "distance": 700
+  },
+  {
+    "id": "sport_16",
+    "label": "Bright Fit",
+    "x": 1540,
+    "y": 1200,
+    "icon": "sport",
+    "distance": 700
   }
 ]