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:
@@ -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;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user