Add a dedicated player page

2026-06-04 09:06:54 +00:00 · 2026-05-18 00:52:24 -04:00
parent 823ee61a07
commit d74b07f00e
23 changed files with 1619 additions and 327 deletions
@@ -1,7 +1,7 @@
 (function () {
-    const POLL_MS = 3000;
    const SPARK_MAX = 60;
    const tpsHistory = [];
+    let serverStartTime = null;

    const fmt = {
        pct(n) {
@@ -112,18 +112,6 @@
        }
    }

-    async function refresh() {
-        try {
-            const r = await fetch('/api/stats/', {cache: 'no-store'});
-            if (!r.ok) throw new Error('HTTP ' + r.status);
-            const s = await r.json();
-            paint(s);
-            setStatus(true);
-        } catch (e) {
-            setStatus(false);
-        }
-    }
-
    function setStatus(ok) {
        document.querySelectorAll('[data-status="text"]').forEach(el => {
            el.textContent = ok ? 'online' : 'offline';
@@ -134,6 +122,11 @@
        });
    }

+    function tickUptime() {
+        if (serverStartTime == null) return;
+        setText('[data-stat="uptime"]', fmt.duration(Date.now() - serverStartTime));
+    }
+
    function paint(s) {
        setText('[data-stat="players-online"]', String(s.players.online));
        setText('[data-stat="players-max"]', String(s.players.max));
@@ -164,7 +157,10 @@
        if (tpsHistory.length > SPARK_MAX) tpsHistory.shift();
        renderSparkline(tpsHistory);

-        setText('[data-stat="uptime"]', fmt.duration(s.server.uptime));
+        if (typeof s.server.startTime === 'number' && serverStartTime !== s.server.startTime) {
+            serverStartTime = s.server.startTime;
+            tickUptime();
+        }
        setText('[data-stat="version"]', s.server.version);

        setText('[data-stat="chunks"]', fmt.int(s.world.loadedChunks));
@@ -173,6 +169,21 @@
        setText('[data-stat="plugins"]', fmt.int(s.plugins.active));
    }

-    refresh();
-    setInterval(refresh, POLL_MS);
+    function connect() {
+        const es = new EventSource('/api/stats/stream');
+        es.addEventListener('open', () => setStatus(true));
+        es.addEventListener('message', (evt) => {
+            try {
+                paint(JSON.parse(evt.data));
+                setStatus(true);
+            } catch (e) {
+                // ignore malformed frame; next tick will overwrite
+            }
+        });
+        es.addEventListener('error', () => setStatus(false));
+        return es;
+    }
+
+    setInterval(tickUptime, 1000);
+    connect();
 })();
