Fixed photo functionality and appearance, removed duplicate discord b…

…utton
WISVCH · Dec 28, 2023 · f1efaf1 · f1efaf1
1 parent 4481224
commit f1efaf1
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 72 deletions.
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
@@ -1,6 +1,4 @@
 import { h, FunctionalComponent } from "preact";
-import { faTicket } from "@fortawesome/free-solid-svg-icons";
-import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 
 import { Icon } from "/src/components";
 
@@ -30,23 +28,5 @@ export const About: FunctionalComponent = () => (
                 </p>
             </div>
         </div>
-        <div>
-        {/* <a
-                class={style.tickets}
-                href="https://forms.gle/VmVWSof6tLyaVyBB8"
-                target="_blank"
-            >
-                <Icon icon={faTicket} pad />
-                Sign up for the waiting list!
-            </a> */}
-            <a
-                class={style.discord}
-                href="https://discord.gg/rB2ucUaFnc"
-                target="_blank"
-            >
-                <Icon icon={faDiscord} pad />
-                Join Our Discord!
-            </a>
-        </div>
     </section>
 );
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -1,5 +1,7 @@
 import { h, FunctionalComponent } from "preact";
 import { faCalendarDay, faLocationDot } from "@fortawesome/free-solid-svg-icons";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+
 
 
 import * as style from "./style.scss";
@@ -24,7 +26,10 @@ export const Header: FunctionalComponent = () => (
                 {/* TODO: uncomment when tickets are online */}
                 {/* <button>Tickets</button> */}
                 {/* <button class={style.secondary}>Join Discord</button> */}
-                <button href="https://discord.gg/rB2ucUaFnc" target="_blank">Join Discord</button>
+                <button href="https://discord.gg/rB2ucUaFnc" target="_blank">
+                    <Icon icon={faDiscord} pad />
+                    Join Discord
+                </button>
             </div>
         </div>
 

diff --git a/src/components/numbers/style.scss b/src/components/numbers/style.scss
@@ -8,7 +8,7 @@
     h2 {
         color: $secondary-color;
         font-family: "Audiowide";
-        font-size: 96px;
+        font-size: 72px;
         font-style: normal;
         font-weight: 400;
         line-height: normal;

diff --git a/src/components/photos/index.tsx b/src/components/photos/index.tsx
@@ -9,6 +9,9 @@ import * as style from "./style.scss";
  * Renders the photos section.
  */
 export const Photos: FunctionalComponent = () => {
+    const [currentIndex, setCurrentIndex] = useState<number>(0); // Initialize with the first photo
+
+    const galleryContainer = useRef<HTMLDivElement | null>(null);
     const gallery = useRef<HTMLDivElement | null>(null);
     const requestRef = useRef<number>(null);
     const shouldAnimate = useRef<boolean>(true);
@@ -43,53 +46,121 @@ export const Photos: FunctionalComponent = () => {
             shouldAnimate.current = false;
         };
 
-        () => {
+        return () => {
             if (requestRef.current === null) return;
-
             cancelAnimationFrame(requestRef.current);
         };
     }, []);
 
     return (
         <section class={style.photos}>
             <h2>Photos</h2>
-            <div
-                ref={gallery}
-                class={style.gallery}
-                onClick={() => (shouldAnimate.current = false)}
-            >
-                <div class={style.blockleft}></div>
-
-                {photosMap.map((url) => (
-                    <Photo url={url} />
-                ))}
-
-                <div class={style.blockright}></div>
+            <div ref={galleryContainer} class={style.galleryContainer}>
+                <div
+                    ref={gallery}
+                    class={style.gallery}
+                    onClick={() => {
+                        shouldAnimate.current = false;
+                    }}
+                >
+                    {photosMap.map((url, index) => (
+                        <Photo
+                            key={index}
+                            url={url}
+                            setAnimate={() => {
+                                shouldAnimate.current = true;
+                            }}
+                            setNavigate={(index) => setCurrentIndex(index)}
+                            currentIndex={index}
+                            totalPhotos={photosMap.length}
+                            activeIndex={currentIndex}
+                            startup={shouldAnimate.current}
+                        />
+                    ))}
+                </div>
             </div>
         </section>
     );
 };
 
 const Photo: FunctionalComponent<PhotoProps> = (props) => {
-    const [opened, setOpened] = useState<boolean>(false);
+    const [opened, setOpened] = useState<boolean>(props.currentIndex === props.activeIndex);
+    const [currentIndex, setCurrentIndex] = useState<number>(props.currentIndex);
+
+    useEffect(() => {
+        if(props.startup){
+            setOpened(false);
+        } else {
+            setCurrentIndex(props.currentIndex);
+            setOpened(props.currentIndex === props.activeIndex);
+        }
+    }, [props.currentIndex, props.activeIndex]);
 
     const onClick = () => {
         setOpened(!opened);
+        props.setAnimate();
+    };
+
+    const navigate = (delta: number) => {
+        const nextIndex = (currentIndex + delta + props.totalPhotos) % props.totalPhotos;
+        setCurrentIndex(nextIndex);
+        props.setNavigate(nextIndex); 
     };
 
     const classes = `${style.image} ${opened ? style.fullimage : ""}`;
 
     return (
         <span class={classes} onClick={onClick}>
-            <img
-                src={props.url.toString()}
-                alt="HackDelft 2019 photo"
-                loading="lazy"
-            />
+            {opened && (
+                <div class={style.fullimage}>
+                    <div class={style.navigation}>
+                        <div
+                            class={`${style.arrow} ${style.leftArrow}`}
+                            onClick={(e) => {
+                                e.stopPropagation(); 
+                                navigate(-1);
+                            }}
+                        >
+                            &lt;
+                        </div>
+                        <div
+                            class={`${style.arrow} ${style.rightArrow}`}
+                            onClick={(e) => {
+                                e.stopPropagation(); // Stop event propagation
+                                navigate(1);
+                            }}
+                        >
+                            &gt;
+                        </div>
+                    </div>
+                    <img
+                        src={props.url.toString()}
+                        alt="HackDelft 2021 photo"
+                        loading="lazy"
+                    />
+                </div>
+            )}
+            {!opened && (
+                <img
+                    src={props.url.toString()}
+                    alt="HackDelft 2021 photo"
+                    loading="lazy"
+                />
+            )}
         </span>
     );
 };
 
+
+
+
 interface PhotoProps {
     url: URL;
+    setAnimate: () => void;
+    setNavigate: (index: number) => void;
+    currentIndex: number;
+    totalPhotos: number;
+    activeIndex: number;
+    startup: boolean;
 }
+
diff --git a/src/components/photos/style.scss b/src/components/photos/style.scss
@@ -20,51 +20,51 @@
     }
 }
 
