From 6bfc9634e896b380135232efeee1c7acf1bbe4ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matev=C5=BE=20Ogrinc?= <matevz.ogrinc@ijs.si>
Date: Tue, 4 Mar 2025 14:51:14 +0100
Subject: [PATCH] #DeckAndSideboardSize (#173)

- We now display the correct value of minimum deck size and maximum
sideboard.

---------

Co-authored-by: Dan Bastin <dan.bastin@gmail.com>
---
 src/app/_components/Lobby/Deck/Deck.tsx       | 173 ++++++++++--------
 .../_subcomponents/SetUpCard/SetUpCard.tsx    |   3 -
 2 files changed, 99 insertions(+), 77 deletions(-)

diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx
index 1ea55b29..6e07caa6 100644
--- a/src/app/_components/Lobby/Deck/Deck.tsx
+++ b/src/app/_components/Lobby/Deck/Deck.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, Box, Typography, Divider } from '@mui/material';
+import AllInclusiveIcon from '@mui/icons-material/AllInclusive';
 import { CardStyle, ICardData } from '@/app/_components/_sharedcomponents/Cards/CardTypes';
 import { useGame } from '@/app/_contexts/Game.context';
 import GameCard from '@/app/_components/_sharedcomponents/Cards/GameCard';
@@ -37,80 +38,97 @@ const Deck: React.FC = () => {
     const mainboardError = Object.keys(deckErrors).includes(DeckValidationFailureReason.MinMainboardSizeNotMet);
     const sideboardError = Object.keys(deckErrors).includes(DeckValidationFailureReason.MaxSideboardSizeExceeded);
 
-    // ------------------------STYLES------------------------//
-    const cardStyle = {
-        borderRadius: '1.1em',
-        pt: '.8em',
-        height: '100%',
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: '#00000080',
-        backdropFilter: 'blur(30px)',
-    };
-
-    const headerBoxStyle = {
-        display: 'flex',
-        height: '50px',
-        width: '100%',
-        justifyContent: 'space-between',
-        position: 'sticky',
-        top: '0',
-        zIndex: 1,
-    };
+    // sideboard and deck limits
+    const minDeckSize = connectedUser.minDeckSize;
+    const maxSideBoard = connectedUser.maxSideBoard
 
-    const titleTextStyle = {
-        fontSize: '2em',
-        fontWeight: 'bold',
-        color: 'white',
-        ml: '.6em',
-    };
-
-    const deckSizeTextStyle = {
-        fontSize: '2em',
-        fontWeight: '400',
-        color: 'white',
-        mr: '.6em',
-    };
-    const dividerStyle = {
-        backgroundColor: '#fff',
-        mt: '.5vh',
-        mb: '0.5vh',
-        alignSelf: 'center',
-        height: '1px',
-    };
-    const scrollableBoxStyleSideboard = {
-        height: '36vh',
-        overflow:'auto',
-    };
-    const scrollableBoxStyle = {
-        height: usersSideboard?.length > 0 ? '50vh' : '86vh',
-        overflow:'auto',
-    };
-    const mainContainerStyle = {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '1em',
-        p: '1em',
-        textWrap: 'wrap',
+    // ------------------------STYLES------------------------//
+    const styles = {
+        cardStyle: {
+            borderRadius: '1.1em',
+            pt: '.8em',
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: '#00000080',
+            backdropFilter: 'blur(30px)',
+        },
+        headerBoxStyle: {
+            display: 'flex',
+            height: '50px',
+            width: '100%',
+            justifyContent: 'space-between',
+            position: 'sticky',
+            top: '0',
+            zIndex: 1,
+        },
+        titleTextStyle: {
+            fontSize: '2em',
+            fontWeight: 'bold',
+            color: 'white',
+            ml: '.6em',
+        },
+        deckSizeTextStyle: {
+            fontSize: '2em',
+            fontWeight: '400',
+            color: 'white',
+            mb: 0
+        },
+        dividerStyle: {
+            backgroundColor: '#fff',
+            mt: '.5vh',
+            mb: '0.5vh',
+            alignSelf: 'center',
+            height: '1px',
+        },
+        scrollableBoxStyleSideboard: {
+            height: '36vh',
+            overflow:'auto',
+        },
+        scrollableBoxStyle: {
+            height: usersSideboard?.length > 0 ? '50vh' : '86vh',
+            overflow:'auto',
+        },
+        mainContainerStyle: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '1em',
+            p: '1em',
+            textWrap: 'wrap',
+        },
+        sideboardUnlimitedContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            mr: '.6em'
+        },
+        lineTypography: {
+            fontSize: '1.8em',
+            mr: '2px',
+            mb: 0
+        },
+        infiniteSymbol: {
+            fontSize: '1.6em',
+            color: 'white',
+            mt: '0.3rem'
+        }
     };
