253 lines
7.9 KiB
Vue
253 lines
7.9 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gradient-to-br from-green-700 via-green-800 to-green-900 p-8">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- Title -->
|
|
<h1 class="text-white text-3xl font-bold mb-8 text-center">Animation Test Page</h1>
|
|
|
|
<!-- Control Panel -->
|
|
<div class="bg-gray-900/80 rounded-lg p-6 mb-8">
|
|
<h2 class="text-white text-xl font-semibold mb-4">Controls</h2>
|
|
<div class="flex flex-wrap gap-3">
|
|
<button
|
|
@click="playPlayerCard"
|
|
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Play Player Card
|
|
</button>
|
|
<button
|
|
@click="playOpponentCard"
|
|
class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Play Opponent Card
|
|
</button>
|
|
<button
|
|
@click="playBothCards"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Play Both Cards
|
|
</button>
|
|
<button
|
|
@click="clearCards"
|
|
class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Clear Cards
|
|
</button>
|
|
<button
|
|
@click="setPlayerWinner"
|
|
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Player Wins
|
|
</button>
|
|
<button
|
|
@click="setOpponentWinner"
|
|
class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Opponent Wins
|
|
</button>
|
|
<button
|
|
@click="fullSequence"
|
|
class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Full Trick Sequence
|
|
</button>
|
|
<button
|
|
@click="collectTrickPlayerWins"
|
|
:disabled="!playerCard || !opponentCard"
|
|
class="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Collect Trick (Player Wins)
|
|
</button>
|
|
<button
|
|
@click="collectTrickOpponentWins"
|
|
:disabled="!playerCard || !opponentCard"
|
|
class="px-4 py-2 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
Collect Trick (Opponent Wins)
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Current State Display -->
|
|
<div class="mt-4 text-gray-300 text-sm">
|
|
<p>
|
|
<strong>Player Card:</strong>
|
|
{{ playerCard ? `${playerCard.suit}${playerCard.rank}` : 'None' }}
|
|
</p>
|
|
<p>
|
|
<strong>Opponent Card:</strong>
|
|
{{ opponentCard ? `${opponentCard.suit}${opponentCard.rank}` : 'None' }}
|
|
</p>
|
|
<p><strong>Winner:</strong> {{ winner || 'None' }}</p>
|
|
<p><strong>First Player:</strong> {{ firstPlayer || 'None' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PlayArea Component -->
|
|
<div class="bg-gray-800/50 rounded-lg p-8">
|
|
<h2 class="text-white text-xl font-semibold mb-4 text-center">Play Area</h2>
|
|
<PlayArea
|
|
:player-card="playerCard"
|
|
:opponent-card="opponentCard"
|
|
:winner="winner"
|
|
:first-player="firstPlayer"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Instructions -->
|
|
<div class="bg-gray-900/80 rounded-lg p-6 mt-8 text-gray-300">
|
|
<h3 class="text-white font-semibold mb-2">Instructions:</h3>
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|
<li><strong>Play Player Card:</strong> Animates a card from bottom (player's hand)</li>
|
|
<li><strong>Play Opponent Card:</strong> Animates a card from top (opponent's hand)</li>
|
|
<li><strong>Play Both Cards:</strong> Both cards animate in simultaneously</li>
|
|
<li><strong>Clear Cards:</strong> Triggers exit animations (cards slide out)</li>
|
|
<li>
|
|
<strong>Winner Buttons:</strong> Add glowing ring effect to winning card (play cards
|
|
first)
|
|
</li>
|
|
<li>
|
|
<strong>Full Trick Sequence:</strong> Plays both cards → shows winner → clears (2 second
|
|
delay)
|
|
</li>
|
|
<li>
|
|
<strong>Collect Trick (Player Wins):</strong> Sets player as winner, waits 1.5s, then
|
|
cards slide DOWN toward player area
|
|
</li>
|
|
<li>
|
|
<strong>Collect Trick (Opponent Wins):</strong> Sets opponent as winner, waits 1.5s,
|
|
then cards slide UP toward opponent area
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import PlayArea from '@/components/game/PlayArea.vue'
|
|
|
|
// Reactive state
|
|
const playerCard = ref(null)
|
|
const opponentCard = ref(null)
|
|
const winner = ref(null)
|
|
const firstPlayer = ref(null)
|
|
|
|
// Sample cards to test with
|
|
const sampleCards = [
|
|
{ suit: 'c', rank: 1 },
|
|
{ suit: 'c', rank: 7 },
|
|
{ suit: 'c', rank: 13 },
|
|
{ suit: 'e', rank: 11 },
|
|
{ suit: 'e', rank: 12 },
|
|
{ suit: 'o', rank: 2 },
|
|
{ suit: 'o', rank: 3 },
|
|
{ suit: 'p', rank: 4 },
|
|
{ suit: 'p', rank: 7 },
|
|
]
|
|
|
|
// Get random card
|
|
const getRandomCard = () => {
|
|
return sampleCards[Math.floor(Math.random() * sampleCards.length)]
|
|
}
|
|
|
|
// Control functions
|
|
const playPlayerCard = () => {
|
|
if (!playerCard.value && !opponentCard.value) {
|
|
firstPlayer.value = 'player'
|
|
}
|
|
playerCard.value = getRandomCard()
|
|
winner.value = null
|
|
}
|
|
|
|
const playOpponentCard = () => {
|
|
if (!playerCard.value && !opponentCard.value) {
|
|
firstPlayer.value = 'opponent'
|
|
}
|
|
opponentCard.value = getRandomCard()
|
|
winner.value = null
|
|
}
|
|
|
|
const playBothCards = () => {
|
|
firstPlayer.value = 'player' // Player plays first in this scenario
|
|
playerCard.value = getRandomCard()
|
|
opponentCard.value = getRandomCard()
|
|
winner.value = null
|
|
}
|
|
|
|
const clearCards = () => {
|
|
playerCard.value = null
|
|
opponentCard.value = null
|
|
winner.value = null
|
|
firstPlayer.value = null
|
|
}
|
|
|
|
const setPlayerWinner = () => {
|
|
if (playerCard.value) {
|
|
winner.value = 'player'
|
|
}
|
|
}
|
|
|
|
const setOpponentWinner = () => {
|
|
if (opponentCard.value) {
|
|
winner.value = 'opponent'
|
|
}
|
|
}
|
|
|
|
const fullSequence = async () => {
|
|
// Clear first
|
|
clearCards()
|
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
|
|
|
// Play both cards
|
|
playBothCards()
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
|
// Show winner (randomly)
|
|
winner.value = Math.random() > 0.5 ? 'player' : 'opponent'
|
|
await new Promise((resolve) => setTimeout(resolve, 2000))
|
|
|
|
// Clear cards
|
|
clearCards()
|
|
}
|
|
|
|
// Collect trick with player winning
|
|
const collectTrickPlayerWins = async () => {
|
|
if (!playerCard.value || !opponentCard.value) return
|
|
|
|
// Set player as winner
|
|
winner.value = 'player'
|
|
|
|
// Wait 1.5 seconds to show winner glow
|
|
await new Promise((resolve) => setTimeout(resolve, 1500))
|
|
|
|
// Clear cards (triggers exit animation toward player)
|
|
playerCard.value = null
|
|
opponentCard.value = null
|
|
|
|
// Reset after animation completes
|
|
await new Promise((resolve) => setTimeout(resolve, 600))
|
|
winner.value = null
|
|
firstPlayer.value = null
|
|
}
|
|
|
|
// Collect trick with opponent winning
|
|
const collectTrickOpponentWins = async () => {
|
|
if (!playerCard.value || !opponentCard.value) return
|
|
|
|
// Set opponent as winner
|
|
winner.value = 'opponent'
|
|
|
|
// Wait 1.5 seconds to show winner glow
|
|
await new Promise((resolve) => setTimeout(resolve, 1500))
|
|
|
|
// Clear cards (triggers exit animation toward opponent)
|
|
playerCard.value = null
|
|
opponentCard.value = null
|
|
|
|
// Reset after animation completes
|
|
await new Promise((resolve) => setTimeout(resolve, 600))
|
|
winner.value = null
|
|
firstPlayer.value = null
|
|
}
|
|
</script>
|