fix issue with the project carousel

this allowed a scroll to be init while one was already playing.
ArtificialLegacy · Jan 13, 2024 · 49d7afc · 49d7afc
1 parent f934a26
commit 49d7afc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/src/modules/project_carousel/components/ProjectCarousel.tsx b/src/modules/project_carousel/components/ProjectCarousel.tsx
@@ -23,32 +23,33 @@ function ProjectCarousel(props: ProjectCarouselProps) {
   const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(
     (e) => {
       if (e.currentTarget == null) return
+      if (animState !== 'idle') return
 
       const target = e.currentTarget as HTMLDivElement
       const { clientWidth } = target
 
       const horizontal = e.clientX / clientWidth
 
-      let animState: 'left' | 'right' | 'idle' = 'idle'
+      let anim: 'left' | 'right' | 'idle' = 'idle'
       let nextProject = currentProject
 
       if (horizontal > 0.9) {
-        animState = 'left'
+        anim = 'left'
         nextProject = projectGetNext(currentProject, props.projects)
       } else if (horizontal < 0.1) {
-        animState = 'right'
+        anim = 'right'
         nextProject = projectGetPrev(currentProject, props.projects)
       }
 
       if (horizontal > 0.9 || horizontal < 0.1) {
-        setAnimState(animState)
+        setAnimState(anim)
         setTimeout(() => {
-          setAnimState('idle')
           setCurrentProject(nextProject)
+          setAnimState('idle')
         }, 500)
       }
     },
-    [currentProject, props.projects],
+    [currentProject, props.projects, animState],
   )
 
   const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {
@@ -95,8 +96,12 @@ function ProjectCarousel(props: ProjectCarouselProps) {
         <h1>My Projects</h1>
       </header>
       <div className="project-carousel">
-        <KeyboardArrowLeftIcon className="project-card-left-icon" />
-        <KeyboardArrowRightIcon className="project-card-right-icon" />
+        <KeyboardArrowLeftIcon
+          className={`project-carousel-left-icon ${animState !== 'idle' && 'project-carousel-icon-disabled'}`}
+        />
+        <KeyboardArrowRightIcon
+          className={`project-carousel-right-icon ${animState !== 'idle' && 'project-carousel-icon-disabled'}`}
+        />
         <div className="project-card-dummy" aria-hidden>
           <ProjectCard project={props.projects[0]} disabled />
         </div>

diff --git a/src/modules/project_carousel/styles/project_carousel.css b/src/modules/project_carousel/styles/project_carousel.css
@@ -45,8 +45,8 @@
   opacity: 0;
 }
 
-.project-card-left-icon,
-.project-card-right-icon {
+.project-carousel-left-icon,
+.project-carousel-right-icon {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -57,13 +57,17 @@
   z-index: 100000;
 
   pointer-events: none;
+
+  &.project-carousel-icon-disabled {
+    opacity: 0.25;
+  }
 }
 
-.project-card-left-icon {
+.project-carousel-left-icon {
   left: 25px;
 }
 
-.project-card-right-icon {
+.project-carousel-right-icon {
   right: 25px;
 }