refactor: migrate UI to Preact components and remove legacy Astro/JS

- Replaced all .astro components with .jsx Preact components and added corresponding CSS modules.
- Updated index.astro to use the new App Preact component; removed legacy script and Astro imports.
- Deleted obsolete .astro component files and main JS logic (src/scripts/index.js, public/scripts/index.js).
- Updated astro.config.mjs for Preact integration.
- Updated package.json and package-lock.json to include @astrojs/preact and preact.
- Updated tsconfig.json for Preact JSX support.
- Refactored index.css to keep only global resets and utility styles.
- All changes relate to Gitea issue #1 (refactor to astro app).

Migrates the UI from Astro/vanilla JS to a modular Preact component architecture, removing all legacy code and aligning the project with modern best practices.
Refs #1

src/components/App.jsx

@@ -0,0 +1,194 @@
+import { h } from 'preact';
+import { useState, useEffect } 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';
+
+export default function App() {
+  const [games, setGames] = useState([]);
+  const [currentGameId, setCurrentGameId] = useState(null);
+  const [playerNameHistory, setPlayerNameHistory] = useState([]);
+  const [screen, setScreen] = useState('game-list');
+  const [loading, setLoading] = useState(false);
+  const [modal, setModal] = useState({ open: false, gameId: null });
+  const [validation, setValidation] = useState({ open: false, message: '' });
+  const [completionModal, setCompletionModal] = useState({ open: false, game: null });
+
+  // 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
+  function showGameList() {
+    setScreen('game-list');
+    setCurrentGameId(null);
+  }
+  function showNewGame() {
+    setScreen('new-game');
+    setCurrentGameId(null);
+  }
+  function showGameDetail(id) {
+    setCurrentGameId(id);
+    setScreen('game-detail');
+  }
+
+  // Game creation
+  function handleCreateGame({ 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]);
+    setScreen('game-list');
+  }
+
+  // Score update
+  function handleUpdateScore(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;
+    }));
+  }
+
+  // Finish game
+  function handleFinishGame() {
+    const game = games.find(g => g.id === currentGameId);
+    if (!game) return;
+    setCompletionModal({ open: true, game });
+  }
+  function handleConfirmCompletion() {
+    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');
+  }
+
+  // Delete game
+  function handleDeleteGame(id) {
+    setModal({ open: true, gameId: id });
+  }
+  function handleConfirmDelete() {
+    setGames(games => games.filter(g => g.id !== modal.gameId));
+    setModal({ open: false, gameId: null });
+    setScreen('game-list');
+  }
+  function handleCancelDelete() {
+    setModal({ open: false, gameId: null });
+  }
+
+  // Validation modal
+  function showValidation(message) {
+    setValidation({ open: true, message });
+  }
+  function closeValidation() {
+    setValidation({ open: false, message: '' });
+  }
+
+  // Render
+  return (
+    <>
+      <div className="screen-container">
+        {screen === 'game-list' && (
+          <div className="screen active">
+            <div className="screen-content">
+              <button className="nav-button" onClick={showNewGame}>Neues Spiel</button>
+              <GameList
+                games={games}
+                onShowGameDetail={showGameDetail}
+                onDeleteGame={handleDeleteGame}
+              />
+            </div>
+          </div>
+        )}
+        {screen === 'new-game' && (
+          <div className="screen active">
+            <div className="screen-content">
+              <NewGame
+                onCreateGame={handleCreateGame}
+                playerNameHistory={playerNameHistory}
+                onCancel={showGameList}
+              />
+            </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 })}
+        />
+      </div>
+      <FullscreenToggle />
+    </>
+  );
+} 

src/components/FullscreenToggle.jsx

@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import { useCallback } from 'preact/hooks';
+import styles from './FullscreenToggle.module.css';
+
+export default function FullscreenToggle() {
+  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"
+    >
+      <svg viewBox="0 0 24 24" width="24" height="24">
+        <path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+      </svg>
+    </button>
+  );
+} 

src/components/FullscreenToggle.module.css

@@ -0,0 +1,37 @@
+.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.astro

