fix(card-stack): use max card on stack to avoid layout bugs

guilhermebkel · Apr 2, 2024 · 1c14385 · 1c14385
1 parent d3acb48
commit 1c14385
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/packages/unoenty/src/pages/Table/CardStack/index.tsx b/packages/unoenty/src/pages/Table/CardStack/index.tsx
@@ -23,6 +23,8 @@ type CardStackProps = {
 
 let lastAmountToBuy = 0
 
+const MAX_CARDS_VISIBLE_ON_CARD_STACK = 20
+
 const CardStack: React.FC<CardStackProps> = (props) => {
 	const cardStore = useCardStore()
 	const socket = useSocket()
@@ -132,15 +134,15 @@ const CardStack: React.FC<CardStackProps> = (props) => {
 					container
 					className={classes.cardStackContent}
 				>
-					{cards?.slice(0, 20)?.map((card, index) => (
+					{cards?.slice(0, MAX_CARDS_VISIBLE_ON_CARD_STACK)?.map((card, index) => (
 						<img
 							key={card.id}
 							className={classes.card}
 							alt={card.name}
 							src={card.src}
 							style={{
-								transform: `rotate(${cards.length - index}rad)`,
-								zIndex: cards.length - index,
+								transform: `rotate(${MAX_CARDS_VISIBLE_ON_CARD_STACK - index}rad)`,
+								zIndex: MAX_CARDS_VISIBLE_ON_CARD_STACK - index,
 								filter: (index === 0) ? "saturate(1.5)" : "contrast(0.5)",
 							}}
 						/>