refactor: streamline new-game player selection ux

Consolidate new-game wizard steps into reusable components and remove legacy duplicate files.
Replace inline player inputs with a chip-first flow and minimal name-entry modal, while improving compact-screen spacing and step-specific selection behavior.

Made-with: Cursor

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

@@ -1,8 +1,9 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import type { BreakRule } from '@lib/domain/types';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface BreakOrderStepProps {
   players: string[];
@@ -48,15 +49,22 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
   };
 
   return (
-    <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 }} />
-      </div>
-
-      <div className={styles['form-content']}>
-        <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
-        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+    <WizardStepForm
+      ariaLabel="Break-Reihenfolge wählen"
+      title="Wer hat den ersten Anstoss?"
+      currentStep={7}
+      onSubmit={handleSubmit}
+      footer={
+        <WizardNav
+          onBack={onCancel}
+          nextDisabled={
+            (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
+          }
+        />
+      }
+    >
+        <div className={styles['choice-heading']}>Wer hat den ersten Anstoss?</div>
+        <div className={styles['quick-picks-row']}>
           {players.filter(Boolean).map((name, idx) => (
             <button
               key={`first-${idx}`}
@@ -64,7 +72,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
               className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
               onClick={() => handleFirst(idx + 1)}
               aria-label={`Zuerst: ${name}`}
-              style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+              style={{ minWidth: 160, minHeight: 64 }}
             >
               {name}
             </button>
@@ -73,8 +81,8 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
 
         {rule === 'wechselbreak' && playerCount === 3 && (
           <>
-            <div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
-            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <div className={styles['choice-heading']}>Wer hat den zweiten Anstoss?</div>
+            <div className={styles['quick-picks-row']}>
               {players.filter(Boolean).map((name, idx) => (
                 <button
                   key={`second-${idx}`}
@@ -82,7 +90,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
                   className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
                   onClick={() => handleSecond(idx + 1)}
                   aria-label={`Zweites Break: ${name}`}
-                  style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+                  style={{ minWidth: 160, minHeight: 64 }}
                 >
                   {name}
                 </button>
@@ -90,27 +98,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
             </div>
           </>
         )}
-      </div>
-
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-          <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="submit"
-            className={styles['arrow-btn']}
-            aria-label="Weiter"
-            disabled={
-              (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
-            }
-            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 === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)) ? 0.5 : 1 }}
-          >
-            &#8594;
-          </button>
-        </div>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };
 

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

@@ -1,8 +1,9 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import type { BreakRule } from '@lib/domain/types';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface BreakRuleStepProps {
   onNext: (rule: BreakRule) => void;
@@ -23,14 +24,14 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
   };
 
   return (
-    <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 }} />
-      </div>
-
-      <div className={styles['form-content']}>
-        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+    <WizardStepForm
+      ariaLabel="Break-Regel wählen"
+      title="Break-Regel wählen"
+      currentStep={6}
+      onSubmit={handleSubmit}
+      footer={<WizardNav onBack={onCancel} />}
+    >
+        <div className={styles['quick-picks-row']}>
           {[
             { key: 'winnerbreak', label: 'Winnerbreak' },
             { key: 'wechselbreak', label: 'Wechselbreak' },
@@ -41,25 +42,13 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
               className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
               onClick={() => handleSelect(opt.key as BreakRule)}
               aria-label={`Break-Regel wählen: ${opt.label}`}
-              style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+              style={{ minWidth: 160, minHeight: 64 }}
             >
               {opt.label}
             </button>
           ))}
         </div>
-      </div>
-
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-          <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="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>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };
 

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

@@ -1,8 +1,9 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import { GAME_TYPES } from '@lib/domain/constants';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface GameTypeStepProps {
   onNext: (type: string) => void;
@@ -25,13 +26,13 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
   };
 
   return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Spielart auswählen</div>
-        <ProgressIndicator currentStep={4} style={{ marginBottom: 24 }} />
-      </div>
-      
-      <div className={styles['form-content']}>
+    <WizardStepForm
+      ariaLabel="Spielart auswählen"
+      title="Spielart auswählen"
+      currentStep={4}
+      onSubmit={handleSubmit}
+      footer={<WizardNav onBack={onCancel} nextDisabled={!gameType} />}
+    >
         <div className={styles['game-type-selection']}>
           {GAME_TYPES.map(({ value, label }) => (
             <button
@@ -44,42 +45,7 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
             </button>
           ))}
         </div>
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <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="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          disabled={!gameType}
-          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: !gameType ? 0.5 : 1,
-          }}
-        >
-          &#8594;
-        </button>
-        </div>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };
 

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

