froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: apply Astro, Preact, and general best practices to src

Browse Source 
- 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
2025-06-06 16:28:57 +02:00
parent 7cb79f5ee3
commit 209df5d9f2
10 changed files with 281 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/App.jsx
View File

@@ -1,5 +1,5 @@
import { h } from 'preact'; import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks'; import { useState, useEffect, useCallback } from 'preact/hooks';
import GameList from './GameList.jsx'; import GameList from './GameList.jsx';
import GameDetail from './GameDetail.jsx'; import GameDetail from './GameDetail.jsx';
import NewGame from './NewGame.jsx'; import NewGame from './NewGame.jsx';
@@ -10,12 +10,15 @@ import FullscreenToggle from './FullscreenToggle.jsx';
const LOCAL_STORAGE_KEY = 'bscscore_games'; const LOCAL_STORAGE_KEY = 'bscscore_games';
export default function App() { /**
* Main App component for BSC Score
* @returns {import('preact').VNode}
*/
const App = () => {
const [games, setGames] = useState([]); const [games, setGames] = useState([]);
const [currentGameId, setCurrentGameId] = useState(null); const [currentGameId, setCurrentGameId] = useState(null);
const [playerNameHistory, setPlayerNameHistory] = useState([]); const [playerNameHistory, setPlayerNameHistory] = useState([]);
const [screen, setScreen] = useState('game-list'); const [screen, setScreen] = useState('game-list');
const [loading, setLoading] = useState(false);
const [modal, setModal] = useState({ open: false, gameId: null }); const [modal, setModal] = useState({ open: false, gameId: null });
const [validation, setValidation] = useState({ open: false, message: '' }); const [validation, setValidation] = useState({ open: false, message: '' });
const [completionModal, setCompletionModal] = useState({ open: false, game: null }); const [completionModal, setCompletionModal] = useState({ open: false, game: null });
@@ -45,21 +48,21 @@ export default function App() {
}, [games]); }, [games]);
// Navigation handlers // Navigation handlers
function showGameList() { const showGameList = useCallback(() => {
setScreen('game-list'); setScreen('game-list');
setCurrentGameId(null); setCurrentGameId(null);
} }, []);
function showNewGame() { const showNewGame = useCallback(() => {
setScreen('new-game'); setScreen('new-game');
setCurrentGameId(null); setCurrentGameId(null);
} }, []);
function showGameDetail(id) { const showGameDetail = useCallback((id) => {
setCurrentGameId(id); setCurrentGameId(id);
setScreen('game-detail'); setScreen('game-detail');
} }, []);
// Game creation // Game creation
function handleCreateGame({ player1, player2, player3, gameType, raceTo }) { const handleCreateGame = useCallback(({ player1, player2, player3, gameType, raceTo }) => {
const newGame = { const newGame = {
id: Date.now(), id: Date.now(),
player1, player1,
@@ -76,10 +79,10 @@ export default function App() {
}; };
setGames(g => [newGame, ...g]); setGames(g => [newGame, ...g]);
return newGame.id; return newGame.id;
} }, []);
// Score update // Score update
function handleUpdateScore(player, change) { const handleUpdateScore = useCallback((player, change) => {
setGames(games => games.map(game => { setGames(games => games.map(game => {
if (game.id !== currentGameId || game.status === 'completed') return game; if (game.id !== currentGameId || game.status === 'completed') return game;
const updated = { ...game }; const updated = { ...game };
@@ -93,103 +96,100 @@ export default function App() {
} }
return updated; return updated;
})); }));
} }, [currentGameId]);
// Finish game // Finish game
function handleFinishGame() { const handleFinishGame = useCallback(() => {
const game = games.find(g => g.id === currentGameId); const game = games.find(g => g.id === currentGameId);
if (!game) return; if (!game) return;
setCompletionModal({ open: true, game }); setCompletionModal({ open: true, game });
} }, [games, currentGameId]);
function handleConfirmCompletion() { const handleConfirmCompletion = useCallback(() => {
setGames(games => games.map(game => { setGames(games => games.map(game => {
if (game.id !== currentGameId) return game; if (game.id !== currentGameId) return game;
return { ...game, status: 'completed', updatedAt: new Date().toISOString() }; return { ...game, status: 'completed', updatedAt: new Date().toISOString() };
})); }));
setCompletionModal({ open: false, game: null }); setCompletionModal({ open: false, game: null });
setScreen('game-detail'); setScreen('game-detail');
} }, [currentGameId]);
// Delete game // Delete game
function handleDeleteGame(id) { const handleDeleteGame = useCallback((id) => {
setModal({ open: true, gameId: id }); setModal({ open: true, gameId: id });
} }, []);
function handleConfirmDelete() { const handleConfirmDelete = useCallback(() => {
setGames(games => games.filter(g => g.id !== modal.gameId)); setGames(games => games.filter(g => g.id !== modal.gameId));
setModal({ open: false, gameId: null }); setModal({ open: false, gameId: null });
setScreen('game-list'); setScreen('game-list');
} }, [modal.gameId]);
function handleCancelDelete() { const handleCancelDelete = useCallback(() => {
setModal({ open: false, gameId: null }); setModal({ open: false, gameId: null });
} }, []);
// Validation modal // Validation modal
function showValidation(message) { const showValidation = useCallback((message) => {
setValidation({ open: true, message }); setValidation({ open: true, message });
} }, []);
function closeValidation() { const closeValidation = useCallback(() => {
setValidation({ open: false, message: '' }); setValidation({ open: false, message: '' });
} }, []);
// Render
return ( return (
<> <div className="screen-container">
<div className="screen-container"> {screen === 'game-list' && (
{screen === 'game-list' && ( <div className="screen active">
<div className="screen active"> <div className="screen-content">
<div className="screen-content"> <button className="nav-button new-game-button" onClick={showNewGame} aria-label="Neues Spiel starten">Neues Spiel</button>
<button className="nav-button new-game-button" onClick={showNewGame}>Neues Spiel</button> <GameList
<GameList games={games}
games={games} filter={filter}
filter={filter} onShowGameDetail={showGameDetail}
onShowGameDetail={showGameDetail} onDeleteGame={handleDeleteGame}
onDeleteGame={handleDeleteGame} setFilter={setFilter}
setFilter={setFilter} />
/>
</div>
</div> </div>
)} </div>
{screen === 'new-game' && ( )}
<div className="screen active"> {screen === 'new-game' && (
<div className="screen-content"> <div className="screen active">
<NewGame <div className="screen-content">
onCreateGame={handleCreateGame} <NewGame
playerNameHistory={playerNameHistory} onCreateGame={handleCreateGame}
onCancel={showGameList} playerNameHistory={playerNameHistory}
onGameCreated={id => { onCancel={showGameList}
setCurrentGameId(id); onGameCreated={id => {
setScreen('game-detail'); setCurrentGameId(id);
}} setScreen('game-detail');
initialValues={games[0]} }}
/> initialValues={games[0]}
</div> />
</div> </div>
)} </div>
{screen === 'game-detail' && ( )}
<div className="screen active"> {screen === 'game-detail' && (
<div className="screen-content"> <div className="screen active">
<GameDetail <div className="screen-content">
game={games.find(g => g.id === currentGameId)} <GameDetail
onFinishGame={handleFinishGame} game={games.find(g => g.id === currentGameId)}
onUpdateScore={handleUpdateScore} onFinishGame={handleFinishGame}
onBack={showGameList} onUpdateScore={handleUpdateScore}
/> onBack={showGameList}
</div> />
</div> </div>
)} </div>
<Modal )}
open={modal.open} <Modal
title="Spiel löschen" open={modal.open}
message="Möchten Sie das Spiel wirklich löschen?" title="Spiel löschen"
onCancel={handleCancelDelete} message="Möchten Sie das Spiel wirklich löschen?"
onConfirm={handleConfirmDelete} onCancel={handleCancelDelete}
/> onConfirm={handleConfirmDelete}
<ValidationModal />
open={validation.open} <ValidationModal
message={validation.message} open={validation.open}
onClose={closeValidation} message={validation.message}
/> onClose={closeValidation}
</div> />
<GameCompletionModal <GameCompletionModal
open={completionModal.open} open={completionModal.open}
game={completionModal.game} game={completionModal.game}
@@ -197,6 +197,8 @@ export default function App() {
onClose={() => setCompletionModal({ open: false, game: null })} onClose={() => setCompletionModal({ open: false, game: null })}
/> />
<FullscreenToggle /> <FullscreenToggle />
</> </div>
); );
} };
export default App;