@@ -0,0 +1,84 @@
+(function () {
+    const pingEl = document.querySelector('[data-player-ping]');
+    const statusEl = document.querySelector('[data-player-status]');
+    const worldEl = document.querySelector('[data-player-world]');
+    const gamemodeEl = document.querySelector('[data-player-gamemode]');
+    if (!pingEl) return;
+    const uuid = pingEl.getAttribute('data-uuid');
+    if (!uuid) return;
+
+    function pingColor(ping) {
+        if (ping < 80) return 'text-success';
+        if (ping < 200) return 'text-warning';
+        return 'text-destructive';
+    }
+
+    function setOffline() {
+        pingEl.textContent = '—';
+        pingEl.classList.remove('text-success', 'text-warning', 'text-destructive');
+        if (statusEl) {
+            statusEl.textContent = 'offline';
+            statusEl.classList.remove('text-success');
+            statusEl.classList.add('text-muted-foreground');
+        }
+        if (worldEl) worldEl.textContent = '—';
+        if (gamemodeEl) gamemodeEl.textContent = '—';
+    }
+
+    function setOnline(p) {
+        pingEl.textContent = (p.ping | 0) + 'ms';
+        pingEl.classList.remove('text-success', 'text-warning', 'text-destructive');
+        pingEl.classList.add(pingColor(p.ping));
+        if (statusEl) {
+            statusEl.textContent = 'online';
+            statusEl.classList.remove('text-muted-foreground');
+            statusEl.classList.add('text-success');
+        }
+        if (worldEl) worldEl.textContent = p.world || '—';
+        if (gamemodeEl) gamemodeEl.textContent = p.gamemode ? p.gamemode.toLowerCase() : '—';
+    }
+
+    function handle(state) {
+        const players = Array.isArray(state.players) ? state.players : [];
+        const match = players.find(p => p.uuid === uuid);
+        if (match) setOnline(match);
+        else setOffline();
+    }
+
+    const es = new EventSource('/api/players/stream/staff');
+    es.addEventListener('message', (evt) => {
+        try { handle(JSON.parse(evt.data)); }
+        catch (e) {}
+    });
+
+    // Action dialog wiring.
+    const dialog = document.getElementById('action-dialog');
+    const form = document.getElementById('action-form');
+    if (!dialog || !form) return;
+    const actionInput = form.querySelector('[data-action-input]');
+    const actionLabel = form.querySelector('[data-action-label]');
+    const durationField = form.querySelector('[data-duration-field]');
+    const reasonInput = form.querySelector('input[name="reason"]');
+
+    document.querySelectorAll('[data-admin-action]').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const action = btn.getAttribute('data-admin-action');
+            const isTemp = btn.getAttribute('data-admin-temp') === 'true';
+            actionInput.value = action;
+            actionLabel.textContent = action;
+            durationField.hidden = !isTemp;
+            durationField.querySelector('select').disabled = !isTemp;
+            if (reasonInput) reasonInput.value = '';
+            if (typeof dialog.showModal === 'function') {
+                dialog.showModal();
+            } else {
+                dialog.setAttribute('open', '');
+            }
+            if (reasonInput) setTimeout(() => reasonInput.focus(), 0);
+        });
+    });
+
+    form.querySelectorAll('[data-dialog-cancel]').forEach(btn => {
+        btn.addEventListener('click', () => dialog.close());
+    });
+})();
@@ -0,0 +1,116 @@
+(function () {
+    const grid = document.getElementById('players-grid');
+    const filterInput = document.getElementById('player-filter');
+    if (!grid) return;
+
+    const isStaff = grid.dataset.staff === 'true';
+    let filter = '';
+
+    function escapeHtml(s) {
+        if (s == null) return '';
+        return String(s)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+
+    function pingColor(ping) {
+        if (ping < 80) return 'text-success';
+        if (ping < 200) return 'text-warning';
+        return 'text-destructive';
+    }
+
+    function renderCard(p) {
+        const safeName = escapeHtml(p.name);
+        const safeUuid = encodeURIComponent(p.uuid);
+        const opChip = p.op
+            ? '<span class="inline-flex h-5 items-center rounded-full bg-primary/12 px-2 text-xs text-primary">op</span>'
+            : '';
+        const worldLabel = p.world ? 'In ' + escapeHtml(p.world) : '';
+        const separator = worldLabel ? '<span class="text-foreground/30">·</span>' : '';
+        const body = `
+                <img class="size-10 rounded-lg bg-muted [image-rendering:pixelated]"
+                     src="https://vzge.me/face/512/${safeUuid}.png"
+                     alt="" loading="lazy" width="40" height="40">
+                <div class="min-w-0 flex-1">
+                    <div class="flex items-center gap-2">
+                        <span class="truncate text-sm font-medium">${safeName}</span>
+                        ${opChip}
+                    </div>
+                    <div class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
+                        <span>${worldLabel}</span>
+                        ${separator}
+                        <span class="tabular ${pingColor(p.ping)}">${p.ping | 0}ms</span>
+                    </div>
+                </div>
+        `;
+        if (isStaff) {
+            return `
+                <a href="/player/${safeUuid}"
+                   class="ring-card group flex items-center gap-3 rounded-2xl bg-card p-3 transition-colors hover:bg-secondary/50"
+                   data-name="${safeName.toLowerCase()}"
+                   title="Open admin panel for ${safeName}">${body}</a>
+            `;
+        }
+        return `
+            <div class="ring-card flex items-center gap-3 rounded-2xl bg-card p-3"
+                 data-name="${safeName.toLowerCase()}">${body}</div>
+        `;
+    }
+
+    function renderEmpty() {
+        return `
+            <div class="ring-card col-span-full rounded-2xl bg-card p-10 text-center">
+                <svg class="mx-auto size-8 text-muted-foreground/60" aria-hidden="true"><use href="#i-users"/></svg>
+                <p class="mt-3 text-sm text-muted-foreground">No players online right now.</p>
+            </div>
+        `;
+    }
+
+    function applyFilter() {
+        const q = filter;
+        const cards = grid.querySelectorAll('[data-name]');
+        cards.forEach(c => {
+            const n = c.getAttribute('data-name') || '';
+            c.style.display = (!q || n.includes(q)) ? '' : 'none';
+        });
+    }
+
+    function paint(state) {
+        const players = Array.isArray(state.players) ? state.players : [];
+        document.querySelectorAll('[data-stat="players-online"]').forEach(el => {
+            el.textContent = String(players.length);
+        });
+        document.querySelectorAll('[data-stat="players-max"]').forEach(el => {
+            el.textContent = String(state.max ?? 0);
+        });
+        grid.innerHTML = players.length === 0
+            ? renderEmpty()
+            : players.map(renderCard).join('');
+        applyFilter();
+    }
+
+    if (filterInput) {
+        filterInput.addEventListener('input', () => {
+            filter = filterInput.value.toLowerCase().trim();
+            applyFilter();
+        });
+    }
+
+    function connect() {
+        const endpoint = isStaff ? '/api/players/stream/staff' : '/api/players/stream';
+        const es = new EventSource(endpoint);
+        es.addEventListener('message', (evt) => {
+            try {
+                paint(JSON.parse(evt.data));
+            } catch (e) {
+                // ignore malformed frame
+            }
+        });
+        return es;
+    }
+
+    connect();
+})();
@@ -53,11 +53,17 @@ ${commands}
        }

        if (toggle) {
+            const syncToggleButton = () => {
+                const allClosed = sections.every(s => !s.open);
+                toggle.dataset.state = allClosed ? 'closed' : 'open';
+                toggle.textContent = allClosed ? 'Expand all' : 'Collapse all';
+            };
+
+            sections.forEach(s => s.addEventListener('toggle', syncToggleButton));
+
            toggle.addEventListener('click', () => {
                const willOpen = toggle.dataset.state !== 'open';
                sections.forEach(s => { s.open = willOpen; });
-                toggle.dataset.state = willOpen ? 'open' : 'closed';
-                toggle.textContent = willOpen ? 'Collapse all' : 'Expand all';
            });
        }
    })();
