diff --git a/client/index.html b/client/index.html index 2bdcc7f..78fdaf5 100644 --- a/client/index.html +++ b/client/index.html @@ -1,10 +1,13 @@ - + - + IRTH diff --git a/client/src/components/Button3.tsx b/client/src/components/Button3.tsx index 52c95fb..7fb0882 100644 --- a/client/src/components/Button3.tsx +++ b/client/src/components/Button3.tsx @@ -11,7 +11,7 @@ interface Props { const variantClasses = { primary: "bg-[#00BED7] text-white hover:bg-[#0AB3C9]", - secondary: "bg-white hover:text-[#0D1922]", + secondary: "bg-white hover:text-[#0D1922] ring-1 ring-[#E2E2DC] ring-inset", }; const sizeClasses = { @@ -46,7 +46,7 @@ function Button3({ onClick={onClick} > {icon} - {children} + {children} ); } diff --git a/client/src/components/FloorPath.tsx b/client/src/components/FloorPath.tsx index ca6c50e..4a9ef10 100644 --- a/client/src/components/FloorPath.tsx +++ b/client/src/components/FloorPath.tsx @@ -4,8 +4,8 @@ function FloorPath(props: SVGProps & { selected: boolean }) { return ( ); diff --git a/client/src/components/Test/FloorItem.tsx b/client/src/components/Test/FloorItem.tsx new file mode 100644 index 0000000..59d0b69 --- /dev/null +++ b/client/src/components/Test/FloorItem.tsx @@ -0,0 +1,55 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { useEffect, useRef, useState } from "react"; + +interface Props { + floor: string; + onSelected: () => void; +} + +function FloorItem({ floor, onSelected }: Props) { + const [selected, setSelected] = useState(false); + // const [ref, entry] = useIntersectionObserver({ + // threshold: 0, + // root: document.querySelector("#test"), + // rootMargin: "0px", + // }); + + // console.log(document.querySelector("#test")); + + // useEffect(() => { + // if (!entry?.isIntersecting) return; + + // onSelected(); + // }, [entry?.isIntersecting]); + + const ref = useRef(null); + + useEffect(() => { + const test = document.querySelector("#test")!.getBoundingClientRect(); + + setInterval(() => { + if ( + ref.current!.getBoundingClientRect().x >= test!.left && + ref.current!.getBoundingClientRect().x <= test!.right + ) { + onSelected(); + setSelected(true); + } else { + setSelected(false); + } + }, 0); + }, []); + + return ( +

+ {floor} +

+ ); +} + +export default FloorItem; diff --git a/client/src/index.css b/client/src/index.css index dae6483..48f183d 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -374,3 +374,7 @@ body { transform: translateX(100%); opacity: 0; } + +#floors::-webkit-scrollbar { + display: none; +} diff --git a/client/src/pages/Test2Page.tsx b/client/src/pages/Test2Page.tsx index 01f03ae..95739bf 100644 --- a/client/src/pages/Test2Page.tsx +++ b/client/src/pages/Test2Page.tsx @@ -9,6 +9,8 @@ import InfoIcon from "../components/icons/InfoIcon"; import Header from "../components/Header"; import { useNavigate } from "react-router-dom"; import ArrowRightIcon from "../components/icons/ArrowRightIcon"; +import FloorItem from "../components/Test/FloorItem"; +import { isMobile } from "react-device-detect"; const floors = [ "5", @@ -52,6 +54,8 @@ function Test2Page() { const navigate = useNavigate(); const [hoveredWing, setHoveredWing] = useState(); const [selectedIndex, setSelectedIndex] = useState(0); + const [selectedFloor, setSelectedFloor] = useState(); + // const rootRef = useRef(null);\ function handleResize() { if (window.innerHeight > window.innerWidth) { @@ -69,19 +73,19 @@ function Test2Page() { } function handleMouseEnter(e: React.MouseEvent) { - console.log(e); + if (!e.currentTarget.dataset["wing"]) return; + setSelectedFloorPath(e.currentTarget); setHoveredWing(e.currentTarget.dataset["wing"]); setShowPopup(true); } - function handleMouseLeave(e: React.MouseEvent) { - console.log(e); + function handleMouseLeave() { setShowPopup(false); } function handleClick(e: React.MouseEvent) { - setSelectedWing(e.currentTarget.dataset["wing"]); + setSelectedFloor(e.currentTarget.dataset["floor"]); } function prev() { @@ -116,37 +120,12 @@ function Test2Page() { }, [selectedIndex]); return ( -
- {/*
- setSelectedSide("left")}> - Left - - setSelectedSide("right")}> - Right - - setSelectedSide(undefined)}> - None - -
*/} +
- - {(state) => ( -
-
-

- Nulla, explicabo debitis! Quod, natus. Quaerat fuga, distinctio - porro laboriosam dolores aliquam similique magni deleniti - quibusdam omnis nam. Odit ut tempore porro, sequi iste fugit. - Sunt consequatur magnam ducimus quibusdam! -

-
-
- )} - -
} - onClick={() => navigate("/about-project")} + onClick={() => navigate("/about-projects")} > - About Project + About Projects
@@ -257,12 +236,10 @@ function Test2Page() {
-
+
- {paths.map((path, index) => ( - - ))} + {!isMobile ? ( + paths.map((path, index) => ( + + )) + ) : ( + <> + + {paths + .filter((path) => path["data-wing"] === selectedWing) + .map((path, index) => ( + + ))} + + + setSelectedWing("East")} + /> + setSelectedWing("West")} + /> + + + )}
-
-
- setHoveredWing("East")}>East - setHoveredWing("West")}>West -
-
-
+
+
+
+
- {floors.map((value, index) => ( -
- {value} -
+ {floors.map((floor) => ( + setHoveredFloor(floor)} + /> ))}
-
+
+
+ } + onlyIcon + className="ring-0 w-9 h-9" + /> + } + onlyIcon + className="ring-0 w-9 h-9" + /> +
- {selectedIndex !== 0 && ( +
} - onlyIcon - className="absolute top-2 left-2" - onClick={prev} - /> - )} - {selectedIndex !== floors.length - 1 && ( + icon={} + className="w-full" + onClick={() => setSelectedWing(undefined)} + > + Back + } - onlyIcon - className="absolute top-2 right-2" - onClick={next} - /> - )} + icon={} + className="w-full flex-row-reverse" + onClick={() => setSelectedFloor(hoveredFloor)} + > + Explore + +
+ + + {(state) => ( +
+
+ setSelectedFloor(undefined)}> + Close + +

{selectedFloor}

+
+
+ )} +
); }