refactor: deduplicate modal/button styles and enforce global utility usage

- Consolidated all modal-related styles into Modal.module.css; ValidationModal.module.css is now deprecated
- All main action/navigation buttons in NewGame and GameDetail use global .btn/.nav-buttons utility classes
- Removed duplicate utility classes from component CSS files
- Fixed .fullscreenToggle class naming for consistency
- Cleaned up component CSS to only contain component-specific styles
- Updated GameCompletionModal to use shared modal styles

This ensures DRY, maintainable, and consistent styling across the app.

astro.config.mjs

@@ -1,5 +1,9 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 
+import preact from '@astrojs/preact';
+
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [preact()]
+});

package.json

@@ -3,12 +3,14 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --host",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.9.0"
+    "@astrojs/preact": "^4.1.0",
+    "astro": "^5.9.0",
+    "preact": "^10.26.8"
   }
 }

src/components/App.jsx

@@ -0,0 +1,204 @@
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import GameList from './GameList.jsx';
+import GameDetail from './GameDetail.jsx';
+import NewGame from './NewGame.jsx';
+import Modal from './Modal.jsx';
+import ValidationModal from './ValidationModal.jsx';
+import GameCompletionModal from './GameCompletionModal.jsx';
+import FullscreenToggle from './FullscreenToggle.jsx';
+
+const LOCAL_STORAGE_KEY = 'bscscore_games';
+
+/**
+ * Main App component for BSC Score
+ * @returns {import('preact').VNode}
+ */
+const App = () => {
+  const [games, setGames] = useState([]);
+  const [currentGameId, setCurrentGameId] = useState(null);
+  const [playerNameHistory, setPlayerNameHistory] = useState([]);
+  const [screen, setScreen] = useState('game-list');
+  const [modal, setModal] = useState({ open: false, gameId: null });
+  const [validation, setValidation] = useState({ open: false, message: '' });
+  const [completionModal, setCompletionModal] = useState({ open: false, game: null });
+  const [filter, setFilter] = useState('all');
+
+  // Load games from localStorage on mount
+  useEffect(() => {
+    const savedGames = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (savedGames) {
+      setGames(JSON.parse(savedGames));
+    }
+  }, []);
+
+  // Save games to localStorage whenever games change
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(games));
+    // Update player name history
+    const nameLastUsed = {};
+    games.forEach(game => {
+      if (game.player1) nameLastUsed[game.player1] = Math.max(nameLastUsed[game.player1] || 0, new Date(game.updatedAt).getTime());
+      if (game.player2) nameLastUsed[game.player2] = Math.max(nameLastUsed[game.player2] || 0, new Date(game.updatedAt).getTime());
+      if (game.player3) nameLastUsed[game.player3] = Math.max(nameLastUsed[game.player3] || 0, new Date(game.updatedAt).getTime());
+    });
+    setPlayerNameHistory(
+      [...new Set(Object.keys(nameLastUsed))].sort((a, b) => nameLastUsed[b] - nameLastUsed[a])
+    );
+  }, [games]);
+
+  // Navigation handlers
+  const showGameList = useCallback(() => {
+    setScreen('game-list');
+    setCurrentGameId(null);
+  }, []);
+  const showNewGame = useCallback(() => {
+    setScreen('new-game');
+    setCurrentGameId(null);
+  }, []);
+  const showGameDetail = useCallback((id) => {
+    setCurrentGameId(id);
+    setScreen('game-detail');
+  }, []);
+
+  // Game creation
+  const handleCreateGame = useCallback(({ player1, player2, player3, gameType, raceTo }) => {
+    const newGame = {
+      id: Date.now(),
+      player1,
+      player2,
+      player3,
+      score1: 0,
+      score2: 0,
+      score3: 0,
+      gameType,
+      raceTo,
+      status: 'active',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString()
+    };
+    setGames(g => [newGame, ...g]);
+    return newGame.id;
+  }, []);
+
+  // Score update
+  const handleUpdateScore = useCallback((player, change) => {
+    setGames(games => games.map(game => {
+      if (game.id !== currentGameId || game.status === 'completed') return game;
+      const updated = { ...game };
+      if (player === 1) updated.score1 = Math.max(0, updated.score1 + change);
+      if (player === 2) updated.score2 = Math.max(0, updated.score2 + change);
+      if (player === 3) updated.score3 = Math.max(0, updated.score3 + change);
+      updated.updatedAt = new Date().toISOString();
+      // Check for raceTo completion
+      if (updated.raceTo && (updated.score1 >= updated.raceTo || updated.score2 >= updated.raceTo || (updated.player3 && updated.score3 >= updated.raceTo))) {
+        setCompletionModal({ open: true, game: updated });
+      }
+      return updated;
+    }));
+  }, [currentGameId]);
+
+  // Finish game
+  const handleFinishGame = useCallback(() => {
+    const game = games.find(g => g.id === currentGameId);
+    if (!game) return;
+    setCompletionModal({ open: true, game });
+  }, [games, currentGameId]);
+  const handleConfirmCompletion = useCallback(() => {
+    setGames(games => games.map(game => {
+      if (game.id !== currentGameId) return game;
+      return { ...game, status: 'completed', updatedAt: new Date().toISOString() };
+    }));
+    setCompletionModal({ open: false, game: null });
+    setScreen('game-detail');
+  }, [currentGameId]);
+
+  // Delete game
+  const handleDeleteGame = useCallback((id) => {
+    setModal({ open: true, gameId: id });
+  }, []);
+  const handleConfirmDelete = useCallback(() => {
+    setGames(games => games.filter(g => g.id !== modal.gameId));
+    setModal({ open: false, gameId: null });
+    setScreen('game-list');
+  }, [modal.gameId]);
+  const handleCancelDelete = useCallback(() => {
+    setModal({ open: false, gameId: null });
+  }, []);
+
+  // Validation modal
+  const showValidation = useCallback((message) => {
+    setValidation({ open: true, message });
+  }, []);
+  const closeValidation = useCallback(() => {
+    setValidation({ open: false, message: '' });
+  }, []);
+
+  return (
+    <div className="screen-container">
+      {screen === 'game-list' && (
+        <div className="screen active">
+          <div className="screen-content">
+            <button className="nav-button new-game-button" onClick={showNewGame} aria-label="Neues Spiel starten">Neues Spiel</button>
+            <GameList
+              games={games}
+              filter={filter}
+              onShowGameDetail={showGameDetail}
+              onDeleteGame={handleDeleteGame}
+              setFilter={setFilter}
+            />
+          </div>
+        </div>
+      )}
+      {screen === 'new-game' && (
+        <div className="screen active">
+          <div className="screen-content">
+            <NewGame
+              onCreateGame={handleCreateGame}
+              playerNameHistory={playerNameHistory}
+              onCancel={showGameList}
+              onGameCreated={id => {
+                setCurrentGameId(id);
+                setScreen('game-detail');
+              }}
+              initialValues={games[0]}
+            />
+          </div>
+        </div>
+      )}
+      {screen === 'game-detail' && (
+        <div className="screen active">
+          <div className="screen-content">
+            <GameDetail
+              game={games.find(g => g.id === currentGameId)}
+              onFinishGame={handleFinishGame}
+              onUpdateScore={handleUpdateScore}
+              onBack={showGameList}
+            />
+          </div>
+        </div>
+      )}
+      <Modal
+        open={modal.open}
+        title="Spiel löschen"
+        message="Möchten Sie das Spiel wirklich löschen?"
+        onCancel={handleCancelDelete}
+        onConfirm={handleConfirmDelete}
+      />
+      <ValidationModal
+        open={validation.open}
+        message={validation.message}
+        onClose={closeValidation}
+      />
+      <GameCompletionModal
+        open={completionModal.open}
+        game={completionModal.game}
+        onConfirm={handleConfirmCompletion}
+        onClose={() => setCompletionModal({ open: false, game: null })}
+      />
+      <FullscreenToggle />
+    </div>
+  );
+};
+
+export default App; 

src/components/FullscreenToggle.jsx

@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import { useCallback } from 'preact/hooks';
+import styles from './FullscreenToggle.module.css';
+
+/**
+ * Button to toggle fullscreen mode.
+ * @returns {import('preact').VNode}
+ */
+const FullscreenToggle = () => {
+  // Toggle fullscreen mode for the document
+  const handleToggle = useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  }, []);
+
+  return (
+    <button
+      id="fullscreen-toggle"
+      className={styles.fullscreenToggle}
+      onClick={handleToggle}
+      title="Vollbild umschalten"
+      aria-label="Vollbild umschalten"
+      type="button"
+    >
+      <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"/>
+      </svg>
+    </button>
+  );
+};
+
+export default FullscreenToggle; 

src/components/FullscreenToggle.module.css

@@ -0,0 +1,38 @@
+/* FullscreenToggle-specific styles only. */
+.fullscreenToggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: rgba(52, 152, 219, 0.9);
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 9999;
+    transition: background-color 0.2s, transform 0.2s;
+}
+.fullscreenToggle:hover {
+    background-color: rgba(52, 152, 219, 1);
+    transform: scale(1.1);
+}
+.fullscreenToggle:active {
+    transform: scale(0.95);
+}
+.fullscreenToggle svg {
+    width: 24px;
+    height: 24px;
+}
+@media screen and (max-width: 480px) {
+    .fullscreenToggle {
+        bottom: 15px;
+        right: 15px;
+        width: 40px;
+        height: 40px;
+    }
+} 

