feat(card): add selected card selection [skip ci]

Kadphol · Jan 2, 2025 · 4790a20 · 4790a20
1 parent 24f146e
commit 4790a20
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -132,6 +132,7 @@ const Game = () => {
             onCardClick={handleCardClick}
             isCurrentPlayer={true}
             score={scores[currentPlayer]}
+            selectedCards={selectedCards}
           />
         </div>
       </div>

diff --git 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 (
     <div className="mb-4">
       <h2 className="mb-2 text-lg font-bold">Player Hand</h2>
@@ -30,7 +38,7 @@ const Player = ({ hand, playedCards, score, onCardClick, isCurrentPlayer = false
         {playedCards.map((group, groupIndex) => (
           <div key={groupIndex} className="flex space-x-2 rounded border border-gray-300 p-2">
             {group.map((card, cardIndex) => (
-              <Card key={cardIndex} card={card} />
+              <Card key={cardIndex} card={card} isSelected={selectedCards.includes(card)} />
             ))}
           </div>
         ))}