Commit all uncommitted files

src/components/Setup/SetupScreen.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { Player, GameState } from '../../types';
+import useGameState from '../../hooks/useGameState';
+
+const SetupScreen: React.FC = () => {
+  const { 
+    gameState, 
+    updatePlayers, 
+    updateCardValues, 
+    addPlayer, 
+    startNewGame 
+  } = useGameState();
+  
+  const [newPlayerName, setNewPlayerName] = useState('');
+
+  const handleAddPlayer = () => {
+    if (newPlayerName.trim() && gameState.players.length < 10) {
+      addPlayer(newPlayerName.trim());
+      setNewPlayerName('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleAddPlayer();
+    }
+  };
+
+  const handleCardValueChange = (suit: 'Schellen' | 'Schilten' | 'Eicheln' | 'Rosen', value: number) => {
+    updateCardValues({
+      ...gameState.cardValues,
+      [suit]: value
+    });
+  };
+
+  const resetCardValues = () => {
+    updateCardValues({
+      Schellen: 11,
+      Schilten: 12,
+      Eicheln: 10,
+      Rosen: 10
+    });
+  };
+
+  const startGame = () => {
+    if (gameState.players.length >= 2) {
+      startNewGame();
+    }
+  };
+
+  return (
+    <div className="screen setup-screen">
+      <h1>🎴 Tschausepp - Jass Card Tracker</h1>
+      <h2>Setup a New Game</h2>
+      
+      <div className="player-slots">
+        {gameState.players.map((player, index) => (
+          <div key={player.id} className="player-slot">
+            <h3>👤 {index + 1}. {player.name}</h3>
+          </div>
+        ))}
+      </div>
+
+      <div className="player-input">
+        <label htmlFor="new-player">Add Player:</label>
+        <input
+          type="text"
+          id="new-player"
+          value={newPlayerName}
+          onChange={(e) => setNewPlayerName(e.target.value)}
+          onKeyDown={handleKeyDown}
+          maxLength={20}
+          placeholder="Enter player name"
+        />
+        <button onClick={handleAddPlayer} disabled={gameState.players.length >= 10}>
+          Add Player
+        </button>
+      </div>
+
+      <h3>Card Value Configuration</h3>
+      <p className="card-config-help">Configure point values for each suit:</p>
+      
+      <div className="suit-config">
+        <div className="suit-config-row">
+          <span>Schellen:</span>
+          <input
+            type="number"
+            value={gameState.cardValues.Schellen}
+            onChange={(e) => handleCardValueChange('Schellen', Number(e.target.value))}
+            min="1"
+            max="20"
+          />
+        </div>
+        <div className="suit-config-row">
+          <span>Schilten:</span>
+          <input
+            type="number"
+            value={gameState.cardValues.Schilten}
+            onChange={(e) => handleCardValueChange('Schilten', Number(e.target.value))}
+            min="1"
+            max="20"
+          />
+        </div>
+        <div className="suit-config-row">
+          <span>Eicheln:</span>
+          <input
+            type="number"
+            value={gameState.cardValues.Eicheln}
+            onChange={(e) => handleCardValueChange('Eicheln', Number(e.target.value))}
+            min="1"
+            max="20"
+          />
+        </div>
+        <div className="suit-config-row">
+          <span>Rosen:</span>
+          <input
+            type="number"
+            value={gameState.cardValues.Rosen}
+            onChange={(e) => handleCardValueChange('Rosen', Number(e.target.value))}
+            min="1"
+            max="20"
+          />
+        </div>
+      </div>
+      
+      <div className="points-input">
+        <label htmlFor="points">All suits points:</label>
+        <input
+          type="number"
+          id="points"
+          placeholder="Enter base points (1-10)"
+          value={gameState.cardValues.Rosen}
+          onChange={(e) => {
+            const value = Number(e.target.value);
+            updateCardValues({
+              Schellen: value,
+              Schilten: value,
+              Eicheln: value,
+              Rosen: value
+            });
+          }}
+        />
+        <button onClick={resetCardValues} className="secondary">Reset to Defaults</button>
+      </div>
+
+      <div className="button-group">
+        <button onClick={startGame} disabled={gameState.players.length < 2}>
+          Start Game
+        </button>
+        <button onClick={() => window.location.hash = '#history'} className="secondary">
+          View History
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SetupScreen;