src/components/GameCompletionModal.jsx

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

src/components/GameCompletionModal.module.css

@@ -0,0 +1,67 @@
+/* Only GameCompletionModal-specific styles. Shared modal styles are now in Modal.module.css */
+.final-scores {
+    margin: 20px 0;
+}
+.final-score {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 0;
+    margin-bottom: 8px;
+    background: #333;
+    border-radius: 8px;
+    font-size: 1.2rem;
+    color: #fff;
+}
+.final-score .player-name {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #fff;
+}
+.final-score .score {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #fff;
+}
+.winner-announcement {
+    text-align: center;
+    margin: 20px 0 0 0;
+    padding: 18px 8px;
+    background: #43a047;
+    border-radius: 8px;
+    font-size: 1.2rem;
+    color: #fff;
+    font-weight: 700;
+}
+.winner-announcement h3 {
+    font-size: 1.2rem;
+    margin: 0;
+    color: #fff;
+}
+.btn {
+    flex: 1;
+    padding: 18px 0;
+    font-size: 1.1rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #fff;
+    background: #333;
+    font-weight: 600;
+    transition: background 0.2s;
+}
+.btn--warning {
+    background: #f44336;
+}
+.btn:not(.btn--warning):hover {
+    background: #444;
+}
+.btn--warning:hover {
+    background: #d32f2f;
+}
+@media (max-width: 600px) {
+    .btn {
+        font-size: 1rem;
+        padding: 14px 0;
+    }
+} 

src/components/GameDetail.jsx

