From 64fedd3024326c7835d8bda6ba9fc2447b036318 Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Thu, 30 Oct 2025 16:13:18 +0100
Subject: [PATCH] feat(new-game): default Break rule and selected styling

- 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
---
 src/components/NewGame.module.css         | 7 +++++++
 src/components/new-game/BreakRuleStep.tsx | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/NewGame.module.css b/src/components/NewGame.module.css
index f21a40e..8edff3e 100644
--- a/src/components/NewGame.module.css
+++ b/src/components/NewGame.module.css
@@ -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);
diff --git a/src/components/new-game/BreakRuleStep.tsx b/src/components/new-game/BreakRuleStep.tsx
index b8e3781..dfb4d6b 100644
--- a/src/components/new-game/BreakRuleStep.tsx
+++ b/src/components/new-game/BreakRuleStep.tsx
@@ -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>