Add session win tally for private match play-again sessions

Track and display a per-player win counter across play-again cycles in
private matches. The winner of each race (fastest completion time) gets
their count incremented. The tally is shown as a gold badge above
player names in the lobby, race status bar, and results screen. Wins
carry over through play-again and reset when leaving the session.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

client/src/components/PlayerStatusBar.css

@@ -203,6 +203,19 @@
   display: block;
 }
 
+.session-wins-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: #FFD700;
+  background: rgba(245, 128, 37, 0.15);
+  border: 1px solid rgba(245, 128, 37, 0.3);
+  border-radius: 10px;
+  padding: 0.05rem 0.45rem;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
 .player-name {
   font-weight: 600;
   color: var(--text-color);

client/src/components/PlayerStatusBar.jsx

@@ -13,7 +13,8 @@ function PlayerStatusBar({
   countdownActive = false,
   waitingForMinimumPlayers = false,
   readinessSummary = null,
-  readinessDetail = null
+  readinessDetail = null,
+  sessionWins = null
 }) {
   const [enlargedAvatar, setEnlargedAvatar] = useState(null);
   const { authenticated, user } = useAuth();
@@ -232,6 +233,11 @@ function PlayerStatusBar({
                     />
                   </div>
                   <div className="player-text">
+                    {sessionWins && sessionWins[player.netid] > 0 && (
+                      <span className="session-wins-badge">
+                        {sessionWins[player.netid]} {sessionWins[player.netid] === 1 ? 'win' : 'wins'}
+                      </span>
+                    )}
                     <span className="player-name">{player.netid}</span>
                     {/* Determine the title to display */}
                     {(() => {

client/src/components/Results.css

@@ -210,6 +210,19 @@
   align-items: flex-start;
 }
 
+.results-wins {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #FFD700;
+  background: rgba(245, 128, 37, 0.15);
+  border: 1px solid rgba(245, 128, 37, 0.3);
+  border-radius: 10px;
+  padding: 0.1rem 0.55rem;
+  margin-bottom: 0.35rem;
+  white-space: nowrap;
+}
+
 .winner-header {
   display: flex;
   align-items: center;

client/src/components/Results.jsx

@@ -13,6 +13,7 @@ import ProfileModal from './ProfileModal.jsx';
 function Results({ onShowLeaderboard }) {
   const navigate = useNavigate();
   const { raceState, typingState, resetRace, joinPublicRace, playAgain } = useRace();
+  const sessionWins = raceState.sessionWins || {};
   const { isRunning, endTutorial } = useTutorial();
   const { user } = useAuth();
   // State for profile modal
@@ -251,6 +252,11 @@ function Results({ onShowLeaderboard }) {
             />
           </div>
           <div className="winner-details">
+            {raceState.type === 'private' && sessionWins[winner.netid] > 0 && (
+              <div className="session-wins-badge results-wins">
+                {sessionWins[winner.netid]} {sessionWins[winner.netid] === 1 ? 'win' : 'wins'}
+              </div>
+            )}
             <div className="winner-header">
               <div className="winner-trophy"><i className="bi bi-trophy"></i></div>
               <div className="winner-netid">{winner.netid}</div>
@@ -302,6 +308,11 @@ function Results({ onShowLeaderboard }) {
                   />
                 </div>
                 <div className="result-text">
+                  {raceState.type === 'private' && sessionWins[result.netid] > 0 && (
+                    <span className="session-wins-badge results-wins">
+                      {sessionWins[result.netid]} {sessionWins[result.netid] === 1 ? 'win' : 'wins'}
+                    </span>
+                  )}
                   <div className="result-netid">{result.netid}</div>
                   {(() => {
                     const titlesList = resultTitlesMap[result.netid] || [];

client/src/context/RaceContext.jsx

@@ -99,7 +99,8 @@ export const RaceProvider = ({ children }) => {
       testDuration: 15,
       // Add other potential settings here
     },
-    countdown: null // Track countdown seconds
+    countdown: null, // Track countdown seconds
+    sessionWins: {} // Win tally per player across play-again sessions { netid: count }
   });
 
   // Explicit state for TestConfigurator to avoid passing setRaceState
@@ -286,7 +287,8 @@ export const RaceProvider = ({ children }) => {
         hostNetId: data.hostNetId || null, // Explicitly store hostNetId
         snippet: data.snippet ? { ...data.snippet, text: sanitizeSnippetText(data.snippet.text) } : null,
         settings: data.settings || prev.settings, // Store settings from server
-        players: data.players || []
+        players: data.players || [],
+        sessionWins: data.sessionWins || prev.sessionWins || {}
       }));
     };
 
@@ -419,7 +421,8 @@ export const RaceProvider = ({ children }) => {
         return {
           ...prev,
           inProgress: false,
-          completed: true
+          completed: true,
+          sessionWins: data.sessionWins || prev.sessionWins || {}
         };
       });
     };
@@ -600,7 +603,8 @@ export const RaceProvider = ({ children }) => {
         },
         snippetFilters: data.settings?.snippetFilters || { difficulty: 'all', type: 'all', department: 'all' },
         settings: data.settings || { testMode: 'snippet', testDuration: 15 },
-        countdown: null
+        countdown: null,
+        sessionWins: data.sessionWins || {}
       });
     };
 
@@ -1075,7 +1079,8 @@ export const RaceProvider = ({ children }) => {
         testMode: 'snippet',
         testDuration: 15,
       },
-      countdown: null
+      countdown: null,
+      sessionWins: {}
     });
 
     setTypingState({
@@ -1088,7 +1093,7 @@ export const RaceProvider = ({ children }) => {
       accuracy: 0,
       lockedPosition: 0
     });
-    
+
     // Clear race state from session storage
     sessionStorage.removeItem('raceState');
   };

client/src/pages/Lobby.css

@@ -443,6 +443,19 @@
   gap: 1rem;
 }
 
