Messer-Server für die Seitenwahl: 5v5/2v2, im Admin startbar, setzen sich nach der Runde selbst zurück

client/src/pages/Overview.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { api } from '../lib/api.js';
 import { FORMAT_LABEL, serverLabel, timeAgo } from '../lib/labels.js';
@@ -24,6 +24,8 @@ export default function Overview() {
         <CodeEntry />
       </section>
 
+      <KnifeServers />
+
       {matches === null ? (
         <p className="muted">Lade Matches …</p>
       ) : (
@@ -137,3 +139,36 @@ function CodeEntry() {
     </form>
   );
 }
+/** Offene Messer-Server für die Seitenwahl, zum direkten Verbinden. */
+function KnifeServers() {
+  const [servers, setServers] = useState([]);
+  useEffect(() => {
+    let alive = true;
+    const load = () => api('/knife-servers').then((res) => alive && setServers(res.servers)).catch(() => {});
+    load();
+    const t = setInterval(load, 10_000);
+    return () => {
+      alive = false;
+      clearInterval(t);
+    };
+  }, []);
+  if (servers.length === 0) return null;
+  return (
+    <section className="group knife-public">
+      <h2>Messer-Server für die Seitenwahl <span className="count">{servers.length}</span></h2>
+      <p className="muted small">Ohne Passwort, auch im LAN-Reiter von Steam. Nach eurer Messerrunde setzt sich der Server selbst zurück.</p>
+      <ul className="knife-list">
+        {servers.map((k) => (
+          <li key={k.id}>
+            <strong>{k.name}</strong>
+            {k.modeShort && <span className="knife-mode">{k.modeShort}</span>}
+            <span className="muted small">{k.mapName}</span>
+            <span className="small">{k.playerCount ? `${k.playerCount} Spieler` : 'frei'}</span>
+            <code>{k.connect}</code>
+            <a className="btn btn-sm" href={k.steamUrl}>Verbinden</a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}