SyntaxSquad/DADProject#14 added protection to logout inside a game and going to another page

frontend/src/pages/game/SinglePlayerGamePage.vue

@@ -1,27 +1,43 @@
 <template>
-<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" 
+  <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"
+        :current-trick="store.table"
+        @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 preparar baralho...</div>
+    </div>
+
+    <GameOver
+      :is-visible="store.isGameOver"
+      :winner="store.winner || 'draw'"
+      :player-score="store.playerScore"
       :opponent-score="store.opponentScore"
-      :current-turn="store.currentTurn"
-      :current-trick="store.table"
-      @play-card="handlePlayCard"
+      :stats="{ playerTricks: store.playerTricks, opponentTricks: store.opponentTricks }"
+      :is-logging-out="store.isLoggingOut"
+      @play-again="handlePlayAgain"
+      @close="handleCloseModal"
     />
   </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>
 </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>