refactor(new-game): extract Player2Step and Player3Step modules
Refs #30 - Add Player2Step.tsx and Player3Step.tsx under src/components/new-game - Replace inline definitions with imports in NewGame.tsx - No behavior changes
This commit is contained in:
Frank Schwenk
@@ -16,6 +16,8 @@ import {
|
|||||||
ERROR_STYLES
|
ERROR_STYLES
|
||||||
} from '../utils/constants';
|
} from '../utils/constants';
|
||||||
import { Player1Step } from './new-game/Player1Step';
|
import { Player1Step } from './new-game/Player1Step';
|
||||||
|
import { Player2Step } from './new-game/Player2Step';
|
||||||
|
import { Player3Step } from './new-game/Player3Step';
|
||||||
import type { BreakRule } from '../types/game';
|
import type { BreakRule } from '../types/game';
|
||||||
|
|
||||||
// PlayerSelectModal moved to ./new-game/PlayerSelectModal
|
// PlayerSelectModal moved to ./new-game/PlayerSelectModal
|
||||||
@@ -29,310 +31,9 @@ interface PlayerStepProps {
|
|||||||
|
|
||||||
// Player1Step moved to ./new-game/Player1Step
|
// Player1Step moved to ./new-game/Player1Step
|
||||||
|
|
||||||
/**
|
// Player2Step moved to ./new-game/Player2Step
|
||||||
* Player 2 input step for multi-step game creation wizard.
|
|
||||||
*/
|
|
||||||
const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
|
|
||||||
const [player2, setPlayer2] = useState(initialValue);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
// Player3Step moved to ./new-game/Player3Step
|
||||||
const el = inputRef.current;
|
|
||||||
if (el) {
|
|
||||||
el.focus();
|
|
||||||
const end = el.value.length;
|
|
||||||
try {
|
|
||||||
el.setSelectionRange(end, end);
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!player2) {
|
|
||||||
setFilteredNames(playerNameHistory);
|
|
||||||
} else {
|
|
||||||
setFilteredNames(
|
|
||||||
playerNameHistory.filter(name =>
|
|
||||||
name.toLowerCase().includes(player2.toLowerCase())
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, [player2, playerNameHistory]);
|
|
||||||
|
|
||||||
const handleSubmit = (e: Event) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!player2.trim()) {
|
|
||||||
setError('Bitte Namen für Spieler 2 eingeben');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setError(null);
|
|
||||||
onNext(player2.trim());
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleQuickPick = (name: string) => {
|
|
||||||
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']}>Name Spieler 2</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']} />
|
|
||||||
<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: Event) => {
|
|
||||||
const target = e.target as HTMLInputElement;
|
|
||||||
setPlayer2(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"
|
|
||||||
disabled={!player2.trim()}
|
|
||||||
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: !player2.trim() ? 0.5 : 1 }}
|
|
||||||
>
|
|
||||||
→
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Player 3 input step for multi-step game creation wizard.
|
|
||||||
*/
|
|
||||||
const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
|
|
||||||
const [player3, setPlayer3] = useState(initialValue);
|
|
||||||
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const el = inputRef.current;
|
|
||||||
if (el) {
|
|
||||||
el.focus();
|
|
||||||
const end = el.value.length;
|
|
||||||
try {
|
|
||||||
el.setSelectionRange(end, end);
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!player3) {
|
|
||||||
setFilteredNames(playerNameHistory);
|
|
||||||
} else {
|
|
||||||
setFilteredNames(
|
|
||||||
playerNameHistory.filter(name =>
|
|
||||||
name.toLowerCase().includes(player3.toLowerCase())
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, [player3, playerNameHistory]);
|
|
||||||
|
|
||||||
const handleSubmit = (e: Event) => {
|
|
||||||
e.preventDefault();
|
|
||||||
// Player 3 is optional, so always allow submission
|
|
||||||
onNext(player3.trim());
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleQuickPick = (name: string) => {
|
|
||||||
onNext(name);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClear = () => {
|
|
||||||
setPlayer3('');
|
|
||||||
if (inputRef.current) inputRef.current.focus();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSkip = (e: Event) => {
|
|
||||||
e.preventDefault();
|
|
||||||
onNext('');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
|
|
||||||
<div className={styles['screen-title']}>Name Spieler 3 (optional)</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']} />
|
|
||||||
<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: Event) => {
|
|
||||||
const target = e.target as HTMLInputElement;
|
|
||||||
setPlayer3(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"
|
|
||||||
disabled={!player3.trim()}
|
|
||||||
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: !player3.trim() ? 0.5 : 1 }}
|
|
||||||
>
|
|
||||||
→
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface GameTypeStepProps {
|
interface GameTypeStepProps {
|
||||||
onNext: (type: string) => void;
|
onNext: (type: string) => void;
|
||||||
|
|||||||
158
src/components/new-game/Player2Step.tsx
Normal file
158
src/components/new-game/Player2Step.tsx
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
import { h } from 'preact';
|
||||||
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||||
|
import styles from '../NewGame.module.css';
|
||||||
|
|
||||||
|
interface PlayerStepProps {
|
||||||
|
playerNameHistory: string[];
|
||||||
|
onNext: (name: string) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
initialValue?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
|
||||||
|
const [player2, setPlayer2] = useState(initialValue);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = inputRef.current;
|
||||||
|
if (el) {
|
||||||
|
el.focus();
|
||||||
|
const end = el.value.length;
|
||||||
|
try {
|
||||||
|
el.setSelectionRange(end, end);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!player2) {
|
||||||
|
setFilteredNames(playerNameHistory);
|
||||||
|
} else {
|
||||||
|
setFilteredNames(
|
||||||
|
playerNameHistory.filter(name =>
|
||||||
|
name.toLowerCase().includes(player2.toLowerCase())
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [player2, playerNameHistory]);
|
||||||
|
|
||||||
|
const handleSubmit = (e: Event) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!player2.trim()) {
|
||||||
|
setError('Bitte Namen für Spieler 2 eingeben');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setError(null);
|
||||||
|
onNext(player2.trim());
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleQuickPick = (name: string) => {
|
||||||
|
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']}>Name Spieler 2</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']} />
|
||||||
|
<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: Event) => {
|
||||||
|
const target = e.target as HTMLInputElement;
|
||||||
|
setPlayer2(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"
|
||||||
|
disabled={!player2.trim()}
|
||||||
|
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: !player2.trim() ? 0.5 : 1 }}
|
||||||
|
>
|
||||||
|
→
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
164
src/components/new-game/Player3Step.tsx
Normal file
164
src/components/new-game/Player3Step.tsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
import { h } from 'preact';
|
||||||
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||||
|
import styles from '../NewGame.module.css';
|
||||||
|
|
||||||
|
interface PlayerStepProps {
|
||||||
|
playerNameHistory: string[];
|
||||||
|
onNext: (name: string) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
initialValue?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
|
||||||
|
const [player3, setPlayer3] = useState(initialValue);
|
||||||
|
const [filteredNames, setFilteredNames] = useState(playerNameHistory);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = inputRef.current;
|
||||||
|
if (el) {
|
||||||
|
el.focus();
|
||||||
|
const end = el.value.length;
|
||||||
|
try {
|
||||||
|
el.setSelectionRange(end, end);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!player3) {
|
||||||
|
setFilteredNames(playerNameHistory);
|
||||||
|
} else {
|
||||||
|
setFilteredNames(
|
||||||
|
playerNameHistory.filter(name =>
|
||||||
|
name.toLowerCase().includes(player3.toLowerCase())
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [player3, playerNameHistory]);
|
||||||
|
|
||||||
|
const handleSubmit = (e: Event) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext(player3.trim());
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleQuickPick = (name: string) => {
|
||||||
|
onNext(name);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClear = () => {
|
||||||
|
setPlayer3('');
|
||||||
|
if (inputRef.current) inputRef.current.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSkip = (e: Event) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
|
||||||
|
<div className={styles['screen-title']}>Name Spieler 3 (optional)</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']} />
|
||||||
|
<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: Event) => {
|
||||||
|
const target = e.target as HTMLInputElement;
|
||||||
|
setPlayer3(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"
|
||||||
|
disabled={!player3.trim()}
|
||||||
|
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: !player3.trim() ? 0.5 : 1 }}
|
||||||
|
>
|
||||||
|
→
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user