feat: gameboard ui
This commit is contained in:
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-500 ease-out"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-all duration-300 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[9998] flex items-center justify-center p-4"
|
||||
@click.self="handleClose"
|
||||
>
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-500 ease-out delay-100"
|
||||
enter-from-class="opacity-0 scale-75 -translate-y-10"
|
||||
enter-to-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-active-class="transition-all duration-300 ease-in"
|
||||
leave-from-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-90"
|
||||
>
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl border-2 max-w-md w-full p-8 relative overflow-hidden"
|
||||
:class="[
|
||||
winner === 'player'
|
||||
? 'border-emerald-500/50'
|
||||
: winner === 'opponent'
|
||||
? 'border-rose-500/50'
|
||||
: 'border-gray-600/50',
|
||||
]"
|
||||
>
|
||||
<!-- Confetti Effect (if player wins) -->
|
||||
<div v-if="winner === 'player' && showConfetti" class="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
v-for="i in 30"
|
||||
:key="i"
|
||||
class="absolute w-2 h-2 animate-confetti"
|
||||
:style="{
|
||||
left: Math.random() * 100 + '%',
|
||||
top: '-10px',
|
||||
backgroundColor: ['#fbbf24', '#34d399', '#60a5fa', '#f472b6', '#a78bfa'][
|
||||
Math.floor(Math.random() * 5)
|
||||
],
|
||||
animationDelay: Math.random() * 2 + 's',
|
||||
animationDuration: 3 + Math.random() * 2 + 's',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Winner Icon/Badge -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<div
|
||||
class="relative"
|
||||
:class="[winner === 'player' ? 'animate-bounce' : 'animate-pulse']"
|
||||
>
|
||||
<div
|
||||
v-if="winner === 'player'"
|
||||
class="w-24 h-24 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-emerald-500/50"
|
||||
>
|
||||
<span class="text-5xl">🏆</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="winner === 'opponent'"
|
||||
class="w-24 h-24 rounded-full bg-gradient-to-br from-rose-400 to-rose-600 flex items-center justify-center shadow-lg shadow-rose-500/50"
|
||||
>
|
||||
<span class="text-5xl">😔</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="w-24 h-24 rounded-full bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<span class="text-5xl">🤝</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h2
|
||||
class="text-4xl font-black text-center mb-2 bg-clip-text text-transparent bg-gradient-to-r"
|
||||
:class="[
|
||||
winner === 'player'
|
||||
? 'from-emerald-300 to-emerald-500'
|
||||
: winner === 'opponent'
|
||||
? 'from-rose-300 to-rose-500'
|
||||
: 'from-gray-300 to-gray-500',
|
||||
]"
|
||||
>
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-center text-gray-400 mb-8">{{ subtitle }}</p>
|
||||
|
||||
<!-- Scores -->
|
||||
<div class="bg-black/30 rounded-xl p-6 mb-8 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-300 font-medium">{{ playerName }}</span>
|
||||
<span
|
||||
class="text-3xl font-black tabular-nums transition-all duration-500"
|
||||
:class="[
|
||||
playerScore > opponentScore
|
||||
? 'text-emerald-400 drop-shadow-[0_0_12px_rgba(52,211,153,0.6)]'
|
||||
: 'text-white',
|
||||
]"
|
||||
>
|
||||
{{ displayPlayerScore }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-px bg-gray-700"></div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-300 font-medium">{{ opponentName }}</span>
|
||||
<span
|
||||
class="text-3xl font-black tabular-nums transition-all duration-500"
|
||||
:class="[
|
||||
opponentScore > playerScore
|
||||
? 'text-rose-400 drop-shadow-[0_0_12px_rgba(251,113,133,0.6)]'
|
||||
: 'text-white',
|
||||
]"
|
||||
>
|
||||
{{ displayOpponentScore }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats (optional) -->
|
||||
<div v-if="stats" class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="bg-black/20 rounded-lg p-3 text-center">
|
||||
<p class="text-gray-400 text-xs mb-1">Your Tricks</p>
|
||||
<p class="text-2xl font-bold text-white">{{ stats.playerTricks }}</p>
|
||||
</div>
|
||||
<div class="bg-black/20 rounded-lg p-3 text-center">
|
||||
<p class="text-gray-400 text-xs mb-1">Opponent Tricks</p>
|
||||
<p class="text-2xl font-bold text-white">{{ stats.opponentTricks }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
@click="$emit('play-again')"
|
||||
class="flex-1 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg"
|
||||
>
|
||||
Play Again
|
||||
</button>
|
||||
<button
|
||||
v-if="!hideClose"
|
||||
@click="handleClose"
|
||||
class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
isVisible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
winner: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => ['player', 'opponent', 'draw'].includes(value),
|
||||
},
|
||||
playerScore: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
opponentScore: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
playerName: {
|
||||
type: String,
|
||||
default: 'You',
|
||||
},
|
||||
opponentName: {
|
||||
type: String,
|
||||
default: 'Bot',
|
||||
},
|
||||
stats: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
hideClose: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'play-again'])
|
||||
|
||||
const showConfetti = ref(false)
|
||||
const displayPlayerScore = ref(0)
|
||||
const displayOpponentScore = ref(0)
|
||||
|
||||
// Computed title based on winner
|
||||
const title = computed(() => {
|
||||
if (props.winner === 'player') return 'Victory!'
|
||||
if (props.winner === 'opponent') return 'Defeat'
|
||||
return 'Draw!'
|
||||
})
|
||||
|
||||
// Computed subtitle
|
||||
const subtitle = computed(() => {
|
||||
if (props.winner === 'player') return 'Congratulations! You won the game!'
|
||||
if (props.winner === 'opponent') return 'Better luck next time!'
|
||||
return 'The game ended in a draw'
|
||||
})
|
||||
|
||||
// Animate score count-up
|
||||
const animateScore = (fromValue, toValue, callback) => {
|
||||
const duration = 1000
|
||||
const steps = 30
|
||||
const stepDuration = duration / steps
|
||||
const increment = (toValue - fromValue) / steps
|
||||
|
||||
let current = fromValue
|
||||
let step = 0
|
||||
|
||||
const interval = setInterval(() => {
|
||||
step++
|
||||
current += increment
|
||||
|
||||
if (step >= steps) {
|
||||
current = toValue
|
||||
clearInterval(interval)
|
||||
}
|
||||
|
||||
callback(Math.round(current))
|
||||
}, stepDuration)
|
||||
}
|
||||
|
||||
// Watch for visibility and trigger animations
|
||||
watch(
|
||||
() => props.isVisible,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
// Start confetti if player wins
|
||||
if (props.winner === 'player') {
|
||||
setTimeout(() => {
|
||||
showConfetti.value = true
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// Animate scores counting up
|
||||
setTimeout(() => {
|
||||
animateScore(0, props.playerScore, (value) => {
|
||||
displayPlayerScore.value = value
|
||||
})
|
||||
animateScore(0, props.opponentScore, (value) => {
|
||||
displayOpponentScore.value = value
|
||||
})
|
||||
}, 400)
|
||||
} else {
|
||||
showConfetti.value = false
|
||||
displayPlayerScore.value = 0
|
||||
displayOpponentScore.value = 0
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes confetti {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-confetti {
|
||||
animation: confetti linear forwards;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user