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

refactor: move filter bar to GameList and fix button styling

Browse Source 
- Moved filter button bar from App.jsx to GameList.jsx for better separation of concerns.
- Updated GameList to accept filter/setFilter props and render the filter bar internally.
- Moved .new-game-button styles to global CSS for consistent styling.
- Ensured filter button styles remain in GameList.module.css.
- Improves modularity and UI consistency.
This commit is contained in:
Frank Schwenk
2025-06-06 12:22:55 +02:00
parent 8384d08393
commit b44b013f58
4 changed files with 158 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/GameList.jsx
View File

@@ -1,7 +1,7 @@
import { h } from 'preact';
import styles from './GameList.module.css';
export default function GameList({ games, filter = 'all', onShowGameDetail, onDeleteGame }) {
export default function GameList({ games, filter = 'all', setFilter, onShowGameDetail, onDeleteGame }) {
const filteredGames = games
.filter(game => {
if (filter === 'active') return game.status === 'active';
@@ -10,32 +10,37 @@ export default function GameList({ games, filter = 'all', onShowGameDetail, onDe
})
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
if (filteredGames.length === 0) {
return <div className={styles['empty-state']}>Keine Spiele vorhanden</div>;
}
return (
<div className={styles['game-list'] + ' ' + styles['games-container']}>
{filteredGames.map(game => {
const playerNames = game.player3
? `${game.player1} vs ${game.player2} vs ${game.player3}`
: `${game.player1} vs ${game.player2}`;
const scores = game.player3
? `${game.score1} - ${game.score2} - ${game.score3}`
: `${game.score1} - ${game.score2}`;
return (
<div className={
styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
} key={game.id}>
<div className={styles['game-info']} onClick={() => onShowGameDetail(game.id)}>
<div className={styles['game-type']}>{game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}</div>
<div className={styles['player-names']}>{playerNames}</div>
<div className={styles['game-scores']}>{scores}</div>
<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 === 'active' ? ' ' + styles['active'] : '')} onClick={() => setFilter('active')}>Aktiv</button>
<button className={styles['filter-button'] + (filter === 'completed' ? ' ' + styles['active'] : '')} onClick={() => setFilter('completed')}>Abgeschlossen</button>
</div>
{filteredGames.length === 0 ? (
<div className={styles['empty-state']}>Keine Spiele vorhanden</div>
) : (
filteredGames.map(game => {
const playerNames = game.player3
? `${game.player1} vs ${game.player2} vs ${game.player3}`
: `${game.player1} vs ${game.player2}`;
const scores = game.player3
? `${game.score1} - ${game.score2} - ${game.score3}`
: `${game.score1} - ${game.score2}`;
return (
<div className={
styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
} key={game.id}>
<div className={styles['game-info']} onClick={() => onShowGameDetail(game.id)}>
<div className={styles['game-type']}>{game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}</div>
<div className={styles['player-names']}>{playerNames}</div>
<div className={styles['game-scores']}>{scores}</div>
</div>
<button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)}></button>
</div>
<button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)}></button>
</div>
);
})}
);
})
)}
</div>
);
}