@@ -20,6 +20,15 @@ server:
    accept-queue: 32            # OS-level backlog of pending TCP connects
    request-header-bytes: 8192  # cap header size; oversized requests get 431

+  # Server-Sent Events stream for the live dashboard. One connection per
+  # open dashboard tab; the broadcaster pushes a stats frame on a fixed cadence
+  # so the page never has to poll. Bounded so a flood of dashboards can't
+  # exhaust Jetty's thread pool.
+  sse:
+    max-connections: 32           # reject further connects with 503 once reached
+    broadcast-interval-ms: 2000   # keep below limits.idle-timeout-ms
+    threads: 2                    # dedicated executor; isolates from Minecraft tick thread
+
 # Token-bucket rate limiting. Defaults are sized for a small sized server.
 # capacity = burst, per-second = sustained rate. Disable globally with enabled: false.
 rate-limit:
@@ -0,0 +1,140 @@
+Player
+PLAYERS
+<section class="rise flex flex-wrap items-end justify-between gap-3">
+    <div class="flex items-center gap-3">
+        <img class="size-14 rounded-xl bg-muted [image-rendering:pixelated]"
+             src="https://vzge.me/face/512/${player_uuid}.png"
+             alt="" loading="lazy" width="56" height="56">
+        <div>
+            <h1 class="text-3xl font-medium tracking-tight md:text-4xl">${player_name}</h1>
+            <p class="mt-1 font-mono text-xs text-muted-foreground break-all">${player_uuid}</p>
+        </div>
+    </div>
+    <a href="/players/"
+       class="inline-flex h-9 items-center gap-1.5 rounded-full bg-muted px-4 text-sm font-medium transition-colors hover:bg-secondary">
+        ← Back to players
+    </a>
+</section>
+
+<section class="rise rise-1 mt-6 grid gap-4 md:grid-cols-2">
+
+    <article class="ring-card rounded-2xl bg-card p-5">
+        <h2 class="text-sm font-medium tracking-tight">Info</h2>
+        <dl class="mt-4 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
+            <dt class="text-muted-foreground">Status</dt>
+            <dd data-player-status data-uuid="${player_uuid}" class="text-muted-foreground">offline</dd>
+
+            <dt class="text-muted-foreground">Ping</dt>
+            <dd data-player-ping data-uuid="${player_uuid}" class="tabular text-foreground/80">—</dd>
+
+            <dt class="text-muted-foreground">World</dt>
+            <dd data-player-world class="text-foreground/80">—</dd>
+
+            <dt class="text-muted-foreground">Gamemode</dt>
+            <dd data-player-gamemode class="capitalize text-foreground/80">—</dd>
+
+            <dt class="text-muted-foreground">IP</dt>
+            <dd class="font-mono text-foreground/80 break-all">${player_ip}</dd>
+
+            <dt class="text-muted-foreground">First played</dt>
+            <dd class="text-foreground/80">${player_first_played}</dd>
+
+            <dt class="text-muted-foreground">Punishments</dt>
+            <dd>
+                <a href="/punishments/${player_uuid}"
+                   class="inline-flex items-center gap-1 text-primary hover:underline">
+                    View history
+                    <svg class="size-3" aria-hidden="true"><use href="#i-arrow-right"/></svg>
+                </a>
+            </dd>
+
+            <dt class="text-muted-foreground">NameMC</dt>
+            <dd>
+                <a href="${player_namemc}" target="_blank" rel="noopener"
+                   class="inline-flex items-center gap-1 text-primary hover:underline">
+                    View profile
+                    <svg class="size-3" aria-hidden="true"><use href="#i-arrow-right"/></svg>
+                </a>
+            </dd>
+        </dl>
+    </article>
+
+    <article class="ring-card rounded-2xl bg-card p-5">
+        <h2 class="text-sm font-medium tracking-tight">Actions</h2>
+        <p class="mt-1 text-xs text-muted-foreground">
+            Issued punishments are attributed to your XenForo username.
+        </p>
+        <div class="mt-4 grid grid-cols-2 gap-2">
+            <button type="button" data-admin-action="ban" data-admin-temp="false"
+                    class="h-9 rounded-full bg-destructive/10 px-4 text-sm font-medium text-destructive transition-colors hover:bg-destructive/20">
+                Ban
+            </button>
+            <button type="button" data-admin-action="tempban" data-admin-temp="true"
+                    class="h-9 rounded-full bg-warning/10 px-4 text-sm font-medium text-warning transition-colors hover:bg-warning/20">
+                Tempban
+            </button>
+            <button type="button" data-admin-action="mute" data-admin-temp="false"
+                    class="h-9 rounded-full bg-warning/10 px-4 text-sm font-medium text-warning transition-colors hover:bg-warning/20">
+                Mute
+            </button>
+            <button type="button" data-admin-action="tempmute" data-admin-temp="true"
+                    class="h-9 rounded-full bg-warning/10 px-4 text-sm font-medium text-warning transition-colors hover:bg-warning/20">
+                Tempmute
+            </button>
+            <button type="button" data-admin-action="freeze" data-admin-temp="true"
+                    class="col-span-2 h-9 rounded-full bg-primary/10 px-4 text-sm font-medium text-primary transition-colors hover:bg-primary/20">
+                Freeze
+            </button>
+        </div>
+    </article>
+
+</section>
+
+<dialog id="action-dialog"
+        class="ring-card w-[min(28rem,calc(100%-2rem))] rounded-2xl bg-card p-5 text-foreground shadow-2xl backdrop:bg-background/60 backdrop:backdrop-blur-sm">
+    <form method="POST" action="/api/admin/action" id="action-form" class="flex flex-col gap-4">
+        <input type="hidden" name="uuid" value="${player_uuid}">
+        <input type="hidden" name="action" value="" data-action-input>
+
+        <header>
+            <h3 class="text-lg font-medium">
+                Confirm <span data-action-label class="capitalize">action</span>
+            </h3>
+            <p class="mt-1 text-sm text-muted-foreground">
+                Target: <span class="font-medium text-foreground">${player_name}</span>
+            </p>
+        </header>
+
+        <label class="flex flex-col gap-1.5 text-sm">
+            <span class="text-muted-foreground">Reason</span>
+            <input name="reason" type="text" required minlength="1" maxlength="500"
+                   placeholder="Required"
+                   class="ring-card h-10 rounded-lg bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring/40">
+        </label>
+
+        <label data-duration-field hidden class="flex flex-col gap-1.5 text-sm">
+            <span class="text-muted-foreground">Duration</span>
+            <select name="duration"
+                    class="ring-card h-10 rounded-lg bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring/40">
+                <option value="5m">5 minutes</option>
+                <option value="1h">1 hour</option>
+                <option value="24h" selected>1 day</option>
+                <option value="7d">7 days</option>
+                <option value="30d">30 days</option>
+            </select>
+        </label>
+
+        <menu class="mt-2 flex justify-end gap-2">
+            <button type="button" data-dialog-cancel
+                    class="h-9 rounded-full bg-muted px-4 text-sm font-medium transition-colors hover:bg-secondary">
+                Cancel
+            </button>
+            <button type="submit"
+                    class="h-9 rounded-full bg-destructive px-4 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90">
+                Confirm
+            </button>
+        </menu>
+    </form>
+</dialog>
+
+<script src="/assets/player.js" defer></script>
@@ -3,7 +3,7 @@ PLAYERS
 <section class="rise flex flex-wrap items-end justify-between gap-3">
    <h1 class="text-3xl font-medium tracking-tight md:text-4xl">Players</h1>
    <span class="text-sm text-muted-foreground tabular">