@@ -1,265 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import {
-  UI_CONSTANTS,
-  ERROR_MESSAGES,
-  ARIA_LABELS,
-  FORM_CONFIG,
-  ERROR_STYLES,
-} from '@lib/domain/constants';
-import { PlayerSelectModal } from './PlayerSelectModal';
-import { ProgressIndicator } from '../ProgressIndicator';
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
-  const [player1, setPlayer1] = useState(initialValue);
-  const [error, setError] = useState<string | null>(null);
-  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!player1) {
-      setFilteredNames(playerNameHistory);
-    } else {
-      setFilteredNames(
-        playerNameHistory.filter(name =>
-          name.toLowerCase().includes(player1.toLowerCase())
-        )
-      );
-    }
-  }, [player1, playerNameHistory]);
-
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-    const trimmedName = player1.trim();
-    if (!trimmedName) {
-      setError(ERROR_MESSAGES.PLAYER1_REQUIRED);
-      if (inputRef.current) {
-        inputRef.current.focus();
-        inputRef.current.setAttribute('aria-invalid', 'true');
-      }
-      return;
-    }
-    if (trimmedName.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH) {
-      setError(`Spielername darf maximal ${FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen lang sein`);
-      if (inputRef.current) {
-        inputRef.current.focus();
-        inputRef.current.setAttribute('aria-invalid', 'true');
-      }
-      return;
-    }
-    setError(null);
-    if (inputRef.current) {
-      inputRef.current.setAttribute('aria-invalid', 'false');
-    }
-    onNext(trimmedName);
-  };
-
-  const handleQuickPick = (name: string) => {
-    setError(null);
-    onNext(name);
-  };
-
-  const handleModalSelect = (name: string) => {
-    setIsModalOpen(false);
-    handleQuickPick(name);
-  };
-
-  const handleClear = () => {
-    setPlayer1('');
-    setError(null);
-    if (inputRef.current) inputRef.current.focus();
-  };
-
-  return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Name Spieler 1</div>
-        <ProgressIndicator
-          currentStep={1}
-          style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}
-        />
-      </div>
-      
-      <div className={styles['form-content']}>
-        <div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_LARGE, position: 'relative' }}>
-        <label htmlFor="player1-input" style={{ fontSize: UI_CONSTANTS.LABEL_FONT_SIZE, fontWeight: 600 }}>Spieler 1</label>
-        <div style={{ position: 'relative', width: '100%' }}>
-          <input
-            id="player1-input"
-            className={styles['name-input']}
-            placeholder="Name Spieler 1"
-            value={player1}
-            onInput={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              const value = target.value;
-              setPlayer1(value);
-              if (value.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH) {
-                setError(`Spielername darf maximal ${FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen lang sein`);
-                target.setAttribute('aria-invalid', 'true');
-              } else if (value.trim() && error) {
-                setError(null);
-                target.setAttribute('aria-invalid', 'false');
-              }
-            }}
-            autoComplete="off"
-            autoCapitalize="words"
-            spellCheck={false}
-            enterKeyHint="next"
-            aria-label="Name Spieler 1"
-            aria-describedby="player1-help"
-            onFocus={(e) => {
-              const target = e.currentTarget as HTMLInputElement;
-              target.scrollIntoView({ block: 'center', behavior: 'smooth' });
-            }}
-            style={{ 
-              fontSize: UI_CONSTANTS.INPUT_FONT_SIZE, 
-              minHeight: UI_CONSTANTS.INPUT_MIN_HEIGHT, 
-              marginTop: 12, 
-              marginBottom: 12, 
-              width: '100%', 
-              paddingRight: UI_CONSTANTS.INPUT_PADDING_RIGHT 
-            }}
-            ref={inputRef}
-          />
-          <div id="player1-help" className="sr-only">
-            Geben Sie den Namen für Spieler 1 ein. Maximal {FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen erlaubt.
-          </div>
-          {player1.length > FORM_CONFIG.CHARACTER_COUNT_WARNING_THRESHOLD && (
-            <div style={{ 
-              fontSize: '0.875rem', 
-              color: player1.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH ? '#f44336' : '#ff9800',
-              marginTop: '4px',
-              textAlign: 'right'
-            }}>
-              {player1.length}/{FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen
-            </div>
-          )}
-          {player1 && (
-            <button
-              type="button"
-              className={styles['clear-input-btn']}
-              aria-label="Feld leeren"
-              onClick={handleClear}
-              style={{
-                position: 'absolute',
-                right: 8,
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: 24,
-                color: '#aaa',
-                padding: 0,
-                zIndex: 2
-              }}
-              tabIndex={0}
-            >
-              ×
-            </button>
-          )}
-        </div>
-        {filteredNames.length > 0 && (
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
-            {filteredNames.slice(0, UI_CONSTANTS.MAX_QUICK_PICKS).map((name, idx) => (
-              <button
-                type="button"
-                key={name + idx}
-                className={styles['quick-pick-btn']}
-                style={{ 
-                  fontSize: UI_CONSTANTS.QUICK_PICK_FONT_SIZE, 
-                  padding: UI_CONSTANTS.QUICK_PICK_PADDING, 
-                  borderRadius: 8, 
-                  background: '#333', 
-                  color: '#fff', 
-                  border: 'none', 
-                  cursor: 'pointer' 
-                }}
-                onClick={() => handleQuickPick(name)}
-                aria-label={ARIA_LABELS.QUICK_PICK(name)}
-              >
-                {name}
-              </button>
-            ))}
-            {playerNameHistory.length > UI_CONSTANTS.MAX_QUICK_PICKS && (
-              <button
-                type="button"
-                className={styles['quick-pick-btn']}
-                style={{ 
-                  fontSize: UI_CONSTANTS.QUICK_PICK_FONT_SIZE, 
-                  padding: UI_CONSTANTS.QUICK_PICK_PADDING, 
-                  borderRadius: 8, 
-                  background: '#333', 
-                  color: '#fff', 
-                  border: 'none', 
-                  cursor: 'pointer' 
-                }}
-                onClick={() => setIsModalOpen(true)}
-                aria-label={ARIA_LABELS.SHOW_MORE_PLAYERS}
-              >
-                ...
-              </button>
-            )}
-          </div>
-        )}
-        </div>
-        {error && (
-          <div 
-            className={styles['validation-error']} 
-            style={{ 
-              marginBottom: 16,
-              ...ERROR_STYLES.CONTAINER
-            }}
-            role="alert"
-            aria-live="polite"
-          >
-            <span style={ERROR_STYLES.ICON}>⚠️</span>
-            {error}
-          </div>
-        )}
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <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="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          disabled={!player1.trim()}
-          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: !player1.trim() ? 0.5 : 1 }}
-        >
-          &#8594;
-        </button>
-        </div>
-      </div>
-      
-      {isModalOpen && (
-        <PlayerSelectModal
-          players={playerNameHistory}
-          onSelect={handleModalSelect}
-          onClose={() => setIsModalOpen(false)}
-        />
-      )}
-    </form>
-  );
-};
-
-

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

