fix(card-sorting): enable card scaling for spectators
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>
This commit is contained in:
parent
780a7161bc
commit
6b095c3383
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue