Refactor BSC Score to Astro, TypeScript, and modular architecture

2025-06-24 11:44:19 +00:00
parent bcf793b9e3
commit 6f626c9977
30 changed files with 1836 additions and 497 deletions
--- a/src/components/GameList.tsx
+++ b/src/components/GameList.tsx
@@ -0,0 +1,114 @@
+import { h } from 'preact';
+import { Card } from './ui/Card';
+import { Button } from './ui/Button';
+import styles from './GameList.module.css';
+import type { Game, GameFilter, StandardGame } from '../types/game';
+
+interface GameListProps {
+  games: Game[];
+  filter: GameFilter;
+  setFilter: (filter: GameFilter) => void;
+  onShowGameDetail: (gameId: number) => void;
+  onDeleteGame: (gameId: number) => void;
+}
+
+export default function GameList({ 
+  games, 
+  filter = 'all', 
+  setFilter, 
+  onShowGameDetail, 
+  onDeleteGame 
+}: GameListProps) {
+  const filteredGames = games
+    .filter(game => {
+      if (filter === 'active') return game.status === 'active';
+      if (filter === 'completed') return game.status === 'completed';
+      return true;
+    })
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+  const getPlayerNames = (game: Game): string => {
+    if ('players' in game) {
+      return game.players.map(p => p.name).join(' vs ');
+    } else {
+      const standardGame = game as StandardGame;
+      return standardGame.player3
+        ? `${standardGame.player1} vs ${standardGame.player2} vs ${standardGame.player3}`
+        : `${standardGame.player1} vs ${standardGame.player2}`;
+    }
+  };
+
+  const getScores = (game: Game): string => {
+    if ('players' in game) {
+      return game.players.map(p => p.score).join(' - ');
+    } else {
+      const standardGame = game as StandardGame;
+      return standardGame.player3
+        ? `${standardGame.score1} - ${standardGame.score2} - ${standardGame.score3}`
+        : `${standardGame.score1} - ${standardGame.score2}`;
+    }
+  };
+
+  const filterButtons: Array<{ key: GameFilter; label: string; ariaLabel: string }> = [
+    { key: 'all', label: 'Alle', ariaLabel: 'Alle Spiele anzeigen' },
+    { key: 'active', label: 'Aktiv', ariaLabel: 'Nur aktive Spiele anzeigen' },
+    { key: 'completed', label: 'Abgeschlossen', ariaLabel: 'Nur abgeschlossene Spiele anzeigen' },
+  ];
+
+  return (
+    <div className={styles['game-list'] + ' ' + styles['games-container']}>
+      <div className={styles['filter-buttons']}>
+        {filterButtons.map(({ key, label, ariaLabel }) => (
+          <Button
+            key={key}
+            variant={filter === key ? 'primary' : 'secondary'}
+            size="small"
+            onClick={() => setFilter(key)}
+            aria-label={ariaLabel}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+      
+      {filteredGames.length === 0 ? (
+        <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
+      ) : (
+        filteredGames.map(game => {
+          const playerNames = getPlayerNames(game);
+          const scores = getScores(game);
+          
+          return (
+            <Card
+              key={game.id}
+              variant="elevated"
+              className={game.status === 'completed' ? styles['completed'] : styles['active']}
+            >
+              <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['player-names']}>{playerNames}</div>
+                <div className={styles['game-scores']}>{scores}</div>
+              </div>
+              <Button
+                variant="danger"
+                size="small"
+                onClick={() => onDeleteGame(game.id)}
+                aria-label={`Spiel löschen: ${playerNames}`}
+              >
+                🗑
+              </Button>
+            </Card>
+          );
+        })
+      )}
+    </div>
+  );
+}