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
This commit is contained in:
Frank Schwenk
2025-11-14 11:07:26 +01:00
parent 8a46a8a019
commit 01123f291d
9 changed files with 146 additions and 139 deletions
@@ -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']}>