frontend/src/App.vue

@@ -49,4 +49,3 @@ onMounted(async () => {
 </script>
 
 <style></style>
-`

frontend/src/components/game/GameOver.vue

@@ -33,7 +33,10 @@
             ]"
           >
             <!-- Confetti Effect (if player wins) -->
-            <div v-if="winner === 'player' && showConfetti" class="absolute inset-0 pointer-events-none">
+            <div
+              v-if="winner === 'player' && showConfetti"
+              class="absolute inset-0 pointer-events-none"
+            >
               <div
                 v-for="i in 30"
                 :key="i"
@@ -140,17 +143,23 @@
             <!-- Actions -->
             <div class="flex gap-3">
               <button
+                v-if="!isLoggingOut"
                 @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"
+                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 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"
+                class="flex-1 font-bold py-3 px-6 rounded-lg transition-all"
+                :class="[
+                  isLoggingOut
+                    ? 'bg-red-600 hover:bg-red-700 text-white w-full' // Estilo de destaque para Logout
+                    : 'bg-gray-700 hover:bg-gray-600 text-white',
+                ]"
               >
-                Close
+                {{ isLoggingOut ? 'Confirmar Logout' : 'Close' }}
               </button>
             </div>
           </div>
@@ -197,6 +206,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isLoggingOut: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['close', 'play-again'])

frontend/src/components/layout/NavBar.vue

@@ -15,14 +15,16 @@
                         </li>
                     </NavigationMenuContent>
                 </NavigationMenuItem>
+                
                 <NavigationMenuItem v-if="!userLoggedIn">
                     <NavigationMenuLink>
                         <RouterLink to="/login">Login</RouterLink>
                     </NavigationMenuLink>
                 </NavigationMenuItem>
+                
                 <NavigationMenuItem v-else>
                     <NavigationMenuLink>
-                        <a @click.prevent="logoutClickHandler">Logout</a>
+                        <a href="/home" @click.prevent="logoutClickHandler" class="cursor-pointer">Logout</a>
                     </NavigationMenuLink>
                     <NavigationMenuLink>
                         <RouterLink to="/user">Profile</RouterLink>
@@ -34,6 +36,8 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
+import { useBiscaStore } from '@/stores/bisca'
 import {
     NavigationMenu,
     NavigationMenuContent,
@@ -44,12 +48,28 @@ import {
 } from '@/components/ui/navigation-menu'
 import router from '@/router';
 
-
 const emits = defineEmits(['logout'])
 const { userLoggedIn } = defineProps(['userLoggedIn'])
 
+const router = useRouter()
+const biscaStore = useBiscaStore()
+
 const logoutClickHandler = () => {
+    if (biscaStore.isGameRunning) {
+        const confirmLogout = window.confirm(
+            '⚠️ Jogo em Progresso!\n\nSe fizeres Logout agora, perderás o jogo atual e serás considerado PERDEDOR.\n\nQueres mesmo sair?'
+        )
+        if (!confirmLogout) return
+
+        biscaStore.isLoggingOut = true
+
+        biscaStore.quitGame()
+
+        return
+    }
+
     emits('logout')
-    router.push('/login')
+
+    router.push({ name: 'home' }) 
 }
 </script>

frontend/src/pages/game/SinglePlayerGamePage.vue

@@ -1,11 +1,11 @@
 <template>
-<div v-if="store.trumpCard">
+  <div class="relative min-h-screen overflow-hidden">
+    <div v-if="store.trumpCard">
       <GameBoard
         :trump-card="store.trumpCard"
         :cards-remaining="store.deck.length"
         :player-hand="store.playerHand"
         :opponent-hand="store.opponentHand"
-      
         :player-score="store.playerScore"
         :opponent-score="store.opponentScore"
         :current-turn="store.currentTurn"
@@ -13,15 +13,31 @@
         @play-card="handlePlayCard"
       />
     </div>
+
     <div v-else class="flex h-screen items-center justify-center bg-green-900 text-white">
-    <div class="animate-pulse text-xl">A baralhar cartas...</div>
+      <div class="animate-pulse text-xl">A preparar baralho...</div>
+    </div>
+
+    <GameOver
+      :is-visible="store.isGameOver"
+      :winner="store.winner || 'draw'"
+      :player-score="store.playerScore"
+      :opponent-score="store.opponentScore"
+      :stats="{ playerTricks: store.playerTricks, opponentTricks: store.opponentTricks }"
+      :is-logging-out="store.isLoggingOut"
+      @play-again="handlePlayAgain"
+      @close="handleCloseModal"
+    />
   </div>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, onBeforeMount } from 'vue'
+import { useRouter, onBeforeRouteLeave } from 'vue-router'
 import { useBiscaStore } from '@/stores/bisca'
 import GameBoard from '@/components/game/GameBoard.vue'
+import GameOver from '@/components/game/GameOver.vue'
+import { useAuthStore } from '@/stores/auth'
 
 const props = defineProps({
   gameType: {
@@ -31,13 +47,71 @@ const props = defineProps({
 })
 
 const store = useBiscaStore()
+const router = useRouter()
+const authStore = useAuthStore()
 
 onMounted(() => {
-  console.log(`A iniciar Bisca de ${props.gameType}...`)
   store.startGame(props.gameType)
+  window.addEventListener('beforeunload', handleBrowserUnload)
+})
+
+const handlePlayAgain = () => {
+  store.startGame(props.gameType)
+}
+
+const handleCloseModal = () => {
+  if (store.isLoggingOut) {
+    localStorage.removeItem('token')
+
+    authStore.logout()
+    store.$reset()
+
+    router.push({ name: 'login' })
+    return
+  }
+  store.isGameRunning = false
+  store.isGameOver = false
+  router.push({ name: 'home' })
+}
+
+onUnmounted(() => {
+  window.removeEventListener('beforeunload', handleBrowserUnload)
+
+  store.isGameOver = false
+  store.isGameRunning = false
+  store.isLoggingOut = false
+})
+
+onBeforeMount(() => {
+  store.isGameOver = false
 })
 
 const handlePlayCard = (card) => {
   store.playerPlayCard(card)
 }
+
+const handleBrowserUnload = (event) => {
+  if (store.isGameRunning) {
+    event.preventDefault()
+    event.returnValue = ''
+  }
+}
+
+onBeforeRouteLeave((to, from, next) => {
+  if (!store.isGameRunning) {
+    next()
+    return
+  }
+
+  const confirmExit = window.confirm(
+    '⚠️ Jogo em Progresso!\n\nSe saíres agora, o jogo será cancelado e contarás como PERDEDOR.\n\nQueres mesmo sair?',
+  )
+
+  if (confirmExit) {
+    store.quitGame()
+    next()
+  } else {
+    next(false)
+  }
+})
 </script>

frontend/src/router/index.js

@@ -15,10 +15,12 @@ const router = createRouter({
   routes: [
     {
       path: '/',
+      name: 'home',
       component: HomePage,
     },
     {
       path: '/login',
+      name: 'login',
       component: LoginPage,
     },
     {
@@ -68,15 +70,13 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (to.meta.requiresAuth) {
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
-    const token = localStorage.getItem('token') // Ou useAuthStore().token
+
+  if (requiresAuth) {
+    const token = localStorage.getItem('token')
 
     if (!token) {
-      toast.error('Acesso Negado', {
+      return next({ name: 'login' })
-        description: 'Precisas de fazer login para aceder ao jogo.',
-        duration: 4000,
-      })
-      return next({ name: 'home' })
     }
   }
   next()

frontend/src/stores/bisca.js

@@ -4,7 +4,9 @@ import { ref } from 'vue'
 export const useBiscaStore = defineStore('bisca', () => {
   const isDealing = ref(false)
   const isGameRunning = ref(false)
+  const isGameOver = ref(false)
   const gameType = ref(3)
+  const isLoggingOut = ref(false)
 
   const deck = ref([])
   const playerHand = ref([])
@@ -15,6 +17,11 @@ export const useBiscaStore = defineStore('bisca', () => {
 
   const currentTurn = ref('player')
 
+  const playerTricks = ref(0)
+  const opponentTricks = ref(0)
+
+  const winner = ref(null)
+
   const table = ref({
     playerCard: null,
     opponentCard: null,
@@ -27,9 +34,13 @@ export const useBiscaStore = defineStore('bisca', () => {
     isDealing.value = true
     isGameRunning.value = true
     gameType.value = type
+    isGameOver.value = false
+    isLoggingOut.value = false
 
     playerScore.value = 0
     opponentScore.value = 0
+    playerTricks.value = 0
+    opponentTricks.value = 0
 
     deck.value = []
     playerHand.value = []
@@ -55,6 +66,66 @@ export const useBiscaStore = defineStore('bisca', () => {
     isDealing.value = false
   }
 
+  const resolveTrick = () => {
+    const pCard = table.value.playerCard
+    const oCard = table.value.opponentCard
+    const trumpSuit = trumpCard.value.suit
+    let trickWinner = ''
+
+    if (pCard.suit === trumpSuit && oCard.suit !== trumpSuit) trickWinner = 'player'
+    else if (oCard.suit === trumpSuit && pCard.suit !== trumpSuit) trickWinner = 'opponent'
+    else if (pCard.suit === oCard.suit) {
+      trickWinner = getStrength(pCard.rank) > getStrength(oCard.rank) ? 'player' : 'opponent'
+    } else {
+      trickWinner = table.value.firstToPlay
+    }
+
+    const points = pCard.points + oCard.points
+
+    if (trickWinner === 'player') {
+      playerScore.value += points
+      playerTricks.value++
+    } else {
+      opponentScore.value += points
+      opponentTricks.value++
+    }
+
+    table.value = { playerCard: null, opponentCard: null, firstToPlay: null }
+
+    if (
+      deck.value.length === 0 &&
+      playerHand.value.length === 0 &&
+      opponentHand.value.length === 0
+    ) {
+      endGame()
+      return
+    }
+
+    if (deck.value.length > 0) {
+      if (trickWinner === 'player') {
+        playerHand.value.push(deck.value.pop())
+        opponentHand.value.push(deck.value.pop())
+      } else {
+        opponentHand.value.push(deck.value.pop())
+        playerHand.value.push(deck.value.pop())
+      }
+    }
+
+    currentTurn.value = trickWinner
+    if (trickWinner === 'opponent') {
+      setTimeout(botPlayCard, 1000)
+    }
+  }
+
+  const endGame = () => {
+    isGameRunning.value = false
+    isGameOver.value = true
+
+    if (playerScore.value > opponentScore.value) winner.value = 'player'
+    else if (opponentScore.value > playerScore.value) winner.value = 'opponent'
+    else winner.value = 'draw'
+  }
+
   const dealInitialCards = async () => {
     const cardsToDeal = gameType.value === 9 ? 9 : 3
 
@@ -108,6 +179,16 @@ export const useBiscaStore = defineStore('bisca', () => {
     return strengthMap[rank] || 0
   }
 
+  const quitGame = () => {
+    if (!isGameRunning.value) return
+    opponentScore.value = 120
+    playerScore.value = 0
+    winner.value = 'opponent'
+
+    isGameRunning.value = false
+    isGameOver.value = true
+  }
+
   const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
   return {
@@ -117,11 +198,18 @@ export const useBiscaStore = defineStore('bisca', () => {
     deck,
     playerHand,
     opponentHand,
+    isLoggingOut,
     trumpCard,
     playerScore,
     opponentScore,
     currentTurn,
     table,
+    playerTricks,
+    opponentTricks,
+    isGameOver,
+    winner,
     startGame,
+    quitGame,
+    resolveTrick,
   }
 })