@@ -0,0 +1,55 @@
+import { h } from 'preact';
+import styles from './GameDetail.module.css';
+
+/**
+ * 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;
+  const isCompleted = game.status === 'completed';
+  const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
+  const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
+
+  return (
+    <div className={styles['game-detail']}>
+      <div className={styles['game-title']}>
+        {game.gameType}{game.raceTo ? ` | Race to ${game.raceTo}` : ''}
+      </div>
+      <div className={styles['scores-container']}>
+        {playerNames.map((name, idx) => (
+          <div
+            className={styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')}
+            key={name + idx}
+          >
+            <span className={styles['player-name']}>{name}</span>
+            <span className={styles['score']} id={`score${idx+1}`}>{scores[idx]}</span>
+            <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 className={styles['game-detail-controls']}>
+        <button className="btn" onClick={onBack} aria-label="Zurück zur Liste">Zurück zur Liste</button>
+        <button className="btn" disabled={isCompleted} onClick={onFinishGame} aria-label={isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button>
+      </div>
+    </div>
+  );
+};
+
+export default GameDetail; 

src/components/GameDetail.module.css

@@ -0,0 +1,125 @@
+/* GameDetail-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.screen.active {
+    display: block;
+    opacity: 1;
+    transform: translateX(0);
+    position: relative;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.game-title {
+    font-size: 24px;
+    color: #ccc;
+}
+.game-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    width: 100%;
+}
+.scores-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 32px;
+    min-height: 0;
+}
+.player-score {
+    flex: 1;
+    text-align: center;
+    padding: 20px;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    margin: 0 8px;
+}
+.player-score:first-child {
+    background-color: #43a047;
+}
+.player-score:nth-child(2) {
+    background-color: #1565c0;
+}
+.player-score:nth-child(3) {
+    background-color: #333;
+}
+.player-name {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.score {
+    font-size: 16vh;
+    font-weight: bold;
+    margin: 10px 0 20px 0;
+    line-height: 1;
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
+}
+.score-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: auto;
+}
+.score-button {
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    min-width: 80px;
+    margin-bottom: 8px;
+}
+.game-controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+    width: 100%;
+}
+.control-button {
+    flex: 1;
+    padding: 30px;
+    background: #333;
+    color: white;
+    border: none;
+    border-radius: 0;
+    font-size: 24px;
+    cursor: pointer;
+    touch-action: manipulation;
+}
+.control-button.delete {
+    background: #f44336;
+}
+.game-detail-controls {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+    margin: 40px 0 0 0;
+    width: 100%;
+    justify-content: center;
+} 

src/components/GameHistory.module.css

@@ -0,0 +1,24 @@
+/* GameHistory-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.screen-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+} 

src/components/GameList.jsx

@@ -0,0 +1,62 @@
+import { h } from 'preact';
+import styles from './GameList.module.css';
+
+/**
+ * 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
+    .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) - new Date(a.createdAt));
+
+  return (
+    <div className={styles['game-list'] + ' ' + styles['games-container']}>
+      <div className={styles['filter-buttons']}>
+        <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')} aria-label="Nur aktive Spiele anzeigen">Aktiv</button>
+        <button className={styles['filter-button'] + (filter === 'completed' ? ' ' + styles['active'] : '')} onClick={() => setFilter('completed')} aria-label="Nur abgeschlossene Spiele anzeigen">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)} 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 className={styles['delete-button']} onClick={() => onDeleteGame(game.id)} aria-label={`Spiel löschen: ${playerNames}`}></button>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+};
+
+export default GameList; 

src/components/GameList.module.css

@@ -0,0 +1,135 @@
+/* GameList-specific styles only. Shared utility classes are now in global CSS. */
+.screen.active {
+    display: block;
+    opacity: 1;
+    transform: translateX(0);
+    position: relative;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.screen-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+.game-list {
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+}
+.filter-buttons {
+    display: flex;
+    gap: 8px;
+    margin: 24px 0 16px 0;
+}
+.filter-button {
+    flex: 1;
+    background: #333;
+    color: #fff;
+    border: none;
+    border-radius: 0;
+    font-size: 1.2rem;
+    padding: 18px 0;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background 0.2s, color 0.2s;
+}
+.filter-button.active {
+    background: #4CAF50;
+    color: #fff;
+}
+.games-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 24px;
+}
+.game-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: transform 0.1s ease, background-color 0.2s ease;
+  cursor: pointer;
+}
+.game-item.active {
+  background: #1e4620;
+}
+.game-item.completed {
+  background: #333;
+  opacity: 0.85;
+}
+.game-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+.game-type {
+  font-weight: bold;
+  font-size: 1.5rem;
+  min-width: 8rem;
+  color: #fff;
+}
+.player-names {
+  color: #fff;
+  font-size: 1.5rem;
+  min-width: 16rem;
+}
+.game-scores {
+  font-size: 2rem;
+  font-weight: bold;
+  min-width: 6rem;
+  text-align: center;
+  color: #fff;
+}
+.delete-button {
+  width: 3rem;
+  height: 3rem;
+  border: none;
+  background: #ff4444;
+  color: white;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 1rem;
+  transition: background-color 0.2s;
+  position: relative;
+}
+.delete-button::before {
+  content: '\1F5D1'; /* 🗑️ */
+  font-size: 1.5rem;
+}
+.delete-button:hover {
+  background: #cc0000;
+}
+.delete-button:active {
+  transform: scale(0.95);
+}
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+  font-size: 1.5rem;
+}
+.page-header {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+  background: #181818;
+  padding: 24px 0 16px 0;
+  margin-bottom: 8px;
+  text-align: left;
+  width: 100%;
+  letter-spacing: 0.5px;
+} 

