From f7aa038a8b41f64f709501e680db1807e0c3c47b Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Tue, 9 Apr 2024 18:36:32 +0500
Subject: [PATCH] infrastructure marks

---
 src/components/DistanceCircle.tsx             |  37 +--
 src/components/MarksContainer.tsx             |  10 +-
 .../icons/marks/MarkEducationIcon.tsx         |  36 +++
 src/components/icons/marks/MarkFoodIcon.tsx   |  10 +-
 src/components/icons/marks/MarkHeathyIcon.tsx |  22 ++
 src/marks.json                                | 269 ++++++++++++++++--
 src/pages/Infra2Page.tsx                      |   5 +-
 7 files changed, 318 insertions(+), 71 deletions(-)
 create mode 100644 src/components/icons/marks/MarkEducationIcon.tsx
 create mode 100644 src/components/icons/marks/MarkHeathyIcon.tsx

diff --git a/src/components/DistanceCircle.tsx b/src/components/DistanceCircle.tsx
index 0a53f4e..a0facb1 100644
--- a/src/components/DistanceCircle.tsx
+++ b/src/components/DistanceCircle.tsx
@@ -17,6 +17,7 @@ const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
         width={(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"
@@ -49,40 +50,4 @@ const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
   );
 };
 
-// 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/MarksContainer.tsx b/src/components/MarksContainer.tsx
index 77ab0c5..7f0b468 100644
--- a/src/components/MarksContainer.tsx
+++ b/src/components/MarksContainer.tsx
@@ -1,10 +1,14 @@
 import { Mark } from "../types/Mark";
+import MarkEducationIcon from "./icons/marks/MarkEducationIcon";
 import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
