feat(wizard): Player 2 step and multi-step navigation
- Add Player2Step component for player 2 name input - Implement multi-step wizard logic in App.jsx - Player 1/2 steps now allow forward/back navigation - Left arrow on Player 2 returns to Player 1, not abort - Prepare placeholders for further steps Closes #7
This commit is contained in:
Frank Schwenk
@@ -2,7 +2,7 @@ import { h } from 'preact';
|
||||
import { useState, useEffect, useCallback } from 'preact/hooks';
|
||||
import GameList from './GameList.jsx';
|
||||
import GameDetail from './GameDetail.jsx';
|
||||
import NewGame from './NewGame.jsx';
|
||||
import { Player1Step, Player2Step } from './NewGame.jsx';
|
||||
import Modal from './Modal.jsx';
|
||||
import ValidationModal from './ValidationModal.jsx';
|
||||
import GameCompletionModal from './GameCompletionModal.jsx';
|
||||
@@ -23,6 +23,8 @@ const App = () => {
|
||||
const [validation, setValidation] = useState({ open: false, message: '' });
|
||||
const [completionModal, setCompletionModal] = useState({ open: false, game: null });
|
||||
const [filter, setFilter] = useState('all');
|
||||
const [newGameStep, setNewGameStep] = useState(null);
|
||||
const [newGameData, setNewGameData] = useState({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
|
||||
|
||||
// Load games from localStorage on mount
|
||||
useEffect(() => {
|
||||
@@ -55,6 +57,8 @@ const App = () => {
|
||||
const showNewGame = useCallback(() => {
|
||||
setScreen('new-game');
|
||||
setCurrentGameId(null);
|
||||
setNewGameStep('player1');
|
||||
setNewGameData({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
|
||||
}, []);
|
||||
const showGameDetail = useCallback((id) => {
|
||||
setCurrentGameId(id);
|
||||
@@ -134,6 +138,39 @@ const App = () => {
|
||||
setValidation({ open: false, message: '' });
|
||||
}, []);
|
||||
|
||||
// Step handlers
|
||||
const handlePlayer1Next = (name) => {
|
||||
setNewGameData(data => ({ ...data, player1: name }));
|
||||
setNewGameStep('player2');
|
||||
};
|
||||
const handlePlayer2Next = (name) => {
|
||||
setNewGameData(data => ({ ...data, player2: name }));
|
||||
setNewGameStep('player3');
|
||||
};
|
||||
// Placeholder handlers for further steps
|
||||
const handlePlayer3Next = (name) => {
|
||||
setNewGameData(data => ({ ...data, player3: name }));
|
||||
setNewGameStep('gameType');
|
||||
};
|
||||
const handleGameTypeNext = (type) => {
|
||||
setNewGameData(data => ({ ...data, gameType: type }));
|
||||
setNewGameStep('raceTo');
|
||||
};
|
||||
const handleRaceToNext = (raceTo) => {
|
||||
setNewGameData(data => ({ ...data, raceTo }));
|
||||
// Finalize game creation here
|
||||
// For now, just go back to game list
|
||||
setScreen('game-list');
|
||||
setNewGameStep(null);
|
||||
setNewGameData({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
|
||||
};
|
||||
|
||||
const handleCancelNewGame = useCallback(() => {
|
||||
setScreen('game-list');
|
||||
setNewGameStep(null);
|
||||
setNewGameData({ player1: '', player2: '', player3: '', gameType: '', raceTo: '' });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="screen-container">
|
||||
{screen === 'game-list' && (
|
||||
@@ -153,16 +190,40 @@ const App = () => {
|
||||
{screen === 'new-game' && (
|
||||
<div className="screen active">
|
||||
<div className="screen-content">
|
||||
<NewGame
|
||||
onCreateGame={handleCreateGame}
|
||||
playerNameHistory={playerNameHistory}
|
||||
onCancel={showGameList}
|
||||
onGameCreated={id => {
|
||||
setCurrentGameId(id);
|
||||
setScreen('game-detail');
|
||||
}}
|
||||
initialValues={games[0]}
|
||||
/>
|
||||
{newGameStep === 'player1' && (
|
||||
<Player1Step
|
||||
playerNameHistory={playerNameHistory}
|
||||
onNext={handlePlayer1Next}
|
||||
onCancel={handleCancelNewGame}
|
||||
initialValue={newGameData.player1}
|
||||
/>
|
||||
)}
|
||||
{newGameStep === 'player2' && (
|
||||
<Player2Step
|
||||
playerNameHistory={playerNameHistory}
|
||||
onNext={handlePlayer2Next}
|
||||
onCancel={() => setNewGameStep('player1')}
|
||||
initialValue={newGameData.player2}
|
||||
/>
|
||||
)}
|
||||
{newGameStep === 'player3' && (
|
||||
<div style={{ padding: 40, textAlign: 'center' }}>
|
||||
<h2>Player 3 Step (TODO)</h2>
|
||||
<button onClick={() => handlePlayer3Next('')}>Skip</button>
|
||||
</div>
|
||||
)}
|
||||
{newGameStep === 'gameType' && (
|
||||
<div style={{ padding: 40, textAlign: 'center' }}>
|
||||
<h2>Game Type Step (TODO)</h2>
|
||||
<button onClick={() => handleGameTypeNext('8-Ball')}>8-Ball</button>
|
||||
</div>
|
||||
)}
|
||||
{newGameStep === 'raceTo' && (
|
||||
<div style={{ padding: 40, textAlign: 'center' }}>
|
||||
<h2>Race To Step (TODO)</h2>
|
||||
<button onClick={() => handleRaceToNext(5)}>5</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -144,4 +144,143 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
|
||||
);
|
||||
};
|
||||
|
||||
export default Player1Step;
|
||||
/**
|
||||
* Player 2 input step for multi-step game creation wizard.
|
||||
* @param {object} props
|
||||
* @param {string[]} props.playerNameHistory
|
||||
* @param {Function} props.onNext
|
||||
* @param {Function} props.onCancel
|
||||
* @param {string} [props.initialValue]
|
||||
* @returns {import('preact').VNode}
|
||||
*/
|
||||
const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }) => {
|
||||
const [player2, setPlayer2] = useState(initialValue);
|
||||
const [error, setError] = useState(null);
|
||||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!player2) {
|
||||
setFilteredNames(playerNameHistory);
|
||||
} else {
|
||||
setFilteredNames(
|
||||
playerNameHistory.filter(name =>
|
||||
name.toLowerCase().includes(player2.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [player2, playerNameHistory]);
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!player2.trim()) {
|
||||
setError('Bitte Namen für Spieler 2 eingeben');
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
onNext(player2.trim());
|
||||
};
|
||||
|
||||
const handleQuickPick = (name) => {
|
||||
setError(null);
|
||||
onNext(name);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setPlayer2('');
|
||||
setError(null);
|
||||
if (inputRef.current) inputRef.current.focus();
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 2 Eingabe" autoComplete="off">
|
||||
<div className={styles['screen-title']}>Neues Spiel – Schritt 2/5</div>
|
||||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
<span className={styles['progress-dot']} />
|
||||
</div>
|
||||
<div className={styles['player-input']} style={{ marginBottom: 32, position: 'relative' }}>
|
||||
<label htmlFor="player2-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 2</label>
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<input
|
||||
id="player2-input"
|
||||
className={styles['name-input']}
|
||||
placeholder="Name Spieler 2"
|
||||
value={player2}
|
||||
onInput={e => setPlayer2(e.target.value)}
|
||||
autoFocus
|
||||
autoComplete="off"
|
||||
aria-label="Name Spieler 2"
|
||||
style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
|
||||
ref={inputRef}
|
||||
/>
|
||||
{player2 && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles['clear-input-btn']}
|
||||
aria-label="Feld leeren"
|
||||
onClick={handleClear}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: 24,
|
||||
color: '#aaa',
|
||||
padding: 0,
|
||||
zIndex: 2
|
||||
}}
|
||||
tabIndex={0}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{filteredNames.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
|
||||
{filteredNames.slice(0, 4).map((name, idx) => (
|
||||
<button
|
||||
type="button"
|
||||
key={name + idx}
|
||||
className={styles['quick-pick-btn']}
|
||||
style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
|
||||
onClick={() => handleQuickPick(name)}
|
||||
aria-label={`Schnellauswahl: ${name}`}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
|
||||
<div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Zurück"
|
||||
onClick={onCancel}
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles['arrow-btn']}
|
||||
aria-label="Weiter"
|
||||
style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export { Player1Step, Player2Step };
|
||||
Reference in New Issue
Block a user