From fa9f1a568f3dff2f4e5e7d3e8841b951ef1b7d04 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 23 Oct 2025 17:30:54 -0500
Subject: [PATCH] fix(card-sorting): show only active players in team members
 section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Filter team members display to only show players from state.activePlayers
array, excluding spectators and disconnected players from the results screen.

Changes:
- Check state.activePlayers.length instead of players.size
- Map activePlayers array to get player metadata from players Map
- Filter out undefined entries (in case player left before results)
- Display count shows only active players

This ensures the team members section on the results screen accurately
reflects who participated in the collaborative game, not just who was
present in the room.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../card-sorting/components/ResultsPhase.tsx  | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx b/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
index 7649d2e9..3e97e11c 100644
--- a/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
@@ -414,7 +414,7 @@ export function ResultsPhase() {
         </div>
 
         {/* Team Members (collaborative mode only) */}
-        {isCollaborative && players.size > 0 && (
+        {isCollaborative && state.activePlayers.length > 0 && (
           <div
             className={css({
               background: 'white',
@@ -434,7 +434,7 @@ export function ResultsPhase() {
                 letterSpacing: '0.5px',
               })}
             >
-              Team Members ({players.size})
+              Team Members ({state.activePlayers.length})
             </div>
             <div
               className={css({
@@ -443,26 +443,29 @@ export function ResultsPhase() {
                 gap: '8px',
               })}
             >
-              {Array.from(players.values()).map((player) => (
-                <div
-                  key={player.id}
-                  className={css({
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    padding: '6px 12px',
-                    background: 'rgba(139, 92, 246, 0.1)',
-                    border: '1px solid rgba(139, 92, 246, 0.2)',
-                    borderRadius: '20px',
-                    fontSize: '14px',
-                    fontWeight: '500',
-                    color: '#5b21b6',
-                  })}
-                >
-                  <span style={{ fontSize: '18px' }}>{player.emoji}</span>
-                  <span>{player.name}</span>
-                </div>
-              ))}
+              {state.activePlayers
+                .map((playerId) => players.get(playerId))
+                .filter((player): player is NonNullable<typeof player> => player !== undefined)
+                .map((player) => (
+                  <div
+                    key={player.id}
+                    className={css({
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '6px',
+                      padding: '6px 12px',
+                      background: 'rgba(139, 92, 246, 0.1)',
+                      border: '1px solid rgba(139, 92, 246, 0.2)',
+                      borderRadius: '20px',
+                      fontSize: '14px',
+                      fontWeight: '500',
+                      color: '#5b21b6',
+                    })}
+                  >
+                    <span style={{ fontSize: '18px' }}>{player.emoji}</span>
+                    <span>{player.name}</span>
+                  </div>
+                ))}
             </div>
           </div>
         )}