From 9175d505c2c510eb5a2ce75353cfb5e0235d4709 Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Thu, 30 Oct 2025 16:26:38 +0100
Subject: [PATCH] feat(new-game): highlight selected players in break order
 step

- Apply selected styling to first/second player buttons in `BreakOrderStep.tsx`
- Mirrors selection UX from `BreakRuleStep.tsx` for visual feedback

Refs #30
---
 src/components/new-game/BreakOrderStep.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/new-game/BreakOrderStep.tsx b/src/components/new-game/BreakOrderStep.tsx
index d170766..1567313 100644
--- a/src/components/new-game/BreakOrderStep.tsx
+++ b/src/components/new-game/BreakOrderStep.tsx
@@ -50,7 +50,15 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
       <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
       <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
         {players.filter(Boolean).map((name, idx) => (
-          <button key={`first-${idx}`} type="button" className={styles['quick-pick-btn']} onClick={() => handleFirst(idx + 1)} aria-label={`Zuerst: ${name}`}>{name}</button>
+          <button
+            key={`first-${idx}`}
+            type="button"
+            className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
+            onClick={() => handleFirst(idx + 1)}
+            aria-label={`Zuerst: ${name}`}
+          >
+            {name}
+          </button>
         ))}
       </div>
       {rule === 'wechselbreak' && playerCount === 3 && (
@@ -58,7 +66,15 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
           <div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
           <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
             {players.filter(Boolean).map((name, idx) => (
-              <button key={`second-${idx}`} type="button" className={styles['quick-pick-btn']} onClick={() => handleSecond(idx + 1)} aria-label={`Zweites Break: ${name}`}>{name}</button>
+              <button
+                key={`second-${idx}`}
+                type="button"
+                className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
+                onClick={() => handleSecond(idx + 1)}
+                aria-label={`Zweites Break: ${name}`}
+              >
+                {name}
+              </button>
             ))}
           </div>
         </>