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/components/NewGame.tsx

@@ -1,77 +0,0 @@
-import { h } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
-import styles from './NewGame.module.css';
-import modalStyles from './PlayerSelectModal.module.css';
-import { PlayerSelectModal } from './new-game/PlayerSelectModal';
-import { 
-  UI_CONSTANTS, 
-  WIZARD_STEPS, 
-  GAME_TYPE_OPTIONS, 
-  RACE_TO_QUICK_PICKS, 
-  RACE_TO_DEFAULT, 
-  RACE_TO_INFINITY,
-  ERROR_MESSAGES,
-  ARIA_LABELS,
-  FORM_CONFIG,
-  ERROR_STYLES
-} from '../utils/constants';
-import { Player1Step } from './new-game/Player1Step';
-import { Player2Step } from './new-game/Player2Step';
-import { Player3Step } from './new-game/Player3Step';
-import { GameTypeStep } from './new-game/GameTypeStep';
-import { RaceToStep } from './new-game/RaceToStep';
-import { BreakRuleStep } from './new-game/BreakRuleStep';
-import { BreakOrderStep } from './new-game/BreakOrderStep';
-import type { BreakRule } from '@lib/domain/types';
-
-// PlayerSelectModal moved to ./new-game/PlayerSelectModal
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-// Player1Step moved to ./new-game/Player1Step
-
-// Player2Step moved to ./new-game/Player2Step
-
-// Player3Step moved to ./new-game/Player3Step
-
-interface GameTypeStepProps {
-  onNext: (type: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-
-interface RaceToStepProps {
-  onNext: (raceTo: string | number) => void;
-  onCancel: () => void;
-  initialValue?: string | number;
-  gameType?: string;
-}
-
-// GameTypeStep and RaceToStep moved to ./new-game
-
-interface BreakRuleStepProps {
-  onNext: (rule: BreakRule) => void;
-  onCancel: () => void;
-  initialValue?: BreakRule | 'winnerbreak';
-}
-
-// BreakRuleStep moved to ./new-game/BreakRuleStep
-
-interface BreakOrderStepProps {
-  players: string[];
-  rule: BreakRule;
-  onNext: (first: number, second?: number) => void;
-  onCancel: () => void;
-  initialFirst?: number;
-  initialSecond?: number;
-}
-
-// BreakOrderStep moved to ./new-game/BreakOrderStep
-
-export { Player1Step, Player2Step, Player3Step, GameTypeStep, BreakRuleStep, BreakOrderStep, RaceToStep };

src/components/new-game/BreakOrderStep.tsx

@@ -1,113 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import type { BreakRule } from '@lib/domain/types';
-
-interface BreakOrderStepProps {
-  players: string[];
-  rule: BreakRule;
-  onNext: (first: number, second?: number) => void;
-  onCancel: () => void;
-  initialFirst?: number;
-  initialSecond?: number;
-}
-
-export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst = 1, initialSecond }: BreakOrderStepProps) => {
-  const playerCount = players.filter(Boolean).length;
-  const [first, setFirst] = useState<number>(initialFirst);
-  const [second, setSecond] = useState<number | undefined>(initialSecond);
-
-  useEffect(() => {
-    if (!initialSecond && rule === 'wechselbreak' && playerCount === 3) {
-      setSecond(2);
-    }
-  }, [initialSecond, rule, playerCount]);
-
-  const handleFirst = (idx: number) => {
-    setFirst(idx);
-    if (rule === 'winnerbreak' || (rule === 'wechselbreak' && playerCount === 2)) {
-      onNext(idx);
-    }
-  };
-
-  const handleSecond = (idx: number) => {
-    setSecond(idx);
-    onNext(first, idx);
-  };
-
-  return (
-    <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
-      <div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot'] + ' ' + styles['active']} />
-      </div>
-      <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
-      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-        {players.filter(Boolean).map((name, idx) => (
-          <button
-            key={`first-${idx}`}
-            type="button"
-            className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
-            onClick={() => handleFirst(idx + 1)}
-            aria-label={`Zuerst: ${name}`}
-          >
-            {name}
-          </button>
-        ))}
-      </div>
-      {rule === 'wechselbreak' && playerCount === 3 && (
-        <>
-          <div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
-          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-            {players.filter(Boolean).map((name, idx) => (
-              <button
-                key={`second-${idx}`}
-                type="button"
-                className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
-                onClick={() => handleSecond(idx + 1)}
-                aria-label={`Zweites Break: ${name}`}
-              >
-                {name}
-              </button>
-            ))}
-          </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="button"
-          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)
-          }
-          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>
-    </form>
-  );
-};
-
-

