froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(new-game): default Break rule and selected styling

Browse Source 
- Default Break rule to 'winnerbreak' in BreakRuleStep
- Ensure selected quick-pick button styling matches Race To buttons
- Simplify Weiter button since rule is always defined

Fixes #30
This commit is contained in:
Frank Schwenk
2025-10-30 16:13:18 +01:00
parent a6a16fdacf
commit 64fedd3024
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/NewGame.module.css
View File

@@ -293,6 +293,13 @@
color: white;
box-shadow: var(--shadow-md);
}
/* Match selected styling for quick pick buttons used in BreakRuleStep */
.quick-pick-btn.selected {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
box-shadow: var(--shadow-md);
}
.custom-race-to {
display: flex;
gap: var(--space-md);

6
src/components/new-game/BreakRuleStep.tsx
View File

@@ -6,11 +6,11 @@ import type { BreakRule } from '../../types/game';
interface BreakRuleStepProps {
onNext: (rule: BreakRule) => void;
onCancel: () => void;
initialValue?: BreakRule | 'winnerbreak';
initialValue?: BreakRule;
}
export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
const [rule, setRule] = useState<BreakRule | ''>(initialValue);
const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');
return (
<form className={styles['new-game-form']} aria-label="Break-Regel wählen">
@@ -44,7 +44,7 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
<button type="button" className={styles['arrow-btn']} aria-label="Zurück" onClick={onCancel} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
&#8592;
</button>
<button type="button" className={styles['arrow-btn']} aria-label="Weiter" onClick={() => rule && onNext(rule as BreakRule)} disabled={!rule} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !rule ? 0.5 : 1 }}>
<button type="button" className={styles['arrow-btn']} aria-label="Weiter" onClick={() => onNext(rule)} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
&#8594;
</button>
</div>