smoother transition between tournaments

ungdev · Aug 3, 2023 · a692e56 · a692e56
1 parent f4438ab
commit a692e56
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git a/src/app/tournaments/page.tsx b/src/app/tournaments/page.tsx
@@ -7,9 +7,15 @@ import { tournaments } from '@/lib/tournaments';
 import Divider from '@/components/UI/Divider';
 
 const TournamentHome = () => {
+  const fadeDuration = 200;
   //const dispatch = useAppDispatch();
   //const tournaments = useAppSelector((state) => state.tournament.tournaments);
   const [selectedTournamentIndex, setSelectedTournamentIndex] = useState(0);
+  //const [removeFadeAt, setRemovedFadeAt] = useState(0);
+  const [lastFading, setLastFading] = useState(Date.now());
+  const [renderedTournamentIndex, setRenderedTournamentIndex] = useState(0);
+  // Only used for force-updating the component
+  const [updater, setUpdater] = useState(false);
 
   useEffect(() => {
     if (!tournaments) {
@@ -18,16 +24,30 @@ const TournamentHome = () => {
   }, []);
 
   useEffect(() => {
+    setTimeout(() => {
+      setUpdater(!updater); // Force-update the component
+    }, fadeDuration);
+  }, [selectedTournamentIndex]);
+
+  const selectTournament = (i) => {
+    if (i === selectedTournamentIndex) return;
+    setSelectedTournamentIndex(i);
+    setLastFading(Date.now());
+  };
+
+  const selectedTournament = tournaments[selectedTournamentIndex];
+
+  const fading = Date.now() - lastFading < fadeDuration;
+  if (!fading && renderedTournamentIndex !== selectedTournamentIndex) {
+    setRenderedTournamentIndex(selectedTournamentIndex);
     document.documentElement.style.setProperty(
       '--background-image',
       `url("${tournaments[selectedTournamentIndex].backgroundImage}")`,
     );
-  }, [selectedTournamentIndex]);
-
-  const selectedTournament = tournaments[selectedTournamentIndex];
+  }
 
   return (
-    <div className="tournament-container">
+    <div className={`tournament-container ${fading ? 'fading' : ''}`}>
       <div className="page-title">
         <Divider is_white />
         <Title align="center">Tournois</Title>
@@ -43,7 +63,7 @@ const TournamentHome = () => {
                   src={tournament.image}
                   alt={`Logo ${tournament.name}`}
                   className={`tournament ${i === selectedTournamentIndex ? 'selected' : ''}`}
-                  onClick={() => setSelectedTournamentIndex(i)}
+                  onClick={() => selectTournament(i)}
                 />
               ))}
         </div>

diff --git a/src/app/tournaments/style.scss b/src/app/tournaments/style.scss
@@ -128,32 +128,37 @@
       width: 100%;
       height: 100%;
       z-index: 4;
+      transition: background-color 0.2s ease-in-out;
+
+      &.fading {
+        background: rgba($primary-background, 1);
+      }
 
       .page-title {
         display: flex;
         align-items: center;
         justify-items: center;
         padding: 3rem 0;
-  
+
         .title {
           margin: 0;
           padding: 0 1rem;
         }
-  
+
         .divider:nth-of-type(1) {
           margin-left: 68px;
         }
-  
+
         .divider:nth-of-type(2) {
           margin-right: 68px;
         }
       }
-  
+
       .content {
         display: flex;
         justify-content: space-between;
         transition: background 0.25s ease-in-out;
-  
+
         .tournaments-list {
           width: calc(20% + 100px);
           display: flex;
@@ -165,12 +170,12 @@
           /* Hide scrollbar for IE, Edge and Firefox */
           -ms-overflow-style: none;  /* IE and Edge */
           scrollbar-width: none;  /* Firefox */
-  
+
           /* Hide scrollbar for Chrome, Safari and Opera */
           &::-webkit-scrollbar {
             display: none;
           }
-  
+
           .tournament {
             margin: 0.625rem 0;
             display: block;
@@ -179,23 +184,23 @@
             aspect-ratio: 7/3;
             object-fit: cover;
             transition: all 0.25s ease-in-out;
-  
+
             &:hover {
               cursor: pointer;
             }
-  
+
             &.selected {
               transform: translateX(80px);
               border: 4px solid $title-color;
               padding: 0;
-  
+
               &:hover {
                 cursor: default;
               }
             }
           }
         }
-  
+
         .tournament-info {
           text-align: right;
           margin-right: 15%;
@@ -204,14 +209,14 @@
           line-height: 3.5rem;
           width: 50%;
           height: 100%;
-  
+
           h2 {
             color: $title-color;
             font-size: 3rem;
             font-weight: 800;
             text-transform: uppercase;
           }
-  
+
           .button {
             margin-top: 30px;
             width: 40%;