src/components/new-game/BreakRuleStep.tsx

@@ -1,55 +0,0 @@
-import { h } from 'preact';
-import { useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import type { BreakRule } from '@lib/domain/types';
-
-interface BreakRuleStepProps {
-  onNext: (rule: BreakRule) => void;
-  onCancel: () => void;
-  initialValue?: BreakRule;
-}
-
-export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
-  const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');
-
-  return (
-    <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
-      <div className={styles['screen-title']}>Break-Regel wählen</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot'] + ' ' + styles['active']} />
-        <span className={styles['progress-dot']} />
-      </div>
-      <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
-        {[
-          { key: 'winnerbreak', label: 'Winnerbreak' },
-          { key: 'wechselbreak', label: 'Wechselbreak' },
-        ].map(opt => (
-          <button
-            key={opt.key}
-            type="button"
-            className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
-            onClick={() => { setRule(opt.key as BreakRule); onNext(opt.key as BreakRule); }}
-            aria-label={`Break-Regel wählen: ${opt.label}`}
-          >
-            {opt.label}
-          </button>
-        ))}
-      </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="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>
-    </form>
-  );
-};
-
-

src/components/screens/NewGameScreen.tsx

@@ -1,16 +1,17 @@
 import { h } from 'preact';
+import type { ComponentProps } from 'preact';
+import { useEffect, useMemo, useState } from 'preact/hooks';
 import { Screen } from '@lib/ui/Layout';
 import {
-  Player1Step,
-  Player2Step,
-  Player3Step,
+  PlayerNameStep,
   GameTypeStep,
   BreakRuleStep,
   BreakOrderStep,
   RaceToStep,
 } from '@lib/features/new-game';
 import type { NewGameStep, NewGameData, GameType } from '@lib/domain/types';
