diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard.tsx index 33c5e05..5e1561d 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard.tsx +++ b/src/app/_components/_sharedcomponents/Cards/GameCard.tsx @@ -24,10 +24,6 @@ const GameCard: React.FC = ({ 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 = ({ // 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 = ({ 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 = ({ // 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 = ({ 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 = ({ = ({ return null } - if (card.selectable === false) { - disabled = true; - } - const handlePreviewOpen = (event: React.MouseEvent) => { const target = event.currentTarget; if (isDeployed) return; @@ -43,16 +39,46 @@ const LeaderBaseCard: React.FC = ({ 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 = ({ 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 = ({ return ( { - 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 = ({ - { showValueAdjuster && } + { showValueAdjuster() && } {cardStyle === LeaderBaseCardStyle.Base && ( { !!distributionAmount &&