fixes lol

frontend/src/lib/chat/chatWebSocket.js

@@ -162,6 +162,14 @@ class ChatWebSocket {
 				break;
 
 			case 'auth_success':
+				// Get old userId before updating (for participant cleanup)
+				const oldUserId = get(chatUserInfo).userId;
+
+				// Remove old participant entry (guest identity)
+				if (oldUserId) {
+					participants.update((list) => list.filter((p) => p.userId !== oldUserId));
+				}
+
 				// Update user info after successful authentication
 				chatUserInfo.set({
 					username: data.username,
@@ -174,6 +182,9 @@ class ChatWebSocket {
 					avatarUrl: data.avatarUrl || '',
 					userColor: data.userColor || '#FFFFFF'
 				});
+
+				// Request fresh participants list to ensure consistency
+				this.getParticipants();
 				console.log('Authentication successful:', data.username);
 				break;
 
@@ -197,19 +208,27 @@ class ChatWebSocket {
 				break;
 
 			case 'participants_list':
-				participants.set(data.participants || []);
+				// Sort by joinedAt ascending (oldest/longest-joined first)
+				const sortedList = (data.participants || []).sort(
+					(a, b) => (a.joinedAt || 0) - (b.joinedAt || 0)
+				);
+				participants.set(sortedList);
 				console.log(`Participants in realm: ${data.count}`);
 				break;
 
 			case 'participant_joined':
 				// Add new participant to the list
 				participants.update((list) => {
-					// Check if already in list (avoid duplicates)
-					const exists = list.some((p) => p.userId === data.participant.userId);
-					if (!exists) {
-						return [...list, data.participant];
-					}
-					return list;
+					// Remove any existing entry with same userId OR same username
+					// This handles auth transitions (userId changes) and reconnects
+					const filtered = list.filter(
+						(p) =>
+							p.userId !== data.participant.userId &&
+							p.username !== data.participant.username
+					);
+					// Add new participant and re-sort by joinedAt (oldest first)
+					const updated = [...filtered, data.participant];
+					return updated.sort((a, b) => (a.joinedAt || 0) - (b.joinedAt || 0));
 				});
 				console.log(`Participant joined: ${data.participant.username} (${data.participantCount} total)`);
 				break;
@@ -431,6 +450,7 @@ class ChatWebSocket {
 
 	/**
 	 * Manually trigger reconnection - resets attempt counter and tries immediately
+	 * Also handles authentication on existing connection (e.g., when user logs in while connected as guest)
 	 */
 	async manualReconnect() {
 		console.log('Manual reconnect triggered');
@@ -440,25 +460,28 @@ class ChatWebSocket {
 		}
 		this.reconnectAttempts = 0;
 
-		// Refresh token before reconnecting if we have one
-		if (this.token && this.realmId) {
-			try {
-				const response = await fetch('/api/auth/refresh', {
-					method: 'POST',
-					credentials: 'include'
-				});
-				if (response.ok) {
-					const data = await response.json();
-					if (data.token) {
-						this.token = data.token;
-					}
-				}
-			} catch (e) {
-				console.warn('Token refresh error during manual reconnect:', e);
-			}
+		// Get fresh token from localStorage (may have been set by login)
+		const freshToken =
+			typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null;
+
+		// If we have a token and connection is open, just send auth message
+		// This handles the case where user logs in while already connected as guest
+		if (freshToken && this.ws && this.ws.readyState === WebSocket.OPEN) {
+			console.log('[ChatWebSocket] Sending auth message on existing connection');
+			this.token = freshToken;
+			this.ws.send(JSON.stringify({ type: 'auth', token: freshToken }));
+			return;
 		}
 
+		// Otherwise, do full reconnect
+		this.token = freshToken;
 		if (this.realmId) {
+			// Close existing connection to force fresh connect
+			if (this.ws) {
+				this.ws.onclose = null; // Prevent auto-reconnect
+				this.ws.close();
+				this.ws = null;
+			}
 			this.connect(this.realmId, this.token);
 		}
 	}

frontend/src/lib/components/ChessGameOverlay.svelte

@@ -530,9 +530,11 @@
         }
 
         if (result === '1-0') {
-            return myColor === 'w' ? 'You win!' : 'You lose';
+            const winText = myColor === 'w' ? 'You win!' : 'You lose';
+            return reason ? `${winText} (${reason})` : winText;
         } else if (result === '0-1') {
-            return myColor === 'b' ? 'You win!' : 'You lose';
+            const winText = myColor === 'b' ? 'You win!' : 'You lose';
+            return reason ? `${winText} (${reason})` : winText;
         } else if (result === 'timeout') {
             return reason || 'Match timed out';
         } else if (result === 'cancelled') {