@@ -1,155 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
-  const [player2, setPlayer2] = useState(initialValue);
-  const [error, setError] = useState<string | null>(null);
-  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!player2) {
-      setFilteredNames(playerNameHistory);
-    } else {
-      setFilteredNames(
-        playerNameHistory.filter(name =>
-          name.toLowerCase().includes(player2.toLowerCase())
-        )
-      );
-    }
-  }, [player2, playerNameHistory]);
-
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-    if (!player2.trim()) {
-      setError('Bitte Namen für Spieler 2 eingeben');
-      return;
-    }
-    setError(null);
-    onNext(player2.trim());
-  };
-
-  const handleQuickPick = (name: string) => {
-    setError(null);
-    onNext(name);
-  };
-
-  const handleClear = () => {
-    setPlayer2('');
-    setError(null);
-    if (inputRef.current) inputRef.current.focus();
-  };
-
-  return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 2 Eingabe" autoComplete="off">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Name Spieler 2</div>
-        <ProgressIndicator currentStep={2} style={{ marginBottom: 24 }} />
-      </div>
-      
-      <div className={styles['form-content']}>
-        <div className={styles['player-input'] + ' ' + styles['player2-input']} style={{ marginBottom: 32, position: 'relative' }}>
-        <label htmlFor="player2-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 2</label>
-        <div style={{ position: 'relative', width: '100%' }}>
-          <input
-            id="player2-input"
-            className={styles['name-input']}
-            placeholder="Name Spieler 2"
-            value={player2}
-            onInput={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              setPlayer2(target.value);
-            }}
-            autoComplete="off"
-            autoCapitalize="words"
-            spellCheck={false}
-            enterKeyHint="next"
-            aria-label="Name Spieler 2"
-            onFocus={(e) => {
-              const target = e.currentTarget as HTMLInputElement;
-              target.scrollIntoView({ block: 'center', behavior: 'smooth' });
-            }}
-            style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
-            ref={inputRef}
-          />
-          {player2 && (
-            <button
-              type="button"
-              className={styles['clear-input-btn']}
-              aria-label="Feld leeren"
-              onClick={handleClear}
-              style={{
-                position: 'absolute',
-                right: 8,
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: 24,
-                color: '#aaa',
-                padding: 0,
-                zIndex: 2
-              }}
-              tabIndex={0}
-            >
-              ×
-            </button>
-          )}
-        </div>
-        {filteredNames.length > 0 && (
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
-            {filteredNames.slice(0, 10).map((name, idx) => (
-              <button
-                type="button"
-                key={name + idx}
-                className={styles['quick-pick-btn']}
-                style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
-                onClick={() => handleQuickPick(name)}
-                aria-label={`Schnellauswahl: ${name}`}
-              >
-                {name}
-              </button>
-            ))}
-          </div>
-        )}
-        </div>
-        {error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <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="submit"
-            className={styles['arrow-btn']}
-            aria-label="Weiter"
-            disabled={!player2.trim()}
-            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: !player2.trim() ? 0.5 : 1 }}
-          >
-            &#8594;
-          </button>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-

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

