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