SyntaxSquad/DADProject#15 feat: Initial Idea

frontend/src/pages/home/HomePage.vue

@@ -12,6 +12,7 @@ import {
 import { useAPIStore } from '@/stores/api'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import axios from 'axios'
 
 const API_BASE_URL = inject('apiBaseURL')
 const apiStore = useAPIStore()
@@ -159,6 +160,52 @@ onMounted(async () => {
     await nextTick();
     setupGamesObserver();
 })
+
+const hostGame = async () => {
+  showHostModal.value = true
+
+  try {
+    const response = await axios.post(`${API_BASE_URL}/games/host`, {
+      type: selectedMode.value
+    })
+
+    const gameId = response.data.id
+
+    console.log('Game hosted:', gameId)
+
+    router.push({
+      name: 'multiplayer-game',
+      params: { id: gameId },
+      query: { type: selectedMode.value }
+    })
+  } catch (error) {
+    console.error('Failed to host game:', error)
+    console.error('Error details:', error.response?.data)
+    showHostModal.value = false
+    alert('Failed to host game: ' + (error.response?.data?.message || error.message))
+  }
+}
+
+const joinGame = async (game) => {
+  selectedGame.value = game
+
+  try {
+    await axios.post(`${API_BASE_URL}/games/${game.id}/join`)
+
+    console.log('Joined game:', game.id)
+
+    router.push({
+      name: 'multiplayer-game',
+      params: { id: game.id },
+      query: { type: selectedMode.value }
+    })
+  } catch (error) {
+    console.error('Failed to join game:', error)
+    console.error('Error details:', error.response?.data)
+    alert('Failed to join game: ' + (error.response?.data?.message || error.message))
+  }
+}
+
 </script>
 
 <template>
@@ -212,7 +259,7 @@ onMounted(async () => {
                 <Card class="w-full max-w-2xl">
                     <CardHeader>
                         <CardTitle class="text-3xl font-bold text-center">
-                            MultiPlayer
+                            Multi Player
                         </CardTitle>
                         <CardDescription class="text-center">
                             Go one on one with another player!
@@ -226,7 +273,7 @@ onMounted(async () => {
                             </div>
                             <div v-else class="max-h-[350px] overflow-y-auto custom-scrollbar p-1">
 
-                                <div v-for="(game, index) in openGames" :key="game.id" @click="JoinGameModal(game)"
+                                <div v-for="(game, index) in openGames" :key="game.id" @click="joinGame(game)"
                                     class="flex items-center justify-between p-3 mb-2 border border-transparent rounded-lg transition-all hover:bg-muted/50 hover:border-purple-500">
 
                                     <div class="flex items-center gap-3">
@@ -249,7 +296,7 @@ onMounted(async () => {
                             </div>
                         </div>
                         <div class="flex justify-center">
-                            <Button @click="hostGameModal()" size="lg" variant="secondary"
+                            <Button @click="hostGame()" size="lg" variant="secondary"
                                 class="hover:bg-purple-500 hover:text-slate-200">
                                 Host Game
                             </Button>