refactor: standardize new game progress ui

- introduce shared progress indicator component for wizard steps
- align layouts and button sizing across new game panels
- update feature exports to surface the new component

Refs #30

src/lib/features/new-game/ProgressIndicator.tsx

@@ -0,0 +1,31 @@
+import { h } from 'preact';
+import type { JSX } from 'preact';
+import styles from './NewGame.module.css';
+
+interface ProgressIndicatorProps {
+  currentStep: number;
+  totalSteps?: number;
+  style?: JSX.CSSProperties;
+}
+
+export function ProgressIndicator({
+  currentStep,
+  totalSteps = 7,
+  style,
+}: ProgressIndicatorProps) {
+  const activeIndex = Math.min(Math.max(currentStep, 1), totalSteps) - 1;
+
+  return (
+    <div className={styles['progress-indicator']} style={style}>
+      {Array.from({ length: totalSteps }, (_, index) => {
+        const isActive = index === activeIndex;
+        const className = isActive
+          ? `${styles['progress-dot']} ${styles['active']}`
+          : styles['progress-dot'];
+
+        return <span key={index} className={className} />;
+      })}
+    </div>
+  );
+}
+

src/lib/features/new-game/index.ts

@@ -6,4 +6,5 @@ export { GameTypeStep } from './steps/GameTypeStep';
 export { RaceToStep } from './steps/RaceToStep';
 export { BreakRuleStep } from './steps/BreakRuleStep';
 export { BreakOrderStep } from './steps/BreakOrderStep';
+export { ProgressIndicator } from './ProgressIndicator';
 

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

@@ -1,6 +1,7 @@
 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';
 
 interface BreakOrderStepProps {
@@ -37,18 +38,14 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
 
   return (
     <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
+      <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <ProgressIndicator currentStep={7} 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 className={styles['form-content']}>
         <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
-      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
           {players.filter(Boolean).map((name, idx) => (
             <button
               key={`first-${idx}`}
@@ -56,15 +53,17 @@ 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' }}
             >
               {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' }}>
+            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
               {players.filter(Boolean).map((name, idx) => (
                 <button
                   key={`second-${idx}`}
@@ -72,6 +71,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' }}
                 >
                   {name}
                 </button>
@@ -79,6 +79,9 @@ 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;
@@ -92,11 +95,9 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
                 if (first > 0 && (second ?? 0) > 0) {
                   handleSecond(second as number);
                 }
-            } else {
+              } else if (first > 0) {
-              if (first > 0) {
                 onNext(first);
               }
-            }
             }}
             disabled={
               (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
@@ -106,6 +107,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
             &#8594;
           </button>
         </div>
+      </div>
     </form>
   );
 };

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

@@ -1,6 +1,7 @@
 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';
 
 interface BreakRuleStepProps {
@@ -14,17 +15,13 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
 
   return (
     <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
+      <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Break-Regel wählen</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <ProgressIndicator currentStep={6} 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 }}>
+
+      <div className={styles['form-content']}>
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
           {[
             { key: 'winnerbreak', label: 'Winnerbreak' },
             { key: 'wechselbreak', label: 'Wechselbreak' },
@@ -33,13 +30,20 @@ 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={() => { setRule(opt.key as BreakRule); onNext(opt.key as BreakRule); }}
+              onClick={() => {
+                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' }}
             >
               {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;
@@ -48,6 +52,7 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
             &#8594;
           </button>
         </div>
+      </div>
     </form>
   );
 };

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

@@ -1,6 +1,7 @@
 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';
 
 interface GameTypeStepProps {
@@ -28,15 +29,7 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
     <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>
-        <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <ProgressIndicator currentStep={4} style={{ marginBottom: 24 }} />
-          <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']} />
-          <span className={styles['progress-dot']} />
-          <span className={styles['progress-dot']} />
-        </div>
       </div>
       
       <div className={styles['form-content']}>

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

@@ -9,6 +9,7 @@ import {
   ERROR_STYLES,
 } from '@lib/domain/constants';
 import { PlayerSelectModal } from './PlayerSelectModal';
+import { ProgressIndicator } from '../ProgressIndicator';
 
 interface PlayerStepProps {
   playerNameHistory: string[];
@@ -82,15 +83,10 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
     <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>
-        <div className={styles['progress-indicator']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}>
+        <ProgressIndicator
-          <span className={styles['progress-dot'] + ' ' + styles['active']} />
+          currentStep={1}
-          <span className={styles['progress-dot']} />
+          style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}
-          <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']} />
-        </div>
       </div>
       
       <div className={styles['form-content']}>

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

@@ -1,6 +1,7 @@
 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[];
@@ -52,15 +53,7 @@ export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue
     <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>
-        <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <ProgressIndicator currentStep={2} 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']} />
-          <span className={styles['progress-dot']} />
-          <span className={styles['progress-dot']} />
-        </div>
       </div>
       
       <div className={styles['form-content']}>

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

@@ -1,6 +1,7 @@
 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[];
@@ -49,15 +50,7 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
     <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>
-        <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <ProgressIndicator currentStep={3} style={{ marginBottom: 24 }} />
-          <span className={styles['progress-dot']} />
-          <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']} />
-          <span className={styles['progress-dot']} />
-        </div>
       </div>
       
       <div className={styles['form-content']}>

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

@@ -1,6 +1,7 @@
 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,
@@ -51,15 +52,7 @@ 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>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+      <ProgressIndicator currentStep={5} 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'] + ' ' + styles['active']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-      </div>
       <div className={styles['endlos-container']}>
         <button
           type="button"