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,74 +38,75 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
 
   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['form-header']}>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
-        <span className={styles['progress-dot']} />
+        <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'] + ' ' + styles['active']} />
       </div>
-      <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
+
-      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <div className={styles['form-content']}>
-        {players.filter(Boolean).map((name, idx) => (
+        <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
-          <button
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-            key={`first-${idx}`}
+          {players.filter(Boolean).map((name, idx) => (
-            type="button"
+            <button
-            className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
+              key={`first-${idx}`}
-            onClick={() => handleFirst(idx + 1)}
+              type="button"
-            aria-label={`Zuerst: ${name}`}
+              className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
-          >
+              onClick={() => handleFirst(idx + 1)}
-            {name}
+              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: 16, 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}`}
+                  style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+                >
+                  {name}
+                </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
-      </div>
+            type="button"
-      {rule === 'wechselbreak' && playerCount === 3 && (
+            className={styles['arrow-btn']}
-        <>
+            aria-label="Weiter"
-          <div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
+            onClick={() => {
-          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+              if (rule === 'wechselbreak' && playerCount === 3) {
-            {players.filter(Boolean).map((name, idx) => (
+                if (first > 0 && (second ?? 0) > 0) {
-              <button
+                  handleSecond(second as number);
-                key={`second-${idx}`}
+                }
-                type="button"
+              } else if (first > 0) {
-                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 }}
-          disabled={
+          >
-            (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
+            &#8594;
-          }
+          </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', opacity: ((rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)) ? 0.5 : 1 }}
+        </div>
-        >
-          &#8594;
-        </button>
       </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,39 +15,43 @@ export const BreakRuleStep = ({ onNext, onCancel, 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['form-header']}>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <div className={styles['screen-title']}>Break-Regel wählen</div>
-        <span className={styles['progress-dot']} />
+        <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'] + ' ' + styles['active']} />
-        <span className={styles['progress-dot']} />
       </div>
-      <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
+
-        {[
+      <div className={styles['form-content']}>
-          { key: 'winnerbreak', label: 'Winnerbreak' },
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-          { key: 'wechselbreak', label: 'Wechselbreak' },
+          {[
-        ].map(opt => (
+            { key: 'winnerbreak', label: 'Winnerbreak' },
-          <button
+            { key: 'wechselbreak', label: 'Wechselbreak' },
-            key={opt.key}
+          ].map(opt => (
-            type="button"
+            <button
-            className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
+              key={opt.key}
-            onClick={() => { setRule(opt.key as BreakRule); onNext(opt.key as BreakRule); }}
+              type="button"
-            aria-label={`Break-Regel wählen: ${opt.label}`}
+              className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
-          >
+              onClick={() => {
-            {opt.label}
+                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;
           </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' }}>
-      </div>
+            &#8594;
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+          </button>
-        <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' }}>
+        </div>
-          &#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/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"