feat: gameboard ui

2025-12-20 17:03:18 +00:00
parent 8a6e0d0255
commit 2b161e2099
59 changed files with 2564 additions and 17 deletions
@@ -0,0 +1,342 @@
+<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-6xl mx-auto">
+      <!-- Title -->
+      <h1 class="text-white text-3xl font-bold mb-8 text-center">
+        All Animations 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>
+
+        <!-- Score Animation Tests -->
+        <div class="mb-6">
+          <h3 class="text-emerald-400 font-semibold mb-3">Score Count-Up Animation</h3>
+          <div class="flex flex-wrap gap-3">
+            <button
+              @click="increasePlayerScore"
+              class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
+            >
+              +10 Player Score
+            </button>
+            <button
+              @click="increaseOpponentScore"
+              class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors"
+            >
+              +10 Opponent Score
+            </button>
+            <button
+              @click="resetScores"
+              class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors"
+            >
+              Reset Scores
+            </button>
+          </div>
+        </div>
+
+        <!-- Turn Transition Tests -->
+        <div class="mb-6">
+          <h3 class="text-blue-400 font-semibold mb-3">Turn Transition Animation</h3>
+          <div class="flex flex-wrap gap-3">
+            <button
+              @click="toggleTurn"
+              class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
+            >
+              Switch Turn
+            </button>
+            <button
+              @click="currentTurn = 'player'"
+              class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium transition-colors"
+            >
+              Your Turn
+            </button>
+            <button
+              @click="currentTurn = 'opponent'"
+              class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg font-medium transition-colors"
+            >
+              Bot's Turn
+            </button>
+          </div>
+        </div>
+
+        <!-- Trump Reveal Tests -->
+        <div class="mb-6">
+          <h3 class="text-amber-400 font-semibold mb-3">Trump Reveal Animation</h3>
+          <div class="flex flex-wrap gap-3">
+            <button
+              @click="triggerTrumpReveal"
+              class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-lg font-medium transition-colors"
+            >
+              Reveal Trump
+            </button>
+          </div>
+        </div>
+
+        <!-- Game Over Tests -->
+        <div class="mb-6">
+          <h3 class="text-purple-400 font-semibold mb-3">Game Over Screen</h3>
+          <div class="flex flex-wrap gap-3">
+            <button
+              @click="showGameOverPlayerWin"
+              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="showGameOverOpponentWin"
+              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="showGameOverDraw"
+              class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors"
+            >
+              Draw
+            </button>
+          </div>
+        </div>
+
+        <!-- Full Sequence -->
+        <div>
+          <h3 class="text-pink-400 font-semibold mb-3">Complete Sequence</h3>
+          <div class="flex flex-wrap gap-3">
+            <button
+              @click="runFullSequence"
+              :disabled="isRunningSequence"
+              class="px-4 py-2 bg-pink-600 hover:bg-pink-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
+            >
+              Run Full Animation Sequence
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Game Board Preview -->
+      <div class="grid grid-rows-[auto_1fr] gap-8">
+        <!-- Score Display -->
+        <div class="flex justify-center">
+          <ScoreDisplay
+            :player-score="playerScore"
+            :opponent-score="opponentScore"
+            :current-turn="currentTurn"
+            :round-number="1"
+          />
+        </div>
+
+        <!-- Deck Area (with trump) -->
+        <div class="flex justify-center">
+          <div class="bg-gray-800/30 rounded-lg p-6">
+            <h3 class="text-white text-sm font-semibold mb-4 text-center">Trump Card</h3>
+            <DeckArea
+              :trump-card="trumpCard"
+              :cards-remaining="cardsRemaining"
+              :is-empty="false"
+              :reveal-trump="revealTrump"
+            />
+          </div>
+        </div>
+      </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>Score Count-Up:</strong> Click "+10" buttons to see scores animate smoothly
+            from old to new value
+          </li>
+          <li>
+            <strong>Turn Transition:</strong> Switch turns to see the indicator pulse and glow with
+            color change
+          </li>
+          <li>
+            <strong>Trump Reveal:</strong> Triggers a 3-second pulse/glow animation on the trump
+            card with label
+          </li>
+          <li>
+            <strong>Game Over:</strong> Shows victory/defeat modal with score count-up and confetti
+            (on win)
+          </li>
+          <li>
+            <strong>Full Sequence:</strong> Runs all animations in order: trump reveal → turn
+            changes → score updates → game over
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Game Over Modal -->
+    <GameOver
+      :is-visible="gameOverVisible"
+      :winner="gameOverWinner"
+      :player-score="playerScore"
+      :opponent-score="opponentScore"
+      :stats="gameOverStats"
+      @close="gameOverVisible = false"
+      @play-again="handlePlayAgain"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ScoreDisplay from '@/components/game/ScoreDisplay.vue'
+import DeckArea from '@/components/game/DeckArea.vue'
+import GameOver from '@/components/game/GameOver.vue'
+
+// Game state
+const playerScore = ref(23)
+const opponentScore = ref(15)
+const currentTurn = ref('player')
+const cardsRemaining = ref(30)
+const revealTrump = ref(false)
+const isRunningSequence = ref(false)
+
+// Trump card
+const trumpCard = ref({ suit: 'o', rank: 7 })
+
+// Game Over state
+const gameOverVisible = ref(false)
+const gameOverWinner = ref('player')
+const gameOverStats = ref({
+  playerTricks: 8,
+  opponentTricks: 6,
+})
+
+// Score manipulation
+const increasePlayerScore = () => {
+  playerScore.value += 10
+}
+
+const increaseOpponentScore = () => {
+  opponentScore.value += 10
+}
+
+const resetScores = () => {
+  playerScore.value = 0
+  opponentScore.value = 0
+}
+
+// Turn control
+const toggleTurn = () => {
+  currentTurn.value = currentTurn.value === 'player' ? 'opponent' : 'player'
+}
+
+// Trump reveal
+const triggerTrumpReveal = () => {
+  revealTrump.value = true
+  setTimeout(() => {
+    revealTrump.value = false
+  }, 100)
+}
+
+// Game Over screens
+const showGameOverPlayerWin = () => {
+  playerScore.value = 67
+  opponentScore.value = 53
+  gameOverWinner.value = 'player'
+  gameOverStats.value = {
+    playerTricks: 11,
+    opponentTricks: 9,
+  }
+  gameOverVisible.value = true
+}
+
+const showGameOverOpponentWin = () => {
+  playerScore.value = 45
+  opponentScore.value = 75
+  gameOverWinner.value = 'opponent'
+  gameOverStats.value = {
+    playerTricks: 7,
+    opponentTricks: 13,
+  }
+  gameOverVisible.value = true
+}
+
+const showGameOverDraw = () => {
+  playerScore.value = 60
+  opponentScore.value = 60
+  gameOverWinner.value = 'draw'
+  gameOverStats.value = {
+    playerTricks: 10,
+    opponentTricks: 10,
+  }
+  gameOverVisible.value = true
+}
+
+const handlePlayAgain = () => {
+  gameOverVisible.value = false
+  resetScores()
+  currentTurn.value = 'player'
+  cardsRemaining.value = 40
+}
+
+// Full animation sequence
+const runFullSequence = async () => {
+  if (isRunningSequence.value) return
+  isRunningSequence.value = true
+
+  // Reset everything
+  resetScores()
+  currentTurn.value = 'player'
+  gameOverVisible.value = false
+  await new Promise((resolve) => setTimeout(resolve, 500))
+
+  // 1. Trump Reveal
+  console.log('1. Trump Reveal')
+  triggerTrumpReveal()
+  await new Promise((resolve) => setTimeout(resolve, 3500))
+
+  // 2. First turn
+  console.log('2. Player turn')
+  currentTurn.value = 'player'
+  await new Promise((resolve) => setTimeout(resolve, 1500))
+
+  // 3. Player scores
+  console.log('3. Player scores')
+  playerScore.value = 11
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  // 4. Switch turn
+  console.log('4. Switch to opponent turn')
+  currentTurn.value = 'opponent'
+  await new Promise((resolve) => setTimeout(resolve, 1500))
+
+  // 5. Opponent scores
+  console.log('5. Opponent scores')
+  opponentScore.value = 10
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  // 6. Back to player
+  console.log('6. Back to player')
+  currentTurn.value = 'player'
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  // 7. More scoring
+  console.log('7. More scoring')
+  playerScore.value = 23
+  await new Promise((resolve) => setTimeout(resolve, 1500))
+  opponentScore.value = 19
+  await new Promise((resolve) => setTimeout(resolve, 1500))
+  playerScore.value = 34
+  await new Promise((resolve) => setTimeout(resolve, 1500))
+
+  // 8. Final scores and game over
+  console.log('8. Game over')
+  playerScore.value = 67
+  opponentScore.value = 53
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  // Show game over
+  gameOverWinner.value = 'player'
+  gameOverStats.value = {
+    playerTricks: 11,
+    opponentTricks: 9,
+  }
+  gameOverVisible.value = true
+
+  isRunningSequence.value = false
+}
+</script>