-        <span class="text-foreground">${player_count}</span> / <span>${player_max}</span> online
+        <span data-stat="players-online" class="text-foreground">—</span> / <span data-stat="players-max">—</span> online
    </span>
 </section>

@@ -16,28 +16,13 @@ PLAYERS
               class="h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
               autocomplete="off">
    </label>
-    <button type="button" onclick="location.reload()"
-            class="ring-card inline-flex h-10 items-center justify-center gap-1.5 rounded-full bg-card px-4 text-sm font-medium transition-colors hover:bg-secondary">
-        <svg class="size-4" aria-hidden="true"><use href="#i-refresh"/></svg>
-        Refresh
-    </button>
 </section>

-<section class="rise rise-2 mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" id="players-grid">
-${player_cards}
+<section class="rise rise-2 mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+         id="players-grid" data-staff="${IS_STAFF}">
+    <div class="ring-card col-span-full rounded-2xl bg-card p-10 text-center">
+        <p class="text-sm text-muted-foreground">Loading players…</p>
+    </div>
 </section>

-<script>
-    (function () {
-        const input = document.getElementById('player-filter');
-        if (!input) return;
-        const cards = Array.from(document.querySelectorAll('#players-grid [data-name]'));
-        input.addEventListener('input', () => {
-            const q = input.value.toLowerCase().trim();
-            cards.forEach(c => {
-                const n = (c.getAttribute('data-name') || '').toLowerCase();
-                c.style.display = (!q || n.includes(q)) ? '' : 'none';
-            });
-        });
-    })();
-</script>
+<script src="/assets/players.js" defer></script>