Server-Seite ueberarbeitet, und die Spielauswahl kommt jetzt aus gamedig

LS25 fehlte, aber nicht nur LS25: die Auswahl im Panel war eine von Hand
gepflegte Liste mit neunzehn Eintraegen, und fuenf davon gab es bei gamedig
gar nicht — "arkse", "ark", "sevendaystodie", "minecraftbe" und "terraria".
Wer eines davon auswaehlte, bekam einen Server, der dauerhaft offline stand,
ohne dass irgendwo ein Grund stand. Die echten IDs heissen ase, sdtd, mbe und
terrariatshock.

Also nicht LS25 nachtragen, sondern die Liste abschaffen: sie kommt jetzt aus
gamedig selbst, 360 Eintraege, sortiert, mit Suche. Jedes Update bringt neue
Spiele automatisch mit. Dazu der Standard-Query-Port als Vorschlag, sobald man
ein Spiel waehlt. Bestehende Eintraege mit den toten IDs werden beim Start
einmalig umgebogen.

Farming Simulator hat noch eine zweite Huerde: der Server antwortet nur mit
Zugangs-Code, und den hat queryServer nie durchgereicht. LS25 waere also auch
mit richtiger ID offline geblieben. Jetzt gibt es eine Spalte dafuer, das Feld
erscheint nur bei Spielen, die einen brauchen (Farming Simulator, Terraria —
bei Satisfactory optional), und Speichern ohne Code wird abgelehnt statt
stillschweigend hingenommen. Der Code steht nicht in der oeffentlichen API.

Nebenbei aufgefallen: input[type=password] war im CSS nirgends erfasst. Das
erste solche Feld kam voellig ungestylt daher.

Die /server-Seite dazu:

- Auslastungs-Balken mit eigener Farbe statt des XP-Balkens vom Level-System.
  Gruen frei, gelb ab 80 Prozent, rot voll — die Zahl steht rechtsbuendig,
  mittig laege sie bei 50 Prozent genau auf der Fuellkante.
- Map, Version und Ping als Chips. Vorher standen sie mit Punkten getrennt in
  der Statuszeile und wurden auf dem Handy zu Brei.
- Wer gerade drauf ist. Die Namen holt der Monitor ohnehin schon fuers Embed,
  auf der Seite standen sie nur nirgends.
- Welches Spiel es ueberhaupt ist. Das stand nirgends ausser im Emoji.
- Offline-Karten waren bisher leer bis auf das Wort. Jetzt steht dort, seit
  wann — soweit der Verlauf reicht, sonst gar nichts statt einer Schaetzung.
- Zeitachse und Peak-Linie am Verlauf. Eine Flaeche ohne Bezugspunkt sagt
  nicht, wie hoch hoch ist.
- Plaetze insgesamt in der Uebersicht oben.

Geprueft: Token speichern und aendern, Spielnamen inklusive unbekannter ID,
Token-Bedarf pro Protokoll, Liste ohne Doppler, alle Icon-Schluessel gegen
gamedig, "zuletzt online" ignoriert Offline-Proben, und die Migration mit einer
Datenbank im alten Stand. Beide Seiten am laufenden Frontend angesehen, auch
auf Handybreite.

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

frontend/src/pages/Server.jsx

@@ -4,23 +4,39 @@
 import { useEffect, useState } from 'react';
 import { apiGet } from '../api.js';
 import { SkeletonCards } from '../components/Skeleton.jsx';
-import { IconGame, IconMapPin, IconClock, IconCheck } from '../icons.jsx';
+import { IconGame, IconMapPin, IconClock, IconCheck, IconTeam, IconPackage, IconZap } from '../icons.jsx';
 import { useT, useFmt } from '../i18n.jsx';
 import UptimeTrack from '../components/UptimeTrack.jsx';
 
 const UHRZEIT = { hour: '2-digit', minute: '2-digit' };
 
