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

frontend/src/components/game/GameBoard.vue

@@ -2,7 +2,6 @@
   <div
     class="min-h-screen bg-linear-to-br from-green-700 via-green-800 to-green-900 grid grid-rows-[auto_auto_1fr_auto] grid-cols-[1fr_3fr_1fr] gap-6 p-8"
   >
-    <!-- Score Display (Top Left) -->
     <div class="col-start-1 col-end-4 row-start-1 flex justify-start items-start">
       <ScoreDisplay
         :player-score="playerScore"
@@ -12,17 +11,14 @@
       />
     </div>
 
-    <!-- Opponent Hand -->
     <div class="col-start-2 col-end-3 row-start-2 flex justify-center">
       <PlayerHand
         :cards="opponentHand"
         :face-down="true"
         :max-cards="maxCards"
-        :playable-cards="[]"
       />
     </div>
 
-    <!-- Play Area -->
     <div class="col-start-2 col-end-3 row-start-3 flex items-center justify-center">
       <PlayArea
         :player-card="currentTrick.playerCard"
@@ -31,18 +27,15 @@
       />
     </div>
 
-    <!-- Deck Area -->
     <div class="col-start-3 col-end-4 row-start-3 flex items-center justify-center">
       <DeckArea :trump-card="trumpCard" :cards-remaining="cardsRemaining" :is-empty="deckIsEmpty" />
     </div>
 
-    <!-- Player Hand -->
     <div class="col-start-2 col-end-3 row-start-4 flex justify-center">
       <PlayerHand
         :cards="playerHand"
         :face-down="false"
         :max-cards="maxCards"
-        :playable-cards="playableCardIndices"
         @card-clicked="handleCardClick"
       />
     </div>
@@ -55,52 +48,20 @@ import PlayArea from './PlayArea.vue'
 import DeckArea from './DeckArea.vue'
 import ScoreDisplay from './ScoreDisplay.vue'
 
-// Props for testing - in real implementation, these come from Pinia store
 const props = defineProps({
-  playerHand: {
-    type: Array,
-    default: () => [],
-  },
-  opponentHand: {
-    type: Array,
-    default: () => [],
-  },
+  playerHand: { type: Array, default: () => [] },
+  opponentHand: { type: Array, default: () => [] },
   currentTrick: {
     type: Object,
-    default: () => ({
-      playerCard: null,
-      opponentCard: null,
-      winner: null,
-    }),
-  },
-  trumpCard: {
-    type: Object,
-    required: true,
-  },
-  cardsRemaining: {
-    type: Number,
-    default: 0,
-  },
-  deckIsEmpty: {
-    type: Boolean,
-    default: false,
-  },
-  maxCards: {
-    type: Number,
-    default: 3,
-  },
-  playableCardIndices: {
-    type: Array,
-    default: () => [],
-  },
-  playerScore: {
-    type: Number,
-    default: 0,
-  },
-  opponentScore: {
-    type: Number,
-    default: 0,
+    default: () => ({ playerCard: null, opponentCard: null, winner: null }),
   },
+  trumpCard: { type: Object, required: true },
+  cardsRemaining: { type: Number, default: 0 },
+  deckIsEmpty: { type: Boolean, default: false },
+  maxCards: { type: Number, default: 3 },
+  // REMOVIDO: playableCardIndices (já não precisamos dele)
+  playerScore: { type: Number, default: 0 },
+  opponentScore: { type: Number, default: 0 },
   currentTurn: {
     type: String,
     default: 'player',
@@ -108,13 +69,9 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['card-clicked'])
+const emit = defineEmits(['play-card'])
 
 const handleCardClick = (payload) => {
-  emit('card-clicked', payload)
+  emit('play-card', payload.card)
 }
-
-const handlePlayCard = (card) => {
-  store.playerPlayCard(card)
-}
-</script>
+</script>

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>