From 16fca86b7687115f1cf565c533a512e92946e3a8 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 23 Oct 2025 14:54:50 -0500
Subject: [PATCH] feat(card-sorting): add green border to correctly positioned
 cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add visual feedback for cards that are correctly positioned in the
sequence by changing their border color to green (#22c55e):

- Add isCorrect prop to AnimatedCard component
- Calculate if each card is in correct position based on inferredSequence
- Change border from blue to green when card is correctly positioned
- Works in conjunction with green pulsing arrows between correct cards

Now players get immediate visual feedback showing which cards are
already in the correct order, making it easier to focus on the
remaining cards that need sorting.

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

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

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 8185b810..07a64106 100644
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
@@ -273,6 +273,7 @@ function AnimatedCard({
   isDragging,
   isResizing,
   isSpectating,
+  isCorrect,
   viewportWidth,
   viewportHeight,
   onPointerDown,
@@ -284,6 +285,7 @@ function AnimatedCard({
   isDragging: boolean
   isResizing: boolean
   isSpectating: boolean
+  isCorrect: boolean
   viewportWidth: number
   viewportHeight: number
   onPointerDown: (e: React.PointerEvent) => void
@@ -341,7 +343,7 @@ function AnimatedCard({
           height: '100%',
           background: 'white',
           borderRadius: '12px',
-          border: '3px solid #0369a1',
+          border: isCorrect ? '3px solid #22c55e' : '3px solid #0369a1',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -949,6 +951,11 @@ export function PlayingPhaseDrag() {
 
           const isDragging = draggingCardId === card.id
 
+          // Check if this card is in the correct position in the inferred sequence
+          const positionInSequence = inferredSequence.findIndex((c) => c.id === card.id)
+          const isCorrect =
+            positionInSequence >= 0 && state.correctOrder[positionInSequence]?.id === card.id
+
           return (
             <AnimatedCard
               key={card.id}
@@ -957,6 +964,7 @@ export function PlayingPhaseDrag() {
               isDragging={isDragging}
               isResizing={isResizing}
               isSpectating={isSpectating}
+              isCorrect={isCorrect}
               viewportWidth={viewportDimensions.width}
               viewportHeight={viewportDimensions.height}
               onPointerDown={(e) => handlePointerDown(e, card.id)}