DADProject/frontend/src/pages/TestAnimations.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>