feat(new-game): highlight selected players in break order step
- Apply selected styling to first/second player buttons in `BreakOrderStep.tsx` - Mirrors selection UX from `BreakRuleStep.tsx` for visual feedback Refs #30
This commit is contained in:
@@ -50,7 +50,15 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
|
|||||||
<div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
|
<div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
|
||||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||||||
{players.filter(Boolean).map((name, idx) => (
|
{players.filter(Boolean).map((name, idx) => (
|
||||||
<button key={`first-${idx}`} type="button" className={styles['quick-pick-btn']} onClick={() => handleFirst(idx + 1)} aria-label={`Zuerst: ${name}`}>{name}</button>
|
<button
|
||||||
|
key={`first-${idx}`}
|
||||||
|
type="button"
|
||||||
|
className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
|
||||||
|
onClick={() => handleFirst(idx + 1)}
|
||||||
|
aria-label={`Zuerst: ${name}`}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{rule === 'wechselbreak' && playerCount === 3 && (
|
{rule === 'wechselbreak' && playerCount === 3 && (
|
||||||
@@ -58,7 +66,15 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
|
|||||||
<div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
|
<div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
|
||||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||||||
{players.filter(Boolean).map((name, idx) => (
|
{players.filter(Boolean).map((name, idx) => (
|
||||||
<button key={`second-${idx}`} type="button" className={styles['quick-pick-btn']} onClick={() => handleSecond(idx + 1)} aria-label={`Zweites Break: ${name}`}>{name}</button>
|
<button
|
||||||
|
key={`second-${idx}`}
|
||||||
|
type="button"
|
||||||
|
className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
|
||||||
|
onClick={() => handleSecond(idx + 1)}
|
||||||
|
aria-label={`Zweites Break: ${name}`}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user