-/** 24h-Verlauf als SVG-Fläche; Offline-Samples als rote Punkte auf der Nulllinie */
+/** "vor 3 Std." — grob genug, dass es nicht jede Minute anders aussieht */
+function vorWieLange(iso, t) {
+    // SQLite liefert "YYYY-MM-DD HH:MM:SS" ohne Zeitzone; das ist UTC.
+    const ts = Date.parse(iso.includes('T') ? iso : `${iso.replace(' ', 'T')}Z`);
+    if (Number.isNaN(ts)) return null;
+    const min = Math.max(1, Math.round((Date.now() - ts) / 60000));
+    if (min < 60) return t('server.agoMin', min);
+    const std = Math.round(min / 60);
+    if (std < 48) return t('server.agoHours', std);
+    return t('server.agoDays', Math.round(std / 24));
+}
+
+/** 24h-Verlauf als SVG-Fläche; Offline-Samples als rote Punkte auf der Nulllinie.
+ *  Der Peak bekommt eine eigene Linie — ohne die ist eine Fläche ohne Achse nur
+ *  Dekoration und man kann nicht sagen, wie hoch „hoch" eigentlich ist. */
 function HistoryChart({ history, max }) {
     if (history.length < 2) return null;
-    const W = 600, H = 90, PAD = 4;
-    const peak = Math.max(max ?? 0, 1, ...history.map((h) => h.players ?? 0));
+    const W = 600, H = 100, PAD = 4;
+    const spitze = Math.max(0, ...history.map((h) => (h.online ? h.players ?? 0 : 0)));
+    const peak = Math.max(max ?? 0, 1, spitze);
     const x = (i) => PAD + (i / (history.length - 1)) * (W - PAD * 2);
     const y = (p) => H - PAD - ((p ?? 0) / peak) * (H - PAD * 2);
 
     const points = history.map((h, i) => `${x(i).toFixed(1)},${y(h.online ? h.players : 0).toFixed(1)}`);
     const area = `${PAD},${H - PAD} ${points.join(' ')} ${W - PAD},${H - PAD}`;
     const offline = history.map((h, i) => (h.online ? null : i)).filter((i) => i !== null);
+    const spitzeY = y(spitze);
 
     return (
         <svg className="srv-chart" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" aria-hidden="true">
@@ -30,6 +46,13 @@ function HistoryChart({ history, max }) {
                     <stop offset="100%" stopColor="var(--neon)" stopOpacity="0" />
                 </linearGradient>
             </defs>
+            {/* Peak-Linie: der Bezugspunkt für alles darunter */}
+            {spitze > 0 && (
+                <line
+                    className="srv-chart-peak" x1={PAD} x2={W - PAD} y1={spitzeY} y2={spitzeY}
+                    strokeDasharray="3 5"
+                />
+            )}
             <polygon points={area} fill="url(#srvFill)" />
             <polyline points={points.join(' ')} fill="none" stroke="var(--neon)" strokeWidth="1.5" />
             {offline.map((i) => (
@@ -49,8 +72,14 @@ function ServerCard({ s }) {
     const { t } = useT();
     const { datum } = useFmt();
     const [copied, setCopied] = useState(false);
+    const [alleSpieler, setAlleSpieler] = useState(false);
     const pct = s.online && s.max ? Math.round((s.players / s.max) * 100) : 0;
     const stats = historyStats(s.history);
+    // Ab 80 % wird es eng, ab 100 % kommt keiner mehr rein — das soll man
+    // sehen, ohne den Balken mit der Zahl daneben zu vergleichen.
+    const fuellung = pct >= 100 ? 'voll' : pct >= 80 ? 'eng' : 'frei';
+    const namen = s.spielerNamen ?? [];
+    const gezeigt = alleSpieler ? namen : namen.slice(0, 8);
 
     async function copyAddress() {
         try {
@@ -72,10 +101,9 @@ function ServerCard({ s }) {
                         {s.online === null
                             ? <><IconClock size={13} /> {t('server.waiting')}</>
                             : <><span className="srv-dot" /> {s.online ? t('server.online') : t('server.offline')}</>}
-                        {s.ping != null && s.online && <span className="srv-ping"> · {s.ping}ms</span>}
-                        {s.map && s.online && (
-                            <span className="srv-map"> · <IconMapPin size={13} /> {s.map}</span>
-                        )}
+                        {/* Das Spiel gehört zum Server, nicht zum Zustand — es
+                            steht auch dann noch da, wenn nichts antwortet. */}
+                        {s.spiel && <span className="srv-spiel">{s.spiel}</span>}
                     </span>
                 </div>
                 {s.online && s.players != null && (
@@ -87,8 +115,41 @@ function ServerCard({ s }) {
             </div>
 
             {s.online && s.players != null && s.max > 0 && (
-                <div className="xp-bar srv-bar">
-                    <div className="xp-fill" style={{ width: `${Math.min(100, pct)}%` }} />
+                <div className={`srv-cap ${fuellung}`}>
+                    <div className="srv-cap-fill" style={{ width: `${Math.min(100, pct)}%` }} />
+                    <span className="srv-cap-pct">{pct}%</span>
+                </div>
+            )}
+
+            {/* Was der Server über sich verrät — nur, was auch da ist */}
+            {s.online && (s.map || s.ping != null || s.version) && (
+                <div className="srv-chips">
+                    {s.map && <span className="srv-chip"><IconMapPin size={12} /> {s.map}</span>}
+                    {s.version && <span className="srv-chip"><IconPackage size={12} /> {s.version}</span>}
+                    {s.ping != null && <span className="srv-chip"><IconZap size={12} /> {s.ping} ms</span>}
+                </div>
+            )}
+
+            {/* Offline: die eine Frage, die dann zählt */}
+            {s.online === false && (
+                <p className="srv-weg">
+                    {s.zuletztOnline
+                        ? t('server.lastOnline', vorWieLange(s.zuletztOnline, t) ?? '—')
+                        : t('server.neverOnline')}
+                </p>
+            )}
+
+            {namen.length > 0 && (
+                <div className="srv-spieler">
+                    <span className="srv-spieler-kopf"><IconTeam size={13} /> {t('server.whoIsOn')}</span>
+                    <div className="srv-namen">
+                        {gezeigt.map((n) => <span className="srv-name-chip" key={n}>{n}</span>)}
+                        {!alleSpieler && namen.length > gezeigt.length && (
+                            <button className="srv-mehr" onClick={() => setAlleSpieler(true)}>
+                                {t('server.andMore', namen.length - gezeigt.length)}
+                            </button>
+                        )}
+                    </div>
                 </div>
             )}
 
@@ -101,6 +162,12 @@ function ServerCard({ s }) {
                     <span>{t('server.peak')} <b>{stats.peak}</b></span>
                 </div>
             )}
+            {s.history.length > 1 && (
+                <div className="srv-achse">
+                    <span>{t('server.hours24')}</span>
+                    <span>{t('server.now')}</span>
+                </div>
+            )}
 
             <UptimeTrack buckets={s.uptime} />
 
@@ -140,6 +207,7 @@ export default function Server() {
 
     const online = servers?.filter((s) => s.online) ?? [];
     const totalPlayers = online.reduce((sum, s) => sum + (s.players ?? 0), 0);
+    const totalSlots = online.reduce((sum, s) => sum + (s.max ?? 0), 0);
 
     return (
         <>
@@ -168,6 +236,14 @@ export default function Server() {
                             <span className="srv-sum-n">{totalPlayers}</span>
                             <span className="srv-sum-label">{t('server.playersNow')}</span>
                         </div>
+                        {/* Nur wenn überhaupt jemand eine Obergrenze meldet —
+                            ein HTTP-Check hat keine Plätze. */}
+                        {totalSlots > 0 && (
+                            <div className="srv-sum-item">
+                                <span className="srv-sum-n">{totalSlots}</span>
+                                <span className="srv-sum-label">{t('server.slots')}</span>
+                            </div>
+                        )}
                     </div>
                 )}