SyntaxSquad/DADProject#15 feat: Added Multiplayer View and Stuff

frontend/src/stores/socket.js

@@ -10,6 +10,7 @@ export const useSocketStore = defineStore('websocket', () => {
   const connected = ref(false)
   const gameState = ref(null)
   const lastError = ref(null)
+  const currentGameId = ref(null)
 
   const WS_URL = 'http://localhost:3000'
 
@@ -23,16 +24,18 @@ export const useSocketStore = defineStore('websocket', () => {
     }
 
     socket.value = io(WS_URL, {
-      auth: {
-        token: `Bearer ${token}`
-      },
+      auth: { token: `Bearer ${token}` },
       reconnection: true,
       reconnectionAttempts: 5,
       reconnectionDelay: 1000
     })
 
-    // Connection events
     socket.value.on('connect', () => {
+      if (currentGameId.value) {
+        console.log("Reconnected to socket. Rejoining game...");
+        socket.emit("join-game", { gameId: currentGameId.value });
+      }
+
       connected.value = true
       console.log('[WebSocket] Connected:', socket.value.id)
     })
@@ -47,15 +50,12 @@ export const useSocketStore = defineStore('websocket', () => {
       lastError.value = error.message
     })
 
-    // Heartbeat
     socket.value.on('heartbeat', () => {
       socket.value.emit('heartbeat_ack')
     })
 
-    // Game events
     socket.value.on('game-state', (state) => {
       gameState.value = state
-      console.log('[Game] State updated:', state)
     })
 
     socket.value.on('game-error', (data) => {
@@ -76,48 +76,40 @@ export const useSocketStore = defineStore('websocket', () => {
       connected.value = false
       gameState.value = null
       lastError.value = null
+      currentGameId.value = null
     }
   }
 
   const joinGame = (gameId) => {
-    if (!socket.value?.connected) {
-      console.error('[Game] Socket not connected')
-      return
-    }
+    currentGameId.value = gameId
+    if (!socket.value?.connected) return
     console.log('[Game] Joining game:', gameId)
     socket.value.emit('join-game', { gameId })
   }
 
   const playCard = (gameId, cardId) => {
-    if (!socket.value?.connected) {
-      console.error('[Game] Socket not connected')
-      return
-    }
-    console.log('[Game] Playing card:', cardId)
+    if (!socket.value?.connected) return
     socket.value.emit('play-card', { gameId, cardId })
   }
 
+  // --- NEW: Surrender Action ---
+  const surrender = (gameId) => {
+    if (!socket.value?.connected) return
+    console.log('[Game] Surrendering:', gameId)
+    socket.value.emit('surrender', { gameId })
+  }
+
   const onTrickEnd = (callback) => {
     if (socket.value) {
+      socket.value.off('trick-end')
       socket.value.on('trick-end', callback)
     }
   }
 
   const onGameOver = (callback) => {
-    if (socket.value) {
-      socket.value.on('game-over', callback)
-    }
-  }
-
-  const offTrickEnd = () => {
-    if (socket.value) {
-      socket.value.off('trick-end')
-    }
-  }
-
-  const offGameOver = () => {
     if (socket.value) {
       socket.value.off('game-over')
+      socket.value.on('game-over', callback)
     }
   }
 
@@ -126,13 +118,13 @@ export const useSocketStore = defineStore('websocket', () => {
     connected,
     gameState,
     lastError,
+    currentGameId,
     connect,
     disconnect,
     joinGame,
     playCard,
+    surrender, // Exported
     onTrickEnd,
-    onGameOver,
-    offTrickEnd,
-    offGameOver
+    onGameOver
   }
 })