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
2025-11-14 11:07:26 +01:00
parent 8a46a8a019
commit 01123f291d
9 changed files with 146 additions and 139 deletions
--- a/src/lib/features/new-game/ProgressIndicator.tsx
+++ b/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>
+  );
+}
+
--- a/src/lib/features/new-game/index.ts
+++ b/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';

--- a/src/lib/features/new-game/steps/BreakOrderStep.tsx
+++ b/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['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 className={styles['form-header']}>
+        <div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
+        <ProgressIndicator currentStep={7} style={{ marginBottom: 24 }} />
      </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}
+
+      <div className={styles['form-content']}>
+        <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
+        <div style={{ display: 'flex', gap: 16, 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}`}
+              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>
-        ))}
-      </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) {
+          <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)
            }
-          }}
-          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>
+            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>
      </div>
    </form>
  );
--- a/src/lib/features/new-game/steps/BreakRuleStep.tsx
+++ b/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['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 className={styles['form-header']}>
+        <div className={styles['screen-title']}>Break-Regel wählen</div>
+        <ProgressIndicator currentStep={6} style={{ marginBottom: 24 }} />
      </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}
+
+      <div className={styles['form-content']}>
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+          {[
+            { 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}`}
+              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>
-        ))}
-      </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>
+          <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>
      </div>
    </form>
  );
--- a/src/lib/features/new-game/steps/GameTypeStep.tsx
+++ b/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 }}>
-          <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>
+        <ProgressIndicator currentStep={4} style={{ marginBottom: 24 }} />
      </div>
      
      <div className={styles['form-content']}>
--- a/src/lib/features/new-game/steps/Player1Step.tsx
+++ b/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 }}>
-          <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']} />
-          <span className={styles['progress-dot']} />
-        </div>
+        <ProgressIndicator
+          currentStep={1}
+          style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}
+        />
      </div>
      
      <div className={styles['form-content']}>
--- a/src/lib/features/new-game/steps/Player2Step.tsx
+++ b/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 }}>
-          <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>
+        <ProgressIndicator currentStep={2} style={{ marginBottom: 24 }} />
      </div>
      
      <div className={styles['form-content']}>
--- a/src/lib/features/new-game/steps/Player3Step.tsx
+++ b/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 }}>
-          <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>
+        <ProgressIndicator currentStep={3} style={{ marginBottom: 24 }} />
      </div>
      
      <div className={styles['form-content']}>
--- a/src/lib/features/new-game/steps/RaceToStep.tsx
+++ b/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 }}>
-        <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>
+      <ProgressIndicator currentStep={5} style={{ marginBottom: 24 }} />
      <div className={styles['endlos-container']}>
        <button
          type="button"