Fix chatbox

client/src/common/contexts/SocketContext/SocketContext.jsx

@@ -1,99 +0,0 @@
-import {createContext, useState, useEffect, useCallback, useRef} from 'react';
-import {io} from 'socket.io-client';
-
-export const SocketContext = createContext();
-
-export const SocketProvider = ({children}) => {
-    const [socket, setSocket] = useState(null);
-    const [connected, setConnected] = useState(false);
-    const connectAttempts = useRef(0);
-    const maxAttempts = 3;
-
-    const connect = useCallback(() => {
-        if (socket) return;
-
-        const serverUrl = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://localhost:5287';
-
-        try {
-            const newSocket = io(serverUrl, {
-                reconnectionAttempts: 3,
-                timeout: 10000,
-                reconnectionDelay: 1000
-            });
-
-            newSocket.on('connect', () => {
-                console.log('Socket connected with ID:', newSocket.id);
-                setConnected(true);
-                connectAttempts.current = 0;
-            });
-
-            newSocket.on('disconnect', (reason) => {
-                console.log('Socket disconnected:', reason);
-                setConnected(false);
-            });
-
-            newSocket.on('connect_error', (error) => {
-                console.error('Connection error:', error);
-                connectAttempts.current += 1;
-
-                if (connectAttempts.current >= maxAttempts) {
-                    console.error('Max connection attempts reached, giving up');
-                    newSocket.disconnect();
-                }
-            });
-
-            setSocket(newSocket);
-        } catch (err) {
-            console.error('Error creating socket connection:', err);
-        }
-    }, [socket]);
-
-    const disconnect = useCallback(() => {
-        if (socket) {
-            socket.disconnect();
-            setSocket(null);
-            setConnected(false);
-            console.log('Socket manually disconnected');
-        }
-    }, [socket]);
-
-    const send = useCallback((event, data) => {
-        if (!socket || !connected) {
-            console.warn(`Cannot send event "${event}": socket not connected`);
-            return false;
-        }
-
-        try {
-            socket.emit(event, data);
-            return true;
-        } catch (err) {
-            console.error(`Error sending event "${event}":`, err);
-            return false;
-        }
-    }, [socket, connected]);
-
-    const on = useCallback((event, callback) => {
-        if (!socket) {
-            console.warn(`Cannot listen for event "${event}": socket not initialized`);
-            return () => {
-            };
-        }
-
-        socket.on(event, callback);
-        return () => socket.off(event, callback);
-    }, [socket]);
-
-    useEffect(() => {
-        return () => {
-            if (socket) {
-                socket.disconnect();
-            }
-        };
-    }, [socket]);
-
-    return (
-        <SocketContext.Provider value={{socket, connected, connect, disconnect, send, on}}>
-            {children}
-        </SocketContext.Provider>
-    );
-};

client/src/common/contexts/SocketContext/index.js

@@ -1 +0,0 @@
-export * from "./SocketContext";

client/src/pages/Game/Game.jsx

@@ -126,7 +126,16 @@ export const Game = () => {
                 if (data.timeRemaining) {
                     setTimeLeft(data.timeRemaining);
                 }
-            }
+            },
+            "chat-message-confirmation": (msg) => {
+                setMessages(prev => prev.map(prevMsg => {
+                    if (!prevMsg.system && prevMsg.text === msg.text && prevMsg.sender !== msg.sender) {
+                        console.log(`Updating message sender from "${prevMsg.sender}" to "${msg.sender}"`);
+                        return { ...prevMsg, sender: msg.sender };
+                    }
+                    return prevMsg;
+                }));
+            },
         };
 
         const cleanupFunctions = Object.entries(eventHandlers).map(
@@ -212,12 +221,15 @@ export const Game = () => {
     
     const handleSendMessage = useCallback(() => {
         if (inputValue.trim()) {
-            const messageData = { text: inputValue, sender: username };
+            const currentUser = connectedUsers.find(u => u.id === socket?.id);
+            const senderName = currentUser?.name || username || "Player";
+            
+            const messageData = { text: inputValue, sender: senderName };
             send("send-message", messageData);
             setMessages(prev => [...prev, messageData]);
             setInputValue("");
         }
-    }, [inputValue, username, send]);
+    }, [inputValue, send, socket?.id, connectedUsers, username]);
     
     const handleSongSelect = useCallback((song) => {
         setSelectedSong(song);

server/handler/connection.js

@@ -180,7 +180,25 @@ module.exports = (io) => (socket) => {
 
     socket.on("send-message", (messageData) => {
         const roomId = roomController.getUserRoom(socket.id);
-        if (roomId) socket.to(roomId).emit("chat-message", messageData);
+        if (!roomId) return;
+
+        const serverUsername = roomController.getUserName(socket.id);
+        
+        if (!messageData.sender || messageData.sender === "Player" || messageData.sender === "Anonymous") {
+            if (serverUsername) {
+                console.log(`Fixing missing username for ${socket.id}: using "${serverUsername}" instead of "${messageData.sender || 'none'}"`);
+                messageData.sender = serverUsername;
+            } else {
+                console.warn(`Could not find username for user ${socket.id}`);
+            }
+        }
+        
+        socket.to(roomId).emit("chat-message", messageData);
+        
+        socket.emit("chat-message-confirmation", {
+            ...messageData,
+            sender: messageData.sender
+        });
     });
 
     socket.on("get-user-info", () => {