src/components/Modal.jsx

@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import styles from './Modal.module.css';
+
+/**
+ * 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;
+  return (
+    <div className={styles['modal'] + ' ' + styles['show']} role="dialog" aria-modal="true" aria-labelledby="modal-title">
+      <div className={styles['modal-content']}>
+        <div className={styles['modal-header']}>
+          <span className={styles['modal-title']} id="modal-title">{title}</span>
+          <button className={styles['close-button']} onClick={onCancel} aria-label="Schließen">×</button>
+        </div>
+        <div className={styles['modal-body']}>
+          <div className={styles['modal-message']}>{message}</div>
+        </div>
+        <div className={styles['modal-footer']}>
+          <button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
+          <button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm} aria-label="Löschen">Löschen</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal; 

src/components/Modal.module.css

@@ -0,0 +1,66 @@
+/* Consolidated modal styles for all modals */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+}
+.modal.show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.modal-content {
+    background-color: #2a2a2a;
+    padding: 20px;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 500px;
+    position: relative;
+}
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.close-button {
+    font-size: 24px;
+    cursor: pointer;
+    color: #888;
+    background: none;
+    border: none;
+}
+.close-button:hover {
+    color: white;
+}
+.modal-body {
+    margin-bottom: 20px;
+}
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+.modal-button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+.modal-button.cancel {
+    background-color: #444;
+    color: white;
+}
+.modal-button.confirm {
+    background-color: #e74c3c;
+    color: white;
+}
+.modal-button:hover {
+    opacity: 0.9;
+} 

src/components/NewGame.jsx

