Added game start for single player, 3 and 9 card game types and protected the pages for only logged in players

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>