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

Compare commits

base: zojgame/IRTH:ef425137ba47d85939bc11f11c4c990fc0bc252d
Branches Tags
zojgame/IRTH:master zojgame/IRTH:danil
...
compare: zojgame/IRTH:7bf6c6ec8420fd181b6c160488732f51d1ee0cad
Branches Tags
zojgame/IRTH:master zojgame/IRTH:danil

2 Commits
ef425137ba ... 7bf6c6ec84

Author SHA1 Message Date
zojgame 7bf6c6ec84 font fix + floor desc on mobile 2024-06-28 18:50:51 +05:00
zojgame 8e0ebca72a env 2024-06-28 11:01:37 +05:00
11 changed files with 1783 additions and 1088 deletions
Expand all files Collapse all files
client/src/components/Button.tsx
+5 -2
View File
@@ -17,6 +17,7 @@ interface ButtonProps {
disabled?: boolean;
isCircleRounded?: boolean;
type?: "button" | "submit" | "reset";
iconPos?: "right" | "left";
}
const Button = ({
@@ -27,7 +28,7 @@ const Button = ({
disabled = false,
onClick,
type = "button",
iconPos = "left",
isCircleRounded = false,
}: ButtonProps) => {
const backgroundColor = backgroundColors[buttonType];
@@ -48,8 +49,10 @@ const Button = ({
className ? className : ""
}`}
>
{icon && <div>{icon}</div>}
{/* {icon && <div>{icon}</div>} */}
{icon && iconPos === "left" && <div>{icon}</div>}
{text && <div>{text}</div>}
{icon && iconPos === "right" && <div>{icon}</div>}
</button>
);
};
client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
-1
View File
@@ -39,7 +39,6 @@ const FloorSidebar = ({
function handleMouseMove(e: MouseEvent) {
const y = e.clientY - 175;
const x = e.clientX - window.innerWidth / 2 - 50;
setMousePos([x, y]);
}
client/src/components/complexWingPage/SequenceWing.tsx
-1019
View File
File diff suppressed because it is too large Load Diff
client/src/components/complexWingPage/SequenceWing/FloorNumbers.tsx
+399
View File
@@ -0,0 +1,399 @@
const FloorNumbers = () => {
return (
<>
<svg
y={745.34}
x={691.44}
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M8.5 11.11C7.15 11.11 6.31 10.57 5.88 9.92L6.85 9.19C7.23 9.75 7.74 10.03 8.47 10.03C9.39 10.03 9.9 9.57 9.9 8.9C9.9 8.22 9.36 7.76 8.51 7.76H7.66V6.73H8.5C9.28 6.73 9.76 6.3 9.76 5.68C9.76 5.06 9.3 4.63 8.47 4.63C7.78 4.63 7.31 4.92 6.98 5.39L6.06 4.66C6.53 4.02 7.3 3.55 8.51 3.55C10.19 3.55 11.14 4.41 11.14 5.56C11.14 6.33 10.71 6.9 10 7.18V7.2C10.84 7.52 11.29 8.14 11.29 8.97C11.29 10.2 10.27 11.11 8.5 11.11ZM12.906 11V9.9H14.646V5.1C14.096 5.45 13.496 5.67 12.906 5.83V4.69C13.716 4.45 14.396 4.12 14.946 3.66H16.036V9.9H17.756V11H12.906Z"
fill="white"
/>
</svg>
<svg
y={764.34}
x={691.44}
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M8.5 11.11C7.15 11.11 6.31 10.57 5.88 9.92L6.85 9.19C7.23 9.75 7.74 10.03 8.47 10.03C9.39 10.03 9.9 9.57 9.9 8.9C9.9 8.22 9.36 7.76 8.51 7.76H7.66V6.73H8.5C9.28 6.73 9.76 6.3 9.76 5.68C9.76 5.06 9.3 4.63 8.47 4.63C7.78 4.63 7.31 4.92 6.98 5.39L6.06 4.66C6.53 4.02 7.3 3.55 8.51 3.55C10.19 3.55 11.14 4.41 11.14 5.56C11.14 6.33 10.71 6.9 10 7.18V7.2C10.84 7.52 11.29 8.14 11.29 8.97C11.29 10.2 10.27 11.11 8.5 11.11ZM15.126 11.11C12.826 11.11 12.336 9.28 12.336 7.34C12.336 5.41 12.816 3.55 15.116 3.55C17.426 3.55 17.916 5.38 17.916 7.32C17.916 9.25 17.436 11.11 15.126 11.11ZM15.126 10.03C16.396 10.03 16.526 8.64 16.526 7.33C16.526 6.02 16.396 4.63 15.126 4.63C13.846 4.63 13.726 6.02 13.726 7.33C13.726 8.64 13.846 10.03 15.126 10.03Z"
fill="white"
/>
</svg>
<svg
y={783.34}
x={691.44}
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM12.736 10.76L13.176 9.7C13.486 9.87 13.936 10.03 14.456 10.03C15.896 10.03 16.436 8.92 16.506 7.44H16.486C16.046 8.02 15.276 8.26 14.606 8.26C13.256 8.26 12.306 7.34 12.306 5.97C12.306 4.55 13.336 3.55 15.016 3.55C17.236 3.55 17.856 5.33 17.856 7.07C17.856 9.02 17.096 11.11 14.426 11.11C13.696 11.11 13.146 10.96 12.736 10.76ZM14.976 7.21C15.646 7.21 16.346 6.86 16.346 6.02C16.346 5.36 15.916 4.62 14.966 4.62C14.166 4.62 13.676 5.14 13.676 5.92C13.676 6.67 14.136 7.21 14.976 7.21Z"
fill="white"
/>
</svg>
<svg
y={802.34}
x={691.44}
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM15.116 11.11C13.336 11.11 12.326 10.24 12.326 9.01C12.326 8.17 12.796 7.58 13.646 7.24V7.22C12.926 6.92 12.486 6.32 12.486 5.55C12.486 4.4 13.456 3.55 15.116 3.55C16.786 3.55 17.756 4.4 17.756 5.55C17.756 6.32 17.306 6.89 16.586 7.18V7.2C17.426 7.55 17.916 8.17 17.916 9.01C17.916 10.24 16.886 11.11 15.116 11.11ZM15.116 6.78C15.866 6.78 16.386 6.31 16.386 5.68C16.386 5.07 15.926 4.62 15.116 4.62C14.316 4.62 13.856 5.07 13.856 5.68C13.856 6.31 14.376 6.78 15.116 6.78ZM15.116 7.72C14.286 7.72 13.716 8.21 13.716 8.91C13.716 9.57 14.226 10.04 15.116 10.04C16.016 10.04 16.526 9.57 16.526 8.9C16.526 8.21 15.956 7.72 15.116 7.72Z"
fill="white"
/>
</svg>
<svg
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
y={821.34}
x={691.44}
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM13.646 11L16.276 4.76H12.506V3.66H17.776V4.39L15.056 11H13.646Z"
fill="white"
/>
</svg>
<svg
y={840.34}
x={691.44}
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM17.596 3.96L17.136 4.97C16.746 4.75 16.316 4.63 15.836 4.63C14.426 4.63 13.826 5.65 13.756 7.14H13.776C14.196 6.63 14.906 6.35 15.656 6.35C17.106 6.35 18.016 7.35 18.016 8.68C18.016 10.09 17.006 11.11 15.276 11.11C13.046 11.11 12.386 9.39 12.386 7.6C12.386 5.59 13.216 3.55 15.826 3.55C16.596 3.55 17.156 3.73 17.596 3.96ZM15.306 10.04C16.146 10.04 16.636 9.49 16.636 8.72C16.636 7.97 16.176 7.38 15.286 7.38C14.536 7.38 13.896 7.81 13.896 8.61C13.896 9.23 14.286 10.04 15.306 10.04Z"
fill="white"
/>
</svg>
<svg
y={859.34}
x={691.44}
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM14.336 4.76L14.206 6.55C14.486 6.43 14.836 6.34 15.266 6.34C16.706 6.34 17.746 7.25 17.746 8.67C17.746 10.09 16.716 11.11 14.876 11.11C13.636 11.11 12.856 10.65 12.406 10.09L13.306 9.27C13.696 9.75 14.196 10.03 14.886 10.03C15.806 10.03 16.356 9.51 16.356 8.69C16.356 7.88 15.776 7.33 14.836 7.33C14.386 7.33 14.066 7.46 13.796 7.62H12.776L13.086 3.66H17.336V4.76H14.336Z"
fill="white"
/>
</svg>
<svg
y={878.34}
x={691.44}
width="24"
height="14"
viewBox="0 0 24 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.13 11V10.05L8.72 7.51C9.36 6.88 9.74 6.32 9.74 5.72C9.74 5.09 9.33 4.64 8.52 4.64C7.82 4.64 7.4 4.98 7 5.51L6.07 4.79C6.65 4.01 7.45 3.55 8.62 3.55C10.2 3.55 11.13 4.42 11.13 5.66C11.13 6.42 10.79 7.14 9.91 8L7.97 9.88V9.9H11.27V11H6.13ZM18.1191 8.38V9.41H16.8691V11H15.4891V9.41H11.9491V8.55L15.3691 3.66H16.8691V8.38H18.1191ZM13.3291 8.38H15.4891V5.32H15.4691L13.3291 8.38Z"
fill="white"
/>
</svg>
<svg
y={921.34}
x={642.44}
width="73"
height="18"
viewBox="0 0 73 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="73" height="18" rx="9" fill="#0D1922" fillOpacity="0.4" />
<path
d="M11.25 13.11C9.93 13.11 8.94 12.71 8.2 11.97L9.05 11.05C9.61 11.64 10.39 11.98 11.26 11.98C12.33 11.98 12.81 11.56 12.81 10.91C12.81 10.2 12.14 10.01 10.99 9.74C9.71 9.43 8.47 8.99 8.47 7.5C8.47 6.17 9.49 5.21 11.31 5.21C12.5 5.21 13.41 5.6 14.1 6.28L13.31 7.21C12.78 6.67 12.11 6.34 11.29 6.34C10.36 6.34 9.9 6.78 9.9 7.36C9.9 8.06 10.54 8.21 11.67 8.49C13.02 8.83 14.23 9.25 14.23 10.77C14.23 12.15 13.17 13.11 11.25 13.11ZM18.4639 13L17.0839 10.7H16.5539V13H15.2039V5.32H16.5539V9.72H17.0939L18.3939 7.63H19.9539L18.2339 10.2L20.0439 13H18.4639ZM24.3887 7.63H25.7587L23.5687 13.36C23.1487 14.46 22.6487 14.94 21.6587 14.94C21.3387 14.94 21.0987 14.89 20.9187 14.83V13.85C21.0487 13.88 21.1987 13.91 21.3887 13.91C21.8687 13.91 22.1487 13.73 22.3387 13.13L20.2387 7.63H21.6687L23.0187 11.6H23.0387L24.3887 7.63ZM32.5427 8.86H35.6627V13H34.3927L34.3727 12.09H34.3527C33.9727 12.66 33.2527 13.11 32.1827 13.11C29.9727 13.11 28.7427 11.39 28.7427 9.22C28.7427 6.98 30.0627 5.21 32.4927 5.21C33.8727 5.21 34.9127 5.8 35.5727 6.78L34.5127 7.5C34.0627 6.77 33.4227 6.35 32.5227 6.35C31.0027 6.35 30.1927 7.57 30.1927 9.19C30.1927 10.84 30.9727 11.98 32.4427 11.98C33.5527 11.98 34.3027 11.32 34.3027 10.19V9.98H32.5427V8.86ZM41.3213 13H40.0513L40.0213 12.24H40.0013C39.6913 12.78 39.1613 13.11 38.4313 13.11C37.4013 13.11 36.7213 12.43 36.7213 11.48C36.7213 10.82 37.0413 10.32 37.7413 10.08C38.2913 9.89 39.1313 9.84 39.9813 9.81V9.41C39.9813 8.92 39.6413 8.56 39.0113 8.56C38.4313 8.56 38.0913 8.85 37.9313 9.27L36.8913 8.76C37.2513 7.94 37.9813 7.52 39.0713 7.52C40.5213 7.52 41.3213 8.23 41.3213 9.41V13ZM38.8613 12.1C39.5413 12.1 39.9813 11.59 39.9813 10.96V10.67C39.6613 10.69 39.2113 10.72 38.8512 10.77C38.4213 10.83 38.0613 10.98 38.0613 11.42C38.0613 11.81 38.3513 12.1 38.8613 12.1ZM42.7039 13V7.63H43.9739L44.0039 8.46H44.0239C44.3539 7.84 44.8239 7.52 45.3739 7.52C45.5639 7.52 45.7239 7.56 45.8639 7.61V8.79C45.7539 8.76 45.5539 8.73 45.3539 8.73C44.5039 8.73 44.0539 9.29 44.0539 9.92V13H42.7039ZM48.6773 13.11C47.2373 13.11 46.3773 11.89 46.3773 10.36C46.3773 8.76 47.2873 7.52 48.7273 7.52C49.4073 7.52 49.9773 7.81 50.3773 8.33H50.3973V5.32H51.7473V13H50.4773L50.4473 12.19H50.4273C50.0173 12.78 49.3873 13.11 48.6773 13.11ZM49.0673 12.05C49.9573 12.05 50.4373 11.31 50.4373 10.31C50.4373 9.27 49.9573 8.58 49.0873 8.58C48.1773 8.58 47.7473 9.38 47.7473 10.33C47.7473 11.23 48.1673 12.05 49.0673 12.05ZM54.1734 9.84H56.6034C56.5434 9.08 56.2134 8.55 55.4234 8.55C54.6434 8.55 54.2534 9.07 54.1734 9.84ZM56.8934 11.43L57.7534 12.19C57.2734 12.76 56.5834 13.11 55.5734 13.11C53.7534 13.11 52.7934 11.99 52.7934 10.32C52.7934 8.7 53.7434 7.52 55.4334 7.52C57.1034 7.52 57.9434 8.67 57.9434 10.15C57.9434 10.35 57.9334 10.6 57.9034 10.75H54.1734C54.2734 11.57 54.7134 12.08 55.6034 12.08C56.1234 12.08 56.5634 11.87 56.8934 11.43ZM58.993 13V7.63H60.263L60.293 8.39H60.313C60.643 7.85 61.223 7.52 61.953 7.52C63.083 7.52 63.813 8.26 63.813 9.37V13H62.463V9.57C62.463 9.02 62.133 8.58 61.503 8.58C60.783 8.58 60.343 9.09 60.343 9.77V13H58.993Z"
fill="white"
/>
</svg>
<svg
y={969.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.63 11V10.05L9.22 7.51C9.86 6.88 10.24 6.32 10.24 5.72C10.24 5.09 9.83 4.64 9.02 4.64C8.32 4.64 7.9 4.98 7.5 5.51L6.57 4.79C7.15 4.01 7.95 3.55 9.12 3.55C10.7 3.55 11.63 4.42 11.63 5.66C11.63 6.42 11.29 7.14 10.41 8L8.47 9.88V9.9H11.77V11H6.63ZM13.406 11V9.9H15.146V5.1C14.596 5.45 13.996 5.67 13.406 5.83V4.69C14.216 4.45 14.896 4.12 15.446 3.66H16.536V9.9H18.256V11H13.406Z"
fill="white"
/>
</svg>
<svg
y={990.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.63 11V10.05L9.22 7.51C9.86 6.88 10.24 6.32 10.24 5.72C10.24 5.09 9.83 4.64 9.02 4.64C8.32 4.64 7.9 4.98 7.5 5.51L6.57 4.79C7.15 4.01 7.95 3.55 9.12 3.55C10.7 3.55 11.63 4.42 11.63 5.66C11.63 6.42 11.29 7.14 10.41 8L8.47 9.88V9.9H11.77V11H6.63ZM15.626 11.11C13.326 11.11 12.836 9.28 12.836 7.34C12.836 5.41 13.316 3.55 15.616 3.55C17.926 3.55 18.416 5.38 18.416 7.32C18.416 9.25 17.936 11.11 15.626 11.11ZM15.626 10.03C16.896 10.03 17.026 8.64 17.026 7.33C17.026 6.02 16.896 4.63 15.626 4.63C14.346 4.63 14.226 6.02 14.226 7.33C14.226 8.64 14.346 10.03 15.626 10.03Z"
fill="white"
/>
</svg>
<svg
y={1009.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.236 10.76L13.676 9.7C13.986 9.87 14.436 10.03 14.956 10.03C16.396 10.03 16.936 8.92 17.006 7.44H16.986C16.546 8.02 15.776 8.26 15.106 8.26C13.756 8.26 12.806 7.34 12.806 5.97C12.806 4.55 13.836 3.55 15.516 3.55C17.736 3.55 18.356 5.33 18.356 7.07C18.356 9.02 17.596 11.11 14.926 11.11C14.196 11.11 13.646 10.96 13.236 10.76ZM15.476 7.21C16.146 7.21 16.846 6.86 16.846 6.02C16.846 5.36 16.416 4.62 15.466 4.62C14.666 4.62 14.176 5.14 14.176 5.92C14.176 6.67 14.636 7.21 15.476 7.21Z"
fill="white"
/>
</svg>
<svg
y={1028.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM15.616 11.11C13.836 11.11 12.826 10.24 12.826 9.01C12.826 8.17 13.296 7.58 14.146 7.24V7.22C13.426 6.92 12.986 6.32 12.986 5.55C12.986 4.4 13.956 3.55 15.616 3.55C17.286 3.55 18.256 4.4 18.256 5.55C18.256 6.32 17.806 6.89 17.086 7.18V7.2C17.926 7.55 18.416 8.17 18.416 9.01C18.416 10.24 17.386 11.11 15.616 11.11ZM15.616 6.78C16.366 6.78 16.886 6.31 16.886 5.68C16.886 5.07 16.426 4.62 15.616 4.62C14.816 4.62 14.356 5.07 14.356 5.68C14.356 6.31 14.876 6.78 15.616 6.78ZM15.616 7.72C14.786 7.72 14.216 8.21 14.216 8.91C14.216 9.57 14.726 10.04 15.616 10.04C16.516 10.04 17.026 9.57 17.026 8.9C17.026 8.21 16.456 7.72 15.616 7.72Z"
fill="white"
/>
</svg>
<svg
y={1047.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.3648 11L15.9948 4.76H12.2248V3.66H17.4948V4.39L14.7748 11H13.3648Z"
fill="white"
/>
</svg>
<svg
y={1066.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM18.096 3.96L17.636 4.97C17.246 4.75 16.816 4.63 16.336 4.63C14.926 4.63 14.326 5.65 14.256 7.14H14.276C14.696 6.63 15.406 6.35 16.156 6.35C17.606 6.35 18.516 7.35 18.516 8.68C18.516 10.09 17.506 11.11 15.776 11.11C13.546 11.11 12.886 9.39 12.886 7.6C12.886 5.59 13.716 3.55 16.326 3.55C17.096 3.55 17.656 3.73 18.096 3.96ZM15.806 10.04C16.646 10.04 17.136 9.49 17.136 8.72C17.136 7.97 16.676 7.38 15.786 7.38C15.036 7.38 14.396 7.81 14.396 8.61C14.396 9.23 14.786 10.04 15.806 10.04Z"
fill="white"
/>
</svg>
<svg
y={1085.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM14.7579 4.76L14.6279 6.55C14.9079 6.43 15.2579 6.34 15.6879 6.34C17.1279 6.34 18.1679 7.25 18.1679 8.67C18.1679 10.09 17.1379 11.11 15.2979 11.11C14.0579 11.11 13.2779 10.65 12.8279 10.09L13.7279 9.27C14.1179 9.75 14.6179 10.03 15.3079 10.03C16.2279 10.03 16.7779 9.51 16.7779 8.69C16.7779 7.88 16.1979 7.33 15.2579 7.33C14.8079 7.33 14.4879 7.46 14.2179 7.62H13.1979L13.5079 3.66H17.7579V4.76H14.7579Z"
fill="white"
/>
</svg>
<svg
y={1104.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM18.746 8.38V9.41H17.496V11H16.116V9.41H12.576V8.55L15.996 3.66H17.496V8.38H18.746ZM13.956 8.38H16.116V5.32H16.096L13.956 8.38Z"
fill="white"
/>
</svg>
<svg
y={1123.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM15.3379 11.11C13.9879 11.11 13.1479 10.57 12.7179 9.92L13.6879 9.19C14.0679 9.75 14.5779 10.03 15.3079 10.03C16.2279 10.03 16.7379 9.57 16.7379 8.9C16.7379 8.22 16.1979 7.76 15.3479 7.76H14.4979V6.73H15.3379C16.1179 6.73 16.5979 6.3 16.5979 5.68C16.5979 5.06 16.1379 4.63 15.3079 4.63C14.6179 4.63 14.1479 4.92 13.8179 5.39L12.8979 4.66C13.3679 4.02 14.1379 3.55 15.3479 3.55C17.0279 3.55 17.9779 4.41 17.9779 5.56C17.9779 6.33 17.5479 6.9 16.8379 7.18V7.2C17.6779 7.52 18.1279 8.14 18.1279 8.97C18.1279 10.2 17.1079 11.11 15.3379 11.11Z"
fill="white"
/>
</svg>
<svg
y={1142.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.046 11V10.05L15.636 7.51C16.276 6.88 16.656 6.32 16.656 5.72C16.656 5.09 16.246 4.64 15.436 4.64C14.736 4.64 14.316 4.98 13.916 5.51L12.986 4.79C13.566 4.01 14.366 3.55 15.536 3.55C17.116 3.55 18.046 4.42 18.046 5.66C18.046 6.42 17.706 7.14 16.826 8L14.886 9.88V9.9H18.186V11H13.046Z"
fill="white"
/>
</svg>
<svg
y={1161.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM13.406 11V9.9H15.146V5.1C14.596 5.45 13.996 5.67 13.406 5.83V4.69C14.216 4.45 14.896 4.12 15.446 3.66H16.536V9.9H18.256V11H13.406Z"
fill="white"
/>
</svg>
<svg
y={1180.34}
x={691.44}
width="25"
height="14"
viewBox="0 0 25 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="25" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.99 11V9.9H8.73V5.1C8.18 5.45 7.58 5.67 6.99 5.83V4.69C7.8 4.45 8.48 4.12 9.03 3.66H10.12V9.9H11.84V11H6.99ZM15.626 11.11C13.326 11.11 12.836 9.28 12.836 7.34C12.836 5.41 13.316 3.55 15.616 3.55C17.926 3.55 18.416 5.38 18.416 7.32C18.416 9.25 17.936 11.11 15.626 11.11ZM15.626 10.03C16.896 10.03 17.026 8.64 17.026 7.33C17.026 6.02 16.896 4.63 15.626 4.63C14.346 4.63 14.226 6.02 14.226 7.33C14.226 8.64 14.346 10.03 15.626 10.03Z"
fill="white"
/>
</svg>
<svg
y={1199.34}
x={694.44}
width="19"
height="14"
viewBox="0 0 19 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M6.82 10.76L7.26 9.7C7.57 9.87 8.02 10.03 8.54 10.03C9.98 10.03 10.52 8.92 10.59 7.44H10.57C10.13 8.02 9.36 8.26 8.69 8.26C7.34 8.26 6.39 7.34 6.39 5.97C6.39 4.55 7.42 3.55 9.1 3.55C11.32 3.55 11.94 5.33 11.94 7.07C11.94 9.02 11.18 11.11 8.51 11.11C7.78 11.11 7.23 10.96 6.82 10.76ZM9.06 7.21C9.73 7.21 10.43 6.86 10.43 6.02C10.43 5.36 10 4.62 9.05 4.62C8.25 4.62 7.76 5.14 7.76 5.92C7.76 6.67 8.22 7.21 9.06 7.21Z"
fill="white"
/>
</svg>
<svg
y={1218.34}
x={694.44}
width="19"
height="14"
viewBox="0 0 19 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M9.2 11.11C7.42 11.11 6.41 10.24 6.41 9.01C6.41 8.17 6.88 7.58 7.73 7.24V7.22C7.01 6.92 6.57 6.32 6.57 5.55C6.57 4.4 7.54 3.55 9.2 3.55C10.87 3.55 11.84 4.4 11.84 5.55C11.84 6.32 11.39 6.89 10.67 7.18V7.2C11.51 7.55 12 8.17 12 9.01C12 10.24 10.97 11.11 9.2 11.11ZM9.2 6.78C9.95 6.78 10.47 6.31 10.47 5.68C10.47 5.07 10.01 4.62 9.2 4.62C8.4 4.62 7.94 5.07 7.94 5.68C7.94 6.31 8.46 6.78 9.2 6.78ZM9.2 7.72C8.37 7.72 7.8 8.21 7.8 8.91C7.8 9.57 8.31 10.04 9.2 10.04C10.1 10.04 10.61 9.57 10.61 8.9C10.61 8.21 10.04 7.72 9.2 7.72Z"
fill="white"
/>
</svg>
<svg
y={1237.34}
x={694.44}
width="19"
height="14"
viewBox="0 0 19 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M7.73 11L10.36 4.76H6.59V3.66H11.86V4.39L9.14 11H7.73Z"
fill="white"
/>
</svg>
<svg
y={1256.34}
x={694.44}
width="19"
height="14"
viewBox="0 0 19 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M11.68 3.96L11.22 4.97C10.83 4.75 10.4 4.63 9.92 4.63C8.51 4.63 7.91 5.65 7.84 7.14H7.86C8.28 6.63 8.99 6.35 9.74 6.35C11.19 6.35 12.1 7.35 12.1 8.68C12.1 10.09 11.09 11.11 9.36 11.11C7.13 11.11 6.47 9.39 6.47 7.6C6.47 5.59 7.3 3.55 9.91 3.55C10.68 3.55 11.24 3.73 11.68 3.96ZM9.39 10.04C10.23 10.04 10.72 9.49 10.72 8.72C10.72 7.97 10.26 7.38 9.37 7.38C8.62 7.38 7.98 7.81 7.98 8.61C7.98 9.23 8.37 10.04 9.39 10.04Z"
fill="white"
/>
</svg>
<svg
y={1275.34}
x={694.44}
width="19"
height="14"
viewBox="0 0 19 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="19" height="14" rx="7" fill="#0D1922" fillOpacity="0.4" />
<path
d="M8.42 4.76L8.29 6.55C8.57 6.43 8.92 6.34 9.35 6.34C10.79 6.34 11.83 7.25 11.83 8.67C11.83 10.09 10.8 11.11 8.96 11.11C7.72 11.11 6.94 10.65 6.49 10.09L7.39 9.27C7.78 9.75 8.28 10.03 8.97 10.03C9.89 10.03 10.44 9.51 10.44 8.69C10.44 7.88 9.86 7.33 8.92 7.33C8.47 7.33 8.15 7.46 7.88 7.62H6.86L7.17 3.66H11.42V4.76H8.42Z"
fill="white"
/>
</svg>
</>
);
};
export default FloorNumbers;
client/src/components/complexWingPage/SequenceWing/FloorsHighlighting.tsx
+686
View File
@@ -0,0 +1,686 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent } from "react";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
interface FloorsHighlightingProps {
handleOnFloorClick: () => void;
handleOnSkygardenClick: () => void;
handleOnWingWrapperMouseEnter: (e: React.MouseEvent<SVGSVGElement>) => void;
handleOnFloorMouseEnter:
| ((
e: React.MouseEvent<Element, MouseEvent<SVGSVGElement, MouseEvent>>
) => void)
| any;
handleOnWingWrapperMouseLeave: () => void;
currentFloor: IDesctiptionFloor | null;
isFloorSidebar: boolean;
isSkygardenSidebar: boolean;
}
const FloorsHighlighting = ({
handleOnFloorClick,
handleOnFloorMouseEnter,
handleOnSkygardenClick,
handleOnWingWrapperMouseEnter,
handleOnWingWrapperMouseLeave,
currentFloor,
isFloorSidebar,
isSkygardenSidebar,
}: FloorsHighlightingProps) => {
return (
<>
<svg
y={706.34}
x={710.44}
width="553"
height="656"
viewBox="0 0 523 576"
fill="none"
xmlns="http://www.w3.org/2000/svg"
onMouseOut={handleOnWingWrapperMouseLeave}
onMouseOver={handleOnWingWrapperMouseEnter}
className="opacity-0 absolute z-0"
>
<path
d="M0.253906 10.0946V22.0006L0.109375 539.099C0.109375 539.099 0.109375 539.1 0.109375 539.1V551.322C0.109375 552.187 0.665774 552.955 1.48824 553.223L70.702 575.837C71.082 575.961 71.4905 575.969 71.8747 575.859L230.111 530.46C230.225 530.427 230.342 530.405 230.46 530.393L259.554 527.442L261.352 527.18L263.26 527.348L292.683 528.701C292.809 528.707 292.933 528.725 293.055 528.754L417.341 558.35C417.524 558.393 417.699 558.462 417.862 558.554L429.584 565.18C429.961 565.393 430.396 565.478 430.825 565.422L500.998 556.319C501.994 556.19 502.74 555.341 502.74 554.336V542.015L502.885 21.2703V8.37711C502.885 7.30962 502.046 6.43029 500.98 6.37939L432.623 3.11615C432.462 3.10843 432.3 3.12035 432.141 3.15165L417.729 5.99316L293.016 17.3347H263.497C262.392 17.3347 261.496 18.2301 261.496 19.3346C261.496 18.2301 260.601 17.3346 259.496 17.3346H230.427L69.6847 0.0280938C69.5341 0.0118866 69.3822 0.0128247 69.2319 0.0308899L2.01527 8.10891C1.01023 8.22969 0.253906 9.08235 0.253906 10.0946Z"
fill="#00BED7"
/>
</svg>
<svg
width="515"
height="577"
viewBox="0 0 515 577"
fill="none"
xmlns="http://www.w3.org/2000/svg"
// ref={leftWingRef}
x={720}
y={735}
className={`absolute transition-opacity duration-300 ease-in-out top-0 left-0 w-full h-full z-10 opacity-100`}
>
<path
onClick={handleOnFloorClick}
onMouseOver={handleOnFloorMouseEnter}
data-id={"0"}
className={`fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out ${
currentFloor?.id === "0" && isFloorSidebar
? "opacity-70"
: "opacity-0"
}`}
d="M2.77981 24.3169C1.60352 24.4326 0.583984 23.5085 0.583984 22.3265V10.4205C0.583984 9.40824 1.34031 8.55558 2.34534 8.43479L69.562 0.356775C69.7123 0.33871 69.8642 0.337772 70.0147 0.353979L230.757 17.6605H259.826C260.931 17.6605 261.826 18.5559 261.826 19.6605V31.2808C261.826 32.3853 260.931 33.2808 259.826 33.2808H230.757L71.9562 17.5499C71.8256 17.5369 71.6939 17.5369 71.5632 17.5497L2.77981 24.3169Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
onMouseOver={handleOnFloorMouseEnter}
data-id={"1"}
className={`${
currentFloor?.id === "1" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.41875 250.638C1.3818 250.552 0.583984 249.685 0.583984 248.644V233.569C0.583984 232.419 1.55249 231.505 2.70115 231.573L77.89 235.985L230.757 227.959L259.797 227.539C260.913 227.523 261.826 228.423 261.826 229.538V243.38C261.826 244.485 260.931 245.38 259.826 245.38H230.757L71.9115 256.376C71.8105 256.383 71.7091 256.382 71.6081 256.374L2.41875 250.638Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"2"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "2" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.75483 43.1604C1.58714 43.2606 0.583984 42.3397 0.583984 41.1678V29.253C0.583984 28.2327 1.35203 27.376 2.36628 27.2649L71.5533 19.6886C71.6906 19.6736 71.829 19.6728 71.9664 19.6863L230.757 35.2714H259.826C260.931 35.2714 261.826 36.1668 261.826 37.2714V48.8916C261.826 49.9962 260.931 50.8916 259.826 50.8916H230.757L71.9307 37.2589C71.8169 37.2491 71.7025 37.2491 71.5888 37.2589L2.75483 43.1604Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"3"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "3" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.71722 62.0904C1.56278 62.1675 0.583984 61.2519 0.583984 60.0949V48.1735C0.583984 47.1388 1.37318 46.2749 2.40366 46.1816L71.5887 39.9181C71.7025 39.9078 71.817 39.9072 71.9309 39.9165L230.757 52.8074H259.826C260.931 52.8074 261.826 53.7028 261.826 54.8074V66.4276C261.826 67.5322 260.931 68.4276 259.826 68.4276H230.757L71.7597 57.4808L2.71722 62.0904Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"4"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "4" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.69345 80.9654C1.54758 81.0282 0.583984 80.116 0.583984 78.9684V67.0435C0.583984 65.9997 1.3867 65.1315 2.42729 65.0497L71.6143 59.6125C71.7111 59.6049 71.8084 59.6043 71.9053 59.6109L230.757 70.3052H259.826C260.931 70.3052 261.826 71.2007 261.826 72.3052V83.9255C261.826 85.0301 260.931 85.9255 259.826 85.9255H230.757L71.7597 77.1793L2.69345 80.9654Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"5"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "5" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.65563 99.8093C1.5237 99.8499 0.583984 98.9432 0.583984 97.8106V85.8814C0.583984 84.8231 1.4085 83.9479 2.46496 83.8849L71.7597 79.7539L230.757 88.2076H259.826C260.931 88.2076 261.826 89.103 261.826 90.2076V101.828C261.826 102.932 260.931 103.828 259.826 103.828H230.757L71.7597 97.3321L2.65563 99.8093Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"6"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "6" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.63177 118.98C1.50881 119.007 0.583984 118.104 0.583984 116.981V105.05C0.583984 103.982 1.42242 103.103 2.48875 103.052L71.7597 99.7498L230.757 105.953H259.826C260.931 105.953 261.826 106.848 261.826 107.953V119.573C261.826 120.678 260.931 121.573 259.826 121.573H230.757L71.7597 117.328L2.63177 118.98Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"7"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "7" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.59384 137.653C1.48543 137.659 0.583984 136.762 0.583984 135.653V123.72C0.583984 122.638 1.44483 121.752 2.52661 121.721L71.7597 119.734L230.757 123.687H259.826C260.931 123.687 261.826 124.582 261.826 125.687V137.307C261.826 138.412 260.931 139.307 259.826 139.307H230.757L71.7597 137.312L2.59384 137.653Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"8"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "8" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.42401 156.851C1.3255 156.843 0.439453 155.95 0.439453 154.851V142.918C0.439453 141.826 1.31544 140.935 2.40736 140.918L71.6152 139.807L230.613 141.509H259.682C260.786 141.509 261.682 142.405 261.682 143.509V155.13C261.682 156.234 260.786 157.13 259.682 157.13H230.613L71.6152 157.385L2.42401 156.851Z"
fill="#00BED7"
/>
<path
data-id={"9"}
onMouseOver={handleOnFloorMouseEnter}
onClick={handleOnSkygardenClick}
className={`${
isSkygardenSidebar ? "opacity-70" : "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M505.113 193.377L505.114 165.798C505.114 164.688 504.208 163.79 503.098 163.798L430.35 163.871H403.662L293.347 163.164H263.827H259.682H230.613L71.6152 164.562L2.45794 163.923C1.34619 163.913 0.439453 164.811 0.439453 165.923V223.827C0.439453 224.881 1.25752 225.754 2.30935 225.823L77.9166 230.751L230.613 221.993H259.682L263.754 222.026L399.544 226.978L418.724 228.621L512.179 226.823C513.268 226.802 514.141 225.913 514.141 224.823V197.377C514.141 196.272 513.245 195.377 512.141 195.377H507.113C506.009 195.377 505.113 194.481 505.113 193.377Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"10"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "10" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.2506 269.924C1.2238 269.827 0.439453 268.964 0.439453 267.933V255.528C0.439453 254.362 1.43278 253.443 2.59519 253.534L71.4643 258.913C71.5648 258.921 71.6657 258.921 71.7662 258.914L230.613 247.274H259.682C260.786 247.274 261.682 248.169 261.682 249.274V260.894C261.682 261.999 260.786 262.894 259.682 262.894H230.613L71.795 276.488C71.6754 276.498 71.5551 276.498 71.4356 276.486L2.2506 269.924Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"11"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "11" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.2257 288.953C1.20972 288.844 0.439453 287.986 0.439453 286.965V274.564C0.439453 273.388 1.44909 272.466 2.62022 272.572L71.4377 278.818C71.5558 278.829 71.6746 278.829 71.7927 278.818L230.613 264.932H259.682C260.786 264.932 261.682 265.828 261.682 266.932V278.553C261.682 279.657 260.786 280.553 259.682 280.553H230.613L71.8214 296.392C71.6843 296.405 71.5462 296.405 71.4091 296.39L2.2257 288.953Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"12"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "12" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.97953 307.412C0.979949 307.285 0.230469 306.435 0.230469 305.428V293.52C0.230469 292.335 1.25562 291.41 2.43479 291.531L71.2033 298.593C71.3382 298.607 71.4742 298.607 71.6092 298.593L230.404 282.512H259.473C260.577 282.512 261.473 283.407 261.473 284.512V296.132C261.473 297.237 260.577 298.132 259.473 298.132H230.404L71.6447 316.165C71.4863 316.183 71.3263 316.182 71.1681 316.162L1.97953 307.412Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"13"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "13" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.1516 326.13C1.16857 325.987 0.439453 325.145 0.439453 324.151V312.253C0.439453 311.053 1.48944 310.123 2.68101 310.268L71.3798 318.626C71.5362 318.645 71.6943 318.646 71.8507 318.628L230.613 300.302H259.682C260.786 300.302 261.682 301.198 261.682 302.302V313.922C261.682 315.027 260.786 315.922 259.682 315.922H230.613L71.8862 336.199C71.7064 336.222 71.5243 336.22 71.3449 336.194L2.1516 326.13Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"14"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "14" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.11499 345.037C1.14862 344.879 0.439453 344.043 0.439453 343.064V331.176C0.439453 329.961 1.51449 329.027 2.718 329.196L71.3479 338.848C71.5253 338.873 71.7052 338.874 71.8829 338.851L230.613 318.333H259.682C260.786 318.333 261.682 319.228 261.682 320.333V331.953C261.682 333.057 260.786 333.953 259.682 333.953H230.613L71.9181 356.421C71.7173 356.45 71.5134 356.447 71.3133 356.414L2.11499 345.037Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"15"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "15" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.1042 364.486C1.14279 364.322 0.439453 363.489 0.439453 362.514V350.146C0.439453 348.921 1.53131 347.983 2.74249 348.169L71.3222 358.682C71.5165 358.711 71.7141 358.712 71.9086 358.685L230.472 335.993C230.565 335.979 230.66 335.973 230.755 335.973H259.682C260.786 335.973 261.682 336.868 261.682 337.973V349.593C261.682 350.697 260.786 351.593 259.682 351.593H230.767C230.664 351.593 230.562 351.601 230.46 351.617L71.9368 376.255C71.7238 376.288 71.5069 376.286 71.2944 376.25L2.1042 364.486Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"16"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "16" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.05471 382.86C1.11634 382.676 0.439453 381.853 0.439453 380.897V369.031C0.439453 367.79 1.55669 366.849 2.77898 367.06L71.2905 378.862C71.5055 378.899 71.7252 378.9 71.9407 378.866L230.458 353.937C230.561 353.921 230.665 353.913 230.769 353.913H259.682C260.786 353.913 261.682 354.809 261.682 355.913V367.533C261.682 368.638 260.786 369.533 259.682 369.533H230.781C230.669 369.533 230.557 369.543 230.447 369.561L71.9756 396.435C71.7373 396.475 71.4937 396.472 71.2565 396.425L2.05471 382.86Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"17"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "17" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M2.03222 402.111C1.10446 401.918 0.439453 401.1 0.439453 400.153V387.812C0.439453 386.557 1.58224 385.612 2.81511 385.848L71.259 398.936C71.4946 398.981 71.7363 398.984 71.9726 398.943L230.459 371.776C230.561 371.758 230.665 371.749 230.768 371.747L259.653 371.329C260.769 371.313 261.682 372.213 261.682 373.329V384.948C261.682 386.042 260.804 386.932 259.711 386.948L230.78 387.367C230.669 387.369 230.557 387.38 230.448 387.4L72.0004 416.512C71.746 416.559 71.485 416.555 71.2318 416.503L2.03222 402.111Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"18"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "18" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.99681 420.844C1.08595 420.638 0.439453 419.828 0.439453 418.894V406.568C0.439453 405.298 1.60794 404.35 2.85087 404.611L71.2285 418.985C71.4838 419.038 71.7472 419.041 72.0038 418.994L230.911 389.588C231.012 389.57 231.114 389.559 231.216 389.556L259.623 388.721C260.75 388.688 261.682 389.592 261.682 390.72V402.338C261.682 403.42 260.822 404.306 259.741 404.337L231.228 405.176C231.118 405.179 231.008 405.191 230.9 405.213L72.0314 436.562C71.757 436.616 71.4743 436.612 71.2015 436.55L1.99681 420.844Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"19"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "19" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.97475 439.77C1.07452 439.555 0.439453 438.75 0.439453 437.824V425.509C0.439453 424.23 1.62419 423.28 2.87318 423.557L71.2068 438.737C71.4762 438.797 71.755 438.801 72.0257 438.748L230.45 407.654C230.558 407.633 230.668 407.621 230.778 407.617L259.624 406.782C260.751 406.749 261.682 407.653 261.682 408.781V420.399C261.682 421.481 260.821 422.367 259.74 422.398L230.79 423.237C230.672 423.241 230.555 423.254 230.439 423.279L72.0532 456.315C71.7647 456.375 71.4666 456.371 71.1801 456.302L1.97475 439.77Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"20"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "20" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.95157 459.03C1.0626 458.806 0.439453 458.007 0.439453 457.09V444.787C0.439453 443.498 1.64144 442.545 2.89662 442.84L71.1818 458.873C71.4673 458.94 71.7639 458.944 72.0508 458.883L230.452 425.552C230.559 425.53 230.667 425.516 230.777 425.511L259.595 424.259C260.733 424.209 261.682 425.118 261.682 426.257V437.873C261.682 438.944 260.838 439.825 259.769 439.871L230.789 441.131C230.671 441.136 230.555 441.151 230.441 441.177L72.078 476.45C71.7737 476.518 71.4577 476.513 71.1553 476.437L1.95157 459.03Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"21"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "21" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.9172 477.608C1.04511 477.372 0.439453 476.581 0.439453 475.677V463.392C0.439453 462.088 1.66739 461.133 2.9314 461.454L71.1516 478.766C71.4564 478.843 71.7751 478.848 72.0818 478.779L230.439 443.216C230.554 443.19 230.672 443.174 230.79 443.169L259.595 441.917C260.733 441.868 261.682 442.777 261.682 443.915V455.532C261.682 456.602 260.838 457.483 259.769 457.53L230.802 458.789C230.676 458.794 230.551 458.812 230.428 458.841L72.1088 496.345C71.7849 496.422 71.4469 496.416 71.1255 496.33L1.9172 477.608Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"22"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "22" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.89456 496.891C1.03369 496.648 0.439453 495.862 0.439453 494.967V482.695C0.439453 481.382 1.68474 480.425 2.95433 480.763L71.1272 498.925C71.4475 499.011 71.784 499.015 72.1065 498.938L230.455 461.135C230.56 461.11 230.667 461.094 230.775 461.086L259.537 459.003C260.696 458.919 261.682 459.836 261.682 460.997V472.607C261.682 473.656 260.872 474.526 259.826 474.602L230.786 476.705C230.671 476.714 230.556 476.732 230.444 476.76L72.1332 516.503C71.7938 516.589 71.438 516.583 71.1013 516.488L1.89456 496.891Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"23"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "23" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.86101 515.582C1.01692 515.327 0.439453 514.55 0.439453 513.668V501.417C0.439453 500.088 1.71081 499.129 2.98832 499.494L71.1008 518.932C71.4378 519.028 71.7942 519.034 72.1342 518.949L230.459 479.409C230.561 479.384 230.665 479.366 230.77 479.357L259.509 476.859C260.677 476.758 261.682 477.679 261.682 478.852V490.457C261.682 491.494 260.889 492.36 259.855 492.449L230.782 494.977C230.669 494.986 230.558 495.006 230.448 495.034L72.1608 536.514C71.804 536.608 71.4284 536.601 71.0753 536.494L1.86101 515.582Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"24"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "24" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.84016 534.405C1.0066 534.144 0.439453 533.371 0.439453 532.497V520.26C0.439453 518.923 1.72726 517.962 3.00946 518.343L71.0804 538.583C71.4303 538.687 71.8019 538.693 72.1551 538.601L230.463 497.322C230.563 497.297 230.664 497.278 230.766 497.268L259.48 494.356C260.658 494.237 261.682 495.162 261.682 496.346V507.946C261.682 508.972 260.905 509.832 259.884 509.935L230.778 512.887C230.668 512.898 230.559 512.918 230.453 512.947L72.1814 556.166C71.8117 556.267 71.4208 556.259 71.0553 556.144L1.84016 534.405Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"25"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "25" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M1.81832 553.549C0.995852 553.28 0.439453 552.513 0.439453 551.648V539.426C0.439453 538.079 1.74467 537.117 3.03162 537.516L71.057 558.602C71.4215 558.715 71.8107 558.722 72.1787 558.621L230.451 515.161C230.559 515.131 230.668 515.111 230.779 515.099L259.48 512.189C260.658 512.069 261.682 512.994 261.682 514.179V525.778C261.682 526.805 260.905 527.665 259.884 527.768L230.79 530.718C230.672 530.73 230.555 530.753 230.441 530.786L72.2048 576.184C71.8206 576.295 71.4121 576.287 71.0321 576.163L1.81832 553.549Z"
fill="#00BED7"
/>
</svg>
<svg
width="515"
height="563"
viewBox="0 0 515 563"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={`absolute transition-opacity duration-300 ease-in-out top-0 left-0 w-full h-full z-20 opacity-100`}
x={720}
y={738}
>
<path
onClick={handleOnFloorClick}
data-id={"50"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "50" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.13 20.5944C502.267 20.6425 503.215 19.734 503.215 18.5962V5.703C503.215 4.63551 502.376 3.75618 501.31 3.70527L432.953 0.442034C432.792 0.43432 432.63 0.44624 432.471 0.477532L418.059 3.31905L293.346 14.6605H263.827C262.722 14.6605 261.827 15.556 261.827 16.6605V28.2808C261.827 29.3854 262.722 30.2808 263.827 30.2808H293.346L418.059 20.2586L430.902 17.6788C431.059 17.6472 431.22 17.6347 431.38 17.6415L501.13 20.5944Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"26"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "26" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.154 39.531C502.282 39.5655 503.215 38.6605 503.215 37.532V25.6074C503.215 24.5427 502.381 23.6647 501.317 23.6101L431.869 20.0411C431.716 20.0333 431.563 20.0429 431.413 20.0699L418.091 22.4616L293.346 32.2715H263.827C262.722 32.2715 261.827 33.1669 261.827 34.2715V45.8917C261.827 46.9963 262.722 47.8917 263.827 47.8917H293.346L418.091 39.6656L431.445 37.4381C431.574 37.4167 431.705 37.4078 431.835 37.4118L501.154 39.531Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"27"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "27" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.166 58.5776C502.29 58.6049 503.215 57.7018 503.215 56.5782V44.6527C503.215 43.5832 502.373 42.7029 501.305 42.6547L431.862 39.5228C431.714 39.5161 431.565 39.5259 431.419 39.5522L418.091 41.945L293.346 49.8544H263.827C262.722 49.8544 261.827 50.7498 261.827 51.8544V63.4746C261.827 64.5791 262.722 65.4746 263.827 65.4746H293.346L418.091 58.6989L431.483 56.9101C431.587 56.8962 431.692 56.8905 431.796 56.893L501.166 58.5776Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"28"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "28" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.179 77.594C502.297 77.6141 503.215 76.7129 503.215 75.5943V63.668C503.215 62.5936 502.366 61.7112 501.292 61.6695L431.823 58.9732C431.701 58.9685 431.578 58.975 431.456 58.9928L418.091 60.9483L293.346 67.5073H263.827C262.722 67.5073 261.827 68.4028 261.827 69.5073V81.1276C261.827 82.2321 262.722 83.1276 263.827 83.1276H293.346L418.091 77.7022L431.639 76.3426L501.179 77.594Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"29"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "29" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.191 96.6575C502.305 96.6706 503.215 95.7714 503.215 94.6577V82.7308C503.215 81.6515 502.359 80.7669 501.28 80.7318L431.784 78.4715C431.687 78.4684 431.591 78.4723 431.494 78.4831L418.091 79.9989L293.346 85.2077H263.827C262.722 85.2077 261.827 86.1031 261.827 87.2077V98.8279C261.827 99.9325 262.722 100.828 263.827 100.828H293.346L418.091 96.7528L431.639 95.8433L501.191 96.6575Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"30"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "30" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.204 115.766C502.313 115.772 503.215 114.875 503.215 113.766V101.839C503.215 100.754 502.351 99.8677 501.267 99.8392L431.639 98.0125L418.091 99.0945L293.346 102.953H263.827C262.722 102.953 261.827 103.848 261.827 104.953V116.573C261.827 117.678 262.722 118.573 263.827 118.573H293.346L418.091 115.848L431.639 115.389L501.204 115.766Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"31"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "31" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.217 134.863C502.32 134.862 503.215 133.967 503.215 132.863V120.935C503.215 119.846 502.344 118.957 501.255 118.936L431.639 117.547L418.091 118.179L293.346 120.687H263.827C262.722 120.687 261.827 121.582 261.827 122.687V134.307C261.827 135.412 262.722 136.307 263.827 136.307H293.346L418.091 134.933L431.639 134.923L501.217 134.863Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"32"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "32" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.229 154.048C502.328 154.04 503.215 153.147 503.215 152.048V139.634C503.215 138.535 502.328 137.642 501.228 137.634L431.639 137.17L418.091 137.352L293.346 138.51H263.694C262.59 138.51 261.694 139.405 261.694 140.51V152.13C261.694 153.234 262.59 154.13 263.694 154.13H293.346L418.091 154.106L431.639 154.546L501.229 154.048Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"33"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "33" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.146 267.629C502.221 267.588 503.07 266.706 503.07 265.631V252.795C503.07 251.661 502.129 250.754 500.997 250.796L430.66 253.387C430.55 253.391 430.439 253.386 430.33 253.371L417.946 251.774L293.202 244.256H263.682C262.578 244.256 261.682 245.152 261.682 246.256V257.877C261.682 258.981 262.578 259.877 263.682 259.877L293.202 259.877L417.946 268.528L430.316 270.294C430.435 270.311 430.555 270.317 430.675 270.312L501.146 267.629Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"34"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "34" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.144 287.089C502.219 287.049 503.07 286.166 503.07 285.09V272.254C503.07 271.121 502.131 270.215 500.999 270.255L430.69 272.748C430.56 272.752 430.43 272.744 430.301 272.724L417.946 270.736L293.202 261.868H263.682C262.578 261.868 261.682 262.763 261.682 263.868V275.488C261.682 276.593 262.578 277.488 263.682 277.488L293.202 277.488L417.946 287.49L430.287 289.645C430.425 289.669 430.565 289.679 430.705 289.673L501.144 287.089Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"35"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "35" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.17 305.71C502.234 305.657 503.07 304.778 503.07 303.712V291.364C503.07 290.226 502.123 289.318 500.987 289.365L430.731 292.292C430.574 292.299 430.416 292.287 430.262 292.256L417.946 289.833L293.202 279.615H263.682C262.578 279.615 261.682 280.51 261.682 281.615V293.235C261.682 294.34 262.578 295.235 263.682 295.235L293.202 295.235L417.946 306.587L430.241 309.175C430.409 309.21 430.581 309.224 430.753 309.215L501.17 305.71Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"36"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "36" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.182 324.863C502.242 324.803 503.07 323.927 503.07 322.866V310.518C503.07 309.376 502.116 308.466 500.975 308.521L430.776 311.88C430.589 311.889 430.402 311.872 430.22 311.829L417.946 308.925L293.202 297.406H263.682C262.578 297.406 261.682 298.302 261.682 299.406V311.026C261.682 312.131 262.578 313.026 263.682 313.026L293.202 313.026L417.802 325.664C417.898 325.674 417.993 325.691 418.086 325.714L430.2 328.747C430.395 328.795 430.597 328.815 430.797 328.803L501.182 324.863Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"37"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "37" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.194 343.893C502.249 343.828 503.07 342.954 503.07 341.897V329.551C503.07 328.404 502.108 327.492 500.962 327.554L430.778 331.348C430.59 331.358 430.401 331.342 430.217 331.299L417.946 328.445L293.202 315.312H263.682C262.578 315.312 261.682 316.208 261.682 317.312V328.933C261.682 330.037 262.578 330.933 263.682 330.933L293.202 330.933L417.946 345.199L430.197 348.217C430.394 348.265 430.597 348.284 430.8 348.271L501.194 343.893Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"38"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "38" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.207 362.866C502.256 362.794 503.07 361.922 503.07 360.871V348.526C503.07 347.374 502.1 346.461 500.95 346.53L430.819 350.756C430.604 350.769 430.388 350.747 430.18 350.691L418.089 347.445C417.994 347.42 417.897 347.401 417.8 347.39L293.202 332.989H263.682C262.578 332.989 261.682 333.884 261.682 334.989V346.609C261.682 347.714 262.578 348.609 263.682 348.609L293.202 348.609L417.796 364.142C417.896 364.154 417.995 364.174 418.092 364.202L430.161 367.608C430.381 367.67 430.611 367.694 430.84 367.679L501.207 362.866Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"39"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "39" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.218 382.126C502.262 382.049 503.07 381.179 503.07 380.131V367.303C503.07 366.141 502.084 365.224 500.925 365.308L430.869 370.399C430.622 370.417 430.373 370.389 430.135 370.316L418.116 366.61C418.003 366.575 417.887 366.55 417.769 366.536L293.202 351.339L263.714 350.871C262.597 350.853 261.682 351.754 261.682 352.871V364.459C261.682 365.564 262.578 366.459 263.682 366.459L293.202 366.459L417.77 383.287C417.887 383.303 418.003 383.329 418.115 383.366L430.123 387.233C430.368 387.312 430.627 387.343 430.884 387.324L501.218 382.126Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"40"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "40" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.23 401.397C502.269 401.314 503.07 400.446 503.07 399.404V386.577C503.07 385.411 502.076 384.492 500.913 384.583L430.905 390.105C430.634 390.126 430.362 390.092 430.104 390.004L418.128 385.93C418.007 385.889 417.882 385.859 417.755 385.842L293.202 368.799L263.714 368.332C262.597 368.314 261.682 369.214 261.682 370.331V381.948C261.682 383.041 262.56 383.932 263.654 383.948L293.202 384.37L417.753 402.594C417.881 402.612 418.008 402.644 418.131 402.687L430.092 406.921C430.357 407.015 430.639 407.052 430.919 407.03L501.23 401.397Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"41"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "41" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.23 420.559C502.269 420.475 503.07 419.608 503.07 418.565V405.739C503.07 404.572 502.076 403.653 500.913 403.745L430.905 409.266C430.634 409.287 430.362 409.253 430.104 409.166L418.115 405.087C418.003 405.048 417.887 405.02 417.77 405.003L293.202 386.16L263.714 385.692C262.597 385.675 261.682 386.575 261.682 387.692V399.34C261.682 400.421 262.541 401.306 263.622 401.339L293.202 402.23L417.763 421.754C417.885 421.774 418.005 421.804 418.121 421.845L430.092 426.083C430.357 426.176 430.639 426.213 430.919 426.191L501.23 420.559Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"42"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "42" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.229 439.92C502.269 439.837 503.07 438.969 503.07 437.926V425.099C503.07 423.933 502.077 423.014 500.914 423.105L430.938 428.576C430.646 428.599 430.352 428.557 430.078 428.454L418.137 423.963C418.01 423.915 417.879 423.881 417.745 423.86L293.202 404.222L263.714 403.754C262.597 403.736 261.682 404.637 261.682 405.754V417.402C261.682 418.483 262.541 419.368 263.622 419.401L293.202 420.292L417.738 440.611C417.876 440.634 418.012 440.671 418.143 440.722L430.067 445.371C430.348 445.48 430.651 445.525 430.952 445.501L501.229 439.92Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"43"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "43" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.253 458.737C502.283 458.642 503.07 457.779 503.07 456.745V443.922C503.07 442.747 502.061 441.825 500.89 441.931L430.947 448.266C430.649 448.293 430.349 448.253 430.069 448.149L418.117 443.701C418.003 443.659 417.886 443.627 417.767 443.606L293.358 421.696C293.254 421.677 293.149 421.667 293.043 421.665L263.714 421.2C262.597 421.182 261.682 422.083 261.682 423.2V434.848C261.682 435.929 262.541 436.814 263.622 436.847L293.052 437.734C293.152 437.737 293.251 437.747 293.349 437.765L417.76 460.358C417.884 460.38 418.005 460.415 418.123 460.46L430.058 465.065C430.345 465.176 430.654 465.219 430.961 465.191L501.253 458.737Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"44"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "44" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.265 477.755C502.29 477.655 503.07 476.794 503.07 475.765V462.945C503.07 461.764 502.053 460.84 500.878 460.954L430.986 467.719C430.663 467.75 430.338 467.702 430.037 467.58L418.134 462.723C418.009 462.672 417.879 462.634 417.746 462.609L293.368 439.358C293.257 439.337 293.145 439.326 293.032 439.324L263.714 438.859C262.597 438.841 261.682 439.741 261.682 440.858V452.506C261.682 453.587 262.541 454.473 263.622 454.505L293.041 455.392C293.148 455.395 293.254 455.407 293.359 455.427L417.74 479.361C417.877 479.387 418.011 479.428 418.139 479.482L430.027 484.495C430.334 484.625 430.668 484.676 430.999 484.643L501.265 477.755Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"45"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "45" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.291 496.547C502.304 496.435 503.07 495.579 503.07 494.56V482.23C503.07 481.044 502.045 480.119 500.865 480.24L431.024 487.433C430.677 487.469 430.327 487.413 430.008 487.272L418.151 482.009C418.015 481.948 417.872 481.903 417.726 481.874L293.346 457.376C293.25 457.357 293.153 457.345 293.055 457.34L263.777 455.947C262.637 455.893 261.682 456.803 261.682 457.945V469.587C261.682 470.644 262.504 471.518 263.559 471.583L293.202 473.417L417.72 498.626C417.87 498.656 418.017 498.704 418.156 498.768L429.991 504.184C430.32 504.334 430.684 504.393 431.044 504.353L501.291 496.547Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"46"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "46" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.303 515.73C502.311 515.612 503.07 514.759 503.07 513.744V500.932C503.07 499.736 502.028 498.808 500.84 498.946L431.072 507.044C430.695 507.088 430.313 507.023 429.971 506.858L418.169 501.149C418.021 501.078 417.865 501.025 417.704 500.991L293.356 475.202C293.253 475.181 293.149 475.168 293.045 475.163L263.777 473.77C262.637 473.716 261.682 474.626 261.682 475.768V487.411C261.682 488.467 262.504 489.341 263.559 489.407L293.054 491.232C293.152 491.238 293.25 491.251 293.347 491.272L417.699 517.743C417.863 517.778 418.022 517.833 418.173 517.908L429.962 523.773C430.309 523.945 430.7 524.013 431.085 523.968L501.303 515.73Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"47"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "47" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.302 534.992C502.31 534.875 503.07 534.021 503.07 533.006V520.678C503.07 519.488 502.038 518.561 500.855 518.69L431.096 526.259C430.704 526.301 430.308 526.227 429.958 526.045L418.182 519.927C418.026 519.846 417.859 519.785 417.686 519.748L293.365 492.668C293.256 492.645 293.146 492.63 293.035 492.625L263.777 491.233C262.637 491.178 261.682 492.088 261.682 493.23V504.873C261.682 505.93 262.504 506.804 263.559 506.869L293.044 508.693C293.149 508.7 293.253 508.715 293.356 508.738L417.681 536.499C417.857 536.538 418.027 536.601 418.186 536.686L429.943 542.956C430.302 543.148 430.711 543.225 431.115 543.178L501.302 534.992Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"48"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "48" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.328 553.645C502.324 553.516 503.07 552.667 503.07 551.662V539.341C503.07 538.14 502.02 537.21 500.829 537.355L431.136 545.829C430.719 545.88 430.296 545.798 429.929 545.595L418.189 539.121C418.028 539.032 417.855 538.966 417.676 538.925L293.394 510.01C293.266 509.981 293.136 509.963 293.004 509.959L263.746 509.031C262.617 508.995 261.682 509.901 261.682 511.03V522.676C261.682 523.745 262.523 524.624 263.59 524.674L293.013 526.027C293.139 526.033 293.263 526.051 293.385 526.08L417.671 555.676C417.854 555.719 418.029 555.788 418.192 555.88L429.914 562.506C430.291 562.719 430.726 562.804 431.155 562.748L501.328 553.645Z"
fill="#00BED7"
/>
<path
onClick={handleOnFloorClick}
data-id={"49"}
onMouseOver={handleOnFloorMouseEnter}
className={`${
currentFloor?.id === "49" && isFloorSidebar
? "opacity-70"
: "opacity-0"
} fill-[#00BED7] cursor-pointer opacity-20 hover:opacity-70 transition-opacity duration-300 ease-in-out `}
d="M501.279 248.587C502.358 248.552 503.215 247.668 503.215 246.588V231.533C503.215 230.411 502.292 229.508 501.171 229.533L418.224 231.361L403.255 229.795L293.346 224.549H263.827C262.722 224.549 261.827 225.444 261.827 226.549V240.391C261.827 241.506 262.74 242.406 263.855 242.39L293.346 241.969L418.224 249.679L430.639 250.838L501.279 248.587Z"
fill="#00BED7"
/>
</svg>
</>
);
};
export default FloorsHighlighting;
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+119
View File
@@ -0,0 +1,119 @@
import { IAparmentRes } from "../../../types/apartmentsRes";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
interface MobileFloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[];
}
const MobileFloorDescription = ({
descriptionFloor,
floorApartments,
}: MobileFloorDescriptionProps) => {
return (
<>
<div
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[328px]`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<div className="flex flex-col">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
>
{descriptionFloor?.floor} Floor
</p>
<div className="flex gap-2 items-center">
<p className="text-[#73787C] font-semibold text-caption-m">
{descriptionFloor?.wing}
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="font-semibold text-caption-m text-[#00BED7]">
{floorApartments.length} units
</p>
</div>
</div>
<Button buttonType="tertiary" icon={<CrossIcon />} />
</div>
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">
{
floorApartments.filter(
(apart) => apart.Unit_Type === "Studio Flex"
).length
}
</p>
</div>
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
{
floorApartments.filter(
(apart) => apart.Unit_Type === "Studio Squared"
).length
}
</p>
</div>
<p className="text-s text-[#73787C]">Studio</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
{
floorApartments.filter(
(apart) => apart.Unit_Type === "1 BR Squared"
).length
}
</p>
</div>
<p className="text-s text-[#73787C]">1 Bedroom</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
{
floorApartments.filter(
(apart) => apart.Unit_Type === "2 BR Squared"
).length
}
</p>
</div>
<p className="text-s text-[#73787C] text-nowrap">
2 Bedroom, Type A
</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
</div>
<Button
buttonType="cta"
className="justify-center"
text="Explore"
icon={<RightArrowSliderIcon />}
iconPos="right"
/>
</div>
<div className="w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute -top-[35px] left-[0px]"></div>
</div>
</div>
</>
);
};
export default MobileFloorDescription;
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+383
View File
@@ -0,0 +1,383 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent, useEffect, useState } from "react";
import FloorDescription from "../FloorDescription";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import SkygardenDescription from "../SkygardenDescription";
import FloorSidebar from "../FloorSidebar/FloorSidebar";
import SkygardenSidebar from "../SkygardenSidebar/SkygardenSidebar";
import useWingSidebar from "../../../store/useWingSidebar";
import useModal from "../../../store/useModal";
import {
laptopWidth,
mobileWidht,
descriptions,
} from "../../../consts/masterplan";
import { updateAccessToken } from "../../../api/updateAccessToken";
import { IAparmentRes } from "../../../types/apartmentsRes";
import useMasterplanFilters from "../../../store/useMasterplanFilters";
import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilters";
import { pageInitial } from "../../../consts/initialMasterplanFilters";
import { useDebounce } from "@uidotdev/usehooks";
import { getFilteredApartments } from "../../../calc/getFilteredApartments";
import LoaderModal from "../../modals/LoaderModal";
import FloorNumbers from "./FloorNumbers";
import WingSignatures from "./WingSignatures";
import { isMobile } from "react-device-detect";
import FloorsHighlighting from "./FloorsHighlighting";
import MobileFloorDescription from "./MobileFloorDescription";
const skyGardenFloor = 22;
const SequenceWing = () => {
const [width, setWidth] = useState<number>(0);
const [top, setTop] = useState<number>(0);
const [left, setLeft] = useState<number>(0);
// const leftWingRef = useRef(null);
const { isSidebar, setIsSidebar } = useWingSidebar();
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
const [currentHoveredFloor, setHoverCurrentFloor] =
useState<null | IDesctiptionFloor>(null);
const [isLoading, setIsLoading] = useState(true);
const [currentFloor, setCurrentFloor] = useState<IDesctiptionFloor | null>(
null
);
const [isWrapperHovered, setIsWrapperHovered] = useState(false);
const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false);
const [isFloorSidebar, setIsFloorSidebar] = useState(false);
const { setModal } = useModal();
const [apartments, setApartments] = useState<IAparmentRes[]>([]);
const [currentHoveredApartments, setCurrentHoveredApartments] = useState<
IAparmentRes[]
>([]);
const [selectedApartments, setSelectedApartments] = useState<IAparmentRes[]>(
[]
);
const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] =
useState(false);
const {
apartmentTypeCheckboxes,
switchers,
multirangeSliders,
viewCheckboxes,
sortList,
} = useMasterplanFilters();
const debouncedSliders = useDebounce(multirangeSliders, 300);
const handleOnFloorMouseEnter = (
e: React.MouseEvent<SVGPathElement, MouseEvent>
) => {
e.stopPropagation();
const id = e.currentTarget.dataset.id;
if (!id) return;
const _currentFloor = descriptions.find((desc) => desc.id === id);
if (!_currentFloor) return;
setHoverCurrentFloor(_currentFloor);
const _currentHoveredApartments = apartments.filter((apartment) => {
const wing =
apartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";
return (
apartment.Floor === _currentFloor.floor && wing === _currentFloor.wing
);
});
setIsWrapperHovered(true);
setCurrentHoveredApartments(_currentHoveredApartments);
};
const handleOnWingWrapperMouseEnter = (
e: React.MouseEvent<SVGSVGElement>
) => {
(e as unknown as Event).stopPropagation();
setIsWrapperHovered(true);
};
const handleOnWingWrapperMouseLeave = () => {
setIsWrapperHovered(false);
};
const handleOnFloorClick = () => {
if (!currentHoveredFloor && !currentHoveredApartments) return;
setSelectedApartments(currentHoveredApartments);
setCurrentFloor(currentHoveredFloor);
if (!isMobile) {
setIsFloorSidebar(true);
setIsSkygardenSidebar(false);
setIsSidebar(true);
} else {
setIsDescriptionFloorMobile(true);
// setModal(<WingFloorModal />);
}
};
const handleOnSkygardenClick = () => {
if (!isMobile) {
setIsSkygardenSidebar(true);
setIsFloorSidebar(false);
setIsSidebar(true);
} else {
// setModal(<WingFloorModal />);
}
};
function handleMouseMove(
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
}
function handleOnMouseDown(e: MouseEvent | any) {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
if (screenWidth > laptopWidth) {
const _top = screenWidth / 2 - screenHeight / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _left = laptopWidth - screenWidth;
setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
// <640
} else {
const _top = screenHeight / 2.5;
const _left = laptopWidth - screenWidth;
setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
}
}
}
function handleResize() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
if (screenWidth > laptopWidth) {
setWidth(screenWidth);
setTop(screenWidth / 2 - screenHeight / 2);
setLeft(0);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
setTop(_top);
// <640
} else {
const _top = screenHeight / 2.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
setWidth(_width);
setLeft(_left);
}
}
useEffect(() => {
handleResize();
window.addEventListener("resize", handleResize);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mousedown", handleOnMouseDown);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mousedown", handleOnMouseDown);
};
}, []);
useEffect(() => {
if (!isSidebar) {
setIsFloorSidebar(false);
setIsSkygardenSidebar(false);
}
}, [isSidebar]);
useEffect(() => {
const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`;
const perPage = 1000;
const getApartments = (token: string) =>
getFilteredApartments(
token,
setApartments,
initialRoveHomeCheckboxes,
apartmentTypeCheckboxes,
debouncedSliders,
switchers,
viewCheckboxes,
sortList,
pageInitial,
perPage
);
setIsLoading(true);
getApartments(localStorageToken)
.then(() => {
setIsLoading(false);
})
.catch((error) => {
const errorStatus = error.response.status;
if (errorStatus === 401) {
updateAccessToken()
.then((token) => {
if (token) {
getApartments(token).then(() => {
setIsLoading(false);
});
}
})
.catch((error) => {
setIsLoading(false);
console.error("error", error);
});
} else {
setIsLoading(false);
console.error("error", error);
}
});
}, [
setApartments,
apartmentTypeCheckboxes,
debouncedSliders,
switchers,
viewCheckboxes,
sortList,
]);
// useEffect(() => {
// if (isLoading) {
// setModal(<LoaderModal />);
// } else {
// setModal(null);
// }
// }, [isLoading, setModal]);
return (
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
<div
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all "
style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
>
<FloorSidebar
floorApartments={selectedApartments}
currentFloor={currentFloor}
onMouseEnter={handleOnWingWrapperMouseLeave}
/>
</div>
<div
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all"
style={{ right: `${isSkygardenSidebar ? "0" : "-50%"}` }}
>
<SkygardenSidebar onMouseEnter={handleOnWingWrapperMouseLeave} />
</div>
<div
className="absolute left-0 transition-[left]"
style={{
width: `${width}px`,
height: `${width}px`,
top: `-${top}px`,
left: `${
isSkygardenSidebar || isFloorSidebar ? "-25%" : `-${left}px`
}`,
}}
>
<div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${
currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered
? "opacity-100"
: "opacity-0"
}`}
style={{
top: mousePos[1] - 25,
left: `${
isSkygardenSidebar || isFloorSidebar
? `calc(${mousePos[0]}px + 25%)`
: `${mousePos[0]}px`
}`,
}}
>
<SkygardenDescription />
</div>
<div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${
currentHoveredFloor?.floor !== skyGardenFloor &&
currentHoveredFloor &&
isWrapperHovered
? "opacity-100"
: "opacity-0"
}`}
style={{
top: mousePos[1],
left: `${
isSkygardenSidebar || isFloorSidebar
? `calc(${mousePos[0]}px + 25%)`
: `${mousePos[0]}px`
}`,
}}
>
<FloorDescription
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
</div>
{/* */}
<div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
isDescriptionFloorMobile ? "opacity-100" : "opacity-0"
}`}
style={{
top: `${mousePos[1]}px`,
left: `${mousePos[0]}px`,
// top: `${mousePos[1] + 140}px`,
// left: `${mousePos[0] + 366}px`,
}}
>
<MobileFloorDescription
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
</div>
<img
width={`${width}px`}
height={`${width}px`}
src="/images/sequenceWing.jpg"
className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100 select-none`}
alt=""
/>
<svg
width="1920"
height="1920"
viewBox="0 0 1920 1920"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={`absolute top-0 left-0 duration-300 transition-opacity ease-in-out w-full h-full opacity-100 z-10 `}
onMouseOver={handleOnWingWrapperMouseLeave}
>
{/* Подписи Крылья */}
<WingSignatures />
{/* Цифры этажи */}
<FloorNumbers />
{/* Этажи */}
<FloorsHighlighting
handleOnFloorClick={handleOnFloorClick}
handleOnSkygardenClick={handleOnSkygardenClick}
handleOnWingWrapperMouseEnter={handleOnWingWrapperMouseEnter}
handleOnFloorMouseEnter={handleOnFloorMouseEnter}
handleOnWingWrapperMouseLeave={handleOnWingWrapperMouseLeave}
currentFloor={currentFloor}
isFloorSidebar={isFloorSidebar}
isSkygardenSidebar={isSkygardenSidebar}
/>
</svg>
</div>
</div>
);
};
export default SequenceWing;
client/src/components/complexWingPage/SequenceWing/WingSignatures.tsx
+39
View File
@@ -0,0 +1,39 @@
const WingSignatures = () => {
return (
<>
<svg
y={641}
x={818}
width="66"
height="18"
viewBox="0 0 66 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="66" height="18" rx="9" fill="#0D1922" fillOpacity="0.4" />
<path
d="M13.95 13H8.73V5.32H13.88V6.47H10.14V8.56H13.4V9.7H10.14V11.85H13.95V13ZM19.3193 13H18.0493L18.0193 12.24H17.9993C17.6893 12.78 17.1593 13.11 16.4293 13.11C15.3993 13.11 14.7193 12.43 14.7193 11.48C14.7193 10.82 15.0393 10.32 15.7393 10.08C16.2893 9.89 17.1293 9.84 17.9793 9.81V9.41C17.9793 8.92 17.6393 8.56 17.0093 8.56C16.4293 8.56 16.0893 8.85 15.9293 9.27L14.8893 8.76C15.2493 7.94 15.9793 7.52 17.0693 7.52C18.5193 7.52 19.3193 8.23 19.3193 9.41V13ZM16.8593 12.1C17.5393 12.1 17.9793 11.59 17.9793 10.96V10.67C17.6593 10.69 17.2093 10.72 16.8493 10.77C16.4193 10.83 16.0593 10.98 16.0593 11.42C16.0593 11.81 16.3493 12.1 16.8593 12.1ZM22.602 13.11C21.562 13.11 20.772 12.83 20.172 12.39L20.812 11.47C21.332 11.88 21.992 12.1 22.622 12.1C23.292 12.1 23.672 11.9 23.672 11.52C23.672 11.09 23.182 10.99 22.302 10.83C21.242 10.63 20.392 10.24 20.392 9.2C20.392 8.28 21.122 7.52 22.642 7.52C23.612 7.52 24.312 7.78 24.892 8.19L24.292 9.09C23.772 8.72 23.182 8.53 22.622 8.53C22.022 8.53 21.742 8.77 21.742 9.06C21.742 9.46 22.132 9.55 23.042 9.72C24.032 9.91 25.012 10.23 25.012 11.34C25.012 12.39 24.142 13.11 22.602 13.11ZM25.3252 8.61V7.63H26.3352V5.93H27.6752V7.63H28.8952V8.61H27.6752V11.25C27.6752 11.79 27.8352 12.06 28.4952 12.06C28.6452 12.06 28.7852 12.05 28.8952 12.03V13.01C28.6652 13.07 28.3452 13.11 28.0052 13.11C26.8552 13.11 26.3352 12.54 26.3352 11.54V8.61H25.3252ZM41.0123 5.32H42.4523L40.2523 13H38.6823L37.1123 7.32H37.0923L35.5223 13H33.9323L31.7223 5.32H33.2123L34.7923 11.25H34.8123L36.3523 5.32H37.9023L39.4423 11.22H39.4623L41.0123 5.32ZM43.1915 6.55V5.32H44.6015V6.55H43.1915ZM44.5715 13H43.2215V7.63H44.5715V13ZM45.9754 13V7.63H47.2454L47.2754 8.39H47.2954C47.6254 7.85 48.2054 7.52 48.9354 7.52C50.0654 7.52 50.7954 8.26 50.7954 9.37V13H49.4454V9.57C49.4454 9.02 49.1154 8.58 48.4854 8.58C47.7654 8.58 47.3254 9.09 47.3254 9.77V13H45.9754ZM57.0566 7.63V12.34C57.0566 14.1 55.8866 14.94 54.1366 14.94C53.2566 14.94 52.5866 14.72 52.1066 14.45L52.5466 13.47C52.9466 13.71 53.4366 13.93 54.1066 13.93C55.0166 13.93 55.7166 13.51 55.7166 12.38V12.01H55.6966C55.3166 12.55 54.7366 12.86 54.0166 12.86C52.6566 12.86 51.7866 11.73 51.7866 10.24C51.7866 8.75 52.6666 7.52 54.0966 7.52C54.8366 7.52 55.3966 7.86 55.7866 8.4H55.8066L55.8466 7.63H57.0566ZM54.4566 11.84C55.2966 11.84 55.7566 11.12 55.7566 10.19C55.7566 9.26 55.2866 8.56 54.4566 8.56C53.5866 8.56 53.1566 9.3 53.1566 10.21C53.1566 11.08 53.5666 11.84 54.4566 11.84Z"
fill="white"
/>
</svg>
<svg
y={641}
x={1067}
width="71"
height="18"
viewBox="0 0 71 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="71" height="18" rx="9" fill="#0D1922" fillOpacity="0.4" />
<path
d="M17.36 5.32H18.8L16.6 13H15.03L13.46 7.32H13.44L11.87 13H10.28L8.07 5.32H9.56L11.14 11.25H11.16L12.7 5.32H14.25L15.79 11.22H15.81L17.36 5.32ZM20.1695 9.84H22.5995C22.5395 9.08 22.2095 8.55 21.4195 8.55C20.6395 8.55 20.2495 9.07 20.1695 9.84ZM22.8895 11.43L23.7495 12.19C23.2695 12.76 22.5795 13.11 21.5695 13.11C19.7495 13.11 18.7895 11.99 18.7895 10.32C18.7895 8.7 19.7395 7.52 21.4295 7.52C23.0995 7.52 23.9395 8.67 23.9395 10.15C23.9395 10.35 23.9295 10.6 23.8995 10.75H20.1695C20.2695 11.57 20.7095 12.08 21.5995 12.08C22.1195 12.08 22.5595 11.87 22.8895 11.43ZM26.8891 13.11C25.8491 13.11 25.0591 12.83 24.4591 12.39L25.0991 11.47C25.6191 11.88 26.2791 12.1 26.9091 12.1C27.5791 12.1 27.9591 11.9 27.9591 11.52C27.9591 11.09 27.4691 10.99 26.5891 10.83C25.5291 10.63 24.6791 10.24 24.6791 9.2C24.6791 8.28 25.4091 7.52 26.9291 7.52C27.8991 7.52 28.5991 7.78 29.1791 8.19L28.5791 9.09C28.0591 8.72 27.4691 8.53 26.9091 8.53C26.3091 8.53 26.0291 8.77 26.0291 9.06C26.0291 9.46 26.4191 9.55 27.3291 9.72C28.3191 9.91 29.2991 10.23 29.2991 11.34C29.2991 12.39 28.4291 13.11 26.8891 13.11ZM29.6123 8.61V7.63H30.6223V5.93H31.9623V7.63H33.1823V8.61H31.9623V11.25C31.9623 11.79 32.1223 12.06 32.7823 12.06C32.9323 12.06 33.0723 12.05 33.1823 12.03V13.01C32.9523 13.07 32.6323 13.11 32.2923 13.11C31.1423 13.11 30.6223 12.54 30.6223 11.54V8.61H29.6123ZM45.2995 5.32H46.7395L44.5395 13H42.9695L41.3995 7.32H41.3795L39.8095 13H38.2195L36.0095 5.32H37.4995L39.0795 11.25H39.0995L40.6395 5.32H42.1895L43.7295 11.22H43.7495L45.2995 5.32ZM47.4786 6.55V5.32H48.8886V6.55H47.4786ZM48.8586 13H47.5086V7.63H48.8586V13ZM50.2625 13V7.63H51.5325L51.5625 8.39H51.5825C51.9125 7.85 52.4925 7.52 53.2225 7.52C54.3525 7.52 55.0825 8.26 55.0825 9.37V13H53.7325V9.57C53.7325 9.02 53.4025 8.58 52.7725 8.58C52.0525 8.58 51.6125 9.09 51.6125 9.77V13H50.2625ZM61.3437 7.63V12.34C61.3437 14.1 60.1737 14.94 58.4237 14.94C57.5437 14.94 56.8737 14.72 56.3937 14.45L56.8337 13.47C57.2337 13.71 57.7237 13.93 58.3937 13.93C59.3037 13.93 60.0037 13.51 60.0037 12.38V12.01H59.9837C59.6037 12.55 59.0237 12.86 58.3037 12.86C56.9437 12.86 56.0737 11.73 56.0737 10.24C56.0737 8.75 56.9537 7.52 58.3837 7.52C59.1237 7.52 59.6837 7.86 60.0737 8.4H60.0937L60.1337 7.63H61.3437ZM58.7437 11.84C59.5837 11.84 60.0437 11.12 60.0437 10.19C60.0437 9.26 59.5737 8.56 58.7437 8.56C57.8737 8.56 57.4437 9.3 57.4437 10.21C57.4437 11.08 57.8537 11.84 58.7437 11.84Z"
fill="white"
/>
</svg>
</>
);
};
export default WingSignatures;
client/src/components/masterplanPage/map/Map.tsx
+4 -4
View File
@@ -22,17 +22,17 @@ const Map = () => {
<TransformWrapper
initialScale={isMobile ? 2 : 1}
minScale={isMobile ? 2 : 1}
maxScale={2}
alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
wheel={{ step: 2 }}
wheel={{ step: 10000, smoothStep: 0.0005 }}
zoomAnimation={{
disabled: false,
size: 0,
animationType: "easeOutQuart",
animationTime: 500,
}}
velocityAnimation={{
sensitivity: 1000,
animationTime: 1000,
sensitivity: 100,
animationTime: 100,
animationType: "easeOut",
}}
>
client/src/index.css
+147 -61
View File
@@ -54,67 +54,6 @@ html {
box-shadow: 0px 4px 20px 1px #00000026;
}
.text-caption-s {
font-family: "Usual", sans-serif;
font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
line-height: 135%;
}
.text-caption-m {
font-family: "Usual", sans-serif;
line-height: 135%;
font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
}
.text-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
}
.text-m {
font-family: "Usual", sans-serif;
line-height: 125%;
font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
}
.text-subheadline-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
}
.text-subheadline-m {
font-family: "Usual", sans-serif;
font-size: clamp(20px, 0.2477rem + 1.252vw, 28px);
line-height: 135%;
}
.text-subheadline-l {
font-family: "Usual", sans-serif;
font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px);
line-height: 135%;
}
.text-headline-s {
font-family: "Mixcase", sans-serif;
line-height: 100%;
letter-spacing: -0.03em;
font-size: clamp(44px, -0.257rem + 3.7559vw, 68px);
}
.text-button-m {
}
.mobile-text-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(10px, 0.01rem + 0.93vw, 20px);
}
.mobile-subheadline-m {
}
.rubber-headline-indent {
text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
}
@@ -225,6 +164,153 @@ html {
-webkit-appearance: none;
margin: 0;
}
/* 1280px - 1600px */
@media (max-width: 1600px) {
.text-caption-s {
font-family: "Usual", sans-serif;
font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
line-height: 135%;
}
.text-caption-m {
font-family: "Usual", sans-serif;
line-height: 135%;
font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
}
.text-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
}
.text-m {
font-family: "Usual", sans-serif;
line-height: 125%;
font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
}
.text-subheadline-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
}
.text-subheadline-m {
font-family: "Usual", sans-serif;
font-size: clamp(20px, 0.2477rem + 1.252vw, 28px);
line-height: 135%;
}
.text-subheadline-l {
font-family: "Usual", sans-serif;
font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px);
line-height: 135%;
}
.text-headline-s {
font-family: "Mixcase", sans-serif;
line-height: 100%;
letter-spacing: -0.03em;
font-size: clamp(44px, -0.257rem + 3.7559vw, 68px);
}
}
/* 640px - 1280px */
@media (max-width: 1280px) {
.text-caption-s {
font-size: clamp(0.625rem, 0.25rem + 0.9375vw, 1rem);
}
.text-caption-m {
font-size: clamp(0.625rem, 0.125rem + 1.25vw, 1.125rem);
}
.text-s {
font-size: clamp(0.75rem, 0.25rem + 1.25vw, 1.25rem);
}
.text-m {
font-size: clamp(0.8125rem, 0.125rem + 1.7188vw, 1.5rem);
}
.text-subheadline-s {
font-size: clamp(1rem, 0.25rem + 1.875vw, 1.75rem);
}
.text-subheadline-m {
font-size: clamp(1.25rem, 0.25rem + 2.5vw, 2.25rem);
}
.text-headline-s,
.text-headline-l {
font-size: clamp(2rem, 0rem + 5vw, 4rem);
}
/* not changed */
.text-subheadline-l {
font-family: "Usual", sans-serif;
font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px);
line-height: 135%;
}
/* */
}
/* < 640px */
@media (max-width: 640px) {
.text-caption-s {
font-family: "Usual", sans-serif;
font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
line-height: 135%;
}
.text-caption-m {
font-family: "Usual", sans-serif;
line-height: 135%;
font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
}
.text-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
}
.text-m {
font-family: "Usual", sans-serif;
line-height: 125%;
font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
}
.text-subheadline-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
}
.text-subheadline-m {
font-family: "Usual", sans-serif;
font-size: clamp(20px, 0.2477rem + 1.252vw, 28px);
line-height: 135%;
}
.text-subheadline-l {
font-family: "Usual", sans-serif;
font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px);
line-height: 135%;
}
.text-headline-s,
.text-headline-l {
font-family: "Mixcase", sans-serif;
line-height: 100%;
letter-spacing: -0.03em;
font-size: clamp(44px, -0.257rem + 3.7559vw, 68px);
}
.mobile-text-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(10px, 0.01rem + 0.93vw, 20px);
}
}
}
/* scrollbar */
client/src/pages/ComplexWing.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
import ButtomPanelCompass from "../components/ButtomPanelCompass";
import SequenceWing from "../components/complexWingPage/SequenceWing";
import SequenceWing from "../components/complexWingPage/SequenceWing/SequenceWing";
const ComplexWing = () => {
return (