chore(#28): use descriptive titles for each creation step

- Player 1/2/3: “Name Spieler X”
- Game type: “Spielart auswählen”
- Race to: “Race To auswählen”
- Break rule: “Break-Regel wählen”
- First break: “Wer bricht zuerst?”

Refs #28
This commit is contained in:
Frank Schwenk
2025-10-30 12:07:17 +01:00
parent 2e0855e781
commit d3083c8c68

View File

@@ -127,7 +127,7 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
return ( return (
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off"> <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off">
<div className={styles['screen-title']}>Neues Spiel</div> <div className={styles['screen-title']}>Name Spieler 1</div>
<div className={styles['progress-indicator']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}> <div className={styles['progress-indicator']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}>
<span className={styles['progress-dot'] + ' ' + styles['active']} /> <span className={styles['progress-dot'] + ' ' + styles['active']} />
<span className={styles['progress-dot']} /> <span className={styles['progress-dot']} />
@@ -354,7 +354,7 @@ const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
return ( return (
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 2 Eingabe" autoComplete="off"> <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 2 Eingabe" autoComplete="off">
<div className={styles['screen-title']}>Neues Spiel</div> <div className={styles['screen-title']}>Name Spieler 2</div>
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}> <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'] + ' ' + styles['active']} />
@@ -498,7 +498,7 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
return ( return (
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off"> <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
<div className={styles['screen-title']}>Neues Spiel</div> <div className={styles['screen-title']}>Name Spieler 3 (optional)</div>
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}> <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']} />
@@ -626,7 +626,7 @@ const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps
return ( return (
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen"> <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen">
<div className={styles['screen-title']}>Neues Spiel</div> <div className={styles['screen-title']}>Spielart auswählen</div>
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}> <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']} />
@@ -730,7 +730,7 @@ const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToSte
return ( return (
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Race To auswählen"> <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Race To auswählen">
<div className={styles['screen-title']}>Neues Spiel</div> <div className={styles['screen-title']}>Race To auswählen</div>
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}> <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']} />
@@ -805,7 +805,7 @@ const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: Break
return ( return (
<form className={styles['new-game-form']} aria-label="Break-Regel wählen"> <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
<div className={styles['screen-title']}>Neues Spiel</div> <div className={styles['screen-title']}>Break-Regel wählen</div>
<div style={{ display: 'flex', gap: 12, marginTop: 12 }}> <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
{[ {[
{ key: 'winnerbreak', label: 'Winnerbreak' }, { key: 'winnerbreak', label: 'Winnerbreak' },
@@ -858,7 +858,7 @@ const BreakOrderStep = ({ players, rule, onNext, onCancel }: BreakOrderStepProps
return ( return (
<form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen"> <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
<div className={styles['screen-title']}>Neues Spiel</div> <div className={styles['screen-title']}>Wer bricht zuerst?</div>
<div style={{ marginBottom: 16, fontWeight: 600 }}>Wer bricht zuerst?</div> <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer bricht zuerst?</div>
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
{players.filter(Boolean).map((name, idx) => ( {players.filter(Boolean).map((name, idx) => (