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()
|
updatedAt: new Date().toISOString()
|
||||||
};
|
};
|
||||||
setGames(g => [newGame, ...g]);
|
setGames(g => [newGame, ...g]);
|
||||||
setScreen('game-list');
|
return newGame.id;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Score update
|
// Score update
|
||||||
@@ -156,6 +156,11 @@ export default function App() {
|
|||||||
onCreateGame={handleCreateGame}
|
onCreateGame={handleCreateGame}
|
||||||
playerNameHistory={playerNameHistory}
|
playerNameHistory={playerNameHistory}
|
||||||
onCancel={showGameList}
|
onCancel={showGameList}
|
||||||
|
onGameCreated={id => {
|
||||||
|
setCurrentGameId(id);
|
||||||
|
setScreen('game-detail');
|
||||||
|
}}
|
||||||
|
initialValues={games[0]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,34 +1,57 @@
|
|||||||
import { h } from 'preact';
|
import { h } from 'preact';
|
||||||
import { useState } from 'preact/hooks';
|
import { useState, useEffect } from 'preact/hooks';
|
||||||
import styles from './NewGame.module.css';
|
import styles from './NewGame.module.css';
|
||||||
|
|
||||||
export default function NewGame({ onCreateGame, playerNameHistory, onCancel }) {
|
export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onGameCreated, initialValues }) {
|
||||||
const [player1, setPlayer1] = useState('');
|
const [player1, setPlayer1] = useState(initialValues?.player1 || '');
|
||||||
const [player2, setPlayer2] = useState('');
|
const [player2, setPlayer2] = useState(initialValues?.player2 || '');
|
||||||
const [player3, setPlayer3] = useState('');
|
const [player3, setPlayer3] = useState(initialValues?.player3 || '');
|
||||||
const [gameType, setGameType] = useState('8-Ball');
|
const [gameType, setGameType] = useState(initialValues?.gameType || '8-Ball');
|
||||||
const [raceTo, setRaceTo] = useState('');
|
const [raceTo, setRaceTo] = useState(initialValues?.raceTo ? String(initialValues.raceTo) : '');
|
||||||
const [error, setError] = useState(null);
|
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) {
|
function handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!player1.trim() || !player2.trim()) {
|
if (!player1.trim() || !player2.trim()) {
|
||||||
setError('Bitte Namen für beide Spieler eingeben');
|
setError('Bitte Namen für beide Spieler eingeben');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
onCreateGame({
|
const id = onCreateGame({
|
||||||
player1: player1.trim(),
|
player1: player1.trim(),
|
||||||
player2: player2.trim(),
|
player2: player2.trim(),
|
||||||
player3: player3.trim() || null,
|
player3: player3.trim() || null,
|
||||||
gameType,
|
gameType,
|
||||||
raceTo: raceTo ? parseInt(raceTo) : null
|
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 (
|
return (
|
||||||
<form className={styles['new-game-form']} onSubmit={handleSubmit}>
|
<form className={styles['new-game-form']} onSubmit={handleSubmit}>
|
||||||
<div className={styles['screen-title']}>Neues Spiel</div>
|
<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-inputs']}>
|
||||||
<div className={styles['player-input']}>
|
<div className={styles['player-input']}>
|
||||||
<label>Spieler 1</label>
|
<label>Spieler 1</label>
|
||||||
|
|||||||
Reference in New Issue
Block a user