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>

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>

frontend/src/pages/home/HomePage.vue

@@ -1,11 +1,85 @@
 <template>
-    <div>
+  <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 } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+const showModeSelection = ref(false)
+
+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>
 
-<style scoped></style>`
+<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>

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),
@@ -19,6 +21,20 @@ const router = createRouter({
       path: '/login',
       component: LoginPage,
     },
+    {
+      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',
       children: [
@@ -51,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

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,
+  }
+})

frontend/src/stores/game.js

@@ -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', () => {
-
-})