From 6b095c33830341c46139bc847ddaab3db632265e Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 23 Oct 2025 21:27:03 -0500
Subject: [PATCH] fix(card-sorting): enable card scaling for spectators
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Spectators now see cards scale down to 50% when in correct positions,
regardless of educational mode setting.

Separates two behaviors:
- Scale: Always applies when card is in correct position (both players
  and spectators see this)
- Green border: Only shows for players, or spectators with educational
  mode enabled

Implementation:
- Added isCorrectPosition prop to AnimatedCard (always true when correct)
- Kept isCorrect prop for border color (conditional on educational mode)
- Scale animation now uses isCorrectPosition instead of isCorrect

This provides consistent visual feedback about card placement for all
viewers while preserving the educational mode toggle for showing/hiding
correctness indicators.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../card-sorting/components/PlayingPhaseDrag.tsx         | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx b/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
index fe88e6e5..d2295a30 100644
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
@@ -709,6 +709,7 @@ function AnimatedCard({
   isResizing,
   isSpectating,
   isCorrect,
+  isCorrectPosition,
   draggedByPlayerId,
   localPlayerId,
   players,
@@ -724,6 +725,7 @@ function AnimatedCard({
   isResizing: boolean
   isSpectating: boolean
   isCorrect: boolean
+  isCorrectPosition: boolean
   draggedByPlayerId?: string
   localPlayerId?: string
   players: Map<string, { id: string; name: string; emoji: string }>
@@ -747,7 +749,7 @@ function AnimatedCard({
     left: pixelPos.x,
     top: pixelPos.y,
     rotation: cardState.rotation,
-    scale: isCorrect ? 0.5 : 1, // Scale down to 50% when in correct position
+    scale: isCorrectPosition ? 0.5 : 1, // Scale down to 50% when in correct position (for all users)
     immediate: isDragging || isResizing, // Instant updates when dragging or resizing
     config: {
       tension: 300,
@@ -1835,9 +1837,7 @@ export function PlayingPhaseDrag() {
           const isCorrectPosition =
             positionInSequence >= 0 && state.correctOrder[positionInSequence]?.id === card.id
 
-          // Only show correctness indicator if:
-          // 1. Player is actively playing (not spectating), OR
-          // 2. Spectator has educational mode enabled
+          // Show green border based on educational mode for spectators
           const isCorrect = isSpectating
             ? spectatorEducationalMode && isCorrectPosition
             : isCorrectPosition
@@ -1855,6 +1855,7 @@ export function PlayingPhaseDrag() {
               isResizing={isResizing}
               isSpectating={isSpectating}
               isCorrect={isCorrect}
+              isCorrectPosition={isCorrectPosition}
               draggedByPlayerId={draggedByPlayerId}
               localPlayerId={localPlayerId}
               players={players}