@@ -1,16 +0,0 @@
----
----
-<div id="game-completion-modal" class="modal">
-  <div class="modal-content">
-    <h2>Spiel beenden</h2>
-    <div id="game-summary">
-      <div class="final-scores"></div>
-      <div class="winner-announcement"></div>
-    </div>
-    <div class="modal-buttons">
-      <button class="btn btn--warning">Bestätigen</button>
-      <button class="btn">Abbrechen</button>
-    </div>
-  </div>
-</div>
-<!-- TODO: Wire up events and props for integration --> 

src/components/GameCompletionModal.jsx

@@ -0,0 +1,38 @@
+import { h } from 'preact';
+import styles from './GameCompletionModal.module.css';
+
+export default function 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);
+  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 className={styles['modal'] + ' ' + styles['show']} id="game-completion-modal">
+      <div className={styles['modal-content']}>
+        <div className={styles['modal-header']}>
+          <span className={styles['modal-title']}>Spiel beendet</span>
+          <button className={styles['close-button']} onClick={onClose}>×</button>
+        </div>
+        <div className={styles['modal-body']}>
+          <div className={styles['final-scores']}>
+            {playerNames.map((name, idx) => (
+              <div className={styles['final-score']} key={name}>
+                <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={styles['modal-footer']}>
+          <button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm}>Bestätigen</button>
+          <button className={styles['btn']} onClick={onClose}>Abbrechen</button>
+        </div>
+      </div>
+    </div>
+  );
+} 

src/components/GameCompletionModal.module.css

@@ -0,0 +1,85 @@
+#game-completion-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+#game-completion-modal.show {
+    display: flex;
+}
+#game-completion-modal .modal-content {
+    background-color: #2a2a2a;
+    padding: 30px;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 500px;
+    position: relative;
+    margin: auto;
+    transform: translateY(0);
+}
+.final-scores {
+    margin: 20px 0;
+}
+.final-score {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    margin-bottom: 10px;
+    background: #333;
+    border-radius: 5px;
+    font-size: 24px;
+}
+.final-score .player-name {
+    font-size: 24px;
+    font-weight: bold;
+    color: white;
+}
+.final-score .score {
+    font-size: 24px;
+    font-weight: bold;
+    color: white;
+}
+.winner-announcement {
+    text-align: center;
+    margin: 20px 0;
+    padding: 20px;
+    background: #4CAF50;
+    border-radius: 5px;
+}
+.winner-announcement h3 {
+    font-size: 24px;
+    margin: 0;
+    color: white;
+}
+.modal-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+.modal-buttons .btn {
+    flex: 1;
+    padding: 20px;
+    font-size: 20px;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    color: white;
+}
+.modal-buttons .btn--warning {
+    background: #f44336;
+}
+.modal-buttons .btn:not(.btn--warning) {
+    background: #333;
+}
+#game-completion-modal h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: white;
+} 

src/components/GameDetail.astro

@@ -1,41 +0,0 @@
----
----
-<div class="screen" id="game-detail-screen">
-  <div class="screen-content">
-    <div class="game-title" id="game-title">8-Ball | Race to 5</div>
-    <div class="game-header">
-      <button class="btn nav-button">Zurück zur Liste</button>
-    </div>
-    <div class="scores-container">
-      <div class="player-score">
-        <div class="player-name" id="player1-name">Spieler 1</div>
-        <div class="score" id="score1">0</div>
-        <div class="score-buttons">
-          <button class="score-button">-</button>
-          <button class="score-button">+</button>
-        </div>
-      </div>
-      <div class="player-score">
-        <div class="player-name" id="player2-name">Spieler 2</div>
-        <div class="score" id="score2">0</div>
-        <div class="score-buttons">
-          <button class="score-button">-</button>
-          <button class="score-button">+</button>
-        </div>
-      </div>
-      <div class="player-score" id="player3-score" style="display: none;">
-        <div class="player-name" id="player3-name">Spieler 3</div>
-        <div class="score" id="score3">0</div>
-        <div class="score-buttons">
-          <button class="score-button">-</button>
-          <button class="score-button">+</button>
-        </div>
-      </div>
-    </div>
-    <div class="game-controls">
-      <button id="game-control" class="control-button">Spiel beenden</button>
-      <button id="delete-game" class="control-button delete">Spiel löschen</button>
-    </div>
-  </div>
-</div>
-<!-- TODO: Wire up events and props for integration --> 

