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/pages/AdminPage.jsx

@@ -29,6 +29,7 @@ export default function AdminPage() {
   const [error, setError] = useState(null);
   const [notice, setNotice] = useState(null);
   const [busy, setBusy] = useState(null);
+  const [tab, setTab] = useState('matches');
 
   const logout = useCallback(() => {
     api('/admin/logout', { method: 'POST', token }).catch(() => {});
@@ -92,17 +93,22 @@ export default function AdminPage() {
         <button className="btn btn-sm" onClick={logout}>Abmelden</button>
       </header>
 
-      {token && <NotificationSettings token={token} setNotice={setNotice} />}
+      <nav className="admin-tabs" aria-label="Admin-Bereiche">
+        <button className={`admin-tab ${tab === 'matches' ? 'is-active' : ''}`} onClick={() => setTab('matches')}>Matches</button>
+        <button className={`admin-tab ${tab === 'settings' ? 'is-active' : ''}`} onClick={() => setTab('settings')}>Einstellungen</button>
+      </nav>
+
+      {tab === 'settings' && token && <NotificationSettings token={token} setNotice={setNotice} />}
       {notice && <div className={`toast toast-${notice.tone}`} role="status">{notice.text}</div>}
       {error && <div className="alert alert-error">{error}</div>}
-      {matches === null && !error && <p className="muted">Lade Matches …</p>}
+      {tab === 'matches' && matches === null && !error && <p className="muted">Lade Matches …</p>}
-      {matches && matches.length === 0 && <p className="muted">Noch keine Matches.</p>}
+      {tab === 'matches' && matches && matches.length === 0 && <p className="muted">Noch keine Matches.</p>}
 
-      <div className="admin-list">
+      {tab === 'matches' && <div className="admin-list">
         {matches?.map((m) => (
           <MatchAdminCard key={m.id} m={m} run={run} busy={busy} token={token} reload={load} setNotice={setNotice} />
         ))}
-      </div>
+      </div>}
     </div>
   );
 }

client/src/styles.css

@@ -517,3 +517,15 @@ 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; }
+
+.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
+.admin-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 14px; font: inherit; cursor: pointer; }
+.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/adminRoutes.js

