feat(new-game): prefill with last game, add clear-all button

- New Game form is now prefilled with the last created game's values
- Added 'Felder leeren' (Clear All) button at the top to reset all fields
- Improves speed and UX for repeated game entry

Refs #1
This commit is contained in:
Frank Schwenk
2025-06-06 13:11:03 +02:00
parent c845b0cb51
commit d81c375f1e
2 changed files with 38 additions and 10 deletions

View File

@@ -75,7 +75,7 @@ export default function App() {
updatedAt: new Date().toISOString()
};
setGames(g => [newGame, ...g]);
setScreen('game-list');
return newGame.id;
}
// Score update
@@ -156,6 +156,11 @@ export default function App() {
onCreateGame={handleCreateGame}
playerNameHistory={playerNameHistory}
onCancel={showGameList}
onGameCreated={id => {
setCurrentGameId(id);
setScreen('game-detail');
}}
initialValues={games[0]}
/>
</div>
</div>

View File

@@ -1,34 +1,57 @@
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { useState, useEffect } from 'preact/hooks';
import styles from './NewGame.module.css';
export default function NewGame({ onCreateGame, playerNameHistory, onCancel }) {
const [player1, setPlayer1] = useState('');
const [player2, setPlayer2] = useState('');
const [player3, setPlayer3] = useState('');
const [gameType, setGameType] = useState('8-Ball');
const [raceTo, setRaceTo] = useState('');
export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onGameCreated, initialValues }) {
const [player1, setPlayer1] = useState(initialValues?.player1 || '');
const [player2, setPlayer2] = useState(initialValues?.player2 || '');
const [player3, setPlayer3] = useState(initialValues?.player3 || '');
const [gameType, setGameType] = useState(initialValues?.gameType || '8-Ball');
const [raceTo, setRaceTo] = useState(initialValues?.raceTo ? String(initialValues.raceTo) : '');
const [error, setError] = useState(null);
useEffect(() => {
setPlayer1(initialValues?.player1 || '');
setPlayer2(initialValues?.player2 || '');
setPlayer3(initialValues?.player3 || '');
setGameType(initialValues?.gameType || '8-Ball');
setRaceTo(initialValues?.raceTo ? String(initialValues.raceTo) : '');
setError(null);
}, [initialValues]);
function handleSubmit(e) {
e.preventDefault();
if (!player1.trim() || !player2.trim()) {
setError('Bitte Namen für beide Spieler eingeben');
return;
}
onCreateGame({
const id = onCreateGame({
player1: player1.trim(),
player2: player2.trim(),
player3: player3.trim() || null,
gameType,
raceTo: raceTo ? parseInt(raceTo) : null
});
setPlayer1(''); setPlayer2(''); setPlayer3(''); setGameType('8-Ball'); setRaceTo(''); setError(null);
if (onGameCreated && id) {
onGameCreated(id);
}
}
function handleClear() {
setPlayer1('');
setPlayer2('');
setPlayer3('');
setGameType('8-Ball');
setRaceTo('');
setError(null);
}
return (
<form className={styles['new-game-form']} onSubmit={handleSubmit}>
<div className={styles['screen-title']}>Neues Spiel</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
<button type="button" className={styles['btn']} onClick={handleClear}>Felder leeren</button>
</div>
<div className={styles['player-inputs']}>
<div className={styles['player-input']}>
<label>Spieler 1</label>