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:
@@ -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']}>
|
||||
|
||||
Reference in New Issue
Block a user