better disabled card handling

SWU-Karabast · Mar 6, 2025 · 38aa911 · 38aa911
1 parent 611e17a
commit 38aa911
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 26 deletions.
diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard.tsx
@@ -24,10 +24,6 @@ const GameCard: React.FC<IGameCardProps> = ({
     const { sendGameMessage, connectedPlayer, getConnectedPlayerPrompt, distributionPromptData } = useGame();
     const { clearPopups } = usePopup();
 
-    if (card.selectable === false) {
-        disabled = true;
-    }
-
     const cardInPlayersHand = card.controller?.id === connectedPlayer && card.zone === 'hand';
     const cardInOpponentsHand = card.controller?.id !== connectedPlayer && card.zone === 'hand';
 
@@ -95,7 +91,6 @@ const GameCard: React.FC<IGameCardProps> = ({
 
         // If maxTargets is defined and already reached, allow only if the card is part of the selection
         if (maxTargets && distributionPromptData.valueDistribution.length >= maxTargets && !isInDistributionData) {
-            disabled = true;
             return false;
         }
 
@@ -111,8 +106,13 @@ const GameCard: React.FC<IGameCardProps> = ({
             sendGameMessage(['cardClicked', card.uuid]);
         }
     };
+
+    const clickDisabled = () => {
+        return showValueAdjuster() || disabled || card.selectable === false;
+    }
+
     const handleClick = () => {
-        if (showValueAdjuster()) {
+        if (clickDisabled()) {
             return;
         }
         if (getConnectedPlayerPrompt()?.selectCardMode !== 'multiple') {
@@ -156,7 +156,7 @@ const GameCard: React.FC<IGameCardProps> = ({
     // Filter subcards into Shields and other upgrades
     const shieldCards = subcards.filter((subcard) => subcard.name === 'Shield');
     const otherUpgradeCards = subcards.filter((subcard) => subcard.name !== 'Shield');
-    const borderColor = !disabled ? getBorderColor(card, connectedPlayer, getConnectedPlayerPrompt()?.promptType, cardStyle) : '';
+    const borderColor = getBorderColor(card, connectedPlayer, getConnectedPlayerPrompt()?.promptType, cardStyle);
     const cardCounter = card.count || 0;
     const distributionAmount = distributionPromptData?.valueDistribution.find((item) => item.uuid === card.uuid)?.amount || 0;
 
@@ -172,7 +172,7 @@ const GameCard: React.FC<IGameCardProps> = ({
             transform: card.exhausted && card.zone !== 'resource' ? 'rotate(4deg)' : 'none',
             transition: 'transform 0.15s ease',
             '&:hover': {
-                cursor: disabled ? 'normal' : 'pointer',
+                cursor: clickDisabled() ? 'normal' : 'pointer',
             },
         },
         card: {
@@ -348,7 +348,7 @@ const GameCard: React.FC<IGameCardProps> = ({
         <Box sx={styles.cardContainer}>
             <Box 
                 sx={styles.card} 
-                onClick={disabled ? undefined : handleClick}
+                onClick={handleClick}
                 onMouseEnter={handlePreviewOpen}
                 onMouseLeave={handlePreviewClose}
                 data-card-url={s3CardImageURL(card)}

diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard.tsx
@@ -27,10 +27,6 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
         return null
     }
 
-    if (card.selectable === false) {
-        disabled = true;
-    }
-
     const handlePreviewOpen = (event: React.MouseEvent<HTMLElement>) => {
         const target = event.currentTarget;
         if (isDeployed) return;
@@ -43,16 +39,46 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
         clearTimeout(hoverTimeout.current);
         setAnchorElement(null);
     };
+
+    const defaultClickFunction = () => {
+        if (card.selectable) {
+            sendGameMessage(['cardClicked', card.uuid]);
+        }
+    };
+
+    const clickDisabled = () => {
+        return showValueAdjuster() || disabled || card.selectable === false;
+    }
+
+    const handleClick = () => {
+        if (clickDisabled()) {
+            return;
+        }
+        defaultClickFunction();
+    }
+
+    const showValueAdjuster = () => {
+        const prompt = getConnectedPlayerPrompt();
+
+        // Ensure prompt is valid and conditions are met
+        if (!prompt || prompt.promptType !== 'distributeAmongTargets' || !card.selectable || !distributionPromptData || isDeployed) {
+            return false;
+        }
+
+        const maxTargets = prompt.distributeAmongTargets.maxTargets;
+        const isInDistributionData = distributionPromptData.valueDistribution.some(item => item.uuid === card.uuid);
+
+        // If maxTargets is defined and already reached, allow only if the card is part of the selection
+        if (maxTargets && distributionPromptData.valueDistribution.length >= maxTargets && !isInDistributionData) {
+            return false;
+        }
+
+        return true;
+    };
 
     const isDeployed = card.hasOwnProperty('zone') && card.zone !== 'base';
     const borderColor = getBorderColor(card, connectedPlayer, getConnectedPlayerPrompt()?.promptType);
     const distributionAmount = distributionPromptData?.valueDistribution.find((item) => item.uuid === card.uuid)?.amount || 0;
-    const showValueAdjuster = getConnectedPlayerPrompt()?.promptType === 'distributeAmongTargets' && card.selectable && !isDeployed;
-    if (showValueAdjuster) {
-        // override when using damage adjuster to show border but prevent click events
-        disabled = true;
-    };
-
 
     const styles = {
         card: {
@@ -65,7 +91,7 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            cursor: disabled ? 'normal' : 'pointer',
+            cursor: clickDisabled() ? 'normal' : 'pointer',
             position: 'relative', 
             border: borderColor ? `2px solid ${borderColor}` : '2px solid transparent',
             boxSizing: 'border-box',
@@ -167,11 +193,7 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
     return (
         <Box
             sx={isDeployed ? styles.deployedPlaceholder : styles.card}
-            onClick={() => {
-                if (!disabled && card.selectable) {
-                    sendGameMessage(['cardClicked', card.uuid]);
-                }
-            }}
+            onClick={handleClick}
             aria-owns={open ? 'mouse-over-popover' : undefined}
             aria-haspopup="true"
             onMouseEnter={handlePreviewOpen}
@@ -181,7 +203,7 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
                 <Box sx={styles.unimplementedAlert}></Box>
             </Box>
             <Box sx={styles.epicActionIcon}></Box>
-            { showValueAdjuster && <CardValueAdjuster cardId={card.uuid} /> }
+            { showValueAdjuster() && <CardValueAdjuster cardId={card.uuid} /> }
             {cardStyle === LeaderBaseCardStyle.Base && (
                 <Box sx={styles.damageCounterContainer}>
                     { !!distributionAmount &&