-.blockleft {
-    position: absolute; 
-    margin-top: -6.3%;
-    margin-left: 6%;
-    display: block;
-    width: 260px; 
-    height: 500px; 
-    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 50%);
-    z-index: 2; 
-    transform: rotate(-90deg);
-  }
-
-.blockright {
-    position: absolute; 
-    margin-top: -6.3%;
-    margin-left: 40%;
-    display: block;
-    width: 260px; 
-    height: 500px; 
-    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 50%);
-    z-index: 2; 
-    transform: rotate(90deg);
-  }
+.galleryContainer {
+    position: relative;
+    overflow: hidden;
+
+    &::before,
+    &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 30%;
+        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0));
+        z-index: 1; 
+        pointer-events: none;
+    }
+
+    &::before {
+        left: 0;
+        background: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0));
+    }
+
+    &::after {
+        right: 0;
+    }
+}
 
 
 .gallery {
+    position: relative;
     display: flex;
     overflow-x: scroll;
     gap: 8px;
     scrollbar-width: auto;
-    scrollbar-color: $primary-color $background-color;
 
     &::-webkit-scrollbar {
         height: 8px;
     }
 
     &::-webkit-scrollbar-track {
-        background: $background-color;
+        background: rgb(48, 48, 48);
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: $primary-color;
+        background-color: rgb(100, 100, 100);
     }
-
-
 }
 
 .image {
@@ -80,16 +80,36 @@
 .fullimage {
     position: fixed;
     display: flex;
-
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     justify-content: center;
     align-items: center;
-
     background-color: #181226bb;
     backdrop-filter: blur(12px);
+    z-index: 2;
+
+    .navigation {
+        position: absolute;
+        top: 50%; 
+        transform: translateY(-50%); 
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        pointer-events: none; 
+    }
+
+    .arrow {
+        color: white;
+        font-size: 72px;
+        cursor: pointer;
+        pointer-events: auto; 
+    }
+
+    .arrow:hover {
+        color: $primary-color;
+    }
 
     img {
         width: auto;
@@ -98,3 +118,4 @@
         max-width: 90vw;
     }
 }
+