feat(wizard): Player 2 step and multi-step navigation

- Add Player2Step component for player 2 name input
- Implement multi-step wizard logic in App.jsx
- Player 1/2 steps now allow forward/back navigation
- Left arrow on Player 2 returns to Player 1, not abort
- Prepare placeholders for further steps

Closes #7

src/components/App.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
 import GameList from './GameList.jsx';
 import GameDetail from './GameDetail.jsx';
-import NewGame from './NewGame.jsx';
+import { Player1Step, Player2Step } from './NewGame.jsx';
 import Modal from './Modal.jsx';
 import ValidationModal from './ValidationModal.jsx';
 import GameCompletionModal from './GameCompletionModal.jsx';
@@ -23,6 +23,8 @@ const App = () => {
   const [validation, setValidation] = useState({ open: false, message: '' });
   const [completionModal, setCompletionModal] = useState({ open: false, game: null });
   const [filter, setFilter] = useState('all');
+  const [newGameStep, setNewGameStep] = useState(null);
+  const [newGameData, setNewGameData] = useState({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
 
   // Load games from localStorage on mount
   useEffect(() => {
@@ -55,6 +57,8 @@ const App = () => {
   const showNewGame = useCallback(() => {
     setScreen('new-game');
     setCurrentGameId(null);
+    setNewGameStep('player1');
+    setNewGameData({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
   }, []);
   const showGameDetail = useCallback((id) => {
     setCurrentGameId(id);
@@ -134,6 +138,39 @@ const App = () => {
     setValidation({ open: false, message: '' });
   }, []);
 
+  // Step handlers
+  const handlePlayer1Next = (name) => {
+    setNewGameData(data => ({ ...data, player1: name }));
+    setNewGameStep('player2');
+  };
+  const handlePlayer2Next = (name) => {
+    setNewGameData(data => ({ ...data, player2: name }));
+    setNewGameStep('player3');
+  };
+  // Placeholder handlers for further steps
+  const handlePlayer3Next = (name) => {
+    setNewGameData(data => ({ ...data, player3: name }));
+    setNewGameStep('gameType');
+  };
+  const handleGameTypeNext = (type) => {
+    setNewGameData(data => ({ ...data, gameType: type }));
+    setNewGameStep('raceTo');
+  };
+  const handleRaceToNext = (raceTo) => {
+    setNewGameData(data => ({ ...data, raceTo }));
+    // Finalize game creation here
+    // For now, just go back to game list
+    setScreen('game-list');
+    setNewGameStep(null);
+    setNewGameData({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
+  };
+
+  const handleCancelNewGame = useCallback(() => {
+    setScreen('game-list');
+    setNewGameStep(null);
+    setNewGameData({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
+  }, []);
+
   return (
     <div className="screen-container">
       {screen === 'game-list' && (
@@ -153,16 +190,40 @@ const App = () => {
       {screen === 'new-game' && (
         <div className="screen active">
           <div className="screen-content">
-            <NewGame
+            {newGameStep === 'player1' && (
-              onCreateGame={handleCreateGame}
+              <Player1Step
-              playerNameHistory={playerNameHistory}
+                playerNameHistory={playerNameHistory}
-              onCancel={showGameList}
+                onNext={handlePlayer1Next}
-              onGameCreated={id => {
+                onCancel={handleCancelNewGame}
-                setCurrentGameId(id);
+                initialValue={newGameData.player1}
-                setScreen('game-detail');
+              />
-              }}
+            )}
-              initialValues={games[0]}
+            {newGameStep === 'player2' && (
-            />
+              <Player2Step
+                playerNameHistory={playerNameHistory}
+                onNext={handlePlayer2Next}
+                onCancel={() => setNewGameStep('player1')}
+                initialValue={newGameData.player2}
+              />
+            )}
+            {newGameStep === 'player3' && (
+              <div style={{ padding: 40, textAlign: 'center' }}>
+                <h2>Player 3 Step (TODO)</h2>
+                <button onClick={() => handlePlayer3Next('')}>Skip</button>
+              </div>
+            )}
+            {newGameStep === 'gameType' && (
+              <div style={{ padding: 40, textAlign: 'center' }}>
+                <h2>Game Type Step (TODO)</h2>
+                <button onClick={() => handleGameTypeNext('8-Ball')}>8-Ball</button>
+              </div>
+            )}
+            {newGameStep === 'raceTo' && (
+              <div style={{ padding: 40, textAlign: 'center' }}>
+                <h2>Race To Step (TODO)</h2>
+                <button onClick={() => handleRaceToNext(5)}>5</button>
+              </div>
+            )}
           </div>
         </div>
       )}

src/components/NewGame.jsx

@@ -144,4 +144,143 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
   );
 };
 
-export default Player1Step; 
+/**
+ * Player 2 input step for multi-step game creation wizard.
+ * @param {object} props
+ * @param {string[]} props.playerNameHistory
+ * @param {Function} props.onNext
+ * @param {Function} props.onCancel
+ * @param {string} [props.initialValue]
+ * @returns {import('preact').VNode}
+ */
+const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }) => {
+  const [player2, setPlayer2] = useState(initialValue);
+  const [error, setError] = useState(null);
+  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (!player2) {
+      setFilteredNames(playerNameHistory);
+    } else {
+      setFilteredNames(
+        playerNameHistory.filter(name =>
+          name.toLowerCase().includes(player2.toLowerCase())
+        )
+      );
+    }
+  }, [player2, playerNameHistory]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!player2.trim()) {
+      setError('Bitte Namen für Spieler 2 eingeben');
+      return;
+    }
+    setError(null);
+    onNext(player2.trim());
+  };
+
+  const handleQuickPick = (name) => {
+    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['screen-title']}>Neues Spiel – Schritt 2/5</div>
+      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot'] + ' ' + styles['active']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+      </div>
+      <div className={styles['player-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 => setPlayer2(e.target.value)}
+            autoFocus
+            autoComplete="off"
+            aria-label="Name Spieler 2"
+            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, 4).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 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>
+    </form>
+  );
+};
+
+export { Player1Step, Player2Step };