15
src/components/FullscreenToggle.jsx
View File

@@ -2,7 +2,12 @@ import { h } from 'preact';
import { useCallback } from 'preact/hooks'; import { useCallback } from 'preact/hooks';
import styles from './FullscreenToggle.module.css'; import styles from './FullscreenToggle.module.css';
export default function FullscreenToggle() { /**
* Button to toggle fullscreen mode.
* @returns {import('preact').VNode}
*/
const FullscreenToggle = () => {
// Toggle fullscreen mode for the document
const handleToggle = useCallback(() => { const handleToggle = useCallback(() => {
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
document.documentElement.requestFullscreen(); document.documentElement.requestFullscreen();
@@ -17,10 +22,14 @@ export default function FullscreenToggle() {
className={styles.fullscreenToggle} className={styles.fullscreenToggle}
onClick={handleToggle} onClick={handleToggle}
title="Vollbild umschalten" title="Vollbild umschalten"
aria-label="Vollbild umschalten"
type="button"
> >
<svg viewBox="0 0 24 24" width="24" height="24"> <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/> <path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
</svg> </svg>
</button> </button>
); );
} };
export default FullscreenToggle;

28
src/components/GameCompletionModal.jsx
View File

@@ -1,26 +1,36 @@
import { h } from 'preact'; import { h } from 'preact';
import styles from './GameCompletionModal.module.css'; import styles from './GameCompletionModal.module.css';
export default function GameCompletionModal({ open, game, onConfirm, onClose }) { /**
* Modal shown when a game is completed.
* @param {object} props
* @param {boolean} props.open
* @param {object} props.game
* @param {Function} props.onConfirm
* @param {Function} props.onClose
* @returns {import('preact').VNode|null}
*/
const GameCompletionModal = ({ open, game, onConfirm, onClose }) => {
if (!open || !game) return null; if (!open || !game) return null;
const playerNames = [game.player1, game.player2, game.player3].filter(Boolean); const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]); const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
const maxScore = Math.max(...scores); const maxScore = Math.max(...scores);
// Find all winners (could be a tie)
const winners = playerNames.filter((name, idx) => scores[idx] === maxScore); const winners = playerNames.filter((name, idx) => scores[idx] === maxScore);
const winnerText = winners.length > 1 const winnerText = winners.length > 1
? `Unentschieden zwischen ${winners.join(' und ')}` ? `Unentschieden zwischen ${winners.join(' und ')}`
: `${winners[0]} hat gewonnen!`; : `${winners[0]} hat gewonnen!`;
return ( return (
<div id="game-completion-modal" className="modal show"> <div id="game-completion-modal" className="modal show" role="dialog" aria-modal="true" aria-labelledby="completion-modal-title">
<div className={styles['modal-content']}> <div className={styles['modal-content']}>
<div className={styles['modal-header']}> <div className={styles['modal-header']}>
<span className={styles['modal-title']}>Spiel beendet</span> <span className={styles['modal-title']} id="completion-modal-title">Spiel beendet</span>
<button className={styles['close-button']} onClick={onClose}>×</button> <button className={styles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
</div> </div>
<div className={styles['modal-body']}> <div className={styles['modal-body']}>
<div className={styles['final-scores']}> <div className={styles['final-scores']}>
{playerNames.map((name, idx) => ( {playerNames.map((name, idx) => (
<div className={styles['final-score']} key={name}> <div className={styles['final-score']} key={name + idx}>
<span className={styles['player-name']}>{name}</span> <span className={styles['player-name']}>{name}</span>
<span className={styles['score']}>{scores[idx]}</span> <span className={styles['score']}>{scores[idx]}</span>
</div> </div>
@@ -29,10 +39,12 @@ export default function GameCompletionModal({ open, game, onConfirm, onClose })
<div className={styles['winner-announcement']}><h3>{winnerText}</h3></div> <div className={styles['winner-announcement']}><h3>{winnerText}</h3></div>
</div> </div>
<div className={styles['modal-footer']}> <div className={styles['modal-footer']}>
<button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm}>Bestätigen</button> <button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm} aria-label="Bestätigen">Bestätigen</button>
<button className={styles['btn']} onClick={onClose}>Abbrechen</button> <button className={styles['btn']} onClick={onClose} aria-label="Abbrechen">Abbrechen</button>
</div> </div>
</div> </div>
</div> </div>
); );
} };
export default GameCompletionModal;

44
src/components/GameDetail.jsx
View File

@@ -1,7 +1,16 @@
import { h } from 'preact'; import { h } from 'preact';
import styles from './GameDetail.module.css'; import styles from './GameDetail.module.css';
export default function GameDetail({ game, onFinishGame, onUpdateScore, onBack }) { /**
* Game detail view for a single game.
* @param {object} props
* @param {object} props.game
* @param {Function} props.onFinishGame
* @param {Function} props.onUpdateScore
* @param {Function} props.onBack
* @returns {import('preact').VNode|null}
*/
const GameDetail = ({ game, onFinishGame, onUpdateScore, onBack }) => {
if (!game) return null; if (!game) return null;
const isCompleted = game.status === 'completed'; const isCompleted = game.status === 'completed';
const playerNames = [game.player1, game.player2, game.player3].filter(Boolean); const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
@@ -9,23 +18,38 @@ export default function GameDetail({ game, onFinishGame, onUpdateScore, onBack }
return ( return (
<div className={styles['game-detail']}> <div className={styles['game-detail']}>
<div className={styles['game-title']}>{game.gameType}{game.raceTo ? ` | Race to ${game.raceTo}` : ''}</div> <div className={styles['game-title']}>
{game.gameType}{game.raceTo ? ` | Race to ${game.raceTo}` : ''}
</div>
<div className={styles['scores-container']}> <div className={styles['scores-container']}>
{playerNames.map((name, idx) => ( {playerNames.map((name, idx) => (
<div className={ <div
styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '') className={styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')}
} key={name}> key={name + idx}
>
<span className={styles['player-name']}>{name}</span> <span className={styles['player-name']}>{name}</span>
<span className={styles['score']} id={`score${idx+1}`}>{scores[idx]}</span> <span className={styles['score']} id={`score${idx+1}`}>{scores[idx]}</span>
<button className={styles['score-button']} disabled={isCompleted} onClick={() => onUpdateScore(idx+1, -1)}>-</button> <button
<button className={styles['score-button']} disabled={isCompleted} onClick={() => onUpdateScore(idx+1, 1)}>+</button> className={styles['score-button']}
disabled={isCompleted}
onClick={() => onUpdateScore(idx+1, -1)}
aria-label={`Punkt abziehen für ${name}`}
>-</button>
<button
className={styles['score-button']}
disabled={isCompleted}
onClick={() => onUpdateScore(idx+1, 1)}
aria-label={`Punkt hinzufügen für ${name}`}
>+</button>
</div> </div>
))} ))}
</div> </div>
<div className={styles['game-detail-controls']}> <div className={styles['game-detail-controls']}>
<button className={styles['nav-button']} onClick={onBack}>Zurück zur Liste</button> <button className={styles['nav-button']} onClick={onBack} aria-label="Zurück zur Liste">Zurück zur Liste</button>
<button className={styles['nav-button']} disabled={isCompleted} onClick={onFinishGame}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button> <button className={styles['nav-button']} disabled={isCompleted} onClick={onFinishGame} aria-label={isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button>
</div> </div>
</div> </div>
); );
} };
export default GameDetail;

36
src/components/GameList.jsx
View File

@@ -1,7 +1,18 @@
import { h } from 'preact'; import { h } from 'preact';
import styles from './GameList.module.css'; import styles from './GameList.module.css';
export default function GameList({ games, filter = 'all', setFilter, onShowGameDetail, onDeleteGame }) { /**
* List of games with filter and delete options.
* @param {object} props
* @param {object[]} props.games
* @param {string} props.filter
* @param {Function} props.setFilter
* @param {Function} props.onShowGameDetail
* @param {Function} props.onDeleteGame
* @returns {import('preact').VNode}
*/
const GameList = ({ games, filter = 'all', setFilter, onShowGameDetail, onDeleteGame }) => {
// Filter and sort games
const filteredGames = games const filteredGames = games
.filter(game => { .filter(game => {
if (filter === 'active') return game.status === 'active'; if (filter === 'active') return game.status === 'active';
@@ -13,9 +24,9 @@ export default function GameList({ games, filter = 'all', setFilter, onShowGameD
return ( return (
<div className={styles['game-list'] + ' ' + styles['games-container']}> <div className={styles['game-list'] + ' ' + styles['games-container']}>
<div className={styles['filter-buttons']}> <div className={styles['filter-buttons']}>
<button className={styles['filter-button'] + (filter === 'all' ? ' ' + styles['active'] : '')} onClick={() => setFilter('all')}>Alle</button> <button className={styles['filter-button'] + (filter === 'all' ? ' ' + styles['active'] : '')} onClick={() => setFilter('all')} aria-label="Alle Spiele anzeigen">Alle</button>
<button className={styles['filter-button'] + (filter === 'active' ? ' ' + styles['active'] : '')} onClick={() => setFilter('active')}>Aktiv</button> <button className={styles['filter-button'] + (filter === 'active' ? ' ' + styles['active'] : '')} onClick={() => setFilter('active')} aria-label="Nur aktive Spiele anzeigen">Aktiv</button>
<button className={styles['filter-button'] + (filter === 'completed' ? ' ' + styles['active'] : '')} onClick={() => setFilter('completed')}>Abgeschlossen</button> <button className={styles['filter-button'] + (filter === 'completed' ? ' ' + styles['active'] : '')} onClick={() => setFilter('completed')} aria-label="Nur abgeschlossene Spiele anzeigen">Abgeschlossen</button>
</div> </div>
{filteredGames.length === 0 ? ( {filteredGames.length === 0 ? (
<div className={styles['empty-state']}>Keine Spiele vorhanden</div> <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
@@ -28,19 +39,24 @@ export default function GameList({ games, filter = 'all', setFilter, onShowGameD
? `${game.score1} - ${game.score2} - ${game.score3}` ? `${game.score1} - ${game.score2} - ${game.score3}`
: `${game.score1} - ${game.score2}`; : `${game.score1} - ${game.score2}`;
return ( return (
<div className={ <div
styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active']) className={
} key={game.id}> styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
<div className={styles['game-info']} onClick={() => onShowGameDetail(game.id)}> }
key={game.id}
>
<div className={styles['game-info']} onClick={() => onShowGameDetail(game.id)} role="button" tabIndex={0} aria-label={`Details für Spiel ${playerNames}`}>
<div className={styles['game-type']}>{game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}</div> <div className={styles['game-type']}>{game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}</div>
<div className={styles['player-names']}>{playerNames}</div> <div className={styles['player-names']}>{playerNames}</div>
<div className={styles['game-scores']}>{scores}</div> <div className={styles['game-scores']}>{scores}</div>
</div> </div>
<button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)}></button> <button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)} aria-label={`Spiel löschen: ${playerNames}`}></button>
</div> </div>
); );
}) })
)} )}
</div> </div>
); );
} };
export default GameList;

26
src/components/Modal.jsx
View File

@@ -1,23 +1,35 @@
import { h } from 'preact'; import { h } from 'preact';
import styles from './Modal.module.css'; import styles from './Modal.module.css';
export default function Modal({ open, title, message, onCancel, onConfirm }) { /**
* Generic modal dialog for confirmation.
* @param {object} props
* @param {boolean} props.open
* @param {string} props.title
* @param {string} props.message
* @param {Function} props.onCancel
* @param {Function} props.onConfirm
* @returns {import('preact').VNode|null}
*/
const Modal = ({ open, title, message, onCancel, onConfirm }) => {
if (!open) return null; if (!open) return null;
return ( return (
<div className={styles['modal'] + ' ' + styles['show']}> <div className={styles['modal'] + ' ' + styles['show']} role="dialog" aria-modal="true" aria-labelledby="modal-title">
<div className={styles['modal-content']}> <div className={styles['modal-content']}>
<div className={styles['modal-header']}> <div className={styles['modal-header']}>
<span className={styles['modal-title']}>{title}</span> <span className={styles['modal-title']} id="modal-title">{title}</span>
<button className={styles['close-button']} onClick={onCancel}>×</button> <button className={styles['close-button']} onClick={onCancel} aria-label="Schließen">×</button>
</div> </div>
<div className={styles['modal-body']}> <div className={styles['modal-body']}>
<div className={styles['modal-message']}>{message}</div> <div className={styles['modal-message']}>{message}</div>
</div> </div>
<div className={styles['modal-footer']}> <div className={styles['modal-footer']}>
<button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel}>Abbrechen</button> <button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
<button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm}>Löschen</button> <button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm} aria-label="Löschen">Löschen</button>
</div> </div>
</div> </div>
</div> </div>
); );
} };
export default Modal;

58
src/components/NewGame.jsx
View File

@@ -2,7 +2,17 @@ import { h } from 'preact';
import { useState, useEffect } 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, 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 [player1, setPlayer1] = useState(initialValues?.player1 || '');
const [player2, setPlayer2] = useState(initialValues?.player2 || ''); const [player2, setPlayer2] = useState(initialValues?.player2 || '');
const [player3, setPlayer3] = useState(initialValues?.player3 || ''); const [player3, setPlayer3] = useState(initialValues?.player3 || '');
@@ -19,7 +29,7 @@ export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onG
setError(null); setError(null);
}, [initialValues]); }, [initialValues]);
function handleSubmit(e) { const 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');
@@ -35,71 +45,73 @@ export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onG
if (onGameCreated && id) { if (onGameCreated && id) {
onGameCreated(id); onGameCreated(id);
} }
} };
function handleClear() { const handleClear = () => {
setPlayer1(''); setPlayer1('');
setPlayer2(''); setPlayer2('');
setPlayer3(''); setPlayer3('');
setGameType('8-Ball'); setGameType('8-Ball');
setRaceTo(''); setRaceTo('');
setError(null); setError(null);
} };
return ( 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 className={styles['screen-title']}>Neues Spiel</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}> <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>
<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 htmlFor="player1-input">Spieler 1</label>
<div className={styles['name-input-container']}> <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"> <datalist id="player1-history">
{playerNameHistory.map(name => <option value={name} key={name} />)} {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
</datalist> </datalist>
</div> </div>
</div> </div>
<div className={styles['player-input']}> <div className={styles['player-input']}>
<label>Spieler 2</label> <label htmlFor="player2-input">Spieler 2</label>
<div className={styles['name-input-container']}> <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"> <datalist id="player2-history">
{playerNameHistory.map(name => <option value={name} key={name} />)} {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
</datalist> </datalist>
</div> </div>
</div> </div>
<div className={styles['player-input']}> <div className={styles['player-input']}>
<label>Spieler 3 (optional)</label> <label htmlFor="player3-input">Spieler 3 (optional)</label>
<div className={styles['name-input-container']}> <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"> <datalist id="player3-history">
{playerNameHistory.map(name => <option value={name} key={name} />)} {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
</datalist> </datalist>
</div> </div>
</div> </div>
</div> </div>
<div className={styles['game-settings']}> <div className={styles['game-settings']}>
<div className={styles['setting-group']}> <div className={styles['setting-group']}>
<label>Spieltyp</label> <label htmlFor="game-type-select">Spieltyp</label>
<select value={gameType} onChange={e => setGameType(e.target.value)}> <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="8-Ball">8-Ball</option>
<option value="9-Ball">9-Ball</option> <option value="9-Ball">9-Ball</option>
<option value="10-Ball">10-Ball</option> <option value="10-Ball">10-Ball</option>
</select> </select>
</div> </div>
<div className={styles['setting-group']}> <div className={styles['setting-group']}>
<label>Race to X (optional)</label> <label htmlFor="race-to-input">Race to X (optional)</label>
<input type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" /> <input id="race-to-input" type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" aria-label="Race to X" />
</div> </div>
</div> </div>
{error && <div className={styles['validation-error']}>{error}</div>} {error && <div className={styles['validation-error']}>{error}</div>}
<div className={styles['nav-buttons']}> <div className={styles['nav-buttons']}>
<button type="button" className={styles['btn']} onClick={onCancel}>Abbrechen</button> <button type="button" className={styles['btn']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
<button type="submit" className={styles['btn']}>Spiel starten</button> <button type="submit" className={styles['btn']} aria-label="Spiel starten">Spiel starten</button>
</div> </div>
</form> </form>
); );
} };
export default NewGame;