-
     return (
         <Box sx={{ width:'100%', height:'100%', overflowY: 'scroll' }}>
-            <Card sx={cardStyle}>
-                <Box sx={headerBoxStyle}>
-                    <Typography sx={titleTextStyle}>Your Deck</Typography>
-                    <Box sx={{ display : 'flex' }}>
-                        <Typography sx={{ ...deckSizeTextStyle, mr:'0px',color: mainboardError ? 'red' : deckSizeTextStyle.color }}>
+            <Card sx={styles.cardStyle}>
+                <Box sx={styles.headerBoxStyle}>
+                    <Typography sx={styles.titleTextStyle}>Your Deck</Typography>
+                    <Box sx={{ display : 'flex', alignItems: 'center', mr: 1 }}>
+                        <Typography sx={{ ...styles.deckSizeTextStyle, mr:'0px',color: mainboardError ? 'red' : styles.deckSizeTextStyle.color }}>
                             {deckCount}
                         </Typography>
-                        <Typography sx={deckSizeTextStyle}>/50</Typography>
+                        <Typography sx={styles.deckSizeTextStyle}>/{minDeckSize}</Typography>
                     </Box>
                 </Box>
                 <Box
-                    sx={scrollableBoxStyle}
+                    sx={styles.scrollableBoxStyle}
                 >
-                    <Box sx={mainContainerStyle}>
+                    <Box sx={styles.mainContainerStyle}>
                         {sortedUserMain.map((card:ICardData) => (
                             <GameCard
                                 key={card.id}
@@ -124,22 +142,29 @@ const Deck: React.FC = () => {
                 </Box>
                 {usersSideboard?.length > 0 && (
                     <>
-                        <Box sx={headerBoxStyle}>
-                            <Typography sx={titleTextStyle}>Sideboard</Typography>
-                            <Divider sx={dividerStyle} />
-                            <Box sx={{ display : 'flex' }}>
-                                <Typography sx={{ ...deckSizeTextStyle, mr:'0px', color: sideboardError ? 'red' : deckSizeTextStyle.color }}>
+                        <Box sx={styles.headerBoxStyle}>
+                            <Typography sx={styles.titleTextStyle}>Sideboard</Typography>
+                            <Divider sx={styles.dividerStyle} />
+                            <Box sx={{ display : 'flex', alignItems: 'center', mr: 1 }}>
+                                <Typography sx={{ ...styles.deckSizeTextStyle, color: sideboardError ? 'red' : styles.deckSizeTextStyle.color }}>
                                     {sideboardCount}
                                 </Typography>
-                                <Typography sx={deckSizeTextStyle}>
-                                    /10
-                                </Typography>
+                                {maxSideBoard === -1 ? (
+                                    <Box sx={styles.sideboardUnlimitedContainer}>
+                                        <Typography sx={styles.lineTypography}>/</Typography>
+                                        <AllInclusiveIcon sx={styles.infiniteSymbol} />
+                                    </Box>
+                                ) : (
+                                    <Typography sx={styles.deckSizeTextStyle}>
+                                        /{maxSideBoard}
+                                    </Typography>
+                                )}
                             </Box>
                         </Box>
                         <Box
-                            sx={scrollableBoxStyleSideboard}
+                            sx={styles.scrollableBoxStyleSideboard}
                         >
-                            <Box sx={mainContainerStyle}>
+                            <Box sx={styles.mainContainerStyle}>
                                 {sortedUsersSideboard.map((card:ICardData) => (
                                     <GameCard
                                         key={card.id}
diff --git a/src/app/_components/Lobby/_subcomponents/SetUpCard/SetUpCard.tsx b/src/app/_components/Lobby/_subcomponents/SetUpCard/SetUpCard.tsx
index aca1ed08..43a45b4a 100644
--- a/src/app/_components/Lobby/_subcomponents/SetUpCard/SetUpCard.tsx
+++ b/src/app/_components/Lobby/_subcomponents/SetUpCard/SetUpCard.tsx
@@ -98,21 +98,18 @@ const SetUpCard: React.FC<ISetUpProps> = ({
             setDeckErrorSummary('Deck is invalid.');
             setDeckErrorDetails(deckErrors);
             setBlockError(true)
-            setErrorModalOpen(true)
         }else{
             setDeckErrorSummary(null);
             setDeckErrorDetails(undefined);
             setErrorModalOpen(false);
             setDisplayerror(false);
             setBlockError(false);
-            setErrorModalOpen(true)
         }
         if (temporaryErrors) {
             // Only 'notImplemented' or no errors => clear them out
             setDisplayerror(true);
             setDeckErrorSummary('Couldn\'t import. Deck is invalid.');
             setDeckErrorDetails(temporaryErrors);
-            setErrorModalOpen(true)
         }
     }, [connectedUser]);