Übersicht: laufende Matches als Karten mit Map, Stand und Serie

client/src/pages/Overview.jsx

@@ -4,6 +4,7 @@ import { api } from '../lib/api.js';
 import { FORMAT_LABEL, serverLabel, timeAgo } from '../lib/labels.js';
 import { getAccess } from '../lib/session.js';
 import { useOverview } from '../lib/useMatch.js';
+import MapImage from '../components/MapImage.jsx';
 
 const GROUPS = [
   { key: 'open', title: 'Offen', empty: 'Keine offenen Lobbys. Erstelle ein Match, um zu starten.' },
@@ -32,7 +33,11 @@ export default function Overview() {
             return (
               <section key={g.key} className={`group group-${g.key}`}>
                 <h2>{g.title} <span className="count">{list.length}</span></h2>
-                {list.length === 0 ? <p className="muted small">{g.empty}</p> : (
+                {list.length === 0 ? <p className="muted small">{g.empty}</p> : g.key === 'running' ? (
+                  <div className="run-grid">
+                    {list.map((m) => <RunningCard key={m.id} match={m} />)}
+                  </div>
+                ) : (
                   <ul className="match-list">
                     {list.map((m) => <MatchRow key={m.id} match={m} />)}
                   </ul>
@@ -79,6 +84,34 @@ function MatchRow({ match: m }) {
   );
 }
 
+/** Karte für ein laufendes Match: Map als Hintergrund, Stand groß, Serie und Status darunter. */
+function RunningCard({ match: m }) {
+  const server = serverLabel(m.server);
+  const map = m.currentMap;
+  const live = map && !map.finished;
+  const bo1 = m.format === 'bo1';
+  return (
+    <Link to={`/m/${m.id}`} className={`run-card ${live ? 'is-live' : ''}`} style={{ '--map': map?.color ?? '#3a4150' }}>
+      {map?.image && <MapImage map={{ image: map.image, color: map.color, name: map.name }} className="run-art" />}
+      <div className="run-top">
+        <span className="run-mode">{m.modeLabel}, {FORMAT_LABEL[m.format]}</span>
+        {live ? <span className="live-badge run-live">Live</span> : <span className={`run-status tone-${server.tone}`}>{m.statusLabel}</span>}
+      </div>
+      <div className="run-teams">
+        <span className="run-team a">{m.teamA}</span>
+        <span className="run-score">
+          {map ? <>{map.score.A}<i>:</i>{map.score.B}</> : <i className="run-vs">vs.</i>}
+        </span>
+        <span className="run-team b">{m.teamB}</span>
+      </div>
+      <div className="run-foot">
+        <span>{map ? `Map ${map.number}: ${map.name}` : 'Veto läuft'}</span>
+        {!bo1 && m.seriesScore && <span className="run-series">Serie {m.seriesScore.A}:{m.seriesScore.B}</span>}
+      </div>
+    </Link>
+  );
+}
+
 function CodeEntry() {
   const [code, setCode] = useState('');
   const [error, setError] = useState(null);