22
src/components/ValidationModal.jsx
View File

@@ -1,22 +1,32 @@
import { h } from 'preact'; import { h } from 'preact';
import styles from './ValidationModal.module.css'; import styles from './ValidationModal.module.css';
export default function ValidationModal({ open, message, onClose }) { /**
* Modal for displaying validation errors.
* @param {object} props
* @param {boolean} props.open
* @param {string} props.message
* @param {Function} props.onClose
* @returns {import('preact').VNode|null}
*/
const ValidationModal = ({ open, message, onClose }) => {
if (!open) return null; if (!open) return null;
return ( return (
<div className={styles['modal'] + ' ' + styles['show']} id="validation-modal"> <div className={styles['modal'] + ' ' + styles['show']} id="validation-modal" role="alertdialog" aria-modal="true" aria-labelledby="validation-modal-title">
<div className={styles['modal-content']}> <div className={styles['modal-content']}>
<div className={styles['modal-header']}> <div className={styles['modal-header']}>
<span className={styles['modal-title']}>Fehler</span> <span className={styles['modal-title']} id="validation-modal-title">Fehler</span>
<button className={styles['close-button']} onClick={onClose}>×</button> <button className={styles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
</div> </div>
<div className={styles['modal-body']}> <div className={styles['modal-body']}>
<div className={styles['modal-message']}>{message}</div> <div className={styles['modal-message']}>{message}</div>
</div> </div>
<div className={styles['modal-footer']}> <div className={styles['modal-footer']}>
<button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onClose}>OK</button> <button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onClose} aria-label="OK">OK</button>
</div> </div>
</div> </div>
</div> </div>
); );
} };
export default ValidationModal;

