8bbe3b9b70
- Remove EndlosGame support and GameDetail141.jsx component - Add Toast notification system with CSS styling - Refactor GameCompletionModal with enhanced styling - Improve GameDetail component structure and styling - Add BaseLayout.astro for consistent page structure - Update gameService with cleaner logic - Enhance global styles and remove unused constants - Streamline navigation components
656 lines
23 KiB
JavaScript
656 lines
23 KiB
JavaScript
import { h } from 'preact';
|
||
import { useState, useEffect, useRef } from 'preact/hooks';
|
||
import styles from './NewGame.module.css';
|
||
import modalStyles from './PlayerSelectModal.module.css';
|
||
|
||
const PlayerSelectModal = ({ players, onSelect, onClose }) => (
|
||
<div className={modalStyles.modalOverlay} onClick={onClose}>
|
||
<div className={modalStyles.modalContent} onClick={e => e.stopPropagation()}>
|
||
<div className={modalStyles.modalHeader}>
|
||
<h3>Alle Spieler</h3>
|
||
<button className={modalStyles.closeButton} onClick={onClose}>×</button>
|
||
</div>
|
||
<div className={modalStyles.playerList}>
|
||
{players.map(player => (
|
||
<button key={player} className={modalStyles.playerItem} onClick={() => onSelect(player)}>
|
||
{player}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
/**
|
||
* Player 1 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 Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }) => {
|
||
const [player1, setPlayer1] = useState(initialValue);
|
||
const [error, setError] = useState(null);
|
||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const inputRef = useRef(null);
|
||
|
||
useEffect(() => {
|
||
if (!player1) {
|
||
setFilteredNames(playerNameHistory);
|
||
} else {
|
||
setFilteredNames(
|
||
playerNameHistory.filter(name =>
|
||
name.toLowerCase().includes(player1.toLowerCase())
|
||
)
|
||
);
|
||
}
|
||
}, [player1, playerNameHistory]);
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
if (!player1.trim()) {
|
||
setError('Bitte Namen für Spieler 1 eingeben');
|
||
return;
|
||
}
|
||
setError(null);
|
||
onNext(player1.trim());
|
||
};
|
||
|
||
const handleQuickPick = (name) => {
|
||
setError(null);
|
||
onNext(name);
|
||
};
|
||
|
||
const handleModalSelect = (name) => {
|
||
setIsModalOpen(false);
|
||
handleQuickPick(name);
|
||
};
|
||
|
||
const handleClear = () => {
|
||
setPlayer1('');
|
||
setError(null);
|
||
if (inputRef.current) inputRef.current.focus();
|
||
};
|
||
|
||
return (
|
||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off">
|
||
<div className={styles['screen-title']}>Neues Spiel – Schritt 1/5</div>
|
||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
</div>
|
||
<div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: 32, position: 'relative' }}>
|
||
<label htmlFor="player1-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 1</label>
|
||
<div style={{ position: 'relative', width: '100%' }}>
|
||
<input
|
||
id="player1-input"
|
||
className={styles['name-input']}
|
||
placeholder="Name Spieler 1"
|
||
value={player1}
|
||
onInput={e => setPlayer1(e.target.value)}
|
||
autoComplete="off"
|
||
aria-label="Name Spieler 1"
|
||
style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
|
||
ref={inputRef}
|
||
/>
|
||
{player1 && (
|
||
<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}
|
||
>
|
||
{/* Unicode heavy multiplication X */}
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
{filteredNames.length > 0 && (
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
|
||
{filteredNames.slice(0, 10).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>
|
||
))}
|
||
{playerNameHistory.length > 10 && (
|
||
<button
|
||
type="button"
|
||
className={styles['quick-pick-btn']}
|
||
style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
|
||
onClick={() => setIsModalOpen(true)}
|
||
aria-label="Weitere Spieler anzeigen"
|
||
>
|
||
...
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
|
||
{isModalOpen && (
|
||
<PlayerSelectModal
|
||
players={playerNameHistory}
|
||
onSelect={handleModalSelect}
|
||
onClose={() => setIsModalOpen(false)}
|
||
/>
|
||
)}
|
||
<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' }}
|
||
>
|
||
{/* Unicode left arrow */}
|
||
←
|
||
</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' }}
|
||
>
|
||
{/* Unicode right arrow */}
|
||
→
|
||
</button>
|
||
</div>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 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'] + ' ' + styles['player2-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)}
|
||
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, 10).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>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* Player 3 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 Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }) => {
|
||
const [player3, setPlayer3] = useState(initialValue);
|
||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||
const inputRef = useRef(null);
|
||
|
||
useEffect(() => {
|
||
if (!player3) {
|
||
setFilteredNames(playerNameHistory);
|
||
} else {
|
||
setFilteredNames(
|
||
playerNameHistory.filter(name =>
|
||
name.toLowerCase().includes(player3.toLowerCase())
|
||
)
|
||
);
|
||
}
|
||
}, [player3, playerNameHistory]);
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
// Player 3 is optional, so always allow submission
|
||
onNext(player3.trim());
|
||
};
|
||
|
||
const handleQuickPick = (name) => {
|
||
onNext(name);
|
||
};
|
||
|
||
const handleClear = () => {
|
||
setPlayer3('');
|
||
if (inputRef.current) inputRef.current.focus();
|
||
};
|
||
|
||
const handleSkip = (e) => {
|
||
e.preventDefault();
|
||
onNext('');
|
||
};
|
||
|
||
return (
|
||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
|
||
<div className={styles['screen-title']}>Neues Spiel – Schritt 3/5</div>
|
||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
</div>
|
||
<div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
|
||
<label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
|
||
<div style={{ position: 'relative', width: '100%' }}>
|
||
<input
|
||
id="player3-input"
|
||
className={styles['name-input']}
|
||
placeholder="Name Spieler 3 (optional)"
|
||
value={player3}
|
||
onInput={e => setPlayer3(e.target.value)}
|
||
autoComplete="off"
|
||
aria-label="Name Spieler 3"
|
||
style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
|
||
ref={inputRef}
|
||
/>
|
||
{player3 && (
|
||
<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, 10).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>
|
||
<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>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||
<button
|
||
type="button"
|
||
onClick={handleSkip}
|
||
className={styles['quick-pick-btn']}
|
||
style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
|
||
>
|
||
Überspringen
|
||
</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>
|
||
</div>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* Game Type selection step for multi-step game creation wizard.
|
||
* @param {object} props
|
||
* @param {Function} props.onNext
|
||
* @param {Function} props.onCancel
|
||
* @param {string} [props.initialValue]
|
||
* @returns {import('preact').VNode}
|
||
*/
|
||
const GameTypeStep = ({ onNext, onCancel, initialValue = '' }) => {
|
||
const [gameType, setGameType] = useState(initialValue);
|
||
const gameTypes = ['8-Ball', '9-Ball', '10-Ball'];
|
||
|
||
const handleSelect = (selectedType) => {
|
||
setGameType(selectedType);
|
||
};
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
if (gameType) {
|
||
onNext(gameType);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen">
|
||
<div className={styles['screen-title']}>Neues Spiel – Schritt 4/5</div>
|
||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||
<span className={styles['progress-dot']} />
|
||
</div>
|
||
<div className={styles['game-type-selection']}>
|
||
{gameTypes.map(type => (
|
||
<button
|
||
key={type}
|
||
type="button"
|
||
className={`${styles['game-type-btn']} ${gameType === type ? styles.selected : ''}`}
|
||
onClick={() => handleSelect(type)}
|
||
>
|
||
{type}
|
||
</button>
|
||
))}
|
||
</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' }}
|
||
>
|
||
{/* Unicode left arrow */}
|
||
←
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className={styles['arrow-btn']}
|
||
aria-label="Weiter"
|
||
disabled={!gameType}
|
||
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',
|
||
opacity: !gameType ? 0.5 : 1,
|
||
}}
|
||
>
|
||
{/* Unicode right arrow */}
|
||
→
|
||
</button>
|
||
</div>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* Race To selection step for multi-step game creation wizard.
|
||
* @param {object} props
|
||
* @param {Function} props.onNext
|
||
* @param {Function} props.onCancel
|
||
* @param {string|number} [props.initialValue]
|
||
* @param {string} [props.gameType]
|
||
* @returns {import('preact').VNode}
|
||
*/
|
||
const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }) => {
|
||
const quickPicks = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||
const defaultValue = 5;
|
||
const [raceTo, setRaceTo] = useState(initialValue !== '' ? initialValue : defaultValue);
|
||
|
||
useEffect(() => {
|
||
if ((initialValue === '' || initialValue === undefined) && raceTo !== defaultValue) {
|
||
setRaceTo(defaultValue);
|
||
}
|
||
if (initialValue !== '' && initialValue !== undefined && initialValue !== raceTo) {
|
||
setRaceTo(initialValue);
|
||
}
|
||
}, [gameType, initialValue, defaultValue]);
|
||
|
||
const handleQuickPick = (value) => {
|
||
setRaceTo(value);
|
||
};
|
||
|
||
const handleInputChange = (e) => {
|
||
setRaceTo(e.target.value);
|
||
};
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
onNext(parseInt(raceTo, 10) || 0);
|
||
};
|
||
|
||
return (
|
||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Race To auswählen">
|
||
<div className={styles['screen-title']}>Neues Spiel – Schritt 5/5</div>
|
||
<div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot']} />
|
||
<span className={styles['progress-dot'] + ' ' + styles['active']} />
|
||
</div>
|
||
<div className={styles['endlos-container']}>
|
||
<button
|
||
type="button"
|
||
className={`${styles['race-to-btn']} ${styles['endlos-btn']} ${raceTo === 0 ? styles.selected : ''}`}
|
||
onClick={() => handleQuickPick(0)}
|
||
>
|
||
Endlos
|
||
</button>
|
||
</div>
|
||
<div className={styles['race-to-selection']}>
|
||
{quickPicks.map(value => (
|
||
<button
|
||
key={value}
|
||
type="button"
|
||
className={`${styles['race-to-btn']} ${parseInt(raceTo, 10) === value ? styles.selected : ''}`}
|
||
onClick={() => handleQuickPick(value)}
|
||
>
|
||
{value}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className={styles['custom-race-to']}>
|
||
<input
|
||
type="number"
|
||
pattern="[0-9]*"
|
||
value={raceTo}
|
||
onInput={handleInputChange}
|
||
className={styles['name-input']}
|
||
placeholder="manuelle Eingabe"
|
||
/>
|
||
</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' }}
|
||
>
|
||
{/* Unicode left arrow */}
|
||
←
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className={styles['arrow-btn']}
|
||
aria-label="Fertigstellen"
|
||
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' }}
|
||
>
|
||
{/* Unicode checkmark */}
|
||
✓
|
||
</button>
|
||
</div>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
export { Player1Step, Player2Step, Player3Step, GameTypeStep, RaceToStep };
|