SyntaxSquad/DADProject#15 feat: Initial Idea

frontend/src/stores/socket.js

@@ -1,24 +1,138 @@
 import { defineStore } from 'pinia'
-import { inject } from 'vue'
+import { ref } from 'vue'
+import { io } from 'socket.io-client'
+import { useAuthStore } from './auth'
 
-export const useSocketStore = defineStore('socket', () => {
-  const socket = inject('socket')
+export const useSocketStore = defineStore('websocket', () => {
+  const authStore = useAuthStore()
 
-  const handleConnection = () => {
-    try {
-      socket.on('connect', () => {
-        console.log(`[Socket] Connected -- ${socket.id}`)
-      })
-      socket.on('disconnect', () => {
-        console.log(`[Socket] Disconnected -- ${socket.id}`)
-      })
-    } catch (error) {
-      console.error('[Socket] Connection error:', error)
+  const socket = ref(null)
+  const connected = ref(false)
+  const gameState = ref(null)
+  const lastError = ref(null)
+
+  const WS_URL = 'http://localhost:3000'
+
+  const connect = () => {
+    if (socket.value?.connected) return
+
+    const token = authStore.getToken()
+    if (!token) {
+      console.error('No token available for WebSocket connection')
+      return
+    }
+
+    socket.value = io(WS_URL, {
+      auth: {
+        token: `Bearer ${token}`
+      },
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000
+    })
+
+    // Connection events
+    socket.value.on('connect', () => {
+      connected.value = true
+      console.log('[WebSocket] Connected:', socket.value.id)
+    })
+
+    socket.value.on('disconnect', (reason) => {
+      connected.value = false
+      console.log('[WebSocket] Disconnected:', reason)
+    })
+
+    socket.value.on('connect_error', (error) => {
+      console.error('[WebSocket] Connection error:', error.message)
+      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) => {
+      lastError.value = data.message
+      console.error('[Game] Error:', data.message)
+    })
+
+    socket.value.on('error', (data) => {
+      lastError.value = data.message
+      console.error('[Socket] Error:', data.message)
+    })
+  }
+
+  const disconnect = () => {
+    if (socket.value) {
+      socket.value.disconnect()
+      socket.value = null
+      connected.value = false
+      gameState.value = null
+      lastError.value = null
+    }
+  }
+
+  const joinGame = (gameId) => {
+    if (!socket.value?.connected) {
+      console.error('[Game] Socket not 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)
+    socket.value.emit('play-card', { gameId, cardId })
+  }
+
+  const onTrickEnd = (callback) => {
+    if (socket.value) {
+      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')
     }
   }
 
   return {
-    handleConnection,
+    socket,
+    connected,
+    gameState,
+    lastError,
+    connect,
+    disconnect,
+    joinGame,
+    playCard,
+    onTrickEnd,
+    onGameOver,
+    offTrickEnd,
+    offGameOver
   }
-
 })