fix: make wizard progression explicit and consistent

Require explicit Weiter confirmation after selection in game type, race-to, break rule, and break order steps to prevent accidental auto-advance and keep step behavior predictable. Refs #30.

Made-with: Cursor

src/lib/features/new-game/steps/BreakOrderStep.tsx

@@ -26,18 +26,29 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
 
   const handleFirst = (idx: number) => {
     setFirst(idx);
-    if (rule === 'winnerbreak' || (rule === 'wechselbreak' && playerCount === 2)) {
-      onNext(idx);
-    }
   };
 
   const handleSecond = (idx: number) => {
     setSecond(idx);
-    onNext(first, idx);
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+
+    if (rule === 'wechselbreak' && playerCount === 3) {
+      if (first > 0 && (second ?? 0) > 0) {
+        onNext(first, second);
+      }
+      return;
+    }
+
+    if (first > 0) {
+      onNext(first);
+    }
   };
 
   return (
-    <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
+    <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen" onSubmit={handleSubmit}>
       <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
         <ProgressIndicator currentStep={7} style={{ marginBottom: 24 }} />
@@ -87,18 +98,9 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
             &#8592;
           </button>
           <button
-            type="button"
+            type="submit"
             className={styles['arrow-btn']}
             aria-label="Weiter"
-            onClick={() => {
-              if (rule === 'wechselbreak' && playerCount === 3) {
-                if (first > 0 && (second ?? 0) > 0) {
-                  handleSecond(second as number);
-                }
-              } else if (first > 0) {
-                onNext(first);
-              }
-            }}
             disabled={
               (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
             }

src/lib/features/new-game/steps/BreakRuleStep.tsx

@@ -12,9 +12,18 @@ interface BreakRuleStepProps {
 
 export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
   const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');
+  
+  const handleSelect = (nextRule: BreakRule) => {
+    setRule(nextRule);
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    onNext(rule);
+  };
 
   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" onSubmit={handleSubmit}>
       <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Break-Regel wählen</div>
         <ProgressIndicator currentStep={6} style={{ marginBottom: 24 }} />
@@ -30,10 +39,7 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
               key={opt.key}
               type="button"
               className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
-              onClick={() => {
+              onClick={() => handleSelect(opt.key as BreakRule)}
-                setRule(opt.key as BreakRule);
-                onNext(opt.key as BreakRule);
-              }}
               aria-label={`Break-Regel wählen: ${opt.label}`}
               style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
             >
@@ -48,7 +54,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={() => 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="submit" className={styles['arrow-btn']} aria-label="Weiter" 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>

src/lib/features/new-game/steps/GameTypeStep.tsx

@@ -15,7 +15,6 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
 
   const handleSelect = (selectedType: string) => {
     setGameType(selectedType);
-    onNext(selectedType);
   };
 
   const handleSubmit = (e: Event) => {

src/lib/features/new-game/steps/RaceToStep.tsx

@@ -33,9 +33,6 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
   const handleQuickPick = (value: number | typeof RACE_TO_INFINITY) => {
     const selected = value === RACE_TO_INFINITY ? RACE_TO_INFINITY : value;
     setRaceTo(selected);
-    const raceToValue =
-      selected === RACE_TO_INFINITY ? Infinity : parseInt(String(selected), 10) || 0;
-    onNext(raceToValue);
   };
 
   const handleInputChange = (e: Event) => {