@@ -0,0 +1,117 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import styles from './NewGame.module.css';
+
+/**
+ * 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 || '');
+  const [gameType, setGameType] = useState(initialValues?.gameType || '8-Ball');
+  const [raceTo, setRaceTo] = useState(initialValues?.raceTo ? String(initialValues.raceTo) : '');
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    setPlayer1(initialValues?.player1 || '');
+    setPlayer2(initialValues?.player2 || '');
+    setPlayer3(initialValues?.player3 || '');
+    setGameType(initialValues?.gameType || '8-Ball');
+    setRaceTo(initialValues?.raceTo ? String(initialValues.raceTo) : '');
+    setError(null);
+  }, [initialValues]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!player1.trim() || !player2.trim()) {
+      setError('Bitte Namen für beide Spieler eingeben');
+      return;
+    }
+    const id = onCreateGame({
+      player1: player1.trim(),
+      player2: player2.trim(),
+      player3: player3.trim() || null,
+      gameType,
+      raceTo: raceTo ? parseInt(raceTo) : null
+    });
+    if (onGameCreated && id) {
+      onGameCreated(id);
+    }
+  };
+
+  const handleClear = () => {
+    setPlayer1('');
+    setPlayer2('');
+    setPlayer3('');
+    setGameType('8-Ball');
+    setRaceTo('');
+    setError(null);
+  };
+
+  return (
+    <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="btn" onClick={handleClear} aria-label="Felder leeren">Felder leeren</button>
+      </div>
+      <div className={styles['player-inputs']}>
+        <div className={styles['player-input']}>
+          <label htmlFor="player1-input">Spieler 1</label>
+          <div className={styles['name-input-container']}>
+            <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, idx) => <option value={name} key={name + idx} />)}
+            </datalist>
+          </div>
+        </div>
+        <div className={styles['player-input']}>
+          <label htmlFor="player2-input">Spieler 2</label>
+          <div className={styles['name-input-container']}>
+            <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, idx) => <option value={name} key={name + idx} />)}
+            </datalist>
+          </div>
+        </div>
+        <div className={styles['player-input']}>
+          <label htmlFor="player3-input">Spieler 3 (optional)</label>
+          <div className={styles['name-input-container']}>
+            <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, idx) => <option value={name} key={name + idx} />)}
+            </datalist>
+          </div>
+        </div>
+      </div>
+      <div className={styles['game-settings']}>
+        <div className={styles['setting-group']}>
+          <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 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="nav-buttons">
+        <button type="button" className="btn" onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
+        <button type="submit" className="btn" aria-label="Spiel starten">Spiel starten</button>
+      </div>
+    </form>
+  );
+};
+
+export default NewGame; 

src/components/NewGame.module.css

@@ -0,0 +1,112 @@
+/* NewGame-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.screen-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 32px;
+    letter-spacing: 0.5px;
+}
+.player-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    margin-bottom: 32px;
+}
+.player-input {
+    background: #222;
+    border-radius: 8px;
+    padding: 20px 16px 16px 16px;
+    margin-bottom: 0;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
+}
+.player-input label {
+    display: block;
+    margin-bottom: 12px;
+    color: #ccc;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+.name-input-container {
+    display: flex;
+    gap: 12px;
+}
+.name-input {
+    flex: 2;
+    padding: 14px 12px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 1.1rem;
+    min-height: 44px;
+    border-radius: 0 6px 6px 0;
+}
+.game-settings {
+    margin-top: 0;
+    width: 100%;
+    margin-bottom: 32px;
+}
+.setting-group {
+    margin-bottom: 20px;
+}
+.setting-group label {
+    display: block;
+    margin-bottom: 10px;
+    color: #ccc;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+.setting-group select, .setting-group input {
+    width: 100%;
+    padding: 14px 12px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 1.1rem;
+    min-height: 44px;
+    border-radius: 6px;
+}
+.setting-group input:focus, .setting-group select:focus {
+    outline: none;
+    border-color: #666;
+}
+.validation-error {
+    color: #f44336;
+    background: #2a2a2a;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 16px;
+    font-size: 1.1rem;
+    text-align: center;
+}
+.new-game-form {
+    width: 100%;
+    max-width: 700px;
+    margin: 32px auto 0 auto;
+    background: #181818;
+    border-radius: 12px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
+    padding: 32px 24px 24px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+} 

src/components/ValidationModal.jsx

@@ -0,0 +1,32 @@
+import { h } from 'preact';
+import styles from './Modal.module.css';
+
+/**
+ * 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;
+  return (
+    <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-header']}>
+          <span className={styles['modal-title']} id="validation-modal-title">Fehler</span>
+          <button className={styles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
+        </div>
+        <div className={styles['modal-body']}>
+          <div className={styles['modal-message']}>{message}</div>
+        </div>
+        <div className={styles['modal-footer']}>
+          <button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onClose} aria-label="OK">OK</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ValidationModal; 

src/components/ValidationModal.module.css

@@ -0,0 +1 @@
+/* DEPRECATED: All modal styles are now in Modal.module.css */ 

src/styles/index.css

@@ -0,0 +1,99 @@
+/* Global resets and utility styles */
+* {
+    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;
+}
+
+/* Responsive adjustments for fullscreen toggle button */
+@media screen and (max-width: 480px) {
+    .fullscreenToggle {
+        bottom: 15px;
+        right: 15px;
+        width: 40px;
+        height: 40px;
+    }
+}
+
+/* Utility button for new game (global, not component-specific) */
+.new-game-button {
+    width: 100%;
+    background: #222;
+    color: #fff;
+    border: none;
+    border-radius: 0;
+    font-size: 1.4rem;
+    font-weight: 600;
+    padding: 20px 0;
+    margin-bottom: 16px;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    text-align: center;
+    display: block;
+}
+
+.new-game-button:hover {
+    background: #333;
+}
+
+/* Shared utility classes for buttons and layout */
+.btn {
+    flex: 1;
+    min-width: 100px;
+    padding: 18px;
+    color: white;
+    background: #333;
+    border: none;
+    border-radius: 6px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: background 0.2s, color 0.2s;
+}
+.btn:hover {
+    background: #444;
+}
+.nav-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 16px 0 0 0;
+}
+
+/* Modal overlay (global, not component-specific) */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal.show {
+    display: flex;
+} 

tsconfig.json

@@ -1,5 +1,14 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
-}
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}