Veto-Timer als Leiste in Teamfarbe

Die verbleibende Zeit des Veto-Schritts erscheint als Leiste mit
Sekundenanzeige, in den letzten 10 Sekunden rot. Der Server schickt
die Schrittdauer mit, damit die Leiste zu VETO_STEP_SECONDS passt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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 && <TimerBar left={left} totalMs={(veto.stepSeconds || 30) * 1000} />}
         </div>
       )}
       {!current && veto.done && !compact && <div className="turn turn-done">Veto abgeschlossen</div>}
@@ -129,3 +131,28 @@ function statusText(m, teams) {
     default: return 'Verfügbar';
   }
 }
+
+/** Leiste für die verbleibende Zeit des Veto-Schritts. In den letzten 10 Sekunden wird sie rot. */
+function TimerBar({ left, totalMs }) {
+  const seconds = Math.ceil(left / 1000);
+  const percent = Math.max(0, Math.min(100, (left / totalMs) * 100));
+  return (
+    <div className={`turn-timer ${left <= 10_000 ? 'is-low' : ''}`} role="timer" aria-label={`Noch ${seconds} Sekunden`}>
+      <div className="turn-bar"><span style={{ width: `${percent}%` }} /></div>
+      <span className="turn-seconds">{seconds} s</span>
+    </div>
+  );
+}
+
+/** 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

@@ -523,3 +523,9 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
 .admin-tab:hover { color: var(--text); }
 .admin-tab.is-active { color: var(--text); border-bottom-color: var(--primary); }
 
+.turn-timer { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+.turn-bar { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--team) 18%, transparent); overflow: hidden; }
+.turn-bar span { display: block; height: 100%; background: var(--team); transition: width .25s linear; }
+.turn-seconds { min-width: 3ch; text-align: right; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
+.turn-timer.is-low .turn-bar span { background: var(--error); }
+.turn-timer.is-low .turn-seconds { color: var(--error); font-weight: 600; }

server/src/app.js

@@ -23,6 +23,7 @@ export function createApp(config, { adapter: adapterOverride, logger = console }
   const adapter = adapterOverride ?? createServerAdapter(config, { getUsedPorts: () => manager.usedPorts() });
   manager = new ServerManager({ db, service, adapter, config, logger });
   manager.init();
+  service.startVetoTimer();
 
   const app = express();
   if (config.trustProxy) app.set('trust proxy', 1);
@@ -54,6 +55,7 @@ export function createApp(config, { adapter: adapterOverride, logger = console }
     },
     async close() {
       manager.stopLoops();
+      service.stopVetoTimer();
       // Laufende Server-Aktionen (Start, Konfiguration) kurz abwarten, bevor die Datenbank schließt
       await manager.idle(5000);
       io.disposeRealtime();

server/src/config.js

@@ -52,6 +52,8 @@ export function loadConfig(overrides = {}) {
     maxLifetimeHours: int('SERVER_MAX_LIFETIME_HOURS', 8),
     statusPollSeconds: int('SERVER_STATUS_POLL_SECONDS', 5),
     reaperIntervalSeconds: int('SERVER_REAPER_INTERVAL_SECONDS', 60),
+    // Frist pro Veto-Schritt in Sekunden, danach führt das Backend den Schritt automatisch aus. 0 = keine Frist
+    vetoStepSeconds: int('VETO_STEP_SECONDS', 30),
 
     match: {
       tvDelaySeconds: int('CS2_TV_DELAY', 90),

server/src/matchService.js

@@ -351,6 +351,58 @@ export class MatchService extends EventEmitter {
     this.changed(viewer.matchId);
   }
 
+  /** Ablaufzeitpunkt des aktuellen Veto-Schritts (ms), null wenn keine Frist gilt. */
+  vetoDeadline(match) {
+    if (!this.config.vetoStepSeconds || match.status !== 'veto') return null;
+    const actions = this.vetoActions(match.id);
+    const since = actions.length ? actions[actions.length - 1].created_at : match.veto_started_at;
+    return since == null ? null : since + this.config.vetoStepSeconds * 1000;
+  }
+
+  vetoRemainingMs(match) {
+    const deadline = this.vetoDeadline(match);
+    return deadline === null ? null : Math.max(0, deadline - this.now());
+  }
+
+  /** Führt den aktuellen Veto-Schritt für das Team am Zug aus: zufällige Map bzw. zufällige Seite. */
+  autoVetoStep(match) {
+    const state = this.vetoState(match);
+    if (state.done || !state.current) return;
+    const { type, team, index } = state.current;
+    const pick = (list) => list[Math.floor(Math.random() * list.length)];
+    const viewer = {
+      matchId: match.id, role: 'captain', isOrganizer: false, isCaptain: true, isSpectator: false, playerId: null, team,
+    };
+    const action = type === 'side'
+      ? { stepIndex: index, side: pick(['CT', 'T']) }
+      : { stepIndex: index, map: pick(state.maps.filter((m) => m.status === 'available')).id };
+    this.log(match.id, 'veto', `Zeit abgelaufen – ${this.teamName(match, team)} wird automatisch vertreten`);
+    this.vetoAction(viewer, action);
+  }
+
+  /** Läuft die Frist eines Veto-Schritts ab, führt das Backend den Schritt aus. */
+  autoVetoTimeouts() {
+    for (const match of this.db.prepare("SELECT * FROM matches WHERE status = 'veto'").all()) {
+      const deadline = this.vetoDeadline(match);
+      if (deadline === null || this.now() < deadline) continue;
+      try {
+        this.autoVetoStep(match);
+      } catch (err) {
+        this.log(match.id, 'veto', `Automatischer Schritt fehlgeschlagen: ${err.message}`);
+      }
+    }
+  }
+
+  startVetoTimer() {
+    if (!this.config.vetoStepSeconds || this.vetoTimer) return;
+    this.vetoTimer = setInterval(() => this.autoVetoTimeouts(), 1000);
+  }
+
+  stopVetoTimer() {
+    clearInterval(this.vetoTimer);
+    this.vetoTimer = null;
+  }
+
   vetoAction(viewer, { stepIndex, map, side }) {
     this.require(viewer, 'captain');
     let finished = false;
@@ -841,6 +893,8 @@ export class MatchService extends EventEmitter {
             steps: veto.steps,
             maps: veto.maps,
             current: match.status === 'veto' ? veto.current : null,
+            remainingMs: this.vetoRemainingMs(match),
+            stepSeconds: this.config.vetoStepSeconds,
             done: veto.done,
             history: actions.map((a) => ({
               index: a.idx,