src/components/GameDetail.jsx

@@ -0,0 +1,31 @@
+import { h } from 'preact';
+import styles from './GameDetail.module.css';
+
+export default function 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['player-scores']}>
+        {playerNames.map((name, idx) => (
+          <div className={
+            styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')
+          } key={name}>
+            <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)}>-</button>
+            <button className={styles['score-button']} disabled={isCompleted} onClick={() => onUpdateScore(idx+1, 1)}>+</button>
+          </div>
+        ))}
+      </div>
+      <div className={styles['game-detail-controls']}>
+        <button className={styles['nav-button']} onClick={onBack}>Zurück zur Liste</button>
+        <button className={styles['nav-button']} disabled={isCompleted} onClick={onFinishGame}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button>
+      </div>
+    </div>
+  );
+} 

src/components/GameDetail.module.css

@@ -0,0 +1,103 @@
+.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: 20px;
+    min-height: 0;
+}
+.player-score {
+    flex: 1;
+    text-align: center;
+    padding: 20px;
+    background-color: #333;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.player-name {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.score {
+    font-size: 50vh;
+    font-weight: bold;
+    margin: 10px 0;
+    line-height: 1;
+}
+.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;
+}
+.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;
+} 

src/components/GameHistory.astro

@@ -1,11 +0,0 @@
----
----
-<div class="screen" id="game-history-screen">
-  <div class="screen-content">
-    <h1 class="screen-title">Spielhistorie</h1>
-    <div class="nav-buttons">
-      <button class="btn nav-button">Zurück zur Liste</button>
-    </div>
-  </div>
-</div>
-<!-- TODO: Wire up events and props for integration --> 

src/components/GameHistory.module.css

@@ -0,0 +1,40 @@
+.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;
+}
+.nav-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 20px 0 40px 0;
+}
+.btn {
+    flex: 1;
+    min-width: 100px;
+    padding: 20px;
+    color: white;
+    border: none;
+    border-radius: 0;
+    font-size: 20px;
+    cursor: pointer;
+    touch-action: manipulation;
+} 

src/components/GameList.astro

@@ -1,21 +0,0 @@
----
----
-<div class="screen active" id="game-list-screen">
-  <div class="screen-content">
-    <h1 class="screen-title">Spiele</h1>
-    <div class="game-list">
-      <div class="nav-buttons">
-        <button class="btn nav-button">Neues Spiel</button>
-      </div>
-      <div class="game-filters">
-        <button class="btn filter-button active">Alle</button>
-        <button class="btn filter-button">Aktiv</button>
-        <button class="btn filter-button">Abgeschlossen</button>
-      </div>
-      <div id="games-container">
-        <!-- Games will be added dynamically -->
-      </div>
-    </div>
-  </div>
-</div>
-<!-- TODO: Wire up events and props for integration --> 

src/components/GameList.jsx

@@ -0,0 +1,41 @@
+import { h } from 'preact';
+import styles from './GameList.module.css';
+
+export default function GameList({ games, filter = 'all', onShowGameDetail, onDeleteGame }) {
+  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));
+
+  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>
+            <button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)}></button>
+          </div>
+        );
+      })}
+    </div>
+  );
+} 

src/components/GameList.module.css

@@ -0,0 +1,46 @@
+.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;
+}
+.nav-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 20px 0 40px 0;
+}
+.btn {
+    flex: 1;
+    min-width: 100px;
+    padding: 20px;
+    color: white;
+    border: none;
+    border-radius: 0;
+    font-size: 20px;
+    cursor: pointer;
+    touch-action: manipulation;
+}
+.filter-button {
+    background: #333;
+}
+.filter-button.active {
+    background: #4CAF50;
+} 

src/components/Modal.astro

@@ -1,18 +0,0 @@
----
----
-<div id="modal" class="modal">
-  <div class="modal-content">
-    <div class="modal-header">
-      <span class="close-button">&times;</span>
-      <h2 id="modal-title">Spiel löschen</h2>
-    </div>
-    <div class="modal-body">
-      <p id="modal-message">Möchten Sie das Spiel zwischen Spieler 1 und Spieler 2 wirklich löschen?</p>
-    </div>
-    <div class="modal-footer">
-      <button class="modal-button cancel">Abbrechen</button>
-      <button class="modal-button confirm">Löschen</button>
-    </div>
-  </div>
-</div>
-<!-- TODO: Wire up events and props for integration --> 

