feat(wizard): Player 1 step UI overhaul

- Quick-pick now advances to next step
- Added clear (×) icon to input field
- Replaced navigation buttons with large left/right arrows
- All controls are touch-friendly and visually prominent

Closes #6

src/components/NewGame.jsx

@@ -1,117 +1,147 @@
 import { h } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useRef } from 'preact/hooks';
 import styles from './NewGame.module.css';
 
 /**
- * New game creation form.
+ * Player 1 input step for multi-step game creation wizard.
  * @param {object} props
- * @param {Function} props.onCreateGame
  * @param {string[]} props.playerNameHistory
+ * @param {Function} props.onNext
  * @param {Function} props.onCancel
- * @param {Function} props.onGameCreated
+ * @param {string} [props.initialValue]
- * @param {object} props.initialValues
  * @returns {import('preact').VNode}
  */
-const NewGame = ({ onCreateGame, playerNameHistory, onCancel, onGameCreated, initialValues }) => {
+const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }) => {
-  const [player1, setPlayer1] = useState(initialValues?.player1 || '');
+  const [player1, setPlayer1] = useState(initialValue);
-  const [player2, setPlayer2] = useState(initialValues?.player2 || '');
-  const [player3, setPlayer3] = useState(initialValues?.player3 || '');
-  const [gameType, setGameType] = useState(initialValues?.gameType || '8-Ball');
-  const [raceTo, setRaceTo] = useState(initialValues?.raceTo ? String(initialValues.raceTo) : '');
   const [error, setError] = useState(null);
+  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
+  const inputRef = useRef(null);
 
   useEffect(() => {
-    setPlayer1(initialValues?.player1 || '');
+    if (!player1) {
-    setPlayer2(initialValues?.player2 || '');
+      setFilteredNames(playerNameHistory);
-    setPlayer3(initialValues?.player3 || '');
+    } else {
-    setGameType(initialValues?.gameType || '8-Ball');
+      setFilteredNames(
-    setRaceTo(initialValues?.raceTo ? String(initialValues.raceTo) : '');
+        playerNameHistory.filter(name =>
-    setError(null);
+          name.toLowerCase().includes(player1.toLowerCase())
-  }, [initialValues]);
+        )
+      );
+    }
+  }, [player1, playerNameHistory]);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (!player1.trim() || !player2.trim()) {
+    if (!player1.trim()) {
-      setError('Bitte Namen für beide Spieler eingeben');
+      setError('Bitte Namen für Spieler 1 eingeben');
       return;
     }
-    const id = onCreateGame({
+    setError(null);
-      player1: player1.trim(),
+    onNext(player1.trim());
-      player2: player2.trim(),
+  };
-      player3: player3.trim() || null,
+
-      gameType,
+  const handleQuickPick = (name) => {
-      raceTo: raceTo ? parseInt(raceTo) : null
+    setError(null);
-    });
+    onNext(name);
-    if (onGameCreated && id) {
-      onGameCreated(id);
-    }
   };
 
   const handleClear = () => {
     setPlayer1('');
-    setPlayer2('');
-    setPlayer3('');
-    setGameType('8-Ball');
-    setRaceTo('');
     setError(null);
+    if (inputRef.current) inputRef.current.focus();
   };
 
   return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Neues Spiel Formular">
+    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off">
-      <div className={styles['screen-title']}>Neues Spiel</div>
+      <div className={styles['screen-title']}>Neues Spiel – Schritt 1/5</div>
-      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
+      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <button type="button" className="btn" onClick={handleClear} aria-label="Felder leeren">Felder leeren</button>
+        <span className={styles['progress-dot'] + ' ' + styles['active']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
       </div>
-      <div className={styles['player-inputs']}>
+      <div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
-        <div className={styles['player-input']}>
+        <label htmlFor="player1-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 1</label>
-          <label htmlFor="player1-input">Spieler 1</label>
+        <div style={{ position: 'relative', width: '100%' }}>
-          <div className={styles['name-input-container']}>
+          <input
-            <input id="player1-input" className={styles['name-input']} placeholder="Name Spieler 1" value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" aria-label="Name Spieler 1" />
+            id="player1-input"
-            <datalist id="player1-history">
+            className={styles['name-input']}
-              {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
+            placeholder="Name Spieler 1"
-            </datalist>
+            value={player1}
-          </div>
+            onInput={e => setPlayer1(e.target.value)}
+            autoFocus
+            autoComplete="off"
+            aria-label="Name Spieler 1"
+            style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
+            ref={inputRef}
+          />
+          {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}
+            >
+              {/* Unicode heavy multiplication X */}
+              ×
+            </button>
+          )}
         </div>
