SyntaxSquad/DADProject#16 feat: MATCHES AND STUFF
This commit is contained in:
AfonsoCMSousa
@@ -1,112 +1,362 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed, inject, onUnmounted, watch } from 'vue'
|
||||
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
import { Coins, Trophy, Frown } from 'lucide-vue-next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import GameBoard from '@/components/game/GameBoard.vue'
|
||||
import axios from 'axios'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const API_BASE_URL = inject('apiBaseURL')
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const wsStore = useSocketStore()
|
||||
|
||||
// --- FIX: Flag to prevent double cancellation ---
|
||||
const isCancelling = ref(false)
|
||||
|
||||
const matchState = ref({
|
||||
id: route.params.id,
|
||||
wager: 0,
|
||||
myMarks: 0,
|
||||
oppMarks: 0,
|
||||
currentGameId: null,
|
||||
player1: null,
|
||||
player2: null,
|
||||
status: 'Pending'
|
||||
})
|
||||
|
||||
const timeLeft = ref(20)
|
||||
const timerInterval = ref(null)
|
||||
const showSurrenderModal = ref(false)
|
||||
const showTrickResult = ref(false)
|
||||
const lastTrickWinner = ref(null)
|
||||
const showRoundModal = ref(false)
|
||||
const roundData = ref({ winnerId: null, marksAdded: 0, myPoints: 0, oppPoints: 0, reason: '' })
|
||||
|
||||
const myUserId = computed(() => authStore.currentUser?.id)
|
||||
const amIHost = computed(() => matchState.value.player1?.id === myUserId.value)
|
||||
const isPending = computed(() => !matchState.value.player2 || matchState.value.player2.id <= 1)
|
||||
const matchOver = computed(() => matchState.value.myMarks >= 4 || matchState.value.oppMarks >= 4)
|
||||
const iWonMatch = computed(() => matchState.value.myMarks > matchState.value.oppMarks)
|
||||
const isMyTurn = computed(() => String(wsStore.gameState?.currentTurn) === String(myUserId.value))
|
||||
const currentTurnLabel = computed(() => isMyTurn.value ? 'player' : 'opponent')
|
||||
|
||||
const myDisplayName = computed(() => amIHost.value ? matchState.value.player1?.nickname : matchState.value.player2?.nickname)
|
||||
const opponentDisplayName = computed(() => amIHost.value ? matchState.value.player2?.nickname : matchState.value.player1?.nickname)
|
||||
|
||||
const opponentHand = computed(() => {
|
||||
const count = wsStore.gameState?.opponent?.cardCount || 0
|
||||
return Array.from({ length: count }, (_, i) => ({ id: `opp-${i}`, suit: 'back', rank: 0 }))
|
||||
})
|
||||
|
||||
// Timer
|
||||
watch(() => wsStore.gameState?.currentTurn, () => { startTimer() }, { deep: true })
|
||||
const startTimer = () => {
|
||||
if (timerInterval.value) clearInterval(timerInterval.value);
|
||||
timeLeft.value = 20;
|
||||
if(!wsStore.gameState) return;
|
||||
timerInterval.value = setInterval(() => {
|
||||
if(timeLeft.value > 0) timeLeft.value--;
|
||||
else clearInterval(timerInterval.value);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const handlePlayCard = (card) => {
|
||||
if (wsStore.socket) wsStore.socket.emit('game:play-card', { matchId: matchState.value.id, cardId: card.id })
|
||||
}
|
||||
|
||||
const openSurrenderModal = () => { showSurrenderModal.value = true }
|
||||
const confirmSurrenderRound = () => {
|
||||
showSurrenderModal.value = false;
|
||||
if (wsStore.socket) wsStore.socket.emit('game:surrender', { matchId: matchState.value.id });
|
||||
}
|
||||
const confirmSurrenderMatch = () => {
|
||||
showSurrenderModal.value = false;
|
||||
if (wsStore.socket) wsStore.socket.emit('match:surrender', { matchId: matchState.value.id });
|
||||
}
|
||||
const closeRoundModal = () => { showRoundModal.value = false; }
|
||||
|
||||
const updateLocalState = (data) => {
|
||||
if (!data) return
|
||||
if (data.player1) matchState.value.player1 = data.player1
|
||||
if (data.player2) matchState.value.player2 = data.player2
|
||||
if (data.stake) matchState.value.wager = data.stake
|
||||
matchState.value.status = data.status
|
||||
|
||||
if (data.marks) {
|
||||
const myId = authStore.currentUser?.id;
|
||||
const oppId = amIHost.value ? matchState.value.player2?.id : matchState.value.player1?.id;
|
||||
matchState.value.myMarks = data.marks[myId] || 0;
|
||||
matchState.value.oppMarks = data.marks[oppId] || 0;
|
||||
}
|
||||
|
||||
if (data.game) {
|
||||
matchState.value.currentGameId = data.game.id;
|
||||
wsStore.gameState = data.game;
|
||||
} else if (data.status === 'Playing') {
|
||||
matchState.value.currentGameId = null;
|
||||
wsStore.gameState = null;
|
||||
}
|
||||
}
|
||||
|
||||
// --- FIX: Cancel Match with Flag ---
|
||||
const cancelMatch = async () => {
|
||||
if (isCancelling.value) return;
|
||||
isCancelling.value = true;
|
||||
|
||||
try {
|
||||
await axios.delete(`${API_BASE_URL}/matches/${matchState.value.id}`)
|
||||
router.push({ name: 'home' })
|
||||
} catch (e) {
|
||||
// Ignore 404s if we just deleted it
|
||||
if (e.response && e.response.status === 404) {
|
||||
router.push({ name: 'home' })
|
||||
} else {
|
||||
isCancelling.value = false; // Reset if legitimate error
|
||||
alert(e.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
const leaveMatch = () => router.push({ name: 'home' })
|
||||
|
||||
const handleBeforeUnload = (e) => {
|
||||
if (matchState.value.status === 'Playing' && !matchOver.value) {
|
||||
const msg = "If you leave now, you will lose the match and your wager.";
|
||||
e.returnValue = msg;
|
||||
return msg;
|
||||
}
|
||||
}
|
||||
|
||||
// --- FIX: Router Guard checks Flag ---
|
||||
onBeforeRouteLeave((to, from, next) => {
|
||||
// If we already clicked cancel, just let it go
|
||||
if (isCancelling.value) {
|
||||
return next();
|
||||
}
|
||||
|
||||
if (matchState.value.status === 'Playing' && !matchOver.value) {
|
||||
if (confirm("⚠️ WARNING: Leaving now triggers an automatic match surrender (Loss).\n\nAre you sure?")) {
|
||||
if(wsStore.socket) wsStore.socket.emit('match:surrender', { matchId: matchState.value.id });
|
||||
next();
|
||||
} else {
|
||||
next(false);
|
||||
}
|
||||
} else if (isPending.value && amIHost.value) {
|
||||
if(confirm("Cancel this lobby?")) {
|
||||
// Mark as cancelling so we don't trigger double requests if cancelMatch is weird
|
||||
isCancelling.value = true;
|
||||
cancelMatch().then(() => next());
|
||||
} else {
|
||||
next(false);
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||
try {
|
||||
const res = await axios.get(`${API_BASE_URL}/matches/${matchState.value.id}`)
|
||||
const d = res.data.data || res.data
|
||||
matchState.value.player1 = d.player1
|
||||
matchState.value.player2 = d.player2
|
||||
matchState.value.wager = d.stake
|
||||
} catch (e) { }
|
||||
|
||||
wsStore.connect()
|
||||
if (wsStore.socket) {
|
||||
wsStore.socket.emit('match:enter', { matchId: matchState.value.id })
|
||||
wsStore.socket.on('match:update', updateLocalState)
|
||||
wsStore.socket.on('match:new-round', (data) => {
|
||||
updateLocalState(data);
|
||||
toast.info("New round started!");
|
||||
})
|
||||
wsStore.socket.on('match:ended', updateLocalState)
|
||||
wsStore.socket.on('game:update', (state) => { wsStore.gameState = state })
|
||||
wsStore.socket.on('game:trick-end', (result) => {
|
||||
lastTrickWinner.value = result.winnerId;
|
||||
showTrickResult.value = true;
|
||||
setTimeout(() => { showTrickResult.value = false }, 2000);
|
||||
});
|
||||
wsStore.socket.on('match:round-ended', (data) => {
|
||||
const myPoints = data.winnerId == myUserId.value ? (data.winnerId == matchState.value.player1.id ? data.p1Points : data.p2Points) : (data.winnerId == matchState.value.player1.id ? data.p2Points : data.p1Points);
|
||||
const oppPoints = data.winnerId != myUserId.value ? (data.winnerId == matchState.value.player1.id ? data.p1Points : data.p2Points) : (data.winnerId == matchState.value.player1.id ? data.p2Points : data.p1Points);
|
||||
|
||||
roundData.value = {
|
||||
winnerId: data.winnerId,
|
||||
marksAdded: data.marksAdded,
|
||||
myPoints: myPoints,
|
||||
oppPoints: oppPoints,
|
||||
reason: data.reason
|
||||
};
|
||||
showRoundModal.value = true;
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||
if (wsStore.socket) {
|
||||
wsStore.socket.off('match:update')
|
||||
wsStore.socket.off('match:new-round')
|
||||
wsStore.socket.off('game:trick-end')
|
||||
wsStore.socket.off('match:round-ended')
|
||||
}
|
||||
wsStore.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen bg-slate-950 text-white">
|
||||
|
||||
<div class="fixed top-0 left-0 right-0 z-40 bg-slate-900/90 backdrop-blur border-b border-slate-700 p-2 shadow-lg">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between">
|
||||
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold text-lg text-blue-400">{{ myName }}</span>
|
||||
<span v-if="matchState.wager > 0" class="flex items-center text-xs text-yellow-400 bg-yellow-400/10 px-2 rounded">
|
||||
<Coins class="w-3 h-3 mr-1" /> {{ matchState.wager }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-1 mt-1">
|
||||
<div class="w-3 h-3 rounded-full border border-blue-500"
|
||||
:class="{ 'bg-blue-500': matchState.myWins >= 1 }"></div>
|
||||
<div class="w-3 h-3 rounded-full border border-blue-500"
|
||||
:class="{ 'bg-blue-500': matchState.myWins >= 2 }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-xs uppercase tracking-widest text-slate-400">Match {{ matchState.id }}</span>
|
||||
<span class="text-xl font-black font-mono">
|
||||
{{ matchState.myWins }} - {{ matchState.oppWins }}
|
||||
</span>
|
||||
<span class="text-[10px] text-slate-500">Best of 3</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="font-bold text-lg text-red-400">{{ opponentName }}</span>
|
||||
<div class="flex gap-1 mt-1">
|
||||
<div class="w-3 h-3 rounded-full border border-red-500"
|
||||
:class="{ 'bg-red-500': matchState.oppWins >= 1 }"></div>
|
||||
<div class="w-3 h-3 rounded-full border border-red-500"
|
||||
:class="{ 'bg-red-500': matchState.oppWins >= 2 }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative min-h-screen bg-green-900 text-white overflow-hidden">
|
||||
<div class="fixed top-0 left-0 right-0 z-40 bg-green-950/90 backdrop-blur border-b border-green-800 p-2 shadow-xl">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between">
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold text-lg text-white drop-shadow-md">{{ myDisplayName }}</span>
|
||||
<span v-if="matchState.wager > 0" class="flex items-center text-xs text-yellow-300 bg-yellow-900/50 px-2 rounded border border-yellow-700/50">
|
||||
<Coins class="w-3 h-3 mr-1" /> {{ matchState.wager }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-1 mt-1">
|
||||
<div v-for="i in 4" :key="i" class="w-3 h-3 rounded-full border border-green-400 bg-green-900"
|
||||
:class="{ '!bg-green-400 shadow-[0_0_10px_rgba(74,222,128,0.5)]': matchState.myMarks >= i }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] uppercase tracking-widest text-green-400 font-bold">Match #{{ matchState.id }}</span>
|
||||
<span class="text-2xl font-black font-mono text-white drop-shadow-md">{{ matchState.myMarks }} - {{ matchState.oppMarks }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="font-bold text-lg text-white drop-shadow-md">{{ opponentDisplayName }}</span>
|
||||
<div class="flex gap-1 mt-1">
|
||||
<div v-for="i in 4" :key="i" class="w-3 h-3 rounded-full border border-red-400 bg-green-900"
|
||||
:class="{ '!bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]': matchState.oppMarks >= i }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="wsStore.gameState && !matchOver" class="absolute top-24 right-4 z-50">
|
||||
<button @click="openSurrenderModal" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg shadow-lg border-2 border-red-800 transition-all hover:scale-105 flex items-center gap-2 text-sm cursor-pointer">
|
||||
<span>🏳️</span> Surrender
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="wsStore.gameState && !matchOver && isMyTurn" class="absolute top-24 left-1/2 -translate-x-1/2 z-50">
|
||||
<div class="bg-gray-800 px-6 py-2 rounded-lg border-2 shadow-xl transition-colors duration-300" :class="timeLeft <= 5 ? 'border-red-500 bg-red-900/20' : 'border-gray-700'">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5" :class="timeLeft <= 5 ? 'text-red-500 animate-bounce' : 'text-white'" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="10" stroke-width="2" />
|
||||
<polyline points="12 6 12 12 16 14" stroke-width="2" />
|
||||
</svg>
|
||||
<span :class="['text-2xl font-mono font-bold', timeLeft <= 5 ? 'text-red-500' : 'text-white']">{{ timeLeft }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-20 h-screen">
|
||||
<GameBoard
|
||||
v-if="matchState.currentGameId && !matchOver"
|
||||
:game-id="matchState.currentGameId"
|
||||
@game-end="handleGameEnd"
|
||||
/>
|
||||
|
||||
<div v-else-if="!matchOver" class="flex h-full items-center justify-center flex-col gap-4">
|
||||
<div class="text-2xl font-bold animate-pulse">Preparing next round...</div>
|
||||
<p class="text-slate-400">Switching sides and shuffling deck</p>
|
||||
<GameBoard
|
||||
v-if="wsStore.gameState && !matchOver"
|
||||
:game-id="matchState.currentGameId"
|
||||
@play-card="handlePlayCard"
|
||||
:trump-card="wsStore.gameState?.trumpCard"
|
||||
:cards-remaining="wsStore.gameState?.deckCount"
|
||||
:player-hand="wsStore.gameState?.hand"
|
||||
:opponent-hand="opponentHand"
|
||||
:player-score="wsStore.gameState?.points"
|
||||
:opponent-score="wsStore.gameState?.opponent?.points"
|
||||
:current-turn="currentTurnLabel"
|
||||
:current-trick="wsStore.gameState?.table"
|
||||
:is-my-turn="isMyTurn"
|
||||
:player-name="myDisplayName"
|
||||
:opponent-name="opponentDisplayName"
|
||||
/>
|
||||
<div v-else-if="isPending" class="flex h-full items-center justify-center flex-col gap-6">
|
||||
<div class="text-center p-8 bg-green-800/60 rounded-2xl border border-green-600 shadow-2xl backdrop-blur-md max-w-sm w-full mx-4">
|
||||
<div class="relative mx-auto mb-6 h-16 w-16">
|
||||
<div class="absolute inset-0 rounded-full border-4 border-green-700/50"></div>
|
||||
<div class="absolute inset-0 rounded-full border-4 border-t-white border-r-transparent border-b-transparent border-l-transparent animate-spin"></div>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-2 text-white">Waiting for Opponent</h2>
|
||||
<button v-if="amIHost" @click="cancelMatch" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded shadow mt-4">Cancel Match</button>
|
||||
</div>
|
||||
|
||||
<div v-if="matchOver" class="absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md">
|
||||
<div class="text-center space-y-6 p-8 bg-slate-900 border-2 border-purple-500 rounded-2xl shadow-2xl max-w-md w-full">
|
||||
<Trophy v-if="iWonMatch" class="w-20 h-20 text-yellow-400 mx-auto animate-bounce" />
|
||||
<Frown v-else class="w-20 h-20 text-slate-500 mx-auto" />
|
||||
|
||||
<div>
|
||||
<h1 class="text-4xl font-black uppercase mb-2"
|
||||
:class="iWonMatch ? 'text-yellow-400' : 'text-slate-400'">
|
||||
{{ iWonMatch ? 'Victory!' : 'Defeat' }}
|
||||
</h1>
|
||||
<p class="text-slate-300">Final Score: {{ matchState.myWins }} - {{ matchState.oppWins }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="matchState.wager > 0" class="bg-yellow-500/10 p-4 rounded-xl border border-yellow-500/20">
|
||||
<p class="text-xs uppercase text-yellow-600 font-bold mb-1">Total Reward</p>
|
||||
<div class="flex items-center justify-center gap-2 text-2xl font-bold text-yellow-400">
|
||||
<Coins class="w-6 h-6" />
|
||||
<span>{{ iWonMatch ? '+' + (matchState.wager * 2) : '-' + matchState.wager }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button @click="leaveMatch" class="w-full bg-purple-600 hover:bg-purple-700">
|
||||
Return to Lobby
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!matchOver && !wsStore.gameState" class="flex h-full items-center justify-center flex-col gap-4">
|
||||
<div class="text-3xl font-bold animate-pulse text-white drop-shadow">Preparing next round...</div>
|
||||
</div>
|
||||
<div v-if="matchOver" class="absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md">
|
||||
<div class="text-center space-y-6 p-8 bg-green-900 border-2 border-green-500 rounded-2xl shadow-2xl max-w-md w-full">
|
||||
<Trophy v-if="iWonMatch" class="w-24 h-24 text-yellow-400 mx-auto animate-bounce" />
|
||||
<Frown v-else class="w-24 h-24 text-green-300 mx-auto opacity-75" />
|
||||
<h1 class="text-5xl font-black uppercase mb-2" :class="iWonMatch ? 'text-yellow-400' : 'text-gray-300'">{{ iWonMatch ? 'Victory!' : 'Defeat' }}</h1>
|
||||
<p class="text-green-100 text-lg">Marks: <span class="font-bold">{{ matchState.myMarks }} - {{ matchState.oppMarks }}</span></p>
|
||||
<Button @click="leaveMatch" class="w-full py-6 text-lg bg-purple-600 hover:bg-purple-700">Return to Lobby</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showRoundModal" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md">
|
||||
<div class="bg-gray-800 p-8 rounded-2xl border-2 border-yellow-500/50 shadow-2xl max-w-md w-full text-center relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-transparent via-yellow-500 to-transparent"></div>
|
||||
<h2 class="text-3xl font-black text-white mb-2 uppercase">Round Over</h2>
|
||||
<p class="text-gray-400 mb-6 uppercase text-xs tracking-widest">{{ roundData.reason === 'surrender' ? 'Opponent Surrendered' : 'Points Limit Reached' }}</p>
|
||||
|
||||
<div class="flex justify-between items-center bg-black/30 p-4 rounded-lg mb-6">
|
||||
<div class="text-left">
|
||||
<p class="text-xs text-gray-500 uppercase">You</p>
|
||||
<p class="text-2xl font-bold text-white">{{ roundData.myPoints }} pts</p>
|
||||
</div>
|
||||
<div class="text-xl font-bold text-yellow-500">VS</div>
|
||||
<div class="text-right">
|
||||
<p class="text-xs text-gray-500 uppercase">Opponent</p>
|
||||
<p class="text-2xl font-bold text-white">{{ roundData.oppPoints }} pts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<p class="text-lg text-white" v-if="roundData.winnerId == myUserId">
|
||||
You won <span class="text-yellow-400 font-bold">+{{ roundData.marksAdded }} marks</span>!
|
||||
</p>
|
||||
<p class="text-lg text-white" v-else>
|
||||
Opponent won <span class="text-red-400 font-bold">+{{ roundData.marksAdded }} marks</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button @click="closeRoundModal" class="w-full py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl shadow-lg transition-transform hover:scale-105">
|
||||
Ready for Next Round
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showSurrenderModal" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm">
|
||||
<div class="bg-gray-800 p-6 rounded-lg border border-gray-600 shadow-2xl max-w-sm w-full text-center">
|
||||
<h3 class="text-xl font-bold text-white mb-6">Surrender Options</h3>
|
||||
<div class="space-y-3">
|
||||
<button @click="confirmSurrenderRound" class="w-full px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded text-white font-bold border border-gray-500 flex justify-between items-center group">
|
||||
<span>Surrender Round</span>
|
||||
<span class="text-xs bg-black/40 px-2 py-1 rounded text-gray-300 group-hover:bg-red-500 group-hover:text-white">-2 Marks</span>
|
||||
</button>
|
||||
<button @click="confirmSurrenderMatch" class="w-full px-4 py-3 bg-red-900/50 hover:bg-red-600 rounded text-red-200 hover:text-white font-bold border border-red-800 flex justify-between items-center group">
|
||||
<span>Surrender Match</span>
|
||||
<span class="text-xs bg-black/40 px-2 py-1 rounded text-red-300 group-hover:bg-red-800 group-hover:text-white">Defeat</span>
|
||||
</button>
|
||||
</div>
|
||||
<button @click="showSurrenderModal = false" class="mt-6 text-gray-400 hover:text-white text-sm underline">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition enter-active-class="transition-all duration-300 ease-out" enter-from-class="opacity-0 scale-50" enter-to-class="opacity-100 scale-100" leave-active-class="transition-all duration-200 ease-in" leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-75">
|
||||
<div v-if="showTrickResult" class="fixed top-1/3 left-1/2 -translate-x-1/2 z-[70] pointer-events-none">
|
||||
<div class="bg-black/70 backdrop-blur-md px-8 py-4 rounded-2xl border border-white/10 shadow-2xl text-center">
|
||||
<p class="text-sm uppercase tracking-widest text-gray-300 font-bold mb-1">Trick Winner</p>
|
||||
<h2 class="text-3xl font-black" :class="lastTrickWinner === myUserId ? 'text-green-400' : 'text-red-400'">{{ lastTrickWinner === myUserId ? 'YOU' : 'OPPONENT' }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Imports and setup similar to GamePage, but tracking Match State
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { Coins, Trophy, Frown } from 'lucide-vue-next'
|
||||
import GameBoard from '@/components/game/GameBoard.vue' // Reuse your existing board logic
|
||||
import axios from 'axios'
|
||||
// ... socket logic for match_updates ...
|
||||
|
||||
const matchState = ref({
|
||||
id: null,
|
||||
wager: 0,
|
||||
myWins: 0,
|
||||
oppWins: 0,
|
||||
currentGameId: null,
|
||||
players: {}
|
||||
})
|
||||
|
||||
const matchOver = computed(() => matchState.value.myWins >= 2 || matchState.value.oppWins >= 2)
|
||||
const iWonMatch = computed(() => matchState.value.myWins > matchState.value.oppWins)
|
||||
|
||||
// This function listens for Socket events on the "Match Channel"
|
||||
// e.g., channel: `match.{id}` event: `RoundEnded`
|
||||
const listenToMatch = () => {
|
||||
// When a game ends, the server should send:
|
||||
// { nextGameId: 123, scores: { p1: 1, p2: 0 } }
|
||||
// Update matchState.currentGameId to trigger the GameBoard to reload
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user