+.lobby-wins {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: #FFD700;
+  background: rgba(245, 128, 37, 0.15);
+  border: 1px solid rgba(245, 128, 37, 0.3);
+  border-radius: 10px;
+  padding: 0.1rem 0.5rem;
+  margin: 0.4rem auto 0;
+  white-space: nowrap;
+}
+
 .lobby-page .player-card {
   background: linear-gradient(135deg, var(--container-color) 0%, rgba(245, 128, 37, 0.05) 100%);
   border-radius: 10px;

client/src/pages/Lobby.jsx

@@ -310,6 +310,11 @@ function Lobby() {
                 <div className="player-grid">
                   {raceState.players?.map(player => (
                     <div key={player.netid} className="player-card">
+                      {raceState.sessionWins?.[player.netid] > 0 && (
+                        <span className="session-wins-badge lobby-wins">
+                          {raceState.sessionWins[player.netid]} {raceState.sessionWins[player.netid] === 1 ? 'win' : 'wins'}
+                        </span>
+                      )}
                       <ProfileWidget
                         // Pass user object including avg_wpm fetched from server
                         user={{ netid: player.netid, avatar_url: player.avatar_url, avg_wpm: player.avg_wpm }}

client/src/pages/Race.jsx

@@ -212,6 +212,7 @@ function Race() {
                   players={players}
                   isRaceInProgress={raceState.inProgress}
                   currentUser={window.user}
+                  sessionWins={raceState.type === 'private' ? raceState.sessionWins : null}
                   onReadyClick={setPlayerReady}
                   countdownActive={countdownActive}
                   waitingForMinimumPlayers={shouldShowLobbyStatus && waitingForMinimumPlayers}

server/controllers/socket-handlers.js

@@ -37,6 +37,10 @@ const MAX_ALLOWED_WPM = 350; // anything above is flagged
 const MIN_COMPLETION_TIME_MS = 2500; // cannot finish faster than this
 const playAgainTransitions = new Set(); // lobbyCode -> transition in progress
 
+// Store session win tallies for private lobbies across play-again cycles
+// lobbyCode -> { netid: winCount }
+const sessionWins = new Map();
+
 // Store host disconnect timers for private lobbies
 const HOST_RECONNECT_GRACE_PERIOD = 15000; // 15 seconds
 const hostDisconnectTimers = new Map(); // lobbyCode -> { timer: NodeJS.Timeout, userId: number }
@@ -237,6 +241,7 @@ const forceDisconnectExistingSessions = async (io, newSocket, userIdToDisconnect
           console.log(`Lobby ${code} empty after forced disconnect. Cleaning up.`);
           racePlayers.delete(code);
           activeRaces.delete(code);
+          sessionWins.delete(code);
           // Attempt to terminate private lobbies in DB
           if (race && race.type === 'private') {
              try { await RaceModel.softTerminate(race.id); } catch(e) { /* ignore */ }
@@ -333,6 +338,7 @@ const leaveCurrentRace = async (io, socket, netid) => {
       if (players.length === 0) {
         racePlayers.delete(code);
         activeRaces.delete(code);
+        sessionWins.delete(code);
         console.log(`Cleaned up empty race ${code}`);
       } else {
         racePlayers.set(code, players);
@@ -871,6 +877,9 @@ const initialize = (io) => {
           }
         });
 
+        // Initialize session win tally for new private lobby
+        sessionWins.set(lobby.code, {});
+
         // Fetch avatar for the host
         await fetchUserAvatar(userId, socket.id);
 
@@ -883,7 +892,8 @@ const initialize = (io) => {
           hostNetId: netid, // Include host netid
           snippet: activeRaces.get(lobby.code).snippet,
           settings: activeRaces.get(lobby.code).settings,
-          players: [hostClientDataCreate] // Use renamed variable
+          players: [hostClientDataCreate], // Use renamed variable
+          sessionWins: {}
         };
         socket.emit('race:joined', joinedDataCreate); // Use renamed variable
 
@@ -1061,7 +1071,8 @@ const initialize = (io) => {
           hostNetId: raceInfo.hostNetId,
           snippet: raceInfo.snippet,
           settings: raceInfo.settings,
-          players: currentPlayersClientDataJoin // Use resolved data
+          players: currentPlayersClientDataJoin, // Use resolved data
+          sessionWins: sessionWins.get(lobby.code) || {}
         };
         socket.emit('race:joined', joinedDataJoin); // Use renamed variable
 
@@ -1518,14 +1529,19 @@ const initialize = (io) => {
         // Build client data for all players
         const playersClientData = await Promise.all(newPlayers.map(p => getPlayerClientData(p)));
 
+        // Carry session wins forward to the new lobby
+        const prevWins = sessionWins.get(oldCode) || {};
+        sessionWins.set(newLobby.code, { ...prevWins });
+
         const joinedData = {
           code: newLobby.code,
           type: 'private',
           lobbyId: newLobby.id,
           hostNetId: hostNetid,
           snippet: newRaceInfo.snippet,
           settings: newRaceInfo.settings,
-          players: playersClientData
+          players: playersClientData,
+          sessionWins: { ...prevWins }
         };
 
         // Notify migrated players directly so the room join can't race the event
@@ -1537,6 +1553,7 @@ const initialize = (io) => {
         clearLobbyTransientState(oldCode);
         activeRaces.delete(oldCode);
         racePlayers.delete(oldCode);
+        sessionWins.delete(oldCode);
 
         console.log(`Play again: migrated ${newPlayers.length} players from ${oldCode} to ${newLobby.code}`);
         if (callback) callback({ success: true, lobby: joinedData });
@@ -2022,6 +2039,7 @@ const initialize = (io) => {
                   activeRaces.delete(code);
                 }
                 racePlayers.delete(code); // Ensure players map is cleared
+                sessionWins.delete(code);
                 return; // Exit timer callback
               }
 
@@ -2105,6 +2123,7 @@ const initialize = (io) => {
               console.log(`No players left in race ${code}, cleaning up`);
               racePlayers.delete(code);
               activeRaces.delete(code);
+              sessionWins.delete(code);
               if (race && race.type === 'private') {
                  try { await RaceModel.softTerminate(race.id); } catch(e) { /* ignore */ }
               }
@@ -2461,8 +2480,25 @@ const endRace = async (io, code) => {
       console.error(`Error getting final results for race ${code}:`, dbErr);
     }
 
-    // Broadcast race end signal (without results payload)
-    io.to(code).emit('race:end', { code }); 
+    // Update session win tally for private lobbies
+    if (race.type === 'private') {
+      const players = racePlayers.get(code) || [];
+      // Find the winner: completed player with fastest completion time
+      const completedPlayers = players
+        .filter(p => p.completed && playerProgress.has(p.id))
+        .map(p => ({ netid: p.netid, completion_time: playerProgress.get(p.id).completion_time }))
+        .sort((a, b) => a.completion_time - b.completion_time);
+      if (completedPlayers.length > 0) {
+        const winnerNetid = completedPlayers[0].netid;
+        const wins = sessionWins.get(code) || {};
+        wins[winnerNetid] = (wins[winnerNetid] || 0) + 1;
+        sessionWins.set(code, wins);
+        console.log(`Session wins for ${code}:`, wins);
+      }
+    }
+
+    // Broadcast race end signal with session wins
+    io.to(code).emit('race:end', { code, sessionWins: sessionWins.get(code) || {} });
     console.log(`Broadcasted race end signal for ${code}`);
 
   } catch (err) {