-        <div className={styles['player-input']}>
+        {filteredNames.length > 0 && (
-          <label htmlFor="player2-input">Spieler 2</label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
-          <div className={styles['name-input-container']}>
+            {filteredNames.slice(0, 4).map((name, idx) => (
-            <input id="player2-input" className={styles['name-input']} placeholder="Name Spieler 2" value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" aria-label="Name Spieler 2" />
+              <button
-            <datalist id="player2-history">
+                type="button"
-              {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
+                key={name + idx}
-            </datalist>
+                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 className={styles['player-input']}>
-          <label htmlFor="player3-input">Spieler 3 (optional)</label>
-          <div className={styles['name-input-container']}>
-            <input id="player3-input" className={styles['name-input']} placeholder="Name Spieler 3" value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" aria-label="Name Spieler 3" />
-            <datalist id="player3-history">
-              {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
-            </datalist>
-          </div>
-        </div>
       </div>
-      <div className={styles['game-settings']}>
+      {error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
-        <div className={styles['setting-group']}>
+      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-          <label htmlFor="game-type-select">Spieltyp</label>
+        <button
-          <select id="game-type-select" value={gameType} onChange={e => setGameType(e.target.value)} aria-label="Spieltyp">
+          type="button"
-            <option value="8-Ball">8-Ball</option>
+          className={styles['arrow-btn']}
-            <option value="9-Ball">9-Ball</option>
+          aria-label="Zurück"
-            <option value="10-Ball">10-Ball</option>
+          onClick={onCancel}
-          </select>
+          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' }}
-        </div>
+        >
-        <div className={styles['setting-group']}>
+          {/* Unicode left arrow */}
-          <label htmlFor="race-to-input">Race to X (optional)</label>
+          &#8592;
-          <input id="race-to-input" type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" aria-label="Race to X" />
+        </button>
-        </div>
+        <button
-      </div>
+          type="submit"
-      {error && <div className={styles['validation-error']}>{error}</div>}
+          className={styles['arrow-btn']}
-      <div className="nav-buttons">
+          aria-label="Weiter"
-        <button type="button" className="btn" onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
+          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="btn" aria-label="Spiel starten">Spiel starten</button>
+        >
+          {/* Unicode right arrow */}
+          &#8594;
+        </button>
       </div>
     </form>
   );
 };
 
-export default NewGame; 
+export default Player1Step; 

src/components/NewGame.module.css

@@ -109,4 +109,83 @@
     display: flex;
     flex-direction: column;
     gap: 0;
+}
+.progress-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 16px;
+}
+.progress-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #444;
+    opacity: 0.4;
+    transition: background 0.2s, opacity 0.2s;
+}
+.progress-dot.active {
+    background: #fff;
+    opacity: 1;
+}
+.quick-pick-btn {
+    min-width: 80px;
+    min-height: 44px;
+    font-size: 1.1rem;
+    border-radius: 8px;
+    background: #333;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 8px;
+    transition: background 0.2s;
+}
+.quick-pick-btn:active, .quick-pick-btn:focus {
+    background: #555;
+    outline: none;
+}
+.arrow-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+}
+.arrow-btn {
+    font-size: 48px;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: #222;
+    color: #fff;
+    border: none;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, color 0.2s;
+}
+.arrow-btn:active, .arrow-btn:focus {
+    background: #444;
+    color: #fff;
+    outline: none;
+}
+.clear-input-btn {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 24px;
+    color: #aaa;
+    padding: 0;
+    z-index: 2;
+}
+.clear-input-btn:active, .clear-input-btn:focus {
+    color: #fff;
+    outline: none;
 }