initial commit of the paytime session frontend
This commit is contained in:
jenz
@@ -0,0 +1,155 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { getPlayer, getNameHistory, getSessions, getTotalPlaytimeMinutes } from '@/lib/queries';
|
||||
import { steam2ToSteam64, steamProfileUrl, formatMinutes, countryCodeToFlag } from '@/lib/steam';
|
||||
import { getSteamSummary, DEFAULT_AVATAR_URL } from '@/lib/steamApi';
|
||||
import { getRaceTimerSummary } from '@/lib/racetimer';
|
||||
|
||||
export default async function PlayerDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ steamid: string }>;
|
||||
}) {
|
||||
const { steamid: rawSteamid } = await params;
|
||||
const steamid = decodeURIComponent(rawSteamid);
|
||||
|
||||
const player = await getPlayer(steamid);
|
||||
if (!player) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const steamId64 = steam2ToSteam64(steamid);
|
||||
const profileUrl = steamProfileUrl(steamid);
|
||||
|
||||
const [nameHistory, sessions, totalMinutes, steamSummary, raceTimer] = await Promise.all([
|
||||
getNameHistory(steamid),
|
||||
getSessions(steamid),
|
||||
getTotalPlaytimeMinutes(steamid),
|
||||
steamId64 ? getSteamSummary(steamId64) : Promise.resolve(null),
|
||||
getRaceTimerSummary(steamid),
|
||||
]);
|
||||
|
||||
const avatarUrl = steamSummary?.avatarUrl ?? DEFAULT_AVATAR_URL;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Link href="/players" className="text-sm text-ink-muted hover:text-accent transition-colors">
|
||||
← Back to players
|
||||
</Link>
|
||||
|
||||
{/* Header: avatar, name, steamid, profile link, total playtime */}
|
||||
<div className="panel p-6 flex flex-wrap items-center gap-6">
|
||||
<div className="w-20 h-20 rounded-lg overflow-hidden bg-base border border-base-border shrink-0">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={avatarUrl} alt="" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-2xl text-ink">{player.current_name}</h1>
|
||||
<span className="text-lg" aria-hidden>
|
||||
{countryCodeToFlag(player.current_country)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mono text-ink-faint mt-1">{steamid}</div>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
{profileUrl && (
|
||||
<a
|
||||
href={profileUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-sm text-accent hover:underline"
|
||||
>
|
||||
View Steam profile ↗
|
||||
</a>
|
||||
)}
|
||||
{raceTimer && (
|
||||
<a
|
||||
href={raceTimer.profileUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-sm text-accent hover:underline"
|
||||
>
|
||||
View RaceTimer profile ↗
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<div className="stat-label">Total playtime</div>
|
||||
<div className="text-2xl text-ink mono">
|
||||
{totalMinutes != null ? formatMinutes(totalMinutes) : '—'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{raceTimer && (
|
||||
<div className="text-right border-l border-base-border pl-6">
|
||||
<div className="stat-label">RaceTimer</div>
|
||||
<div className="text-2xl text-ink mono">Lv {raceTimer.level}</div>
|
||||
<div className="text-xs text-ink-faint mono">Rank #{raceTimer.rank}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-right border-l border-base-border pl-6">
|
||||
<div className="stat-label">Player Tier</div>
|
||||
<div className="text-2xl text-ink mono">{player.player_tier}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Previous names */}
|
||||
{nameHistory.length > 1 && (
|
||||
<div className="panel p-6">
|
||||
<div className="stat-label mb-3">Previous names</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{nameHistory
|
||||
.filter((n) => n.player_name !== player.current_name)
|
||||
.map((n) => (
|
||||
<span
|
||||
key={n.player_name}
|
||||
className="text-sm bg-base border border-base-border rounded px-3 py-1 text-ink-muted"
|
||||
title={`Last seen ${new Date(n.last_seen.replace(' ', 'T')).toLocaleString()}`}
|
||||
>
|
||||
{n.player_name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sessions */}
|
||||
<div className="panel p-6">
|
||||
<div className="stat-label mb-3">Play sessions</div>
|
||||
{sessions.length === 0 ? (
|
||||
<div className="text-sm text-ink-muted">No recorded sessions yet.</div>
|
||||
) : (
|
||||
<div className="divide-y divide-base-border">
|
||||
<div className="grid grid-cols-[1fr_1fr_100px] gap-4 pb-2 text-xs text-ink-faint uppercase tracking-wide">
|
||||
<div>Started</div>
|
||||
<div>Map(s)</div>
|
||||
<div className="text-right">Playtime</div>
|
||||
</div>
|
||||
{sessions.map((s) => (
|
||||
<div key={s.session_id} className="grid grid-cols-[1fr_1fr_100px] gap-4 py-3 text-sm items-center">
|
||||
<div>
|
||||
<div className="text-ink">
|
||||
{new Date(s.session_start_dt.replace(' ', 'T')).toLocaleString()}
|
||||
</div>
|
||||
<div className="text-xs text-ink-faint">
|
||||
{s.session_end_dt
|
||||
? `until ${new Date(s.session_end_dt.replace(' ', 'T')).toLocaleTimeString()}`
|
||||
: 'still connected'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-ink-muted">{s.maps_played ?? '—'}</div>
|
||||
<div className="text-right mono text-ink">
|
||||
{formatMinutes(s.session_active_minutes)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user