frontend/src/components/game/GameOver.vue

@@ -155,11 +155,11 @@
                 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-red-600 hover:bg-red-700 text-white w-full'
                     : 'bg-gray-700 hover:bg-gray-600 text-white',
                 ]"
               >
-                {{ isLoggingOut ? 'Confirmar Logout' : 'Close' }}
+                {{ isLoggingOut ? 'Confirm Logout' : 'Close' }}
               </button>
             </div>
           </div>

frontend/src/pages/game/SinglePlayerGamePage.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="relative min-h-screen overflow-hidden">
-    
+    <div v-if="store.isGameRunning" class="absolute top-4 right-4 z-50">
+      <button
+        @click="handleSurrender"
+        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 transform hover:scale-105 flex items-center gap-2"
+      >
+        <span>🏳️</span> Surrender
+      </button>
+    </div>
+
     <div v-if="store.isGameRunning">
       <GameBoard
         :trump-card="store.trumpCard"
-        :cards-remaining="store.deck.length + (store.trumpCard ? 1 : 0)" 
+        :cards-remaining="store.deck.length + (store.trumpCard ? 1 : 0)"
         :player-hand="store.playerHand"
         :opponent-hand="store.opponentHand"
         :player-score="store.playerScore"
@@ -16,7 +24,7 @@
     </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 jogo...</div>
+      <div class="animate-pulse text-xl">Preparing game...</div>
     </div>
 
     <GameOver
@@ -35,10 +43,11 @@
 <script setup>
 import { onMounted, onUnmounted, onBeforeMount } from 'vue'
 import { useRouter, onBeforeRouteLeave } from 'vue-router'
+import { toast } from 'vue-sonner' // Import Toast for feedback
 import { useBiscaStore } from '@/stores/bisca'
+import { useAuthStore } from '@/stores/auth'
 import GameBoard from '@/components/game/GameBoard.vue'
 import GameOver from '@/components/game/GameOver.vue'
-import { useAuthStore } from '@/stores/auth'
 
 const props = defineProps({
   gameType: {
@@ -51,30 +60,15 @@ const store = useBiscaStore()
 const router = useRouter()
 const authStore = useAuthStore()
 
+onBeforeMount(() => {
+  store.isGameOver = false
+})
+
 onMounted(() => {
   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)
 
@@ -83,14 +77,44 @@ onUnmounted(() => {
   store.isLoggingOut = false
 })
 
-onBeforeMount(() => {
-  store.isGameOver = false
-})
-
 const handlePlayCard = (card) => {
   store.playerPlayCard(card)
 }
 
+const handlePlayAgain = () => {
+  store.startGame(props.gameType)
+}
+
+const handleSurrender = () => {
+  const confirmSurrender = window.confirm(
+    'Are you sure you want to surrender? Your opponent will be awarded the win.',
+  )
+
+  if (!confirmSurrender) return
+
+  store.quitGame()
+
+  toast.error('Game Surrendered', {
+    description: 'You forfeited the match.',
+  })
+
+  router.push({ name: 'home' })
+}
+
+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' })
+}
+
 const handleBrowserUnload = (event) => {
   if (store.isGameRunning) {
     event.preventDefault()
@@ -105,7 +129,7 @@ onBeforeRouteLeave((to, from, next) => {
   }
 
   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?',
+    '⚠️ Game in Progress!\n\nIf you leave now, the game will be cancelled and recorded as a LOSS.\n\nAre you sure you want to leave?',
   )
 
   if (confirmExit) {

frontend/src/stores/bisca.js

@@ -268,9 +268,12 @@ export const useBiscaStore = defineStore('bisca', () => {
 
   const quitGame = () => {
     if (!isGameRunning.value) return
+
     opponentScore.value = 120
     playerScore.value = 0
     winner.value = 'opponent'
+
+    // Parar o jogo imediatamente
     isGameRunning.value = false
     isGameOver.value = true
   }