From 00958963c1bd326d51c544ac89d1c223fc6927e8 Mon Sep 17 00:00:00 2001
From: matevz <matevz.ogrinc@ijs.si>
Date: Mon, 3 Mar 2025 16:09:55 +0100
Subject: [PATCH 1/3] #DeckAndSideboardSize - Added changes to the
 deck/sideboard count we get the minDeckSize from the BE.

---
 src/app/_components/Lobby/Deck/Deck.tsx                   | 8 ++++++--
 .../Lobby/_subcomponents/SetUpCard/SetUpCard.tsx          | 3 ---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx
index 1ea55b29..6a3aee2b 100644
--- a/src/app/_components/Lobby/Deck/Deck.tsx
+++ b/src/app/_components/Lobby/Deck/Deck.tsx
@@ -37,6 +37,10 @@ const Deck: React.FC = () => {
     const mainboardError = Object.keys(deckErrors).includes(DeckValidationFailureReason.MinMainboardSizeNotMet);
     const sideboardError = Object.keys(deckErrors).includes(DeckValidationFailureReason.MaxSideboardSizeExceeded);
 
+    // sideboard and deck limits
+    const minDeckSize = connectedUser.minDeckSize;
+    const maxSideBoard = connectedUser.maxSideBoard
+
     // ------------------------STYLES------------------------//
     const cardStyle = {
         borderRadius: '1.1em',
@@ -104,7 +108,7 @@ const Deck: React.FC = () => {
                         <Typography sx={{ ...deckSizeTextStyle, mr:'0px',color: mainboardError ? 'red' : deckSizeTextStyle.color }}>
                             {deckCount}
                         </Typography>
-                        <Typography sx={deckSizeTextStyle}>/50</Typography>
+                        <Typography sx={deckSizeTextStyle}>/{minDeckSize}</Typography>
                     </Box>
                 </Box>
                 <Box
@@ -132,7 +136,7 @@ const Deck: React.FC = () => {
                                     {sideboardCount}
                                 </Typography>
                                 <Typography sx={deckSizeTextStyle}>
-                                    /10
+                                    /{maxSideBoard}
                                 </Typography>
                             </Box>
                         </Box>
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]);
 

From a20aadd25bc59e1ad39afe4b7ede8c1a133b1474 Mon Sep 17 00:00:00 2001
From: Matevz <matevz.ogrinc@ijs.si>
Date: Mon, 3 Mar 2025 21:40:27 +0100
Subject: [PATCH 2/3] Added infinity symbol for infinite deck size.

---
 src/app/_components/Lobby/Deck/Deck.tsx | 164 +++++++++++++-----------
 1 file changed, 92 insertions(+), 72 deletions(-)

diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx
index 6a3aee2b..e884752c 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';
@@ -42,79 +43,91 @@ const Deck: React.FC = () => {
     const maxSideBoard = connectedUser.maxSideBoard
 
     // ------------------------STYLES------------------------//
-    const cardStyle = {
-        borderRadius: '1.1em',
-        pt: '.8em',
-        height: '100%',
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: '#00000080',
-        backdropFilter: 'blur(30px)',
+    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',
+            mr: '.6em',
+        },
+        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'
+        },
+        infiniteSymbol: {
+            fontSize: '1.6em',
+            color: 'white',
+            mb: '0.7rem'
+        }
     };
-
-    const headerBoxStyle = {
-        display: 'flex',
-        height: '50px',
-        width: '100%',
-        justifyContent: 'space-between',
-        position: 'sticky',
-        top: '0',
-        zIndex: 1,
-    };
-
-    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',
-    };
-
     return (
         <Box sx={{ width:'100%', height:'100%', overflowY: 'scroll' }}>
-            <Card sx={cardStyle}>
-                <Box sx={headerBoxStyle}>
-                    <Typography sx={titleTextStyle}>Your Deck</Typography>
+            <Card sx={styles.cardStyle}>
+                <Box sx={styles.headerBoxStyle}>
+                    <Typography sx={styles.titleTextStyle}>Your Deck</Typography>
                     <Box sx={{ display : 'flex' }}>
-                        <Typography sx={{ ...deckSizeTextStyle, mr:'0px',color: mainboardError ? 'red' : deckSizeTextStyle.color }}>
+                        <Typography sx={{ ...styles.deckSizeTextStyle, mr:'0px',color: mainboardError ? 'red' : styles.deckSizeTextStyle.color }}>
                             {deckCount}
                         </Typography>
-                        <Typography sx={deckSizeTextStyle}>/{minDeckSize}</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}
@@ -128,22 +141,29 @@ const Deck: React.FC = () => {
                 </Box>
                 {usersSideboard?.length > 0 && (
                     <>
-                        <Box sx={headerBoxStyle}>
-                            <Typography sx={titleTextStyle}>Sideboard</Typography>
-                            <Divider sx={dividerStyle} />
+                        <Box sx={styles.headerBoxStyle}>
+                            <Typography sx={styles.titleTextStyle}>Sideboard</Typography>
+                            <Divider sx={styles.dividerStyle} />
                             <Box sx={{ display : 'flex' }}>
-                                <Typography sx={{ ...deckSizeTextStyle, mr:'0px', color: sideboardError ? 'red' : deckSizeTextStyle.color }}>
+                                <Typography sx={{ ...styles.deckSizeTextStyle, mr:'0px', color: sideboardError ? 'red' : styles.deckSizeTextStyle.color }}>
                                     {sideboardCount}
                                 </Typography>
-                                <Typography sx={deckSizeTextStyle}>
-                                    /{maxSideBoard}
-                                </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}

From bcf1891db2d85cf2c5140a31e75ab75d13924031 Mon Sep 17 00:00:00 2001
From: Dan Bastin <dan.bastin@gmail.com>
Date: Mon, 3 Mar 2025 18:30:19 -0500
Subject: [PATCH 3/3] number alignment

---
 src/app/_components/Lobby/Deck/Deck.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx
index e884752c..6e07caa6 100644
--- a/src/app/_components/Lobby/Deck/Deck.tsx
+++ b/src/app/_components/Lobby/Deck/Deck.tsx
@@ -73,7 +73,7 @@ const Deck: React.FC = () => {
             fontSize: '2em',
             fontWeight: '400',
             color: 'white',
-            mr: '.6em',
+            mb: 0
         },
         dividerStyle: {
             backgroundColor: '#fff',
@@ -104,12 +104,13 @@ const Deck: React.FC = () => {
         },
         lineTypography: {
             fontSize: '1.8em',
-            mr: '2px'
+            mr: '2px',
+            mb: 0
         },
         infiniteSymbol: {
             fontSize: '1.6em',
             color: 'white',
-            mb: '0.7rem'
+            mt: '0.3rem'
         }
     };
     return (
@@ -117,7 +118,7 @@ const Deck: React.FC = () => {
             <Card sx={styles.cardStyle}>
                 <Box sx={styles.headerBoxStyle}>
                     <Typography sx={styles.titleTextStyle}>Your Deck</Typography>
-                    <Box sx={{ display : 'flex' }}>
+                    <Box sx={{ display : 'flex', alignItems: 'center', mr: 1 }}>
                         <Typography sx={{ ...styles.deckSizeTextStyle, mr:'0px',color: mainboardError ? 'red' : styles.deckSizeTextStyle.color }}>
                             {deckCount}
                         </Typography>
@@ -144,8 +145,8 @@ const Deck: React.FC = () => {
                         <Box sx={styles.headerBoxStyle}>
                             <Typography sx={styles.titleTextStyle}>Sideboard</Typography>
                             <Divider sx={styles.dividerStyle} />
-                            <Box sx={{ display : 'flex' }}>
-                                <Typography sx={{ ...styles.deckSizeTextStyle, mr:'0px', color: sideboardError ? 'red' : styles.deckSizeTextStyle.color }}>
+                            <Box sx={{ display : 'flex', alignItems: 'center', mr: 1 }}>
+                                <Typography sx={{ ...styles.deckSizeTextStyle, color: sideboardError ? 'red' : styles.deckSizeTextStyle.color }}>
                                     {sideboardCount}
                                 </Typography>
                                 {maxSideBoard === -1 ? (