zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

danil merge #1

Merged
zojgame merged 2 commits from danil into master 2024-07-29 11:10:43 +05:00
Conversation 0 Commits 2 Files Changed 16
+241
16 changed files with 241 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/public/images/clouds/cloud-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

client/public/images/clouds/cloud-10.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

client/public/images/clouds/cloud-11.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

client/public/images/clouds/cloud-12.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 331 KiB

client/public/images/clouds/cloud-13.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

client/public/images/clouds/cloud-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

client/public/images/clouds/cloud-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

client/public/images/clouds/cloud-4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

client/public/images/clouds/cloud-5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

client/public/images/clouds/cloud-6.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

client/public/images/clouds/cloud-7.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

client/public/images/clouds/cloud-8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

client/public/images/clouds/cloud-9.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

client/src/components/masterplanPage/map/Clouds.tsx
+211
View File
@@ -0,0 +1,211 @@
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 };
client/src/components/masterplanPage/map/Map.tsx
+9
View File
@@ -5,6 +5,7 @@ import Marker from "./Marker";
import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker";
import ZoomControlls from "./ZoomControlls";
import { Clouds } from "./Clouds";
const Map = () => {
const { hoveredMarker } = useMarker();
@@ -39,6 +40,14 @@ const Map = () => {
}}
wrapperClass={"top-[-50px] left-[-200px]"}
>
<ImageMarker
src="images/Map.jpg"
markers={imageMarkers}
markerComponent={Clouds}
extraClass={`transition-all absolute top-0 left-0 duration-300 ease-in-out z-50 ${
hoveredMarker ? "brightness-[.7]" : ""
}`}
/>
<ImageMarker
src="images/Map.jpg"
markers={imageMarkers}
client/src/index.css
+21
View File
@@ -49,6 +49,27 @@ body {
}
@layer components {
.infinite-animation {
animation: infiniter 75s linear infinite;
}
@keyframes infiniter {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
/* @keyframes infiniter {
from {
transform: "rotate(0deg)";
}
to {
transform: "rotate(360deg)";
}
} */
.desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026;
}