feat: gameboard ui

2025-12-29 11:15:02 +00:00
parent c68cda350e
commit cfda949ea6
59 changed files with 2564 additions and 18 deletions
@@ -0,0 +1,116 @@
+<template>
+  <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"
+        :opponent-score="opponentScore"
+        :current-turn="currentTurn"
+        :round-number="1"
+      />
+    </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"
+        :opponent-card="currentTrick.opponentCard"
+        :winner="currentTrick.winner"
+      />
+    </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>
+  </div>
+</template>
+
+<script setup>
+import PlayerHand from './PlayerHand.vue'
+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: () => [],
+  },
+  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: 45,
+  },
+  opponentScore: {
+    type: Number,
+    default: 23,
+  },
+  currentTurn: {
+    type: String,
+    default: 'player',
+    validator: (value) => ['player', 'opponent'].includes(value),
+  },
+})
+
+const emit = defineEmits(['card-clicked'])
+
+const handleCardClick = (payload) => {
+  emit('card-clicked', payload)
+}
+</script>