@@ -1,161 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
-  const [player3, setPlayer3] = useState(initialValue);
-  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!player3) {
-      setFilteredNames(playerNameHistory);
-    } else {
-      setFilteredNames(
-        playerNameHistory.filter(name =>
-          name.toLowerCase().includes(player3.toLowerCase())
-        )
-      );
-    }
-  }, [player3, playerNameHistory]);
-
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-    onNext(player3.trim());
-  };
-
-  const handleQuickPick = (name: string) => {
-    onNext(name);
-  };
-
-  const handleClear = () => {
-    setPlayer3('');
-    if (inputRef.current) inputRef.current.focus();
-  };
-
-  const handleSkip = (e: Event) => {
-    e.preventDefault();
-    onNext('');
-  };
-
-  return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Name Spieler 3 (optional)</div>
-        <ProgressIndicator currentStep={3} style={{ marginBottom: 24 }} />
-      </div>
-      
-      <div className={styles['form-content']}>
-        <div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
-        <label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
-        <div style={{ position: 'relative', width: '100%' }}>
-          <input
-            id="player3-input"
-            className={styles['name-input']}
-            placeholder="Name Spieler 3 (optional)"
-            value={player3}
-            onInput={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              setPlayer3(target.value);
-            }}
-            autoComplete="off"
-            autoCapitalize="words"
-            spellCheck={false}
-            enterKeyHint="done"
-            aria-label="Name Spieler 3"
-            onFocus={(e) => {
-              const target = e.currentTarget as HTMLInputElement;
-              target.scrollIntoView({ block: 'center', behavior: 'smooth' });
-            }}
-            style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
-            ref={inputRef}
-          />
-          {player3 && (
-            <button
-              type="button"
-              className={styles['clear-input-btn']}
-              aria-label="Feld leeren"
-              onClick={handleClear}
-              style={{
-                position: 'absolute',
-                right: 8,
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: 24,
-                color: '#aaa',
-                padding: 0,
-                zIndex: 2
-              }}
-              tabIndex={0}
-            >
-              ×
-            </button>
-          )}
-        </div>
-        {filteredNames.length > 0 && (
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
-            {filteredNames.slice(0, 10).map((name, idx) => (
-              <button
-                type="button"
-                key={name + idx}
-                className={styles['quick-pick-btn']}
-                style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
-                onClick={() => handleQuickPick(name)}
-                aria-label={`Schnellauswahl: ${name}`}
-              >
-                {name}
-              </button>
-            ))}
-          </div>
-        )}
-        </div>
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <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>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-            <button
-              type="button"
-              onClick={handleSkip}
-              className={styles['quick-pick-btn']}
-              style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
-            >
-              Überspringen
-            </button>
-            <button
-              type="submit"
-              className={styles['arrow-btn']}
-              aria-label="Weiter"
-              disabled={!player3.trim()}
-              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: !player3.trim() ? 0.5 : 1 }}
-            >
-              &#8594;
-            </button>
-          </div>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-

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

@@ -1,12 +1,13 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import {
   RACE_TO_QUICK_PICKS,
   RACE_TO_DEFAULT,
   RACE_TO_INFINITY,
 } from '@lib/domain/constants';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface RaceToStepProps {
   onNext: (raceTo: string | number) => void;
@@ -47,9 +48,13 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
   };
 
   return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Race To auswählen">
-      <div className={styles['screen-title']}>Race To auswählen</div>
-      <ProgressIndicator currentStep={5} style={{ marginBottom: 24 }} />
+    <WizardStepForm
+      ariaLabel="Race To auswählen"
+      title="Race To auswählen"
+      currentStep={5}
+      onSubmit={handleSubmit}
+      footer={<WizardNav onBack={onCancel} nextDisabled={String(raceTo).trim() === ''} />}
+    >
       <div className={styles['endlos-container']}>
         <button
           type="button"
@@ -85,27 +90,7 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
           placeholder="manuelle Eingabe"
         />
       </div>
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-        <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="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          disabled={String(raceTo).trim() === ''}
-          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: String(raceTo).trim() === '' ? 0.5 : 1 }}
-        >
-          &#8594;
-        </button>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };