feat(nav): add prominent turn indicator arrow badge

Add a pulsing arrow badge (▶) on the top-left of the current player's
avatar to make it crystal clear whose turn it is, even when viewing
from another player's perspective.

The badge:
- Circular with player's color gradient
- White border for contrast
- Pulsing animation to draw attention
- Shows right-pointing arrow to indicate active turn
- Positioned at top-left corner

This addresses the issue where non-current players couldn't easily
tell whose turn it was - they'd see themselves dimmed but no clear
indicator of who had the turn.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-11 09:11:25 -05:00
parent 4ec0312049
commit f574558dff

View File

@@ -91,6 +91,33 @@ export function ActivePlayersList({
/>
)}
{/* Turn indicator arrow badge */}
{isCurrentPlayer && hasGameState && (
<div
style={{
position: 'absolute',
top: '-12px',
left: '-12px',
width: '28px',
height: '28px',
borderRadius: '50%',
border: '3px solid white',
background: `linear-gradient(135deg, ${player.color || '#3b82f6'}, ${player.color || '#3b82f6'}dd)`,
color: 'white',
fontSize: '14px',
fontWeight: 'bold',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: `0 4px 12px ${player.color || '#3b82f6'}80`,
zIndex: 3,
animation: 'turnBadgePulse 1.5s ease-in-out infinite',
}}
>
</div>
)}
{player.emoji}
{/* Score badge - bottom right */}
@@ -268,6 +295,17 @@ export function ActivePlayersList({
opacity: 0.8;
}
}
@keyframes turnBadgePulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 12px currentColor;
}
50% {
transform: scale(1.15);
box-shadow: 0 6px 20px currentColor;
}
}
`,
}}
/>