From e68f1357ccf82bd26395428c78c0276a4e2cd465 Mon Sep 17 00:00:00 2001
From: Tiago Ramos <2222055@my.ipleiria.pt>
Date: Tue, 23 Dec 2025 00:18:34 +0000
Subject: [PATCH] Added game start for single player, 3 and 9 card game types
 and protected the pages for only logged in players

---
 frontend/src/components/game/GameBoard.vue    |   8 +-
 .../src/pages/game/SinglePlayerGamePage.vue   |  43 +++++
 frontend/src/pages/home/HomePage.vue          | 182 ++++++++----------
 frontend/src/router/index.js                  |  31 ++-
 frontend/src/stores/bisca.js                  | 127 ++++++++++++
 frontend/src/stores/game.js                   |   8 -
 6 files changed, 285 insertions(+), 114 deletions(-)
 create mode 100644 frontend/src/pages/game/SinglePlayerGamePage.vue
 create mode 100644 frontend/src/stores/bisca.js
 delete mode 100644 frontend/src/stores/game.js

diff --git a/frontend/src/components/game/GameBoard.vue b/frontend/src/components/game/GameBoard.vue
index 361fe8c..418f7fc 100644
--- a/frontend/src/components/game/GameBoard.vue
+++ b/frontend/src/components/game/GameBoard.vue
@@ -95,11 +95,11 @@ const props = defineProps({
   },
   playerScore: {
     type: Number,
-    default: 45,
+    default: 0,
   },
   opponentScore: {
     type: Number,
-    default: 23,
+    default: 0,
   },
   currentTurn: {
     type: String,
@@ -113,4 +113,8 @@ const emit = defineEmits(['card-clicked'])
 const handleCardClick = (payload) => {
   emit('card-clicked', payload)
 }
+
+const handlePlayCard = (card) => {
+  store.playerPlayCard(card)
+}
 </script>
diff --git a/frontend/src/pages/game/SinglePlayerGamePage.vue b/frontend/src/pages/game/SinglePlayerGamePage.vue
new file mode 100644
index 0000000..ec6a4d6
--- /dev/null
+++ b/frontend/src/pages/game/SinglePlayerGamePage.vue
@@ -0,0 +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" 
+      :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 baralhar cartas...</div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import { useBiscaStore } from '@/stores/bisca'
+import GameBoard from '@/components/game/GameBoard.vue'
+
+const props = defineProps({
+  gameType: {
+    type: Number,
+    default: 3,
+  },
+})
+
+const store = useBiscaStore()
+
+onMounted(() => {
+  console.log(`A iniciar Bisca de ${props.gameType}...`)
+  store.startGame(props.gameType)
+})
+
+const handlePlayCard = (card) => {
+  store.playerPlayCard(card)
+}
+</script>
diff --git a/frontend/src/pages/home/HomePage.vue b/frontend/src/pages/home/HomePage.vue
index 5c93924..8f120c0 100644
--- a/frontend/src/pages/home/HomePage.vue
+++ b/frontend/src/pages/home/HomePage.vue
@@ -1,107 +1,85 @@
+<template>
+  <div
+    class="flex flex-col items-center justify-center min-h-screen bg-green-900 text-white relative"
+  >
+    <h1 class="text-6xl font-bold mb-12 drop-shadow-lg">Bisca Game</h1>
+
+    <div v-if="!showModeSelection" class="flex flex-col gap-6 w-64">
+      <button
+        @click="showModeSelection = true"
+        class="px-6 py-4 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-xl font-bold shadow-lg transition-transform hover:scale-105"
+      >
+        Single Player
+      </button>
+
+      <button
+        disabled
+        class="px-6 py-4 bg-gray-600 rounded-lg text-xl font-bold opacity-50 cursor-not-allowed"
+      >
+        Multiplayer
+      </button>
+    </div>
+
+    <div
+      v-else
+      class="bg-gray-800/90 p-8 rounded-xl border border-gray-600 shadow-2xl w-80 text-center animate-fade-in"
+    >
+      <h2 class="text-2xl font-bold mb-6 text-emerald-400">Escolhe o Modo</h2>
+
+      <div class="flex flex-col gap-4">
+        <button
+          @click="startGame(3)"
+          class="px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold transition-colors flex justify-between items-center"
+        >
+          <span>Bisca de 3</span>
+          <span class="text-xs bg-blue-800 px-2 py-1 rounded">Clássico</span>
+        </button>
+
+        <button
+          @click="startGame(9)"
+          class="px-6 py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-bold transition-colors flex justify-between items-center"
+        >
+          <span>Bisca de 9</span>
+          <span class="text-xs bg-purple-800 px-2 py-1 rounded">Épico</span>
+        </button>
+      </div>
+
+      <button
+        @click="showModeSelection = false"
+        class="mt-6 text-gray-400 hover:text-white text-sm underline"
+      >
+        Voltar atrás
+      </button>
+    </div>
+  </div>
+</template>
+
 <script setup>
-import { ref, onMounted } from 'vue'
-import { Button } from '@/components/ui/button'
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle
-} from '@/components/ui/card'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-//import { useRouter } from 'vue-router'
+const router = useRouter()
+const showModeSelection = ref(false)
 
-//import { useGameStore } from '@/stores/game'
-import { useAPIStore } from '@/stores/api'
-
-//const gameStore = useGameStore()
-const apiStore = useAPIStore()
-
-const highScores = ref([])
-
-/* const startGame = () => {
-    gameStore.difficulty = selectedDifficulty.value
-    router.push({ name: 'singleplayer' })
-} */
-
-onMounted(async () => {
-    const response = await apiStore.getGames()
-
-    highScores.value = response.data.data
-        .map(item => ({
-            points: item.player1_points,
-            time: item.total_time,
-            username: item.player1?.name
-        }))
-        .sort((a, b) => a.time - b.time == 0 ? a.player1_points - b.player1_points : a.time - b.time)
-        .slice(0, 3)
-})
+const startGame = (type) => {
+  // Navega para a rota correta baseada no tipo (3 ou 9)
+  const routeName = type === 9 ? 'bisca9' : 'bisca3'
+  router.push({ name: routeName })
+}
 </script>
 
-<template>
-    <div class="flex flex-row justify-center items-stretch gap-5 mt-10">
-        <Card class="w-full max-w-md">
-            <CardHeader>
-                <CardTitle class="text-3xl font-bold text-center">
-                    Single Player
-                </CardTitle>
-                <CardDescription class="text-center">
-                    Test your memory by finding matching pairs!
-                </CardDescription>
-            </CardHeader>
-            <CardContent class="space-y-6">
-                <div class="space-y-2">
-                    <label class="text-sm font-medium">High Scores (local)</label>
-                    <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
-                        <div class="max-h-64 overflow-y-auto">
-                            <div v-if="highScores.length === 0" class="p-6 text-center text-sm text-muted-foreground">
-                                No high scores yet. Be the first!
-                            </div>
-                            <div v-else class="divide-y">
-                                <div v-for="(score, index) in highScores" :key="index"
-                                    class="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
-                                    <div class="flex items-center gap-3">
-                                        <div class="flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
-                                            :class="{
-                                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300': index === 0,
-                                                'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': index === 1,
-                                                'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': index === 2,
-                                                'bg-muted text-muted-foreground': index > 2
-                                            }">
-                                            {{ index + 1 }}
-                                        </div>
-                                        <div>
-                                            <div class="font-medium text-sm">{{ score.player1_points }} Moves -- {{
-                                                score.username }}</div>
-                                            <div class="text-xs text-muted-foreground">{{ score.time }} /s</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex justify-center">
-                    <Button @click="startGame" size="lg" variant="secondary"
-                        class="hover:bg-purple-500 hover:text-slate-200">
-                        Start Game
-                    </Button>
-                </div>
-            </CardContent>
-        </Card>
-        <Card class="w-full max-w-md">
-            <CardHeader>
-                <CardTitle class="text-3xl font-bold text-center">
-                    MultiPlayer
-                </CardTitle>
-                <CardDescription class="text-center">
-                    Comming Soon!!
-                </CardDescription>
-            </CardHeader>
-            <CardContent class="space-y-6">
-
-            </CardContent>
-        </Card>
-    </div>
-</template>
+<style scoped>
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 8869581..983f8fd 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -6,7 +6,9 @@ import TestAnimations from '@/pages/TestAnimations.vue'
 import TestDealing from '@/pages/TestDealing.vue'
 import TestAllAnimations from '@/pages/TestAllAnimations.vue'
 import TestGameBoard from '@/pages/TestGameBoard.vue'
