furhter bug fixes and updates

2026-08-22 17:10:27 +02:00
parent 9e8e8378a2
commit 16bb9e14a5
18 changed files with 1070 additions and 256 deletions
@@ -0,0 +1,86 @@
+'use client';
+
+import Link from 'next/link';
+import { formatMinutes } from '@/lib/steam';
+
+interface Segment {
+  startMin: number;
+  endMin: number;
+}
+
+interface TimelinePlayer {
+  steamid: string;
+  name: string;
+  avatarUrl: string;
+  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-[172px]">
+        <span>{windowStartLabel}</span>
+        <span>{windowEndLabel}</span>
+      </div>
+
+      <div className="space-y-1.5">
+        {players.map((p) => (
+          <div key={p.steamid} className="flex items-center gap-3">
+            <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" />
+              <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>
+  );
+}