From ed6f1779141d0bc9dff2d532a3dfc638015936b5 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 23 Oct 2025 17:29:12 -0500
Subject: [PATCH] feat(card-sorting): add team scoring UI for collaborative
 mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhance the results screen to distinguish collaborative games from solo play
with team-focused messaging and a team members display.

Features:
- "Team Score" badge shown only in collaborative mode
- Team-focused success messages (e.g., "Perfect teamwork!")
- Team members section showing all participants with emojis
- Purple theming for collaborative elements (consistent with activity feed)

UI Changes:
- Team Score badge: purple gradient, positioned below score circle
- Team Members card: displays all players with emoji badges
- Updated messages to emphasize teamwork and collaboration
- Flexible layout: team section only appears when players.size > 0

Messaging examples:
- Perfect: "Perfect teamwork! All cards in correct order!"
- Excellent: "Excellent collaboration! Very close to perfect!"
- Good: "Good team effort! You worked well together!"
- Needs practice: "Keep working together! Communication is key."

Design specs:
- Team badge: purple gradient (#a78bfa to #8b5cf6)
- Member badges: light purple background with purple border
- Flexbox layout with wrap for multiple team members
- Consistent with collaborative mode's purple theme

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

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

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 194d6205..7649d2e9 100644
--- a/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
@@ -39,10 +39,13 @@ interface CardPosition {
 }
 
 export function ResultsPhase() {
-  const { state, startGame, goToSetup, exitSession } = useCardSorting()
+  const { state, startGame, goToSetup, exitSession, players } = useCardSorting()
   const { scoreBreakdown } = state
   const [showCorrections, setShowCorrections] = useState(false)
 
+  // Determine if this is a collaborative game
+  const isCollaborative = state.gameMode === 'collaborative'
+
   // Get user's sequence from placedCards
   const userSequence = state.placedCards.filter((c): c is SortingCard => c !== null)
 
@@ -118,6 +121,12 @@ export function ResultsPhase() {
   const isExcellent = scoreBreakdown.finalScore >= 80
 
   const getMessage = (score: number) => {
+    if (isCollaborative) {
+      if (score === 100) return 'Perfect teamwork! All cards in correct order!'
+      if (score >= 80) return 'Excellent collaboration! Very close to perfect!'
+      if (score >= 60) return 'Good team effort! You worked well together!'
+      return 'Keep working together! Communication is key.'
+    }
     if (score === 100) return 'Perfect! All cards in correct order!'
     if (score >= 80) return 'Excellent! Very close to perfect!'
     if (score >= 60) return 'Good job! You understand the pattern!'
@@ -358,6 +367,25 @@ export function ResultsPhase() {
             </div>
           </div>
 
+          {/* Team/Solo Label */}
+          {isCollaborative && (
+            <div
+              className={css({
+                padding: '6px 16px',
+                background: 'linear-gradient(135deg, #a78bfa, #8b5cf6)',
+                borderRadius: '20px',
+                fontSize: '13px',
+                fontWeight: '700',
+                color: 'white',
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+                boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
+              })}
+            >
+              👥 Team Score
+            </div>
+          )}
+
           <div
             className={css({
               textAlign: 'center',
@@ -385,6 +413,60 @@ export function ResultsPhase() {
           </div>
         </div>
 
+        {/* Team Members (collaborative mode only) */}
+        {isCollaborative && players.size > 0 && (
+          <div
+            className={css({
+              background: 'white',
+              borderRadius: '12px',
+              padding: '16px',
+              border: '2px solid rgba(139, 92, 246, 0.2)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+            })}
+          >
+            <div
+              className={css({
+                fontSize: '13px',
+                fontWeight: '700',
+                color: '#64748b',
+                marginBottom: '12px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+              })}
+            >
+              Team Members ({players.size})
+            </div>
+            <div
+              className={css({
+                display: 'flex',
+                flexWrap: 'wrap',
+                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>
+              ))}
+            </div>
+          </div>
+        )}
+
         {/* Score Details - Compact Cards */}
         <div
           className={css({