diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx index 6158445..8b71ab8 100644 --- a/src/components/card/index.tsx +++ b/src/components/card/index.tsx @@ -5,9 +5,10 @@ import { SUIT, SUIT_SYMBOLS } from '@constants/card' interface CardProps { card: CardType onClick?: () => void + isSelected?: boolean } -const Card = ({ card, onClick }: CardProps) => { +const Card = ({ card, onClick, isSelected = false }: CardProps) => { const { suit, rank } = card const { color, bgColor } = suit === SUIT.HEARTS || suit === SUIT.DIAMONDS @@ -19,7 +20,10 @@ const Card = ({ card, onClick }: CardProps) => { className={cn( 'flex h-24 w-16 cursor-pointer flex-col items-center justify-center rounded-lg border border-gray-300 bg-white p-2', color, - bgColor + bgColor, + { + 'border border-yellow-400': isSelected, + } )} onClick={onClick} > diff --git a/src/components/game/index.tsx b/src/components/game/index.tsx index 7cb63b7..ef966ef 100644 --- a/src/components/game/index.tsx +++ b/src/components/game/index.tsx @@ -132,6 +132,7 @@ const Game = () => { onCardClick={handleCardClick} isCurrentPlayer={true} score={scores[currentPlayer]} + selectedCards={selectedCards} /> diff --git a/src/components/player/index.tsx b/src/components/player/index.tsx index 4a84d63..ef04548 100644 --- a/src/components/player/index.tsx +++ b/src/components/player/index.tsx @@ -7,9 +7,17 @@ interface PlayerProps { score: number onCardClick?: (card: CardType) => void isCurrentPlayer?: boolean + selectedCards?: CardType[] } -const Player = ({ hand, playedCards, score, onCardClick, isCurrentPlayer = false }: PlayerProps) => { +const Player = ({ + hand, + playedCards, + score, + onCardClick, + isCurrentPlayer = false, + selectedCards = [], +}: PlayerProps) => { return (

Player Hand

@@ -30,7 +38,7 @@ const Player = ({ hand, playedCards, score, onCardClick, isCurrentPlayer = false {playedCards.map((group, groupIndex) => (
{group.map((card, cardIndex) => ( - + ))}
))}