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

fix(#28): disable BreakRule right arrow until selection made

Browse Source 
- BreakRuleStep now starts with no selection when not prefilled
- Right arrow disabled and dimmed until a rule is chosen (like game type)
- Keeps auto-advance on clicking a rule

Refs #28
This commit is contained in:
Frank Schwenk
2025-10-30 13:57:05 +01:00
parent 77173718c1
commit 3e2264ad9d
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/NewGame.tsx
View File

@@ -810,8 +810,8 @@ interface BreakRuleStepProps {
initialValue?: BreakRule | ''; initialValue?: BreakRule | '';
} }
const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => { const BreakRuleStep = ({ onNext, onCancel, initialValue = '' }: BreakRuleStepProps) => {
const [rule, setRule] = useState<BreakRule>(initialValue as BreakRule); const [rule, setRule] = useState<BreakRule | ''>(initialValue as BreakRule | '');
return ( return (
<form className={styles['new-game-form']} aria-label="Break-Regel wählen"> <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
@@ -845,7 +845,7 @@ const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: Break
<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' }}> <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; &#8592;
</button> </button>
<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' }}> <button type="button" className={styles['arrow-btn']} aria-label="Weiter" disabled={!rule} onClick={() => { if (rule) onNext(rule as BreakRule); }} 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 }}>
&#8594; &#8594;
</button> </button>
</div> </div>

2
src/components/screens/NewGameScreen.tsx
View File

@@ -147,7 +147,7 @@ export default function NewGameScreen({
<BreakRuleStep <BreakRuleStep
onNext={handleBreakRuleNext} onNext={handleBreakRuleNext}
onCancel={handleStepBack} onCancel={handleStepBack}
initialValue={(data.breakRule as any) || (typeof window !== 'undefined' ? (localStorage.getItem('lastBreakRule') as any) : 'winnerbreak') || 'winnerbreak'} initialValue={(data.breakRule as any) || (typeof window !== 'undefined' ? (localStorage.getItem('lastBreakRule') as any) : '') || ''}
/> />
)} )}