feat(game-14-1): Implement re-rack logic and scoring hooks

Implements the re-rack functionality and prepares the scoring system for foul integration, as detailed in issue #19.

- Adds '+14' and '+15' re-rack buttons to the game view.
- Creates a  function to update the number of balls on the table.
- Modifies the  function to accept an optional  argument, preparing it for the next phase of development.

Closes #19

src/components/GameDetail.module.css

@@ -172,4 +172,24 @@
     background-color: #222;
     color: #555;
     cursor: not-allowed;
+}
+.rerack-controls {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+.rerack-btn {
+    padding: 0.8rem 1.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    border-radius: 8px;
+    border: 1px solid #444;
+    background-color: #3a539b;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+.rerack-btn:hover {
+    background-color: #4a6fbf;
 } 

src/components/GameDetail141.jsx

@@ -36,14 +36,14 @@ const GameDetail141 = ({ game, onUpdate, onBack }) => {
 
   const currentPlayer = game.players[game.currentPlayer];
 
-  const handleTurnEnd = (remainingBalls) => {
+  const handleTurnEnd = (remainingBalls, foulPoints = 0) => {
     if (remainingBalls > game.ballsOnTable) {
       console.error("Cannot leave more balls than are on the table.");
       return;
     }
 
     const ballsPotted = game.ballsOnTable - remainingBalls;
-    const newScore = currentPlayer.score + ballsPotted;
+    const newScore = currentPlayer.score + ballsPotted - foulPoints;
 
     const updatedPlayers = game.players.map((p, index) =>
       index === game.currentPlayer ? { ...p, score: newScore } : p
@@ -56,7 +56,16 @@ const GameDetail141 = ({ game, onUpdate, onBack }) => {
       players: updatedPlayers,
       ballsOnTable: remainingBalls,
       currentPlayer: nextPlayer,
-      history: [...game.history, { player: currentPlayer.name, ballsPotted, newScore, ballsOnTable: remainingBalls }],
+      history: [...game.history, { player: currentPlayer.name, ballsPotted, foulPoints, newScore, ballsOnTable: remainingBalls }],
+    });
+  };
+
+  const handleReRack = (ballsToAdd) => {
+    const newBallsOnTable = game.ballsOnTable + ballsToAdd;
+    onUpdate({
+      ...game,
+      ballsOnTable: newBallsOnTable,
+      history: [...game.history, { type: 'rerack', player: currentPlayer.name, ballsAdded: ballsToAdd, ballsOnTable: newBallsOnTable }],
     });
   };
 
@@ -98,6 +107,11 @@ const GameDetail141 = ({ game, onUpdate, onBack }) => {
         </div>
       </div>
 
+      <div className={styles['rerack-controls']}>
+        <button onClick={() => handleReRack(14)} className={styles['rerack-btn']}>+14 Re-Rack</button>
+        <button onClick={() => handleReRack(15)} className={styles['rerack-btn']}>+15 Re-Rack</button>
+      </div>
+
       {/* Placeholder for future buttons */}
       <div className={styles['foul-controls']}>
         <p>Fouls & Re-Racks (nächste Phase)</p>