SyntaxSquad/DADProject#14 Bot works and play works, still has some bugs

frontend/src/components/game/PlayerHand.vue

@@ -12,13 +12,15 @@
         :style="getCardStyle(index)"
         @mouseenter="hoveredIndex = index"
         @mouseleave="hoveredIndex = null"
-        @click="$emit('card-clicked', { card, index })"
+        @click="handleCardClick(card, index)"
       >
         <div
           :class="[
-            'transition-all duration-300',
-            isPlayable(index) && 'ring-2 ring-yellow-400 ring-offset-2 rounded-lg',
-            hoveredIndex === index && 'scale-110 -translate-y-4 z-50',
+            'transition-all duration-300 rounded-lg',
+            isValid(card)
+              ? 'cursor-pointer hover:shadow-xl ring-2 ring-transparent hover:ring-yellow-400/50'
+              : 'cursor-not-allowed opacity-60 grayscale brightness-75',
+            hoveredIndex === index && isValid(card) && 'scale-110 -translate-y-4 z-50',
           ]"
         >
           <GameCard :suit="card.suit" :rank="card.rank" :face-down="faceDown" />
@@ -31,6 +33,8 @@
 <script setup>
 import { ref, computed } from 'vue'
 import GameCard from './GameCard.vue'
+import { toast } from 'vue-sonner'
+import { useBiscaStore } from '@/stores/bisca'
 
 const props = defineProps({
   cards: {
@@ -47,41 +51,52 @@ const props = defineProps({
     default: 3,
     validator: (value) => [3, 9].includes(value),
   },
-  playableCards: {
-    type: Array,
-    default: () => [],
-  },
 })
 
-defineEmits(['card-clicked'])
+const emit = defineEmits(['card-clicked'])
+const store = useBiscaStore()
 
 const hoveredIndex = ref(null)
 
-// Calculate overlap percentage based on max cards
-// 3 cards: 70% overlap, 9 cards: 85% overlap
+const isValid = (card) => {
+  if (props.faceDown) return false
+  return store.canPlayCard(card)
+}
+
+const handleCardClick = (card, index) => {
+  if (props.faceDown) return
+
+  if (store.canPlayCard(card)) {
+    emit('card-clicked', { card, index })
+  } else {
+    toast.warning('Jogada Inválida', {
+      description: 'Tens de assistir ao naipe jogado!',
+      duration: 2000,
+    })
+  }
+}
+
+
 const overlapPercentage = computed(() => {
   return props.maxCards === 3 ? 0.7 : 0.85
 })
 
-// Calculate card spacing dynamically
-const cardWidth = 128 // w-32 from GameCard component
+const cardWidth = 128 
 const getCardStyle = (index) => {
   const totalCards = props.cards.length
   const overlapOffset = cardWidth * (1 - overlapPercentage.value)
-
-  // Calculate total width needed
   const totalWidth = cardWidth + (totalCards - 1) * overlapOffset
   const startOffset = -totalWidth / 2 + cardWidth / 2
 
-  // Base position
   let left = startOffset + index * overlapOffset
 
-  // If a card is hovered, shift neighbors
   if (hoveredIndex.value !== null && hoveredIndex.value !== index) {
-    if (index < hoveredIndex.value) {
-      left -= 10 // Push left cards more to the left
-    } else if (index > hoveredIndex.value) {
-      left += 10 // Push right cards more to the right
+    if (isValid(props.cards[hoveredIndex.value])) {
+        if (index < hoveredIndex.value) {
+          left -= 10
+        } else if (index > hoveredIndex.value) {
+          left += 10
+        }
     }
   }
 
@@ -90,9 +105,4 @@ const getCardStyle = (index) => {
     zIndex: hoveredIndex.value === index ? 50 : index + 1,
   }
 }
-
-// Check if a card is playable
-const isPlayable = (index) => {
-  return props.playableCards.includes(index)
-}
-</script>
+</script>