117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<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>
|