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

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>
                 </NavigationMenuItem>
             </NavigationMenuList>
@@ -31,6 +33,8 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
+import { useBiscaStore } from '@/stores/bisca'
 import {
     NavigationMenu,
     NavigationMenuContent,
@@ -40,11 +44,28 @@ import {
     NavigationMenuTrigger,
 } from '@/components/ui/navigation-menu'
 
-
 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({ name: 'home' }) 
 }
-</script>
+</script>