94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { formatMinutes, countryCodeToFlag } from '@/lib/steam';
|
|
|
|
interface Segment {
|
|
startMin: number;
|
|
endMin: number;
|
|
}
|
|
|
|
interface TimelinePlayer {
|
|
steamid: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
country?: string | null;
|
|
totalMinutes: number;
|
|
segments: Segment[];
|
|
}
|
|
|
|
export default function PlayerTimelineChart({
|
|
players,
|
|
windowMinutes,
|
|
windowStartLabel,
|
|
windowEndLabel,
|
|
loading,
|
|
}: {
|
|
players: TimelinePlayer[];
|
|
windowMinutes: number;
|
|
windowStartLabel: string;
|
|
windowEndLabel: string;
|
|
loading: boolean;
|
|
}) {
|
|
if (loading) {
|
|
return <div className="text-sm text-ink-faint font-mono">loading players…</div>;
|
|
}
|
|
if (players.length === 0) {
|
|
return <div className="text-sm text-ink-muted">No players recorded during this window.</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* time axis */}
|
|
<div className="flex justify-between text-xs text-ink-faint font-mono mb-2 pl-[196px]">
|
|
<span>{windowStartLabel}</span>
|
|
<span>{windowEndLabel}</span>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
{players.map((p, i) => (
|
|
<div key={p.steamid} className="flex items-center gap-3">
|
|
<span className="text-ink-faint text-xs w-5 text-right shrink-0">{i + 1}</span>
|
|
<Link
|
|
href={`/players/${encodeURIComponent(p.steamid)}`}
|
|
className="flex items-center gap-2 w-[150px] shrink-0 hover:text-accent transition-colors"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={p.avatarUrl} alt="" className="w-6 h-6 rounded-full object-cover ring-1 ring-base-border shrink-0" />
|
|
{p.country !== undefined && (
|
|
<span className="text-xs shrink-0" aria-hidden>
|
|
{countryCodeToFlag(p.country)}
|
|
</span>
|
|
)}
|
|
<span className="text-sm text-ink truncate">{p.name}</span>
|
|
</Link>
|
|
|
|
<div className="flex-1 h-4 bg-base rounded overflow-hidden border border-base-border relative">
|
|
{p.segments.map((seg, i) => {
|
|
const left = (seg.startMin / windowMinutes) * 100;
|
|
const width = Math.max(0.6, ((seg.endMin - seg.startMin) / windowMinutes) * 100);
|
|
return (
|
|
<div
|
|
key={i}
|
|
className="absolute top-0 bottom-0 rounded-sm"
|
|
style={{
|
|
left: `${left}%`,
|
|
width: `${width}%`,
|
|
background: 'linear-gradient(180deg, #5EE596, #2A9C5C)',
|
|
boxShadow: '0 0 6px rgba(63, 211, 122, 0.4)',
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<span className="text-xs text-ink-muted mono w-16 text-right shrink-0">
|
|
{formatMinutes(p.totalMinutes)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|