Per-player playtime tracking + sparkline hover tooltips
- New GET /api/players/playtime (authed): reads each vanilla stats file
under /home/minecraft/server/world/stats and maps uuid→name via
usercache.json. Returns playtime in ticks and hours, plus file mtime
as "last seen". Memoized 60s via lib/cache#memoAsync.
- New PlaytimeLeaderboard card in the Players tab:
- Rank, avatar (click → PlayerDrawer), relative last-seen, hours.
- Top 10 by default with toggle to show all; combined hours badge.
- PlayerDrawer surfaces the player's total hours + last-seen using the
same cached playtime query, plus fills in UUID if the player is not
in ops/whitelist/banned.
- lib/time.ts: formatHours() — minutes under 1h, "H.Hh" under a day,
"Dd Hh" above.
- Analytics sparklines gain hover/touch tooltips:
- Timestamps threaded through from each MetricEntry.
- SVG overlay captures onMouseMove/onTouchMove, computes nearest
index by x, draws a dashed guide line + focus dot.
- Floating tooltip shows HH:MM + formatted value with unit; edge
clamping keeps it in-frame at the extremes.
- Per-chart formatValue so RAM shows GB, CPU 0 decimals, Players
integer, TPS 1 decimal. Keeps the peak-player marker intact.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
7ada9ec7d9
commit
9ccd4ca772
6 changed files with 413 additions and 38 deletions
88
app/api/players/playtime/route.ts
Normal file
88
app/api/players/playtime/route.ts
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { NextResponse } from "next/server";
|
||||
import { readdirSync, readFileSync, statSync } from "fs";
|
||||
import { join } from "path";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { memoAsync } from "@/lib/cache";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const runtime = "nodejs";
|
||||
|
||||
const STATS_DIR = "/home/minecraft/server/world/stats";
|
||||
const USERCACHE = "/home/minecraft/server/usercache.json";
|
||||
const TICKS_PER_HOUR = 20 * 60 * 60;
|
||||
|
||||
type Entry = {
|
||||
uuid: string;
|
||||
name: string;
|
||||
playtimeTicks: number;
|
||||
playtimeHours: number;
|
||||
lastPlayedMs: number;
|
||||
};
|
||||
|
||||
type UserCacheEntry = { name: string; uuid: string };
|
||||
|
||||
function loadNameMap(): Map<string, string> {
|
||||
try {
|
||||
const arr = JSON.parse(readFileSync(USERCACHE, "utf8")) as UserCacheEntry[];
|
||||
return new Map(arr.map((e) => [e.uuid, e.name]));
|
||||
} catch {
|
||||
return new Map();
|
||||
}
|
||||
}
|
||||
|
||||
function computePlaytime(): Entry[] {
|
||||
const names = loadNameMap();
|
||||
let files: string[];
|
||||
try {
|
||||
files = readdirSync(STATS_DIR).filter((f) => f.endsWith(".json"));
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
|
||||
const out: Entry[] = [];
|
||||
for (const f of files) {
|
||||
const uuid = f.replace(/\.json$/, "");
|
||||
const path = join(STATS_DIR, f);
|
||||
try {
|
||||
const data = JSON.parse(readFileSync(path, "utf8")) as {
|
||||
stats?: { "minecraft:custom"?: Record<string, number> };
|
||||
};
|
||||
const ticks = Number(
|
||||
data.stats?.["minecraft:custom"]?.["minecraft:play_time"] || 0
|
||||
);
|
||||
const mtime = statSync(path).mtimeMs;
|
||||
out.push({
|
||||
uuid,
|
||||
name: names.get(uuid) || uuid.slice(0, 8),
|
||||
playtimeTicks: ticks,
|
||||
playtimeHours: Math.round((ticks / TICKS_PER_HOUR) * 100) / 100,
|
||||
lastPlayedMs: mtime,
|
||||
});
|
||||
} catch {
|
||||
// Skip unreadable/corrupt stat files
|
||||
}
|
||||
}
|
||||
out.sort((a, b) => b.playtimeTicks - a.playtimeTicks);
|
||||
return out;
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
const session = await auth();
|
||||
if (!session) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await memoAsync("players:playtime", 60_000, async () =>
|
||||
computePlaytime()
|
||||
);
|
||||
return NextResponse.json(data, {
|
||||
headers: { "Cache-Control": "private, max-age=60" },
|
||||
});
|
||||
} catch (e) {
|
||||
return NextResponse.json(
|
||||
{ error: (e as Error).message },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { PlayerAvatar } from "@/components/PlayerAvatar";
|
||||
|
|
@ -67,6 +67,14 @@ function UptimeRing({ percent, size = 64 }: { percent: number; size?: number })
|
|||
);
|
||||
}
|
||||
|
||||
function formatTime(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d.getTime())) return "";
|
||||
const hh = String(d.getHours()).padStart(2, "0");
|
||||
const mm = String(d.getMinutes()).padStart(2, "0");
|
||||
return `${hh}:${mm}`;
|
||||
}
|
||||
|
||||
function Sparkline({
|
||||
data,
|
||||
color,
|
||||
|
|
@ -77,6 +85,8 @@ function Sparkline({
|
|||
currentValue,
|
||||
peakIndex,
|
||||
peakLabel,
|
||||
timestamps,
|
||||
formatValue,
|
||||
}: {
|
||||
data: number[];
|
||||
color: string;
|
||||
|
|
@ -87,7 +97,52 @@ function Sparkline({
|
|||
currentValue: string;
|
||||
peakIndex?: number;
|
||||
peakLabel?: string;
|
||||
timestamps?: string[];
|
||||
formatValue?: (v: number) => string;
|
||||
}) {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const [hoverIdx, setHoverIdx] = useState<number | null>(null);
|
||||
|
||||
const coords = useMemo(() => {
|
||||
if (data.length < 2) return [] as { x: number; y: number }[];
|
||||
const dataMax = max || Math.max(...data, 1);
|
||||
const width = 300;
|
||||
return data.map((v, i) => {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
const y = height - (v / dataMax) * (height - 10) - 5;
|
||||
return { x, y };
|
||||
});
|
||||
}, [data, max, height]);
|
||||
|
||||
const { pathD, areaD, w, peakXY } = useMemo(() => {
|
||||
const width = 300;
|
||||
const pts = coords.map((c) => `${c.x},${c.y}`);
|
||||
const p = pts.length ? `M${pts.join(" L")}` : "";
|
||||
const peak =
|
||||
typeof peakIndex === "number" && peakIndex >= 0 && peakIndex < coords.length
|
||||
? coords[peakIndex]
|
||||
: null;
|
||||
return {
|
||||
pathD: p,
|
||||
areaD: p ? `${p} L${width},${height} L0,${height} Z` : "",
|
||||
w: width,
|
||||
peakXY: peak,
|
||||
};
|
||||
}, [coords, height, peakIndex]);
|
||||
|
||||
const locate = (clientX: number) => {
|
||||
const svg = svgRef.current;
|
||||
if (!svg || data.length < 2) return;
|
||||
const rect = svg.getBoundingClientRect();
|
||||
if (rect.width <= 0) return;
|
||||
const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
||||
setHoverIdx(Math.round(ratio * (data.length - 1)));
|
||||
};
|
||||
|
||||
const defaultFormat = (v: number) =>
|
||||
Number.isInteger(v) ? String(v) : v.toFixed(1);
|
||||
const fmt = formatValue || defaultFormat;
|
||||
|
||||
if (data.length < 2) {
|
||||
return (
|
||||
<div className="rounded-lg bg-muted p-4">
|
||||
|
|
@ -106,27 +161,14 @@ function Sparkline({
|
|||
);
|
||||
}
|
||||
|
||||
const { pathD, areaD, w, peakXY } = useMemo(() => {
|
||||
const dataMax = max || Math.max(...data, 1);
|
||||
const width = 300;
|
||||
const coords = data.map((v, i) => {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
const y = height - (v / dataMax) * (height - 10) - 5;
|
||||
return { x, y };
|
||||
});
|
||||
const pts = coords.map((c) => `${c.x},${c.y}`);
|
||||
const p = `M${pts.join(" L")}`;
|
||||
const peak =
|
||||
typeof peakIndex === "number" && peakIndex >= 0 && peakIndex < coords.length
|
||||
? coords[peakIndex]
|
||||
: null;
|
||||
return {
|
||||
pathD: p,
|
||||
areaD: `${p} L${width},${height} L0,${height} Z`,
|
||||
w: width,
|
||||
peakXY: peak,
|
||||
};
|
||||
}, [data, max, height, peakIndex]);
|
||||
const hovered = hoverIdx !== null ? coords[hoverIdx] : null;
|
||||
const hoverRatio = hoverIdx !== null ? hoverIdx / (data.length - 1) : 0;
|
||||
const hoverTime =
|
||||
hoverIdx !== null && timestamps?.[hoverIdx]
|
||||
? formatTime(timestamps[hoverIdx])
|
||||
: "";
|
||||
const hoverValue =
|
||||
hoverIdx !== null ? `${fmt(data[hoverIdx])}${unit ? ` ${unit}` : ""}` : "";
|
||||
|
||||
return (
|
||||
<div className="rounded-lg bg-muted p-4">
|
||||
|
|
@ -139,22 +181,82 @@ function Sparkline({
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox={`0 0 ${w} ${height}`} className="w-full" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id={`grad-${label}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={color} stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor={color} stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d={areaD} fill={`url(#grad-${label})`} />
|
||||
<path d={pathD} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{peakXY && (
|
||||
<>
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={3.5} fill={color} />
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={6} fill={color} fillOpacity="0.25" />
|
||||
</>
|
||||
<div className="relative">
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={`0 0 ${w} ${height}`}
|
||||
className="w-full touch-none"
|
||||
preserveAspectRatio="none"
|
||||
onMouseMove={(e) => locate(e.clientX)}
|
||||
onMouseLeave={() => setHoverIdx(null)}
|
||||
onTouchMove={(e) => {
|
||||
const t = e.touches[0];
|
||||
if (t) locate(t.clientX);
|
||||
}}
|
||||
onTouchEnd={() => setHoverIdx(null)}
|
||||
role="img"
|
||||
aria-label={`${label} over time`}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={`grad-${label}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={color} stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor={color} stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d={areaD} fill={`url(#grad-${label})`} />
|
||||
<path
|
||||
d={pathD}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
{peakXY && (
|
||||
<>
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={3.5} fill={color} />
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={6} fill={color} fillOpacity="0.25" />
|
||||
</>
|
||||
)}
|
||||
{hovered && (
|
||||
<>
|
||||
<line
|
||||
x1={hovered.x}
|
||||
x2={hovered.x}
|
||||
y1={0}
|
||||
y2={height}
|
||||
stroke={color}
|
||||
strokeOpacity="0.4"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="3 3"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
<circle cx={hovered.x} cy={hovered.y} r={4} fill={color} />
|
||||
<circle cx={hovered.x} cy={hovered.y} r={7} fill={color} fillOpacity="0.25" />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
{hovered && (
|
||||
<div
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
className="pointer-events-none absolute -top-1 -translate-y-full rounded-md border border-border bg-popover text-popover-foreground px-2 py-1 text-[11px] shadow-md tabular-nums whitespace-nowrap"
|
||||
style={{
|
||||
left: `${hoverRatio * 100}%`,
|
||||
transform: `translate(${
|
||||
hoverRatio > 0.85 ? "-100%" : hoverRatio < 0.15 ? "0%" : "-50%"
|
||||
}, -100%)`,
|
||||
}}
|
||||
>
|
||||
{hoverTime && (
|
||||
<span className="text-muted-foreground mr-1.5">{hoverTime}</span>
|
||||
)}
|
||||
<span className="font-semibold" style={{ color }}>
|
||||
{hoverValue}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</svg>
|
||||
</div>
|
||||
{peakLabel && (
|
||||
<p className="text-[10px] text-muted-foreground mt-1 tabular-nums">
|
||||
peak {peakLabel}
|
||||
|
|
@ -283,37 +385,45 @@ export function Analytics() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<Sparkline
|
||||
data={metrics.map((m) => m.tps)}
|
||||
timestamps={metrics.map((m) => m.ts)}
|
||||
color="#4ade80"
|
||||
max={22}
|
||||
label="TPS"
|
||||
unit=""
|
||||
currentValue={latest ? latest.tps.toFixed(1) : "-"}
|
||||
formatValue={(v) => v.toFixed(1)}
|
||||
/>
|
||||
<Sparkline
|
||||
data={metrics.map((m) => m.ramUsedMB)}
|
||||
timestamps={metrics.map((m) => m.ts)}
|
||||
color="#60a5fa"
|
||||
label="RAM"
|
||||
unit="MB"
|
||||
unit="GB"
|
||||
currentValue={
|
||||
latest ? `${(latest.ramUsedMB / 1024).toFixed(1)} GB` : "-"
|
||||
}
|
||||
formatValue={(v) => (v / 1024).toFixed(1)}
|
||||
/>
|
||||
<Sparkline
|
||||
data={metrics.map((m) => m.cpuPercent)}
|
||||
timestamps={metrics.map((m) => m.ts)}
|
||||
color="#f59e0b"
|
||||
max={100}
|
||||
label="CPU"
|
||||
unit="%"
|
||||
currentValue={latest ? latest.cpuPercent.toFixed(0) : "-"}
|
||||
formatValue={(v) => v.toFixed(0)}
|
||||
/>
|
||||
<Sparkline
|
||||
data={metrics.map((m) => m.playersOnline)}
|
||||
timestamps={metrics.map((m) => m.ts)}
|
||||
color="#a78bfa"
|
||||
label="Players"
|
||||
unit=""
|
||||
currentValue={latest ? latest.playersOnline.toString() : "0"}
|
||||
peakIndex={peakPlayers > 0 ? peakIndex : undefined}
|
||||
peakLabel={peakPlayers > 0 ? peakPlayers.toString() : undefined}
|
||||
formatValue={(v) => String(Math.round(v))}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { Input } from "@/components/ui/input";
|
|||
import { Separator } from "@/components/ui/separator";
|
||||
import { PlayerAvatar } from "@/components/PlayerAvatar";
|
||||
import { onAppEvent } from "@/lib/events";
|
||||
import { formatHours, timeAgo } from "@/lib/time";
|
||||
import type { PlaytimeEntry } from "@/components/PlaytimeLeaderboard";
|
||||
|
||||
type PlayerData = {
|
||||
ops: { name: string; uuid: string; level: number }[];
|
||||
|
|
@ -45,6 +47,17 @@ export function PlayerDrawer() {
|
|||
staleTime: 10_000,
|
||||
});
|
||||
|
||||
const playtime = useQuery<PlaytimeEntry[]>({
|
||||
queryKey: ["players-playtime"],
|
||||
queryFn: () => fetch("/api/players/playtime").then((r) => r.json()),
|
||||
enabled: authed && !!name,
|
||||
staleTime: 60_000,
|
||||
});
|
||||
|
||||
const myPlaytime = name
|
||||
? playtime.data?.find((p) => p.name === name)
|
||||
: undefined;
|
||||
|
||||
// Use existing analytics cache (last entry) to determine online now
|
||||
const analytics = queryClient.getQueryData<MetricEntry[]>(["analytics", 6]);
|
||||
const onlineNow =
|
||||
|
|
@ -144,6 +157,26 @@ export function PlayerDrawer() {
|
|||
</p>
|
||||
) : (
|
||||
<>
|
||||
{myPlaytime && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<p className="text-xs text-muted-foreground">Playtime</p>
|
||||
<p className="text-lg font-bold tabular-nums">
|
||||
{formatHours(myPlaytime.playtimeHours)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<p className="text-xs text-muted-foreground">Last seen</p>
|
||||
<p
|
||||
className="text-sm font-medium"
|
||||
title={new Date(myPlaytime.lastPlayedMs).toLocaleString()}
|
||||
>
|
||||
{timeAgo(myPlaytime.lastPlayedMs)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{bannedEntry?.reason && (
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
|
||||
|
|
@ -226,6 +259,7 @@ export function PlayerDrawer() {
|
|||
{players.data?.ops.find((p) => p.name === name)?.uuid ||
|
||||
players.data?.whitelist.find((p) => p.name === name)?.uuid ||
|
||||
players.data?.banned.find((p) => p.name === name)?.uuid ||
|
||||
myPlaytime?.uuid ||
|
||||
"—"}
|
||||
</span>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { PlayerAvatar } from "@/components/PlayerAvatar";
|
||||
import { PlaytimeLeaderboard } from "@/components/PlaytimeLeaderboard";
|
||||
|
||||
type PlayerData = {
|
||||
ops: { name: string; uuid: string; level: number }[];
|
||||
|
|
@ -127,6 +128,8 @@ export function PlayerManager() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4 sm:space-y-6">
|
||||
<PlaytimeLeaderboard />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Player Management</CardTitle>
|
||||
|
|
@ -296,5 +299,6 @@ export function PlayerManager() {
|
|||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
126
components/PlaytimeLeaderboard.tsx
Normal file
126
components/PlaytimeLeaderboard.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { PlayerAvatar } from "@/components/PlayerAvatar";
|
||||
import { formatHours, timeAgo } from "@/lib/time";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
|
||||
export type PlaytimeEntry = {
|
||||
uuid: string;
|
||||
name: string;
|
||||
playtimeTicks: number;
|
||||
playtimeHours: number;
|
||||
lastPlayedMs: number;
|
||||
};
|
||||
|
||||
const TOP_N = 10;
|
||||
|
||||
export function PlaytimeLeaderboard() {
|
||||
const [showAll, setShowAll] = useState(false);
|
||||
const { data = [], isLoading, isError } = useQuery<PlaytimeEntry[]>({
|
||||
queryKey: ["players-playtime"],
|
||||
queryFn: () => fetch("/api/players/playtime").then((r) => r.json()),
|
||||
staleTime: 60_000,
|
||||
refetchInterval: 5 * 60_000,
|
||||
});
|
||||
|
||||
const visible = showAll ? data : data.slice(0, TOP_N);
|
||||
const totalHours = data.reduce((sum, e) => sum + e.playtimeHours, 0);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<div>
|
||||
<CardTitle className="text-base">Playtime</CardTitle>
|
||||
<CardDescription>
|
||||
Total hours played by each whitelisted player
|
||||
</CardDescription>
|
||||
</div>
|
||||
{data.length > 0 && (
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-muted-foreground">Combined</p>
|
||||
<p className="text-sm font-semibold tabular-nums">
|
||||
{formatHours(totalHours)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<ul className="space-y-1">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<li key={i} className="flex items-center gap-3 px-3 py-2">
|
||||
<Skeleton className="h-6 w-6 rounded" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3 w-14 ml-auto" />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : isError ? (
|
||||
<p className="text-sm text-red-300 text-center py-4">
|
||||
Failed to load playtime.
|
||||
</p>
|
||||
) : data.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
No playtime recorded yet.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<ol className="space-y-1">
|
||||
{visible.map((p, i) => (
|
||||
<li
|
||||
key={p.uuid}
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-md bg-muted/50"
|
||||
>
|
||||
<span className="text-xs font-bold text-muted-foreground tabular-nums w-5 text-center shrink-0">
|
||||
{i + 1}
|
||||
</span>
|
||||
<PlayerAvatar name={p.name} size={24} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium truncate">{p.name}</p>
|
||||
<p
|
||||
className="text-xs text-muted-foreground"
|
||||
title={new Date(p.lastPlayedMs).toLocaleString()}
|
||||
>
|
||||
last seen {timeAgo(p.lastPlayedMs)}
|
||||
</p>
|
||||
</div>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs px-1.5 py-0 tabular-nums shrink-0"
|
||||
>
|
||||
{formatHours(p.playtimeHours)}
|
||||
</Badge>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
{data.length > TOP_N && (
|
||||
<div className="text-center mt-3">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setShowAll((v) => !v)}
|
||||
className="text-xs"
|
||||
>
|
||||
{showAll ? "Show top 10" : `Show all ${data.length}`}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
13
lib/time.ts
13
lib/time.ts
|
|
@ -15,6 +15,19 @@ export function timeAgo(iso: string | number | Date): string {
|
|||
return `${yr}y ago`;
|
||||
}
|
||||
|
||||
// Format a duration in hours as "H.Hh" under a day, otherwise "Dd Hh".
|
||||
export function formatHours(hours: number): string {
|
||||
if (!isFinite(hours) || hours <= 0) return "0h";
|
||||
if (hours < 1) {
|
||||
const m = Math.round(hours * 60);
|
||||
return `${m}m`;
|
||||
}
|
||||
if (hours < 24) return `${hours.toFixed(1)}h`;
|
||||
const days = Math.floor(hours / 24);
|
||||
const rem = Math.round(hours - days * 24);
|
||||
return rem ? `${days}d ${rem}h` : `${days}d`;
|
||||
}
|
||||
|
||||
export function formatBytes(n: number): string {
|
||||
if (!isFinite(n) || n <= 0) return "0 B";
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue