feat: Implement Game Type selection step

- Adds the 'GameTypeStep' to the new game wizard.
- Features large, touch-friendly buttons for selecting game types.
- Selection automatically proceeds to the next step.
- Includes progress indicator and back navigation.
- Closes #9

.gitea

@@ -1 +1 @@
-@https://gitea.schwenk.online/froxxxy/bscscore/issues/8
+@https://gitea.schwenk.online/froxxxy/bscscore/issues/9

src/components/App.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
 import GameList from './GameList.jsx';
 import GameDetail from './GameDetail.jsx';
-import { Player1Step, Player2Step, Player3Step } from './NewGame.jsx';
+import { Player1Step, Player2Step, Player3Step, GameTypeStep } from './NewGame.jsx';
 import Modal from './Modal.jsx';
 import ValidationModal from './ValidationModal.jsx';
 import GameCompletionModal from './GameCompletionModal.jsx';
@@ -214,10 +214,11 @@ const App = () => {
               />
             )}
             {newGameStep === 'gameType' && (
-              <div style={{ padding: 40, textAlign: 'center' }}>
-                <h2>Game Type Step (TODO)</h2>
-                <button onClick={() => handleGameTypeNext('8-Ball')}>8-Ball</button>
-              </div>
+              <GameTypeStep
+                onNext={handleGameTypeNext}
+                onCancel={() => setNewGameStep('player3')}
+                initialValue={newGameData.gameType}
+              />
             )}
             {newGameStep === 'raceTo' && (
               <div style={{ padding: 40, textAlign: 'center' }}>

src/components/NewGame.jsx

@@ -429,4 +429,58 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' })
   );
 };
 
-export { Player1Step, Player2Step, Player3Step }; 
+/**
+ * Game Type selection step for multi-step game creation wizard.
+ * @param {object} props
+ * @param {Function} props.onNext
+ * @param {Function} props.onCancel
+ * @param {string} [props.initialValue]
+ * @returns {import('preact').VNode}
+ */
+const GameTypeStep = ({ onNext, onCancel, initialValue = '' }) => {
+  const gameTypes = ['8-Ball', '9-Ball', '10-Ball', '14/1 endlos'];
+
+  const handleSelect = (gameType) => {
+    onNext(gameType);
+  };
+
+  return (
+    <div className={styles['new-game-form']} aria-label="Spielart auswählen">
+      <div className={styles['screen-title']}>Neues Spiel – Schritt 4/5</div>
+      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot'] + ' ' + styles['active']} />
+        <span className={styles['progress-dot']} />
+      </div>
+      <div className={styles['game-type-selection']}>
+        {gameTypes.map(type => (
+          <button
+            key={type}
+            type="button"
+            className={`${styles['game-type-btn']} ${initialValue === type ? styles.selected : ''}`}
+            onClick={() => handleSelect(type)}
+          >
+            {type}
+          </button>
+        ))}
+      </div>
+      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+        <button
+          type="button"
+          className={styles['arrow-btn']}
+          aria-label="Zurück"
+          onClick={onCancel}
+          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
+        >
+          &#8592;
+        </button>
+        {/* No "weiter" arrow, selection proceeds automatically */}
+        <div style={{ width: 80 }} /> {/* Placeholder to balance the flex container */}
+      </div>
+    </div>
+  );
+};
+
+export { Player1Step, Player2Step, Player3Step, GameTypeStep }; 

src/components/NewGame.module.css

@@ -188,4 +188,31 @@
 .clear-input-btn:active, .clear-input-btn:focus {
     color: #fff;
     outline: none;
+}
+.game-type-selection {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    width: 100%;
+    margin: 16px 0;
+}
+.game-type-btn {
+    background: #2a2a2a;
+    border: 2px solid #333;
+    color: #fff;
+    font-size: 1.4rem;
+    font-weight: 600;
+    padding: 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    transition: background 0.2s, border-color 0.2s;
+}
+.game-type-btn:hover {
+    background: #333;
+    border-color: #555;
+}
+.game-type-btn.selected {
+    background: #4a4a4a;
+    border-color: #777;
 }