Veto-Timer: 30 Sekunden pro Schritt, danach automatische Auswahl

Läuft die Frist eines Veto-Schritts ab (VETO_STEP_SECONDS, Standard 30,
0 = aus), wählt das Backend für das Team am Zug eine zufällige Map bzw.
Seite. Die Veto-Anzeige zeigt die verbleibende Zeit.

client/src/components/VetoBoard.jsx

@@ -10,6 +10,7 @@ export default function VetoBoard({ state, viewer, act, busy, compact = false })
   const { current } = veto;
   const [selected, setSelected] = useState(null);
   useEffect(() => setSelected(null), [current?.index]);
+  const left = useCountdown(veto.remainingMs);
 
   const mapsById = Object.fromEntries(state.maps.map((m) => [m.id, m]));
   const yourTurn = !!current && viewer.isCaptain && viewer.team === current.team;
@@ -38,6 +39,7 @@ export default function VetoBoard({ state, viewer, act, busy, compact = false })
                   ? 'Live-Ansicht – nur Captains können wählen.'
                   : 'Das andere Team ist am Zug.'}
           </span>
+          {left !== null && <span className="turn-timer">Noch {Math.ceil(left / 1000)} s</span>}
         </div>
       )}
       {!current && veto.done && !compact && <div className="turn turn-done">Veto abgeschlossen</div>}
@@ -129,3 +131,16 @@ function statusText(m, teams) {
     default: return 'Verfügbar';
   }
 }
+
+/** Verbleibende Zeit des Veto-Schritts: der Server setzt sie bei jeder Änderung, danach zählt die Anzeige lokal herunter. */
+function useCountdown(ms) {
+  const [left, setLeft] = useState(ms ?? null);
+  useEffect(() => {
+    setLeft(ms ?? null);
+    if (ms == null) return undefined;
+    const started = Date.now();
+    const t = setInterval(() => setLeft(Math.max(0, ms - (Date.now() - started))), 250);
+    return () => clearInterval(t);
+  }, [ms]);
+  return left;
+}

client/src/styles.css

@@ -517,3 +517,5 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
 .admin-settings h2 { margin: 0 0 12px; font-size: 1.1rem; }
 .admin-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin-bottom: 12px; }
 .admin-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+
+.turn-timer { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }