froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(new-game): modernize UI, remove player selects

Browse Source 
- Refactored New Game screen to use a modern, card-like, dark-themed layout
- Removed select dropdowns for previous players, now only datalist+input for player names
- Updated paddings, backgrounds, borders, and font sizes for a visually consistent, modern look
- No logic changes, only markup and style

Refs #1
This commit is contained in:
Frank Schwenk
2025-06-06 12:54:13 +02:00
parent b44b013f58
commit c845b0cb51
3 changed files with 111 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/NewGame.jsx
View File

@@ -28,43 +28,54 @@ export default function NewGame({ onCreateGame, playerNameHistory, onCancel }) {
return (
<form className={styles['new-game-form']} onSubmit={handleSubmit}>
<div>
<label>Spieler 1:</label>
<input value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" />
<datalist id="player1-history">
{playerNameHistory.map(name => <option value={name} key={name} />)}
</datalist>
<div className={styles['screen-title']}>Neues Spiel</div>
<div className={styles['player-inputs']}>
<div className={styles['player-input']}>
<label>Spieler 1</label>
<div className={styles['name-input-container']}>
<input className={styles['name-input']} placeholder="Name Spieler 1" value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" />
<datalist id="player1-history">
{playerNameHistory.map(name => <option value={name} key={name} />)}
</datalist>
</div>
</div>
<div className={styles['player-input']}>
<label>Spieler 2</label>
<div className={styles['name-input-container']}>
<input className={styles['name-input']} placeholder="Name Spieler 2" value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" />
<datalist id="player2-history">
{playerNameHistory.map(name => <option value={name} key={name} />)}
</datalist>
</div>
</div>
<div className={styles['player-input']}>
<label>Spieler 3 (optional)</label>
<div className={styles['name-input-container']}>
<input className={styles['name-input']} placeholder="Name Spieler 3" value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" />
<datalist id="player3-history">
{playerNameHistory.map(name => <option value={name} key={name} />)}
</datalist>
</div>
</div>
</div>
<div>
<label>Spieler 2:</label>
<input value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" />
<datalist id="player2-history">
{playerNameHistory.map(name => <option value={name} key={name} />)}
</datalist>
</div>
<div>
<label>Spieler 3 (optional):</label>
<input value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" />
<datalist id="player3-history">
{playerNameHistory.map(name => <option value={name} key={name} />)}
</datalist>
</div>
<div>
<label>Spieltyp:</label>
<select value={gameType} onChange={e => setGameType(e.target.value)}>
<option value="8-Ball">8-Ball</option>
<option value="9-Ball">9-Ball</option>
<option value="10-Ball">10-Ball</option>
</select>
</div>
<div>
<label>Race to:</label>
<input type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" />
<div className={styles['game-settings']}>
<div className={styles['setting-group']}>
<label>Spieltyp</label>
<select value={gameType} onChange={e => setGameType(e.target.value)}>
<option value="8-Ball">8-Ball</option>
<option value="9-Ball">9-Ball</option>
<option value="10-Ball">10-Ball</option>
</select>
</div>
<div className={styles['setting-group']}>
<label>Race to X (optional)</label>
<input type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" />
</div>
</div>
{error && <div className={styles['validation-error']}>{error}</div>}
<div className={styles['form-actions']}>
<button type="button" className={styles['nav-button']} onClick={onCancel}>Abbrechen</button>
<button type="submit" className={styles['nav-button']}>Spiel starten</button>
<div className={styles['nav-buttons']}>
<button type="button" className={styles['btn']} onClick={onCancel}>Abbrechen</button>
<button type="submit" className={styles['btn']}>Spiel starten</button>
</div>
</form>
);