@@ -81,7 +81,8 @@ export function createAdminRouter({ service, manager, config }) {
   router.put('/notifications', requireAdmin, wrap((req) => service.setNotificationEvents(req.body?.events)));
   router.post('/notifications/test', requireAdmin, wrap(async () => {
     if (!service.notifier.enabled) throw new HttpError(409, 'Kein Discord-Webhook eingerichtet (DISCORD_WEBHOOK_URL)', 'not_configured');
-    if (!(await service.notifier.send('Testmeldung aus CS2 Mapveto'))) {
+    const test = { embeds: [{ title: '🧪 Testmeldung', description: 'Die Verbindung zu CS2 Mapveto funktioniert.', color: 0x3b82f6 }] };
+    if (!(await service.notifier.send(test))) {
       throw new HttpError(502, 'Discord hat die Meldung nicht angenommen (siehe Log)', 'send_failed');
     }
     return { ok: true };

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/discord.js

@@ -27,12 +27,14 @@ export function createDiscordNotifier(url, { fetchImpl = fetch, logger = console
   return {
     enabled: true,
     /** Liefert true, wenn Discord die Nachricht angenommen hat. */
-    async send(content) {
+    async send(message) {
+      // Text oder vollständige Discord-Payload (z. B. mit embeds)
+      const payload = typeof message === 'string' ? { content: message.slice(0, MAX_LENGTH) } : message;
       try {
         const res = await fetchImpl(url, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ content: content.slice(0, MAX_LENGTH) }),
+          body: JSON.stringify(payload),
           signal: AbortSignal.timeout(TIMEOUT_MS),
         });
         if (res.ok) return true;

server/src/matchService.js

@@ -341,11 +341,68 @@ export class MatchService extends EventEmitter {
         .run(firstTeam, this.now(), this.now(), match.id);
       const how = match.veto_start === 'coin' ? 'per Münzwurf ausgelost' : 'vom Organisator festgelegt';
       this.log(match.id, 'veto', `Veto gestartet – ${this.teamName(match, firstTeam)} beginnt (${how})`);
-      this.notify('veto_start', match.id, `Veto gestartet: ${this.matchTitle(match.id)}, ${this.teamName(match, firstTeam)} beginnt`);
+      this.notify('veto_start', match.id, {
+        title: '🎮 Veto gestartet',
+        description: `**${this.matchTitle(match.id)}**`,
+        color: 0x3b82f6,
+        fields: [{ name: 'Beginnt', value: this.teamName(match, firstTeam), inline: true }],
+      });
     })();
     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;
@@ -519,8 +576,16 @@ export class MatchService extends EventEmitter {
         const winner = state.winner ? this.teamName(match, state.winner) : 'Unentschieden';
         this.log(matchId, 'score',
           `Map ${row.number} (${this.mapName(match, row.map)}) beendet: ${match.team_a_name} ${state.score.A}:${state.score.B} ${match.team_b_name} – Sieger: ${winner}`);
-        this.notify('map_end', matchId, `${this.matchTitle(matchId)}
+        this.notify('map_end', matchId, {
-Map ${row.number} (${this.mapName(match, row.map)}) beendet: ${state.score.A}:${state.score.B}, Sieger ${winner}`);
+          title: '🗺️ Map beendet',
+          description: `**${this.matchTitle(matchId)}**`,
+          color: 0xf59e0b,
+          fields: [
+            { name: `Map ${row.number}`, value: this.mapName(match, row.map), inline: true },
+            { name: 'Stand', value: `${state.score.A} : ${state.score.B}`, inline: true },
+            { name: 'Sieger', value: winner, inline: true },
+          ],
+        });
       }
     })();
     if (ended) {
@@ -529,8 +594,18 @@ Map ${row.number} (${this.mapName(match, row.map)}) beendet: ${state.score.A}:${
       const needed = Math.floor(BEST_OF[ended.match.format] / 2) + 1;
       const decided = score.A >= needed ? 'A' : score.B >= needed ? 'B' : null;
       if (decided) this.log(matchId, 'score', `Serie entschieden: ${this.teamName(ended.match, decided)} gewinnt ${score[decided]}:${score[decided === 'A' ? 'B' : 'A']}`);
-      if (decided) this.notify('series_end', matchId, `${this.matchTitle(matchId)}
+      if (decided) {
-Serie entschieden: ${this.teamName(ended.match, decided)} gewinnt ${score[decided]}:${score[decided === 'A' ? 'B' : 'A']}`);
+        const loser = decided === 'A' ? 'B' : 'A';
+        this.notify('series_end', matchId, {
+          title: '🏆 Serie entschieden',
+          description: `**${this.matchTitle(matchId)}**`,
+          color: 0x22c55e,
+          fields: [
+            { name: 'Sieger', value: this.teamName(ended.match, decided), inline: true },
+            { name: 'Serienstand', value: `${score[decided]} : ${score[loser]}`, inline: true },
+          ],
+        });
+      }
       const hasNext = maps.some((m) => m.number === ended.row.number + 1);
       this.changed(matchId);
       this.emit('mapEnded', { matchId, number: ended.row.number, decided, hasNext });
@@ -562,8 +637,12 @@ Serie entschieden: ${this.teamName(ended.match, decided)} gewinnt ${score[decide
       this.db.prepare("UPDATE series_maps SET status = 'done' WHERE match_id = ? AND status IN ('live','next')").run(match.id);
     }
     this.log(match.id, 'status', message ?? (status === 'finished' ? 'Match abgeschlossen' : 'Match abgebrochen'));
-    this.notify('match_closed', match.id, `${this.matchTitle(match.id)}
+    const finished = status === 'finished';
-${message ?? (status === 'finished' ? 'Match abgeschlossen' : 'Match abgebrochen')}`);
+    this.notify('match_closed', match.id, {
+      title: finished ? '✅ Match abgeschlossen' : '⛔ Match abgebrochen',
+      description: `**${this.matchTitle(match.id)}**${message ? `\n${message}` : ''}`,
+      color: finished ? 0x6b7280 : 0x9ca3af,
+    });
     this.setStatus(match.id, status);
     this.emit('closed', match.id);
   }
@@ -610,11 +689,13 @@ ${message ?? (status === 'finished' ? 'Match abgeschlossen' : 'Match abgebrochen
     return this.notificationSettings();
   }
 
-  notify(type, matchId, text) {
+  /** Meldung als Discord-Embed. Ohne Stream-Schlüssel ist der Titel ein Link auf die Match-Übersicht. */
+  notify(type, matchId, embed) {
     if (!this.notifier.enabled || !this.notificationSettings().events[type]) return;
-    const link = this.config.streamKey ? '' : `
+    const url = this.config.streamKey ? undefined : `${this.config.publicUrl}/stream/match/${matchId}`;
-${this.config.publicUrl}/stream/match/${matchId}`;
+    this.notifier.send({
-    this.notifier.send(`${text}${link}`);
+      embeds: [{ ...embed, url, timestamp: new Date(this.now()).toISOString(), footer: { text: 'CS2 Mapveto' } }],
+    });
   }
 
   log(matchId, type, message) {
@@ -812,6 +893,8 @@ ${this.config.publicUrl}/stream/match/${matchId}`;
             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,

server/src/servers/serverManager.js

@@ -265,7 +265,11 @@ export class ServerManager {
     } else if (status.state === 'failed') {
       Object.assign(fields, { status: current.status === 'starting' ? 'start_failed' : 'failed', message: status.message });
       this.service.log(matchId, 'server', `Server-Fehler: ${status.message}`);
-      this.service.notify('server_error', matchId, `Server-Fehler bei ${this.service.matchTitle(matchId)}: ${status.message}`);
+      this.service.notify('server_error', matchId, {
+        title: '⚠️ Serverfehler',
+        description: `**${this.service.matchTitle(matchId)}**\n${status.message}`,
+        color: 0xdc2626,
+      });
     } else if (status.state === 'stopped') {
       Object.assign(fields, { status: 'stopped', stopped_at: Date.now(), message: status.message ?? 'Server wurde extern beendet' });
       this.service.log(matchId, 'server', 'Server wurde außerhalb der Anwendung beendet');
@@ -388,7 +392,17 @@ export class ServerManager {
       throw new HttpError(502, `Befehl konnte nicht gesendet werden: ${err.message}`, 'server_error');
     }
     this.service.log(viewer.matchId, 'server', this.adapter.simulated ? 'Aufwärmphase beendet (simuliert)' : 'Aufwärmphase beendet – Match startet');
-    this.service.notify('match_start', viewer.matchId, `Match gestartet: ${this.service.matchTitle(viewer.matchId)}`);
+    // CSTV-Zugang für Zuschauer, gleiche Form wie im Zuschauerbereich der Webseite
+    const fields = [];
+    if (this.config.match.tvEnabled && row.tv_port) {
+      fields.push({ name: '📺 CSTV', value: `\`password ${row.tv_password}; connect ${row.host}:${row.tv_port}\`` });
+    }
+    this.service.notify('match_start', viewer.matchId, {
+      title: '🔴 Match läuft',
+      description: `**${this.service.matchTitle(viewer.matchId)}**`,
+      color: 0xef4444,
+      fields,
+    });
     if (this.adapter.simulated) this.startDemoSimulation(viewer.matchId);
     this.service.changed(viewer.matchId);
   }