src/components/Modal.jsx

@@ -0,0 +1,23 @@
+import { h } from 'preact';
+import styles from './Modal.module.css';
+
+export default function Modal({ open, title, message, onCancel, onConfirm }) {
+  if (!open) return null;
+  return (
+    <div className={styles['modal'] + ' ' + styles['show']}>
+      <div className={styles['modal-content']}>
+        <div className={styles['modal-header']}>
+          <span className={styles['modal-title']}>{title}</span>
+          <button className={styles['close-button']} onClick={onCancel}>×</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}>Abbrechen</button>
+          <button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm}>Löschen</button>
+        </div>
+      </div>
+    </div>
+  );
+} 

src/components/Modal.module.css

@@ -0,0 +1,63 @@
+.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;
+}
+.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.astro

@@ -1,50 +0,0 @@
----
----
-<div class="screen" id="new-game-screen">
-  <div class="screen-content">
-    <h1 class="screen-title">Neues Spiel</h1>
-    <div class="player-inputs">
-      <div class="player-input">
-        <label for="player1">Spieler 1</label>
-        <div class="name-input-container">
-          <select id="player1-select" class="name-select"><option value="">Vorherige Spieler...</option></select>
-          <input type="text" id="player1" placeholder="Name Spieler 1" class="name-input" />
-        </div>
-      </div>
-      <div class="player-input">
-        <label for="player2">Spieler 2</label>
-        <div class="name-input-container">
-          <select id="player2-select" class="name-select"><option value="">Vorherige Spieler...</option></select>
-          <input type="text" id="player2" placeholder="Name Spieler 2" class="name-input" />
-        </div>
-      </div>
-      <div class="player-input">
-        <label for="player3">Spieler 3 (optional)</label>
-        <div class="name-input-container">
-          <select id="player3-select" class="name-select"><option value="">Vorherige Spieler...</option></select>
-          <input type="text" id="player3" placeholder="Name Spieler 3" class="name-input" />
-        </div>
-      </div>
-    </div>
-    <div class="game-settings">
-      <div class="setting-group">
-        <label for="game-type">Spieltyp</label>
-        <select id="game-type">
-          <option value="8-Ball">8-Ball</option>
-          <option value="9-Ball">9-Ball</option>
-          <option value="10-Ball">10-Ball</option>
-          <option value="14/1">14/1 endlos</option>
-        </select>
-      </div>
-      <div class="setting-group">
-        <label for="race-to">Race to X (optional)</label>
-        <input type="number" id="race-to" placeholder="0" min="0" max="99" />
-      </div>
-    </div>
-    <div class="nav-buttons">
-      <button class="btn nav-button">Spiel starten</button>
-      <button class="btn nav-button">Abbrechen</button>
-    </div>
-  </div>
-</div>
-<!-- TODO: Wire up events and props for integration --> 

src/components/NewGame.jsx