-import { GAME_TYPES, RACE_TO_DEFAULT } from '@lib/domain/constants';
+import { ERROR_MESSAGES, GAME_TYPES, RACE_TO_DEFAULT } from '@lib/domain/constants';
+import newGameStyles from '@lib/features/new-game/NewGame.module.css';
 
 interface NewGameScreenProps {
   step: NewGameStep;
@@ -23,6 +24,10 @@ interface NewGameScreenProps {
   onShowValidation: (message: string) => void;
 }
 
+type PlayerStepKey = 'player1' | 'player2' | 'player3';
+type PlayerStepConfig = Omit<ComponentProps<typeof PlayerNameStep>, 'playerNameHistory'>;
+type PlayerStepConfigMap = Record<PlayerStepKey, PlayerStepConfig>;
+
 export default function NewGameScreen({
   step,
   data,
@@ -33,19 +38,29 @@ export default function NewGameScreen({
   onCancel,
   onShowValidation,
 }: NewGameScreenProps) {
-  const handlePlayer1Next = (name: string) => {
-    onDataChange({ player1: name });
-    onStepChange('player2');
-  };
+  const [temporaryPlayerNames, setTemporaryPlayerNames] = useState<string[]>([]);
 
-  const handlePlayer2Next = (name: string) => {
-    onDataChange({ player2: name });
-    onStepChange('player3');
-  };
+  useEffect(() => {
+    // Reset wizard-local names when a fresh wizard starts at player 1.
+    if (
+      step === 'player1' &&
+      !data.player1 &&
+      !data.player2 &&
+      !data.player3
+    ) {
+      setTemporaryPlayerNames([]);
+    }
+  }, [step, data.player1, data.player2, data.player3]);
 
-  const handlePlayer3Next = (name: string) => {
-    onDataChange({ player3: name });
-    onStepChange('gameType');
+  const playerNameOptions = useMemo(
+    () => Array.from(new Set([...temporaryPlayerNames, ...playerHistory])),
+    [temporaryPlayerNames, playerHistory],
+  );
+
+  const addTemporaryPlayerName = (name: string) => {
+    setTemporaryPlayerNames((prev) =>
+      prev.includes(name) ? prev : [name, ...prev],
+    );
   };
 
   const handleGameTypeNext = (type: string) => {
@@ -79,7 +94,6 @@ export default function NewGameScreen({
   const handleRaceToNext = (raceTo: string | number) => {
     // Convert to string, handling Infinity case explicitly
     const raceToStr = raceTo === Infinity ? 'Infinity' : String(raceTo);
-    const finalData = { ...data, raceTo: raceToStr };
     // After race to, go to break rule selection
     onDataChange({ raceTo: raceToStr });
     onStepChange('breakRule');
@@ -110,32 +124,75 @@ export default function NewGameScreen({
     }
   };
 
+  const playerStepConfig: PlayerStepConfigMap = {
+    player1: {
+      stepNumber: 1,
+      title: 'Name Spieler 1',
+      label: 'Spieler 1',
+      placeholder: 'Name Spieler 1',
+      inputId: 'player1-input',
+      playerInputClassName: newGameStyles['player1-input'],
+      initialValue: data.player1,
+      onNext: (name: string) => {
+        onDataChange({ player1: name });
+        onStepChange('player2');
+      },
+      onCancel,
+      required: true,
+      requiredErrorMessage: ERROR_MESSAGES.PLAYER1_REQUIRED,
+      enterKeyHint: 'next',
+      showMorePlayersModal: true,
+    },
+    player2: {
+      stepNumber: 2,
+      title: 'Name Spieler 2',
+      label: 'Spieler 2',
+      placeholder: 'Name Spieler 2',
+      inputId: 'player2-input',
+      playerInputClassName: newGameStyles['player2-input'],
+      initialValue: data.player2,
+      onNext: (name: string) => {
+        onDataChange({ player2: name });
+        onStepChange('player3');
+      },
+      onCancel: handleStepBack,
+      required: true,
+      requiredErrorMessage: ERROR_MESSAGES.PLAYER2_REQUIRED,
+      enterKeyHint: 'next',
+      showMorePlayersModal: true,
+      prefillNameEntry: false,
+      onCreateTemporaryName: addTemporaryPlayerName,
+    },
+    player3: {
+      stepNumber: 3,
+      title: 'Name Spieler 3 (optional)',
+      label: 'Spieler 3 (optional)',
+      placeholder: 'Name Spieler 3 (optional)',
+      inputId: 'player3-input',
+      playerInputClassName: newGameStyles['player3-input'],
+      initialValue: data.player3,
+      onNext: (name: string) => {
+        onDataChange({ player3: name });
+        onStepChange('gameType');
+      },
+      onCancel: handleStepBack,
+      required: false,
+      enterKeyHint: 'done',
+      showSkipButton: true,
+      skipLabel: 'Überspringen',
+      showMorePlayersModal: true,
+      prefillNameEntry: false,
+      onCreateTemporaryName: addTemporaryPlayerName,
+    },
+  };
+
   return (
     <Screen>
-      {step === 'player1' && (
-        <Player1Step
-          playerNameHistory={playerHistory}
-          onNext={handlePlayer1Next}
-          onCancel={onCancel}
-          initialValue={data.player1}
-        />
-      )}
-      
-      {step === 'player2' && (
-        <Player2Step
-          playerNameHistory={playerHistory}
-          onNext={handlePlayer2Next}
-          onCancel={handleStepBack}
-          initialValue={data.player2}
-        />
-      )}
-      
-      {step === 'player3' && (
-        <Player3Step
-          playerNameHistory={playerHistory}
-          onNext={handlePlayer3Next}
-          onCancel={handleStepBack}
-          initialValue={data.player3}
+      {(step === 'player1' || step === 'player2' || step === 'player3') && (
+        <PlayerNameStep
+          key={step}
+          {...playerStepConfig[step]}
+          playerNameHistory={playerNameOptions}
         />
       )}