antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add configuration access to fullscreen player selection

Browse Source 
Add subtle gear icon to each player card in fullscreen selection view:
- 32px circular button in top-right corner
- Gray by default, blue on hover with glow effect
- Only visible when choosing initial players
- Non-intrusive design that doesn't distract from selection

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-29 17:40:32 -05:00
parent 4f2a661494
commit b85968bcb6
1 changed files with 99 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
apps/web/src/components/nav/FullscreenPlayerSelection.tsx
View File

@@ -9,10 +9,11 @@ interface Player {
interface FullscreenPlayerSelectionProps {
inactivePlayers: Player[]
onSelectPlayer: (playerId: number) => void
onConfigurePlayer: (playerId: number) => void
isVisible: boolean
}
export function FullscreenPlayerSelection({ inactivePlayers, onSelectPlayer, isVisible }: FullscreenPlayerSelectionProps) {
export function FullscreenPlayerSelection({ inactivePlayers, onSelectPlayer, onConfigurePlayer, isVisible }: FullscreenPlayerSelectionProps) {
return (
<div style={{
display: 'flex',
@@ -63,55 +64,107 @@ export function FullscreenPlayerSelection({ inactivePlayers, onSelectPlayer, isV
width: '100%'
}}>
{inactivePlayers.map(player => (
<button
<div
key={player.id}
onClick={() => onSelectPlayer(player.id)}
style={{
background: 'white',
borderRadius: '16px',
padding: '24px',
border: '2px solid rgba(255, 255, 255, 0.3)',
cursor: 'pointer',
transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
boxShadow: '0 8px 30px rgba(0, 0, 0, 0.15)',
textAlign: 'center'
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'translateY(-6px) scale(1.03)'
e.currentTarget.style.boxShadow = '0 15px 50px rgba(0, 0, 0, 0.25)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0) scale(1)'
e.currentTarget.style.boxShadow = '0 8px 30px rgba(0, 0, 0, 0.15)'
position: 'relative'
}}
>
<div style={{
fontSize: '64px',
marginBottom: '12px',
lineHeight: 1
}}>
{player.emoji}
</div>
<div style={{
fontSize: '20px',
fontWeight: 'bold',
color: '#1f2937',
marginBottom: '8px'
}}>
{player.name}
</div>
<div style={{
display: 'inline-block',
padding: '6px 12px',
background: 'linear-gradient(135deg, #10b981, #059669)',
color: 'white',
borderRadius: '12px',
fontSize: '12px',
fontWeight: 'bold'
}}>
+ Select
</div>
</button>
<button
onClick={() => onSelectPlayer(player.id)}
style={{
width: '100%',
background: 'white',
borderRadius: '16px',
padding: '24px',
border: '2px solid rgba(255, 255, 255, 0.3)',
cursor: 'pointer',
transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
boxShadow: '0 8px 30px rgba(0, 0, 0, 0.15)',
textAlign: 'center'
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'translateY(-6px) scale(1.03)'
e.currentTarget.style.boxShadow = '0 15px 50px rgba(0, 0, 0, 0.25)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0) scale(1)'
e.currentTarget.style.boxShadow = '0 8px 30px rgba(0, 0, 0, 0.15)'
}}
>
<div style={{
fontSize: '64px',
marginBottom: '12px',
lineHeight: 1
}}>
{player.emoji}
</div>
<div style={{
fontSize: '20px',
fontWeight: 'bold',
color: '#1f2937',
marginBottom: '8px'
}}>
{player.name}
</div>
<div style={{
display: 'inline-block',
padding: '6px 12px',
background: 'linear-gradient(135deg, #10b981, #059669)',
color: 'white',
borderRadius: '12px',
fontSize: '12px',
fontWeight: 'bold'
}}>
+ Select
</div>
</button>
{/* Subtle gear icon for configuration */}
<button
onClick={(e) => {
e.stopPropagation()
onConfigurePlayer(player.id)
}}
style={{
position: 'absolute',
top: '8px',
right: '8px',
width: '32px',
height: '32px',
borderRadius: '50%',
border: '2px solid #e5e7eb',
background: 'rgba(255, 255, 255, 0.95)',
color: '#6b7280',
fontSize: '16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.2s ease',
padding: 0,
lineHeight: 1,
boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'white'
e.currentTarget.style.borderColor = '#3b82f6'
e.currentTarget.style.color = '#3b82f6'
e.currentTarget.style.transform = 'scale(1.1)'
e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.95)'
e.currentTarget.style.borderColor = '#e5e7eb'
e.currentTarget.style.color = '#6b7280'
e.currentTarget.style.transform = 'scale(1)'
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)'
}}
title={`Configure ${player.name}`}
>
⚙️
</button>
</div>
))}
</div>
</div>