24
src/pages/index.astro
View File

@@ -3,23 +3,7 @@ import "../styles/index.css";
import App from "../components/App.jsx"; import App from "../components/App.jsx";
--- ---
<html lang="de"> <!-- Main entry point for the Pool Scoring App -->
<head> <main class="screen-container">
<meta charset="UTF-8"> <App client:only="preact" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> </main>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="BSC Score">
<meta name="description" content="BSC Score - Pool Scoring App für den Billard Sport Club">
<meta name="theme-color" content="#000000">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="icon-192.png" />
<title>Pool Scoring</title>
</head>
<body>
<div class="screen-container">
<App client:only="preact" />
</div>
</body>
</html>

79
src/styles/index.css
View File

@@ -24,31 +24,7 @@ input, select {
font-size: 1.2rem; font-size: 1.2rem;
} }
/* Global resets and utility styles */ /* Responsive adjustments for fullscreen toggle button */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: Arial, sans-serif;
background-color: #1a1a1a;
color: white;
min-height: 100vh;
overscroll-behavior: none;
}
input, select {
min-height: 44px;
padding: 12px;
font-size: 1.2rem;
}
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.fullscreen-toggle { .fullscreen-toggle {
bottom: 15px; bottom: 15px;
@@ -58,38 +34,41 @@ input, select {
} }
} }
/* Utility button for new game (global, not component-specific) */
.new-game-button { .new-game-button {
width: 100%; width: 100%;
background: #222; background: #222;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 0; border-radius: 0;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
padding: 20px 0; padding: 20px 0;
margin-bottom: 16px; margin-bottom: 16px;
cursor: pointer; cursor: pointer;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
text-align: center; text-align: center;
display: block; display: block;
} }
.new-game-button:hover { .new-game-button:hover {
background: #333; background: #333;
} }
/* Modal overlay (global, not component-specific) */
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
z-index: 9999; z-index: 9999;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.modal.show { .modal.show {
display: flex; display: flex;
} }