From 08b92f8bea4c3f8733d4f06873a004ab1a680c90 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Mon, 8 Apr 2024 16:04:09 +0500
Subject: [PATCH] mark

---
 src/components/Mark.tsx          | 46 ++++++++------------------
 src/components/Marks.tsx         | 52 ++++++++++++++++++++---------
 src/pages/InfrastructurePage.tsx | 57 +++++++++++++++++++++++---------
 3 files changed, 92 insertions(+), 63 deletions(-)

diff --git a/src/components/Mark.tsx b/src/components/Mark.tsx
index ac8164b..2e1c62d 100644
--- a/src/components/Mark.tsx
+++ b/src/components/Mark.tsx
@@ -1,29 +1,30 @@
-import { useLayoutEffect, useState } from "react";
+// import { useLayoutEffect, useState } from "react";
 
-function Mark() {
-  const [screenWidth, setScreenWidth] = useState(0);
-  useLayoutEffect(() => {
-    const width = window.innerWidth;
-    setScreenWidth(width);
-  }, []);
+interface MarkProps {
+  x: number;
+  y: number;
+}
+
+function Mark({ x, y }: MarkProps) {
   return (
-    <svg>
+    <svg className="w-full h-full">
       <rect
         width="36"
         height="36"
         rx="18"
         fill="white"
-        style={{ transform: `scaleX(calc(${screenWidth}/1600px))` }}
-        // style={{ transform: "scale(calc(100vw/1600px))" }}
+        x={x}
+        y={y}
+        // style={{ transform: `scaleX(calc(${screenWidth}/1600px))` }}
       />
       <rect
-        x="2"
-        y="2"
+        x={x + 2}
+        y={y + 2}
         width="32"
         height="32"
         rx="16"
         fill="#002347"
-        style={{ transform: "scale(calc(100vw/1600px),calc(100vh/900px))" }}
+        // style={{ transform: "scale(calc(100vw/1600px),calc(100vh/900px))" }}
       />
       {/* <path
         d="M15 14H13.5C12.6716 14 12 14.6716 12 15.5V23.5C12 24.3284 12.6716 25 13.5 25H22.5C23.3284 25 24 24.3284 24 23.5V15.5C24 14.6716 23.3284 14 22.5 14H21M15 14V16.5M15 14H21M15 14V13C15 12.606 15.0776 12.2159 15.2284 11.8519C15.3791 11.488 15.6001 11.1573 15.8787 10.8787C16.1573 10.6001 16.488 10.3791 16.8519 10.2284C17.2159 10.0776 17.606 10 18 10C18.394 10 18.7841 10.0776 19.1481 10.2284C19.512 10.3791 19.8427 10.6001 20.1213 10.8787C20.3999 11.1573 20.6209 11.488 20.7716 11.8519C20.9224 12.2159 21 12.606 21 13V14M21 14V16.5"
@@ -31,25 +32,6 @@ function Mark() {
         strokeWidth="1.66667"
         strokeLinecap="square"
       /> */}
-      <g filter="url(#filter0_d_23_3580)">
-        <rect
-          x="16"
-          y="36"
-          width="2"
-          height="52"
-          fill="white"
-          style={{ transform: "scale(calc(100vw/1600px),calc(100vh/900px))" }}
-        />
-      </g>
-      <g filter="url(#filter1_d_23_3580)">
-        <circle
-          cx="17"
-          cy="90"
-          r="3"
-          fill="white"
-          style={{ transform: "scale(calc(100vw/1600px),calc(100vh/900px))" }}
-        />
-      </g>
     </svg>
   );
 }
diff --git a/src/components/Marks.tsx b/src/components/Marks.tsx
index 5457f4c..0915175 100644
--- a/src/components/Marks.tsx
+++ b/src/components/Marks.tsx
@@ -1,21 +1,41 @@
 const Marks = () => {
   return (
-    <svg x="2338" y="1275">
-      <rect width="36" height="36" rx="18" fill="white" />
-      <rect x="2" y="2" width="32" height="32" rx="16" fill="#002347" />
-      <path
-        d="M15 14H13.5C12.6716 14 12 14.6716 12 15.5V23.5C12 24.3284 12.6716 25 13.5 25H22.5C23.3284 25 24 24.3284 24 23.5V15.5C24 14.6716 23.3284 14 22.5 14H21M15 14V16.5M15 14H21M15 14V13C15 12.606 15.0776 12.2159 15.2284 11.8519C15.3791 11.488 15.6001 11.1573 15.8787 10.8787C16.1573 10.6001 16.488 10.3791 16.8519 10.2284C17.2159 10.0776 17.606 10 18 10C18.394 10 18.7841 10.0776 19.1481 10.2284C19.512 10.3791 19.8427 10.6001 20.1213 10.8787C20.3999 11.1573 20.6209 11.488 20.7716 11.8519C20.9224 12.2159 21 12.606 21 13V14M21 14V16.5"
-        stroke="white"
-        stroke-width="1.66667"
-        stroke-linecap="square"
-      />
-      <g filter="url(#filter0_d_23_3580)">
-        <rect x="16" y="36" width="2" height="52" fill="white" />
-      </g>
-      <g filter="url(#filter1_d_23_3580)">
-        <circle cx="17" cy="90" r="3" fill="white" />
-      </g>
-    </svg>
+    <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>
   );
 };
 
diff --git a/src/pages/InfrastructurePage.tsx b/src/pages/InfrastructurePage.tsx
index 7a3f136..b96fe0c 100644
--- a/src/pages/InfrastructurePage.tsx
+++ b/src/pages/InfrastructurePage.tsx
@@ -1,25 +1,39 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import ImageMarker from "react-image-marker";
 import Button from "../components/Button";
 import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
 import CrossIcon from "../icons/CrossIcon";
 import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters";
-import ImageMarker from "react-image-marker";
 import Mark from "../components/Mark";
+import DistanceCircle from "../components/DistanceCircle";
 
 const markers = [
   {
-    top: 10, //10% of the image relative size from top
-    left: 50, //50% of the image relative size from left
+    top: 40,
+    left: 40,
   },
 ];
 
 function InfrastructurePage() {
   const [selectedRange, setSelectedRange] = useState<number>(800);
+  const [width, setWidth] = useState<number>();
+  const [top, setTop] = useState<number>();
+
+  function handleResize() {
+    setWidth(window.innerWidth);
+    setTop(window.innerWidth / 2 - window.innerHeight / 2);
+  }
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   return (
     <div className="h-screen overflow-hidden">
       {/* <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center overflow-clip"> */}
-      {/* <DistanceCircle selectedRange={selectedRange} /> */}
+      {/*  */}
       {/* <Marks /> */}
       {/* </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">
@@ -34,16 +48,29 @@ function InfrastructurePage() {
         </div>
         <Button text="Генплан" icon={<ArrowLeftIcon />} widthFull />
       </div>
-      {/* <img
-        src={`/images/Infra/NKS.jpg`}
-        alt=""
-        className={`absolute object-cover h-full w-full top-0 left-0 select-none pointer-events-none opacity-100`}
-      /> */}
-      <ImageMarker
-        src={"/images/Infra/NKS.jpg"}
-        markers={markers}
-        markerComponent={Mark}
-      />
+      <div
+        className="absolute left-0"
+        style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
+      >
+        {/* <ImageMarker
+          src="/images/Infra/NKS_Infra_Orto_Box.png"
+          markers={markers}
+          markerComponent={Mark}
+        /> */}
+        <img
+          width={`${width}px`}
+          height={`${width}px`}
+          src="/images/Infra/NKS_Infra_Orto_Box.png"
+          alt=""
+          className=""
+        />
+        <div className="absolute top-0 left-0 w-full h-full">
+          <Mark x={260} y={160} />
+        </div>
+        <div className="absolute top-0">
+          <DistanceCircle selectedRange={selectedRange} />
+        </div>
+      </div>
       {/* <div>
         <svg
           className={`absolute object-cover h-full w-full top-0 left-0 select-none pointer-events-none opacity-100`}