+import SinglePlayerGamePage from '@/pages/game/SinglePlayerGamePage.vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import { toast } from 'vue-sonner'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,8 +22,18 @@ const router = createRouter({
       component: LoginPage,
     },
     {
-      path: '/user',
-      component: UserPage,
+      path: '/game/3',
+      name: 'bisca3',
+      component: SinglePlayerGamePage,
+      props: { gameType: 3 },
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/game/9',
+      name: 'bisca9',
+      component: SinglePlayerGamePage,
+      props: { gameType: 9 },
+      meta: { requiresAuth: true },
     },
     {
       path: '/testing',
@@ -55,4 +67,19 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach((to, from, next) => {
+  if (to.meta.requiresAuth) {
+    const token = localStorage.getItem('token') // Ou useAuthStore().token
+
+    if (!token) {
+      toast.error('Acesso Negado', {
+        description: 'Precisas de fazer login para aceder ao jogo.',
+        duration: 4000,
+      })
+      return next({ name: 'home' })
+    }
+  }
+  next()
+})
+
 export default router
diff --git a/frontend/src/stores/bisca.js b/frontend/src/stores/bisca.js
new file mode 100644
index 0000000..49a7c79
--- /dev/null
+++ b/frontend/src/stores/bisca.js
@@ -0,0 +1,127 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useBiscaStore = defineStore('bisca', () => {
+  const isDealing = ref(false)
+  const isGameRunning = ref(false)
+  const gameType = ref(3)
+
+  const deck = ref([])
+  const playerHand = ref([])
+  const opponentHand = ref([])
+  const trumpCard = ref(null)
+  const playerScore = ref(0)
+  const opponentScore = ref(0)
+
+  const currentTurn = ref('player')
+
+  const table = ref({
+    playerCard: null,
+    opponentCard: null,
+    firstToPlay: null,
+  })
+
+  const startGame = async (type = 3) => {
+    if (isDealing.value) return
+
+    isDealing.value = true
+    isGameRunning.value = true
+    gameType.value = type
+
+    playerScore.value = 0
+    opponentScore.value = 0
+
+    deck.value = []
+    playerHand.value = []
+    opponentHand.value = []
+    trumpCard.value = null
+
+    currentTurn.value = 'player'
+
+    table.value = {
+      playerCard: null,
+      opponentCard: null,
+      firstToPlay: null,
+    }
+
+    deck.value = createDeck()
+
+    trumpCard.value = deck.value[0]
+
+    await wait(500)
+
+    await dealInitialCards()
+
+    isDealing.value = false
+  }
+
+  const dealInitialCards = async () => {
+    const cardsToDeal = gameType.value === 9 ? 9 : 3
+
+    const dealSpeed = gameType.value === 9 ? 200 : 500
+
+    for (let i = 0; i < cardsToDeal; i++) {
+      if (deck.value.length > 0) {
+        const card = deck.value.pop()
+        playerHand.value.push(card)
+        await wait(dealSpeed)
+      }
+
+      if (deck.value.length > 0) {
+        const card = deck.value.pop()
+        opponentHand.value.push(card)
+        await wait(dealSpeed)
+      }
+    }
+  }
+
+  const createDeck = () => {
+    const suits = ['c', 'e', 'o', 'p']
+    const ranks = [1, 2, 3, 4, 5, 6, 7, 11, 12, 13]
+    let newDeck = []
+
+    for (const suit of suits) {
+      for (const rank of ranks) {
+        newDeck.push({
+          id: `${suit}-${rank}`,
+          suit,
+          rank,
+          points: getPoints(rank),
+          strength: getStrength(rank),
+        })
+      }
+    }
+    return newDeck.sort(() => Math.random() - 0.5)
+  }
+
+  const getPoints = (rank) => {
+    if (rank === 1) return 11
+    if (rank === 7) return 10
+    if (rank === 13) return 4
+    if (rank === 11) return 3
+    if (rank === 12) return 2
+    return 0
+  }
+
+  const getStrength = (rank) => {
+    const strengthMap = { 1: 10, 7: 9, 13: 8, 11: 7, 12: 6, 6: 5, 5: 4, 4: 3, 3: 2, 2: 1 }
+    return strengthMap[rank] || 0
+  }
+
+  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+  return {
+    isDealing,
+    isGameRunning,
+    gameType,
+    deck,
+    playerHand,
+    opponentHand,
+    trumpCard,
+    playerScore,
+    opponentScore,
+    currentTurn,
+    table,
+    startGame,
+  }
+})
diff --git a/frontend/src/stores/game.js b/frontend/src/stores/game.js
deleted file mode 100644
index f979538..0000000
--- a/frontend/src/stores/game.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { toast } from 'vue-sonner'
-import { useApiStore } from './api'
-
-export const useGameStore = defineStore('game', () => {
-
-})