IRTH-2/client/src/components/masterplanPage/map/Clouds.tsx

import { useState } from "react";
import { useTransformEffect } from "react-zoom-pan-pinch";

function Clouds() {
  const [mapScale, setMapScale] = useState(1);

  useTransformEffect(({ state }) => {
    const scale = 1 / state.scale;
    setMapScale(scale);
  });

  return (
    <div
      className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
        "
      style={{
        opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
      }}
    >
      <div
        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
      >
        <img
          src="/images/clouds/cloud-1.png"
          alt=""
          className="scale-[0.6] absolute top-[2%] left-[50%] "
        />
        <img
          src="/images/clouds/cloud-12.png"
          alt=""
          className="scale-[0.6] absolute top-[5%] left-[20%] "
        />
        <img
          src="/images/clouds/cloud-2.png"
          alt=""
          className="scale-[0.6] absolute top-[3%] left-[10%] "
        />
        <img
          src="/images/clouds/cloud-3.png"
          alt=""
          className="scale-[0.6] absolute top-[25%] left-[45%] "
        />
        <img
          src="/images/clouds/cloud-4.png"
          alt=""
          className="scale-[0.6] absolute top-[32%] left-[48%] "
        />
        <img
          src="/images/clouds/cloud-5.png"
          alt=""
          className="scale-[0.6] absolute top-[55%] left-[15%] "
        />
        <img
          src="/images/clouds/cloud-6.png"
          alt=""
          className="scale-[0.6] absolute top-[65%] left-[25%] "
        />
        <img
          src="/images/clouds/cloud-7.png"
          alt=""
          className="scale-[0.6] absolute top-[35%] left-[30%] "
        />
        <img
          src="/images/clouds/cloud-8.png"
          alt=""
          className="scale-[0.6] absolute top-[35%] left-[80%] "
        />
      </div>
      <div
        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
      >
        <img
          src="/images/clouds/cloud-1.png"
          alt=""
          className="scale-[0.6] absolute top-[2%] left-[50%] "
        />
        <img
          src="/images/clouds/cloud-12.png"
          alt=""
          className="scale-[0.6] absolute top-[5%] left-[20%] "
        />
        <img
          src="/images/clouds/cloud-2.png"
          alt=""
          className="scale-[0.6] absolute top-[3%] left-[10%] "
        />
        <img
          src="/images/clouds/cloud-3.png"
          alt=""
          className="scale-[0.6] absolute top-[25%] left-[45%] "
        />
        <img
          src="/images/clouds/cloud-4.png"
          alt=""
          className="scale-[0.6] absolute top-[32%] left-[48%] "
        />
        <img
          src="/images/clouds/cloud-5.png"
          alt=""
          className="scale-[0.6] absolute top-[55%] left-[15%] "
        />
        <img
          src="/images/clouds/cloud-6.png"
          alt=""
          className="scale-[0.6] absolute top-[65%] left-[25%] "
        />
        <img
          src="/images/clouds/cloud-7.png"
          alt=""
          className="scale-[0.6] absolute top-[35%] left-[30%] "
        />
        <img
          src="/images/clouds/cloud-8.png"
          alt=""
          className="scale-[0.6] absolute top-[35%] left-[80%] "
        />
      </div>
    </div>
    // <div
    //   className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex top-[150vw] left-[-150vw]
    //     "
    //   style={{
    //     transform: "rotate(125deg)",
    //     opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
    //   }}
    // >
    //   <div
    //     className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation`}
    //   >
    //     <img
    //       src="/images/clouds/cloud-1.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-0 left-[50%]"
    //     />
    //     <img
    //       src="/images/clouds/cloud-2.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[20%] left-[10%]"
    //     />
    //     <img
    //       src="/images/clouds/cloud-3.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[30%] left-[45%]"
    //     />
    //     <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
    //     <img
    //       src="/images/clouds/cloud-5.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[50%] left-[15%] "
    //     />
    //     <img
    //       src="/images/clouds/cloud-6.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[35%] left-[25%] "
    //     />
    //     <img
    //       src="/images/clouds/cloud-7.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[35%] left-[30%] "
    //     />
    //     <img
    //       src="/images/clouds/cloud-8.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[35%] left-[80%] "
    //     />
    //   </div>
    //   <div
    //     className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation `}
    //   >
    //     <img
    //       src="/images/clouds/cloud-1.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-0 left-[50%]"
    //     />
    //     <img
    //       src="/images/clouds/cloud-2.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[20%] left-[10%]"
    //     />
    //     <img
    //       src="/images/clouds/cloud-3.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[30%] left-[45%]"
    //     />
    //     <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
    //     <img
    //       src="/images/clouds/cloud-5.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[50%] left-[15%] "
    //     />
    //     <img
    //       src="/images/clouds/cloud-6.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[35%] left-[25%] "
    //     />
    //     <img
    //       src="/images/clouds/cloud-7.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[35%] left-[30%] "
    //     />
    //     <img
    //       src="/images/clouds/cloud-8.png"
    //       alt=""
    //       className="scale-[0.6] absolute top-[35%] left-[80%] "
    //     />
    //   </div>
    // </div>
  );
}

export { Clouds };