- {descriptionFloor?.floor
- ? `${descriptionFloor.floor} Floor`
- : " Floor"}
+ {descriptionFloor?.floor} Floor
{descriptionFloor?.wing}
diff --git a/src/components/complexWingPage/FloorSidebar/FloorEastWingLayout.tsx b/src/components/complexWingPage/FloorSidebar/FloorEastWingLayout.tsx
new file mode 100644
index 0000000..cfba6bf
--- /dev/null
+++ b/src/components/complexWingPage/FloorSidebar/FloorEastWingLayout.tsx
@@ -0,0 +1,57 @@
+function FloorEastWingLayout() {
+ return (
+
+ );
+}
+
+export default FloorEastWingLayout;
diff --git a/src/components/complexWingPage/FloorSidebar/FloorLayout.tsx b/src/components/complexWingPage/FloorSidebar/FloorLayout.tsx
deleted file mode 100644
index aecb8fd..0000000
--- a/src/components/complexWingPage/FloorSidebar/FloorLayout.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import React from "react";
-
-function FloorLayout() {
- return (
-
- );
-}
-
-export default FloorLayout;
diff --git a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
index 20b9755..b677e5b 100644
--- a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+++ b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
@@ -1,14 +1,20 @@
-import FloorLayout from "./FloorLayout";
+import { IDesctiptionFloor } from "../../../types/descriptionFloor";
+import FloorEastWingLayout from "./FloorEastWingLayout";
+import FloorWestWingLayout from "./FloorWestWingLayout";
-const FloorSidebar = () => {
+interface IFloorSidebarProps {
+ currentFloor: IDesctiptionFloor | null;
+}
+
+const FloorSidebar = ({ currentFloor }: IFloorSidebarProps) => {
return (
-
+
- 11 floor
+ {currentFloor?.floor} Floor
-
East Wing
+
{currentFloor?.wing}
234 units
@@ -37,7 +43,11 @@ const FloorSidebar = () => {
-
+ {currentFloor?.wing === "West Wing" ? (
+
+ ) : (
+
+ )}
);
diff --git a/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx b/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx
new file mode 100644
index 0000000..89ae45e
--- /dev/null
+++ b/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx
@@ -0,0 +1,56 @@
+function FloorWestWingLayout() {
+ return (
+
+ );
+}
+
+export default FloorWestWingLayout;
diff --git a/src/components/complexWingPage/SequenceWing.tsx b/src/components/complexWingPage/SequenceWing.tsx
index ec43de2..8b34018 100644
--- a/src/components/complexWingPage/SequenceWing.tsx
+++ b/src/components/complexWingPage/SequenceWing.tsx
@@ -2,104 +2,116 @@ import { useEffect, useRef, useState } from "react";
import FloorDescription from "./FloorDescription";
import { IDesctiptionFloor } from "../../types/descriptionFloor";
import SkygardenDescription from "./SkygardenDescription";
-import FloorLayout from "./FloorSidebar/FloorLayout";
import FloorSidebar from "./FloorSidebar/FloorSidebar";
import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar";
+import useWingSidebar from "../../store/useWingSidebar";
+import { useHover } from "@uidotdev/usehooks";
const descriptions: IDesctiptionFloor[] = [
- { id: "0", floor: 26, wing: "East Wing" },
- { id: "1", floor: 17, wing: "East Wing" },
- { id: "2", floor: 25, wing: "East Wing" },
- { id: "3", floor: 24, wing: "East Wing" },
- { id: "4", floor: 23, wing: "East Wing" },
- { id: "5", floor: 22, wing: "East Wing" },
- { id: "6", floor: 21, wing: "East Wing" },
- { id: "7", floor: 20, wing: "East Wing" },
- { id: "8", floor: 19, wing: "East Wing" },
- { id: "9", floor: 18, wing: "East Wing" },
- { id: "10", floor: 16, wing: "East Wing" },
- { id: "11", floor: 15, wing: "East Wing" },
- { id: "12", floor: 14, wing: "East Wing" },
- { id: "13", floor: 13, wing: "East Wing" },
- { id: "14", floor: 12, wing: "East Wing" },
- { id: "15", floor: 11, wing: "East Wing" },
- { id: "16", floor: 10, wing: "East Wing" },
- { id: "17", floor: 9, wing: "East Wing" },
- { id: "18", floor: 8, wing: "East Wing" },
- { id: "19", floor: 7, wing: "East Wing" },
- { id: "20", floor: 6, wing: "East Wing" },
- { id: "21", floor: 5, wing: "East Wing" },
- { id: "22", floor: 4, wing: "East Wing" },
- { id: "23", floor: 3, wing: "East Wing" },
- { id: "24", floor: 2, wing: "East Wing" },
- { id: "25", floor: 1, wing: "East Wing" },
+ { id: "0", floor: 31, wing: "East Wing" },
+ { id: "1", floor: 21, wing: "East Wing" },
+ { id: "2", floor: 30, wing: "East Wing" },
+ { id: "3", floor: 29, wing: "East Wing" },
+ { id: "4", floor: 28, wing: "East Wing" },
+ { id: "5", floor: 27, wing: "East Wing" },
+ { id: "6", floor: 26, wing: "East Wing" },
+ { id: "7", floor: 25, wing: "East Wing" },
+ { id: "8", floor: 24, wing: "East Wing" },
+ { id: "9", floor: 22, wing: "East Wing" },
+ { id: "10", floor: 20, wing: "East Wing" },
+ { id: "11", floor: 19, wing: "East Wing" },
+ { id: "12", floor: 18, wing: "East Wing" },
+ { id: "13", floor: 17, wing: "East Wing" },
+ { id: "14", floor: 16, wing: "East Wing" },
+ { id: "15", floor: 15, wing: "East Wing" },
+ { id: "16", floor: 14, wing: "East Wing" },
+ { id: "17", floor: 13, wing: "East Wing" },
+ { id: "18", floor: 12, wing: "East Wing" },
+ { id: "19", floor: 11, wing: "East Wing" },
+ { id: "20", floor: 10, wing: "East Wing" },
+ { id: "21", floor: 9, wing: "East Wing" },
+ { id: "22", floor: 8, wing: "East Wing" },
+ { id: "23", floor: 7, wing: "East Wing" },
+ { id: "24", floor: 6, wing: "East Wing" },
+ { id: "25", floor: 5, wing: "East Wing" },
- { id: "50", floor: 26, wing: "West Wing" },
- { id: "26", floor: 25, wing: "West Wing" },
- { id: "27", floor: 24, wing: "West Wing" },
- { id: "28", floor: 23, wing: "West Wing" },
- { id: "29", floor: 22, wing: "West Wing" },
- { id: "30", floor: 21, wing: "West Wing" },
- { id: "31", floor: 20, wing: "West Wing" },
- { id: "32", floor: 19, wing: "West Wing" },
- { id: "33", floor: 16, wing: "West Wing" },
- { id: "34", floor: 15, wing: "West Wing" },
- { id: "35", floor: 14, wing: "West Wing" },
- { id: "36", floor: 13, wing: "West Wing" },
- { id: "37", floor: 12, wing: "West Wing" },
- { id: "38", floor: 11, wing: "West Wing" },
- { id: "39", floor: 10, wing: "West Wing" },
- { id: "40", floor: 9, wing: "West Wing" },
- { id: "41", floor: 8, wing: "West Wing" },
- { id: "42", floor: 7, wing: "West Wing" },
- { id: "43", floor: 6, wing: "West Wing" },
- { id: "44", floor: 5, wing: "West Wing" },
- { id: "45", floor: 4, wing: "West Wing" },
- { id: "46", floor: 3, wing: "West Wing" },
- { id: "47", floor: 2, wing: "West Wing" },
- { id: "48", floor: 1, wing: "West Wing" },
- { id: "49", floor: 17, wing: "West Wing" },
+ { id: "50", floor: 31, wing: "West Wing" },
+ { id: "26", floor: 30, wing: "West Wing" },
+ { id: "27", floor: 29, wing: "West Wing" },
+ { id: "28", floor: 28, wing: "West Wing" },
+ { id: "29", floor: 27, wing: "West Wing" },
+ { id: "30", floor: 26, wing: "West Wing" },
+ { id: "31", floor: 25, wing: "West Wing" },
+ { id: "32", floor: 24, wing: "West Wing" },
+ { id: "33", floor: 20, wing: "West Wing" },
+ { id: "34", floor: 19, wing: "West Wing" },
+ { id: "35", floor: 18, wing: "West Wing" },
+ { id: "36", floor: 17, wing: "West Wing" },
+ { id: "37", floor: 16, wing: "West Wing" },
+ { id: "38", floor: 15, wing: "West Wing" },
+ { id: "39", floor: 14, wing: "West Wing" },
+ { id: "40", floor: 13, wing: "West Wing" },
+ { id: "41", floor: 12, wing: "West Wing" },
+ { id: "42", floor: 11, wing: "West Wing" },
+ { id: "43", floor: 10, wing: "West Wing" },
+ { id: "44", floor: 9, wing: "West Wing" },
+ { id: "45", floor: 8, wing: "West Wing" },
+ { id: "46", floor: 7, wing: "West Wing" },
+ { id: "47", floor: 6, wing: "West Wing" },
+ { id: "48", floor: 5, wing: "West Wing" },
+ { id: "49", floor: 21, wing: "West Wing" },
];
+const skyGardenFloor = 22;
+
const SequenceWing = () => {
const [width, setWidth] = useState
(0);
const [top, setTop] = useState(0);
const leftWingRef = useRef(null);
- const descriptionRef = useRef(null);
-
- const [scalePercent, setSetScalePercent] = useState(100);
- const [currentFloorHover, setCurrentFloorHover] = useState(
- null
- );
+ const { isSidebar, setIsSidebar } = useWingSidebar();
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
- const [currentFloor, setCurrentFloor] = useState(
+ const [currentHoveredFloor, setHoverCurrentFloor] =
+ useState(null);
+ const [currentFloor, setCurrentFloor] = useState(
null
);
+ const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false);
+ const [isFloorSidebar, setIsFloorSidebar] = useState(false);
+ const [ref, hovering] = useHover();
function handleResize() {
setWidth(window.innerWidth);
setTop(window.innerWidth / 2 - window.innerHeight / 2);
- setSetScalePercent((100 / 1920) * window.innerWidth);
}
- const handleOnLeftFloorMouseEnter = (
+ const handleOnFloorMouseEnter = (
e: React.MouseEvent
) => {
+ e.stopPropagation();
const id = e.currentTarget.dataset.id;
if (!id) return;
const _currentFloor = descriptions.find((desc) => desc.id === id);
if (!_currentFloor) return;
- setCurrentFloor(_currentFloor);
-
- setCurrentFloorHover(id);
+ setHoverCurrentFloor(_currentFloor);
};
- const handleOnLeftFloorMouseLeave = () => {
- setCurrentFloorHover(null);
- setCurrentFloor(null);
+ const handleOnFloorMouseLeave = () => {
+ setHoverCurrentFloor(null);
};
- const handleOnFloorClick = () => {};
+ const handleOnFloorClick = () => {
+ if (!currentHoveredFloor) return;
+ setCurrentFloor(currentHoveredFloor);
+ setIsFloorSidebar(true);
+ setIsSkygardenSidebar(false);
+ setIsSidebar(true);
+ };
+
+ const handleOnSkygardenClick = () => {
+ setIsSkygardenSidebar(true);
+ setIsFloorSidebar(false);
+ setIsSidebar(true);
+ };
function handleMouseMove(e: MouseEvent) {
const top = window.innerWidth / 2 - window.innerHeight / 2;
@@ -122,33 +134,81 @@ const SequenceWing = () => {
};
}, []);
+ useEffect(() => {
+ if (!isSidebar) {
+ setIsFloorSidebar(false);
+ setIsSkygardenSidebar(false);
+ }
+ }, [isSidebar]);
+
return (
-
- {/*
*/}
-
+
+
+
+
+
+
+
+
-
+
+
+
+
+
@@ -160,6 +220,57 @@ const SequenceWing = () => {
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 `}
>
+ {/* Крылья */}
+
+
+
+
+