+import MarkHeathyIcon from "./icons/marks/MarkHeathyIcon";
 import MarkShopIcon from "./icons/marks/MarkShopIcon";
 
 const markIcons: { [key: string]: React.ReactNode } = {
   shop: <MarkShopIcon />,
   food: <MarkFoodIcon />,
+  heathy: <MarkHeathyIcon />,
+  education: <MarkEducationIcon />,
 };
 
 interface MarksContainerProps {
@@ -17,8 +21,8 @@ interface MarksContainerProps {
 function MarksContainer({
   marks,
   filteredMarks,
-  markWidth = 64,
-  markHeigth = 64,
+  markWidth = 52,
+  markHeigth = 52,
 }: MarksContainerProps) {
   return (
     <svg
@@ -36,7 +40,7 @@ function MarksContainer({
 
         return (
           <svg
-            className={`transition-opacity duration-300 ease-in-out ${
+            className={`transition-all duration-300 ease-in-out ${
               isFiltered ? "opacity-100" : "opacity-0"
             }`}
             x={mark.x}
diff --git a/src/components/icons/marks/MarkEducationIcon.tsx b/src/components/icons/marks/MarkEducationIcon.tsx
new file mode 100644
index 0000000..d7f47b6
--- /dev/null
+++ b/src/components/icons/marks/MarkEducationIcon.tsx
@@ -0,0 +1,36 @@
+const MarkEducationIcon = () => {
+  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"
+    >
+      <path
+        d="M40.4998 18.5L22.4998 27L4.49976 18.5L22.4998 9L40.4998 18.5Z"
+        stroke="white"
+        strokeWidth="2.8125"
+        strokeLinecap="square"
+      />
+      <ellipse cx="22.5002" cy="18" rx="4.5" ry="3.375" fill="white" />
+      <path
+        d="M21.3748 19.125L15.7498 22.4719V38.25"
+        stroke="white"
+        strokeWidth="2.8125"
+        strokeLinecap="square"
+      />
+      <circle cx="15.1877" cy="39.9375" r="2.8125" fill="white" />
+      <path
+        d="M34.8748 22.5V29.6827C34.8748 30.0393 34.7425 30.5214 34.2594 31.1121C33.7646 31.717 32.955 32.3622 31.7895 32.9524C30.6331 33.538 29.2144 34.0244 27.6049 34.362C25.9987 34.6989 24.2625 34.875 22.4998 34.875C20.7371 34.875 19.0008 34.6989 17.3946 34.362C15.7851 34.0244 14.3664 33.538 13.21 32.9524C12.0445 32.3622 11.2349 31.717 10.7401 31.1121C10.257 30.5214 10.1248 30.0393 10.1248 29.6827L10.1248 22.5"
+        stroke="white"
+        strokeWidth="2.8125"
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+};
+
+export default MarkEducationIcon;
diff --git a/src/components/icons/marks/MarkFoodIcon.tsx b/src/components/icons/marks/MarkFoodIcon.tsx
index b384bbb..b845908 100644
--- a/src/components/icons/marks/MarkFoodIcon.tsx
+++ b/src/components/icons/marks/MarkFoodIcon.tsx
@@ -1,12 +1,6 @@
 function MarkFoodIcon() {
   return (
-    <svg
-      width="64"
-      height="65"
-      viewBox="0 0 64 65"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <>
       <path
         d="M43.8371 46.5041V37.6141M43.8371 37.6141V18.0561C42.0591 16.8708 36.7251 24.8125 36.7251 37.6141H43.8371Z"
         stroke="white"
@@ -17,7 +11,7 @@ function MarkFoodIcon() {
         d="M24.9457 46.5043V47.6156H27.1682V46.5043H24.9457ZM27.1682 18.9453C27.1682 18.3316 26.6706 17.8341 26.0569 17.8341C25.4432 17.8341 24.9457 18.3316 24.9457 18.9453H27.1682ZM32.5022 18.9453C32.5022 18.3316 32.0046 17.8341 31.3909 17.8341C30.7772 17.8341 30.2797 18.3316 30.2797 18.9453H32.5022ZM21.8342 18.9453C21.8342 18.3316 21.3366 17.8341 20.7229 17.8341C20.1092 17.8341 19.6117 18.3316 19.6117 18.9453H21.8342ZM27.1682 46.5043V28.7243H24.9457V46.5043H27.1682ZM27.1682 28.7243V18.9453H24.9457V28.7243H27.1682ZM26.0569 29.8356H28.7239V27.6131H26.0569V29.8356ZM28.7239 28.7243C28.7239 29.8356 28.7259 29.8356 28.7279 29.8356C28.7286 29.8356 28.7306 29.8355 28.732 29.8355C28.7348 29.8355 28.7376 29.8355 28.7404 29.8354C28.7461 29.8354 28.752 29.8352 28.7582 29.8351C28.7704 29.8347 28.7834 29.8341 28.7972 29.8333C28.8247 29.8317 28.8553 29.829 28.8887 29.825C28.9555 29.8168 29.0333 29.8029 29.12 29.7802C29.2949 29.7344 29.4998 29.6543 29.7201 29.5197C30.1651 29.2478 30.6239 28.784 31.033 28.0341C31.8328 26.5676 32.5022 23.8995 32.5022 18.9453H30.2797C30.2797 23.7702 29.6155 25.9915 29.0818 26.9698C28.8241 27.4423 28.6162 27.5897 28.5612 27.6233C28.5314 27.6415 28.528 27.6378 28.557 27.6302C28.5708 27.6266 28.5913 27.6223 28.619 27.6189C28.6329 27.6172 28.6485 27.6157 28.6659 27.6147C28.6747 27.6142 28.6839 27.6138 28.6935 27.6135C28.6983 27.6134 28.7033 27.6132 28.7083 27.6132C28.7109 27.6131 28.7134 27.6131 28.716 27.6131C28.7173 27.6131 28.7193 27.6131 28.7199 27.6131C28.7219 27.6131 28.7239 27.6131 28.7239 28.7243ZM26.0569 27.6131H23.3899V29.8356H26.0569V27.6131ZM23.3899 28.7243C23.3899 27.6131 23.3919 27.6131 23.3939 27.6131C23.3945 27.6131 23.3965 27.6131 23.3978 27.6131C23.4004 27.6131 23.4029 27.6131 23.4055 27.6132C23.4105 27.6132 23.4155 27.6134 23.4203 27.6135C23.4299 27.6138 23.4391 27.6142 23.4479 27.6147C23.4653 27.6157 23.4809 27.6172 23.4948 27.6189C23.5225 27.6223 23.543 27.6266 23.5568 27.6302C23.5858 27.6378 23.5824 27.6415 23.5526 27.6233C23.4976 27.5897 23.2897 27.4423 23.032 26.9698C22.4983 25.9915 21.8342 23.7702 21.8342 18.9453H19.6117C19.6117 23.8995 20.281 26.5676 21.0808 28.0341C21.4899 28.784 21.9487 29.2478 22.3937 29.5197C22.614 29.6543 22.8189 29.7344 22.9938 29.7802C23.0805 29.8029 23.1583 29.8168 23.2251 29.825C23.2585 29.829 23.2891 29.8317 23.3166 29.8333C23.3304 29.8341 23.3434 29.8347 23.3556 29.8351C23.3618 29.8352 23.3677 29.8354 23.3734 29.8354C23.3762 29.8355 23.379 29.8355 23.3818 29.8355C23.3832 29.8355 23.3852 29.8356 23.3859 29.8356C23.3879 29.8356 23.3899 29.8356 23.3899 28.7243ZM23.3899 29.8356C23.3899 29.8356 23.3899 28.7243 23.3899 27.6131C23.3899 27.6131 23.3899 27.6131 23.3899 28.7243C23.3899 29.8356 23.3899 29.8356 23.3899 29.8356C23.3899 28.7243 23.3899 27.6131 23.3899 27.6131V29.8356ZM28.7239 27.6131C28.7239 27.6131 28.7239 28.7243 28.7239 29.8356C28.7239 29.8356 28.7239 29.8356 28.7239 28.7243C28.7239 27.6131 28.7239 27.6131 28.7239 27.6131C28.7239 28.7243 28.7239 29.8356 28.7239 29.8356V27.6131Z"
         fill="white"
       />
-    </svg>
+    </>
   );
 }
 
diff --git a/src/components/icons/marks/MarkHeathyIcon.tsx b/src/components/icons/marks/MarkHeathyIcon.tsx
new file mode 100644
index 0000000..d2c017b
--- /dev/null
+++ b/src/components/icons/marks/MarkHeathyIcon.tsx
@@ -0,0 +1,22 @@
+function MarkHeathyIcon() {
+  return (
+    <svg
+      x={9.5}
+      y={9.5}
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M29.25 4.5H15.75V15.75H4.5V29.25H15.75V40.5H29.25V29.25H40.5V15.75H29.25V4.5Z"
+        stroke="white"
+        strokeWidth="3.375"
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+}
+
+export default MarkHeathyIcon;
diff --git a/src/marks.json b/src/marks.json
index 6705fbe..6a2a077 100644
--- a/src/marks.json
+++ b/src/marks.json
@@ -1,25 +1,4 @@
 [
-  {
-    "id": "shop_1",
-    "x": 900,
-    "y": 1000,
-    "icon": "shop",
-    "distance": 200
-  },
-  {
-    "id": "shop_2",
-    "x": 666,
-    "y": 777,
-    "icon": "shop",
-    "distance": 200
-  },
-  {
-    "id": "shop_3",
-    "x": 500,
-    "y": 900,
-    "icon": "shop",
-    "distance": 200
-  },
   {
     "id": "food_1",
     "label": "Сезоны",
@@ -123,5 +102,253 @@
     "y": 1190,
     "icon": "food",
     "distance": 400
+  },
+  {
+    "id": "food_14",
+    "label": "Monk",
+    "x": 1240,
+    "y": 1340,
+    "icon": "food",
+    "distance": 500
+  },
+  {
+    "id": "food_15",
+    "label": "Simple Coffee",
+    "x": 1350,
+    "y": 1360,
+    "icon": "food",
+    "distance": 600
+  },
+  {
+    "id": "food_16",
+    "label": "Негодяи",
+    "x": 1420,
+    "y": 1270,
+    "icon": "food",
+    "distance": 600
+  },
+  {
+    "id": "food_17",
+    "label": "Своя компания",
+    "x": 1100,
+    "y": 1420,
+    "icon": "food",
+    "distance": 550
+  },
+  {
+    "id": "food_18",
+    "label": "Tenet",
+    "x": 1480,
+    "y": 1250,
+    "icon": "food",
+    "distance": 650
+  },
+  {
+    "id": "food_19",
+    "label": "Кстати",
+    "x": 1150,
+    "y": 1460,
+    "icon": "food",
+    "distance": 600
+  },
+  {
+    "id": "food_20",
+    "label": "Сенатор",
+    "x": 720,
+    "y": 1320,
+    "icon": "food",
+    "distance": 600
+  },
+  {
+    "id": "food_21",
+    "label": "Crab",
+    "x": 600,
+    "y": 1130,
+    "icon": "food",
+    "distance": 650
+  },
+  {
+    "id": "food_22",
+    "label": "Гастроли",
+    "x": 1520,
+    "y": 940,
+    "icon": "food",
+    "distance": 700
+  },
+  {
+    "id": "food_23",
+    "label": "Рада",
+    "x": 1540,
+    "y": 1170,
+    "icon": "food",
+    "distance": 700
+  },
+  {
+    "id": "food_24",
+    "label": "Геге",
+    "x": 1530,
+    "y": 890,
+    "icon": "food",
+    "distance": 700
+  },
+  {
+    "id": "food_25",
+    "label": "Мята Lounge",
+    "x": 1580,
+    "y": 1230,
+    "icon": "food",
+    "distance": 750
+  },
+  {
+    "id": "food_26",
+    "label": "Нячанг сити",
+    "x": 1550,
+    "y": 1330,
+    "icon": "food",
+    "distance": 800
+  },
+  {
+    "id": "shop_1",
+    "label": "Европа",
+    "x": 1470,
+    "y": 1070,
+    "icon": "shop",
+    "distance": 600
+  },
+  {
+    "id": "shop_2",
+    "label": "Пассаж",
+    "x": 1570,
+    "y": 1150,
+    "icon": "shop",
+    "distance": 750
+  },
+  {
+    "id": "shop_3",
+    "label": "Успенский",
+    "x": 1520,
+    "y": 1200,
+    "icon": "shop",
+    "distance": 700
+  },
+  {
+    "id": "shop_4",
+    "label": "Московский",
+    "x": 1140,
+    "y": 1460,
+    "icon": "shop",
+    "distance": 600
+  },
+  {
+    "id": "heathy_1",
+    "label": "Центр косметологии и пластической хирургии",
+    "x": 1010,
+    "y": 1340,
+    "icon": "heathy",
+    "distance": 400
+  },
+  {
+    "id": "heathy_2",
+    "label": "Поликлиника №2",
+    "x": 900,
+    "y": 1290,
+    "icon": "heathy",
+    "distance": 400
+  },
+  {
+    "id": "heathy_3",
+    "label": "Больница №2 им. Миславского",
+    "x": 780,
+    "y": 1170,
+    "icon": "heathy",
+    "distance": 450
+  },
+  {
+    "id": "heathy_4",
+    "label": "ЦГБ №2",
+    "x": 860,
+    "y": 1050,
+    "icon": "heathy",
+    "distance": 300
+  },
+  {
+    "id": "heathy_5",
+    "label": "Медиаком",
+    "x": 850,
+    "y": 870,
+    "icon": "heathy",
+    "distance": 400
+  },
+  {
+    "id": "heathy_6",
+    "label": "Детская поликлиника",
+    "x": 1480,
+    "y": 850,
+    "icon": "heathy",
+    "distance": 650
+  },
+  {
+    "id": "heathy_7",
+    "label": "Больница №2",
+    "x": 1520,
+    "y": 810,
+    "icon": "heathy",
+    "distance": 750
+  },
+  {
+    "id": "heathy_8",
+    "label": "База стоматологической поликлиники",
+    "x": 1360,
+    "y": 1330,
+    "icon": "heathy",
+    "distance": 600
+  },
+  {
+    "id": "heathy_9",
+    "label": "Бонум",
+    "x": 1280,
+    "y": 1520,
+    "icon": "heathy",
+    "distance": 700
+  },
+  {
+    "id": "education_1",
+    "label": "Детский сад №9",
+    "x": 1120,
+    "y": 1160,
+    "icon": "education",
+    "distance": 200
+  },
+  {
+    "id": "education_2",
+    "label": "Детский сад №582",
+    "x": 1280,
+    "y": 1020,
+    "icon": "education",
+    "distance": 350
+  },
+  {
+    "id": "education_3",
+    "label": "Детский сад №9",
+    "x": 1220,
+    "y": 1260,
+    "icon": "education",
+    "distance": 400
+  },
+  {
+    "id": "education_4",
+    "label": "Музыкальный колледж",
+    "x": 1190,
+    "y": 1300,
+    "icon": "education",
+    "distance": 400
+  },
+  {
+    "id": "education_5",
+    "label": "Театральный институт",
+    "x": 1420,
+    "y": 1080,
+    "icon": "education",
+    "distance": 500
   }
 ]
diff --git a/src/pages/Infra2Page.tsx b/src/pages/Infra2Page.tsx
index bdc10dd..12af7ad 100644
--- a/src/pages/Infra2Page.tsx
+++ b/src/pages/Infra2Page.tsx
@@ -41,9 +41,8 @@ function Infra2Page() {
           className=""
         />
         <MarksContainer marks={marks} filteredMarks={filteredMarks} />
-        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center overflow-clip">
-          <DistanceCircle selectedRange={selectedRange} />
-        </div>
+
+        <DistanceCircle selectedRange={selectedRange} />
       </div>
       <div className="absolute h-full top-0 left-0 z-[99999999] w-[260px] bg-[#002347] bg-opacity-90 select-none px-6 py-5 flex flex-col justify-between gap-8">
         <div className="flex flex-col gap-3">