@@ -0,0 +1,71 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import styles from './NewGame.module.css';
+
+export default function NewGame({ onCreateGame, playerNameHistory, onCancel }) {
+  const [player1, setPlayer1] = useState('');
+  const [player2, setPlayer2] = useState('');
+  const [player3, setPlayer3] = useState('');
+  const [gameType, setGameType] = useState('8-Ball');
+  const [raceTo, setRaceTo] = useState('');
+  const [error, setError] = useState(null);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!player1.trim() || !player2.trim()) {
+      setError('Bitte Namen für beide Spieler eingeben');
+      return;
+    }
+    onCreateGame({
+      player1: player1.trim(),
+      player2: player2.trim(),
+      player3: player3.trim() || null,
+      gameType,
+      raceTo: raceTo ? parseInt(raceTo) : null
+    });
+    setPlayer1(''); setPlayer2(''); setPlayer3(''); setGameType('8-Ball'); setRaceTo(''); setError(null);
+  }
+
+  return (
+    <form className={styles['new-game-form']} onSubmit={handleSubmit}>
+      <div>
+        <label>Spieler 1:</label>
+        <input value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" />
+        <datalist id="player1-history">
+          {playerNameHistory.map(name => <option value={name} key={name} />)}
+        </datalist>
+      </div>
+      <div>
+        <label>Spieler 2:</label>
+        <input value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" />
+        <datalist id="player2-history">
+          {playerNameHistory.map(name => <option value={name} key={name} />)}
+        </datalist>
+      </div>
+      <div>
+        <label>Spieler 3 (optional):</label>
+        <input value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" />
+        <datalist id="player3-history">
+          {playerNameHistory.map(name => <option value={name} key={name} />)}
+        </datalist>
+      </div>
+      <div>
+        <label>Spieltyp:</label>
+        <select value={gameType} onChange={e => setGameType(e.target.value)}>
+          <option value="8-Ball">8-Ball</option>
+          <option value="9-Ball">9-Ball</option>
+          <option value="10-Ball">10-Ball</option>
+        </select>
+      </div>
+      <div>
+        <label>Race to:</label>
+        <input type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" />
+      </div>
+      {error && <div className={styles['validation-error']}>{error}</div>}
+      <div className={styles['form-actions']}>
+        <button type="button" className={styles['nav-button']} onClick={onCancel}>Abbrechen</button>
+        <button type="submit" className={styles['nav-button']}>Spiel starten</button>
+      </div>
+    </form>
+  );
+} 

src/components/NewGame.module.css

@@ -0,0 +1,111 @@
+.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;
+}
+.player-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    flex: 1;
+}
+.player-input {
+    margin-bottom: 20px;
+}
+.player-input label {
+    display: block;
+    margin-bottom: 10px;
+    color: #ccc;
+    font-size: 24px;
+}
+.name-input-container {
+    display: flex;
+    gap: 10px;
+}
+.name-select {
+    flex: 1;
+    padding: 30px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 24px;
+    min-height: 44px;
+}
+.name-input {
+    flex: 2;
+    padding: 30px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 24px;
+    min-height: 44px;
+}
+.name-select:focus, .name-input:focus {
+    outline: none;
+    border-color: #666;
+}
+.game-settings {
+    margin-top: 20px;
+    width: 100%;
+}
+.setting-group {
+    margin-bottom: 20px;
+}
+.setting-group select {
+    width: 100%;
+    padding: 30px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 24px;
+    min-height: 44px;
+    padding: 12px;
+}
+.setting-group input {
+    width: 100%;
+    padding: 30px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 24px;
+}
+.setting-group input:focus {
+    outline: none;
+    border-color: #666;
+}
+.nav-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 20px 0 40px 0;
+}
+.btn {
+    flex: 1;
+    min-width: 100px;
+    padding: 20px;
+    color: white;
+    border: none;
+    border-radius: 0;
+    font-size: 20px;
+    cursor: pointer;
+    touch-action: manipulation;
+} 

src/components/ValidationModal.astro

@@ -1,17 +0,0 @@
----
----
-<div id="validation-modal" class="modal">
-  <div class="modal-content">
-    <div class="modal-header">
-      <span class="close-button">&times;</span>
-      <h2 id="validation-modal-title">Fehler</h2>
-    </div>
-    <div class="modal-body">
-      <p id="validation-modal-message"></p>
-    </div>
-    <div class="modal-footer">
-      <button class="modal-button cancel">OK</button>
-    </div>
-  </div>
-</div>
-<!-- TODO: Wire up events and props for integration --> 

src/components/ValidationModal.jsx

@@ -0,0 +1,22 @@
+import { h } from 'preact';
+import styles from './ValidationModal.module.css';
+
+export default function ValidationModal({ open, message, onClose }) {
+  if (!open) return null;
+  return (
+    <div className={styles['modal'] + ' ' + styles['show']} id="validation-modal">
+      <div className={styles['modal-content']}>
+        <div className={styles['modal-header']}>
+          <span className={styles['modal-title']}>Fehler</span>
+          <button className={styles['close-button']} onClick={onClose}>×</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}>OK</button>
+        </div>
+      </div>
+    </div>
+  );
+} 

src/components/ValidationModal.module.css

@@ -0,0 +1,63 @@
+.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;
+}
+.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;
+}