Merge pull request #611 from ShouvikGhosh2048/dynamically-size-mod-ca…

…rousel Dynamically size mod carousel
celestemods-com · Nov 12, 2023 · 325d12c · 325d12c
2 parents 7660d15 + 045f41c
commit 325d12c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/components/mods/expandedMod.tsx b/src/components/mods/expandedMod.tsx
@@ -78,7 +78,7 @@ const ExpandedMod = ({ isLoading, mod }: ExpandedModProps) => {
                     isMapperNameVisiblePermitted={isMapperNameVisiblePermitted}
                     mapIds={mod.Map.map(({ id }) => id)}
                 />
-                <ModCarousel gamebananaModId={mod.gamebananaModId} />
+                <ModCarousel gamebananaModId={mod.gamebananaModId} numberOfMaps={mod.Map.length}/>
             </Flex>
         </Stack>
     );

diff --git a/src/components/mods/modCarousel.tsx b/src/components/mods/modCarousel.tsx
@@ -22,11 +22,23 @@ const useStyles = createStyles(
             },
         },
         viewport: {
-            border: "3px solid #263972",
+            "div": {
+                alignItems: 'center',
+            }
         },
         slide: {
             width: "400px",
         },
+        imgMaxHeight250: {
+            "img": {
+                maxHeight: "250px",
+            }
+        },
+        imgMaxHeight400: {
+            "img": {
+                maxHeight: "400px",
+            }
+        },
         controls: {
             transform: "translate(0, 0)",
             position: "unset"
@@ -44,12 +56,13 @@ const useStyles = createStyles(
 
 type modCarouselProps = {
     gamebananaModId: number,
+    numberOfMaps: number,
 };
 
 
 
 
-const ModCarousel = ({ gamebananaModId }: modCarouselProps) => {
+const ModCarousel = ({ gamebananaModId, numberOfMaps }: modCarouselProps) => {
     const { imageUrls } = useGamebananaModImageUrls({ gamebananaModId });
 
 
@@ -63,7 +76,7 @@ const ModCarousel = ({ gamebananaModId }: modCarouselProps) => {
             <Carousel classNames={{
                 root: classes.carousel,
                 viewport: classes.viewport,
-                slide: classes.slide,
+                slide: cx(classes.slide, numberOfMaps >= 4 ? classes.imgMaxHeight400 : classes.imgMaxHeight250),
                 controls: classes.controls,
                 control:classes.control,
             }}>
@@ -76,7 +89,6 @@ const ModCarousel = ({ gamebananaModId }: modCarouselProps) => {
                         <Image
                             src={imageUrl}
                             alt="Mod image"
-                            height={250}     //TODO!!: add responsive image sizes
                         />
                     </Carousel.Slide>
                 ))}

diff --git a/src/components/mods/modsTable.tsx b/src/components/mods/modsTable.tsx
@@ -202,10 +202,14 @@ export const ModsTable = ({ qualities, difficulties, modsWithInfo, isLoading }:
         setCurrentTabIndex(parentDifficultyNames.length > 0 ? 0 : null);
     }, [difficulties, parentDifficultyNames]);
 
-    // Check child difficulties when childDifficultyNames changes.
+    // Check selected child difficulties when childDifficultyNames changes.
     useEffect(() => {
-        setSelectedChildDifficulties(selectedChildDifficulties => selectedChildDifficulties.filter(childDifficulty => childDifficultyNames.includes(childDifficulty)));
-    }, [childDifficultyNames]);
+        const newSelectedChildDifficulties = selectedChildDifficulties.filter(childDifficulty => childDifficultyNames.includes(childDifficulty));
+        // Only set when the list actually reduces.
+        if (newSelectedChildDifficulties.length !== selectedChildDifficulties.length) {
+            setSelectedChildDifficulties(newSelectedChildDifficulties);
+        }
+    }, [selectedChildDifficulties, childDifficultyNames]);
 
     const filteredModsWithInfo = useMemo(() => {
         return modsWithInfo.filter((modWithInfo) => {