refactor: apply Astro, Preact, and general best practices to src
- Refactored all components in src/components to: - Use arrow function components and prop destructuring - Add JSDoc for all exported components - Improve accessibility (aria-labels, roles, etc.) - Use correct key usage in lists - Add comments for non-obvious logic - Use modern event handler patterns and memoization where appropriate - Refactored src/pages/index.astro: - Removed <html>, <head>, and <body> (should be in layout) - Used semantic <main> for main content - Kept only necessary imports and markup - Refactored src/styles/index.css: - Removed duplicate rules - Ensured only global resets/utilities are present - Added comments for clarity - Ensured no component-specific styles are present - Used consistent formatting Brings the codebase in line with modern Astro and Preact best practices, improves maintainability, accessibility, and code clarity.
This commit is contained in:
Frank Schwenk
@@ -2,7 +2,17 @@ import { h } from 'preact';
|
||||
import { useState, useEffect } from 'preact/hooks';
|
||||
import styles from './NewGame.module.css';
|
||||
|
||||
export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onGameCreated, initialValues }) {
|
||||
/**
|
||||
* New game creation form.
|
||||
* @param {object} props
|
||||
* @param {Function} props.onCreateGame
|
||||
* @param {string[]} props.playerNameHistory
|
||||
* @param {Function} props.onCancel
|
||||
* @param {Function} props.onGameCreated
|
||||
* @param {object} props.initialValues
|
||||
* @returns {import('preact').VNode}
|
||||
*/
|
||||
const NewGame = ({ onCreateGame, playerNameHistory, onCancel, onGameCreated, initialValues }) => {
|
||||
const [player1, setPlayer1] = useState(initialValues?.player1 || '');
|
||||
const [player2, setPlayer2] = useState(initialValues?.player2 || '');
|
||||
const [player3, setPlayer3] = useState(initialValues?.player3 || '');
|
||||
@@ -19,7 +29,7 @@ export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onG
|
||||
setError(null);
|
||||
}, [initialValues]);
|
||||
|
||||
function handleSubmit(e) {
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!player1.trim() || !player2.trim()) {
|
||||
setError('Bitte Namen für beide Spieler eingeben');
|
||||
@@ -35,71 +45,73 @@ export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onG
|
||||
if (onGameCreated && id) {
|
||||
onGameCreated(id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function handleClear() {
|
||||
const handleClear = () => {
|
||||
setPlayer1('');
|
||||
setPlayer2('');
|
||||
setPlayer3('');
|
||||
setGameType('8-Ball');
|
||||
setRaceTo('');
|
||||
setError(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit}>
|
||||
<form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Neues Spiel Formular">
|
||||
<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>
|
||||
<button type="button" className={styles['btn']} onClick={handleClear} aria-label="Felder leeren">Felder leeren</button>
|
||||
</div>
|
||||
<div className={styles['player-inputs']}>
|
||||
<div className={styles['player-input']}>
|
||||
<label>Spieler 1</label>
|
||||
<label htmlFor="player1-input">Spieler 1</label>
|
||||
<div className={styles['name-input-container']}>
|
||||
<input className={styles['name-input']} placeholder="Name Spieler 1" value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" />
|
||||
<input id="player1-input" className={styles['name-input']} placeholder="Name Spieler 1" value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" aria-label="Name Spieler 1" />
|
||||
<datalist id="player1-history">
|
||||
{playerNameHistory.map(name => <option value={name} key={name} />)}
|
||||
{playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['player-input']}>
|
||||
<label>Spieler 2</label>
|
||||
<label htmlFor="player2-input">Spieler 2</label>
|
||||
<div className={styles['name-input-container']}>
|
||||
<input className={styles['name-input']} placeholder="Name Spieler 2" value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" />
|
||||
<input id="player2-input" className={styles['name-input']} placeholder="Name Spieler 2" value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" aria-label="Name Spieler 2" />
|
||||
<datalist id="player2-history">
|
||||
{playerNameHistory.map(name => <option value={name} key={name} />)}
|
||||
{playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['player-input']}>
|
||||
<label>Spieler 3 (optional)</label>
|
||||
<label htmlFor="player3-input">Spieler 3 (optional)</label>
|
||||
<div className={styles['name-input-container']}>
|
||||
<input className={styles['name-input']} placeholder="Name Spieler 3" value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" />
|
||||
<input id="player3-input" className={styles['name-input']} placeholder="Name Spieler 3" value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" aria-label="Name Spieler 3" />
|
||||
<datalist id="player3-history">
|
||||
{playerNameHistory.map(name => <option value={name} key={name} />)}
|
||||
{playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['game-settings']}>
|
||||
<div className={styles['setting-group']}>
|
||||
<label>Spieltyp</label>
|
||||
<select value={gameType} onChange={e => setGameType(e.target.value)}>
|
||||
<label htmlFor="game-type-select">Spieltyp</label>
|
||||
<select id="game-type-select" value={gameType} onChange={e => setGameType(e.target.value)} aria-label="Spieltyp">
|
||||
<option value="8-Ball">8-Ball</option>
|
||||
<option value="9-Ball">9-Ball</option>
|
||||
<option value="10-Ball">10-Ball</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className={styles['setting-group']}>
|
||||
<label>Race to X (optional)</label>
|
||||
<input type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" />
|
||||
<label htmlFor="race-to-input">Race to X (optional)</label>
|
||||
<input id="race-to-input" type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" aria-label="Race to X" />
|
||||
</div>
|
||||
</div>
|
||||
{error && <div className={styles['validation-error']}>{error}</div>}
|
||||
<div className={styles['nav-buttons']}>
|
||||
<button type="button" className={styles['btn']} onClick={onCancel}>Abbrechen</button>
|
||||
<button type="submit" className={styles['btn']}>Spiel starten</button>
|
||||
<button type="button" className={styles['btn']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
|
||||
<button type="submit" className={styles['btn']} aria-label="Spiel starten">Spiel starten</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NewGame;
|
||||
Reference in New Issue
Block a user