391 lines
14 KiB
TypeScript
391 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import Link from 'next/link';
|
||
import { useContainerWidth } from '@/lib/useContainerWidth';
|
||
import PlayerChipList from './PlayerChipList';
|
||
|
||
interface MapPoint {
|
||
map_id: number;
|
||
map_name: string;
|
||
map_start_dt: string;
|
||
map_end_dt: string | null;
|
||
total_players: number;
|
||
}
|
||
|
||
interface PlayerChip {
|
||
steamid: string;
|
||
name: string;
|
||
avatarUrl: string;
|
||
country?: string | null;
|
||
}
|
||
|
||
const HEIGHT = 288;
|
||
const PAD_LEFT = 32;
|
||
const PAD_RIGHT = 8;
|
||
const PAD_TOP = 8;
|
||
const PAD_BOTTOM = 12; // no map-name labels anymore, so far less bottom padding needed
|
||
const INITIAL_FETCH = 150;
|
||
const PAGE_FETCH = 100; // fetched when panning back beyond what's loaded
|
||
const DEFAULT_VISIBLE = 40;
|
||
const MIN_VISIBLE = 5;
|
||
const HARD_FLOOR_EPOCH = Date.UTC(2015, 6, 16); // won't page back further than July 16, 2015
|
||
|
||
function parseDt(s: string): number {
|
||
return new Date(s.replace(' ', 'T')).getTime();
|
||
}
|
||
|
||
export default function MapPopulationChart() {
|
||
const { ref: containerRef, width } = useContainerWidth<HTMLDivElement>();
|
||
const svgRef = useRef<SVGSVGElement>(null);
|
||
const [points, setPoints] = useState<MapPoint[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [fetchingMore, setFetchingMore] = useState(false);
|
||
const [reachedStart, setReachedStart] = useState(false);
|
||
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
|
||
|
||
const [viewStartIdx, setViewStartIdx] = useState(0);
|
||
const [viewEndIdx, setViewEndIdx] = useState(0);
|
||
|
||
const dragStartRef = useRef<{ x: number; startIdx: number; endIdx: number } | null>(null);
|
||
const dragMovedRef = useRef(false);
|
||
const fetchInFlightRef = useRef(false);
|
||
|
||
const [selectedMap, setSelectedMap] = useState<MapPoint | null>(null);
|
||
const [selectedPlayers, setSelectedPlayers] = useState<PlayerChip[]>([]);
|
||
const [loadingPlayers, setLoadingPlayers] = useState(false);
|
||
|
||
useEffect(() => {
|
||
fetch(`/api/map-population?limit=${INITIAL_FETCH}`)
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
const pts: MapPoint[] = data.points ?? [];
|
||
setPoints(pts);
|
||
const startIdx = Math.max(0, pts.length - DEFAULT_VISIBLE);
|
||
setViewStartIdx(startIdx);
|
||
setViewEndIdx(pts.length);
|
||
const latest = pts[pts.length - 1];
|
||
if (latest) loadPlayersFor(latest);
|
||
})
|
||
.finally(() => setLoading(false));
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
async function loadPlayersFor(point: MapPoint) {
|
||
setSelectedMap(point);
|
||
setLoadingPlayers(true);
|
||
try {
|
||
const res = await fetch(`/api/map-population/players?mapId=${point.map_id}`);
|
||
const data = await res.json();
|
||
setSelectedPlayers(data.players ?? []);
|
||
} catch {
|
||
setSelectedPlayers([]);
|
||
} finally {
|
||
setLoadingPlayers(false);
|
||
}
|
||
}
|
||
|
||
// If panning/zooming brings the view near index 0, fetch more (older)
|
||
// maps and prepend them, shifting indices to keep the visual window
|
||
// stable. Stops once the earliest loaded map is at/before the hard floor.
|
||
function ensureMoreIfNeeded(nextStartIdx: number) {
|
||
if (fetchInFlightRef.current || reachedStart) return;
|
||
if (nextStartIdx > 5) return; // only bother once we're close to the loaded edge
|
||
const earliest = points[0];
|
||
if (!earliest) return;
|
||
if (parseDt(earliest.map_start_dt) <= HARD_FLOOR_EPOCH) {
|
||
setReachedStart(true);
|
||
return;
|
||
}
|
||
fetchInFlightRef.current = true;
|
||
setFetchingMore(true);
|
||
fetch(`/api/map-population?limit=${PAGE_FETCH}&before=${encodeURIComponent(new Date(parseDt(earliest.map_start_dt)).toISOString())}`)
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
const older: MapPoint[] = data.points ?? [];
|
||
if (older.length === 0) {
|
||
setReachedStart(true);
|
||
return;
|
||
}
|
||
setPoints((prev) => [...older, ...prev]);
|
||
setViewStartIdx((v) => v + older.length);
|
||
setViewEndIdx((v) => v + older.length);
|
||
})
|
||
.finally(() => {
|
||
fetchInFlightRef.current = false;
|
||
setFetchingMore(false);
|
||
});
|
||
}
|
||
|
||
const visiblePoints = points.slice(viewStartIdx, viewEndIdx);
|
||
const plotWidth = Math.max(0, width - PAD_LEFT - PAD_RIGHT);
|
||
const plotHeight = HEIGHT - PAD_TOP - PAD_BOTTOM;
|
||
const maxValue = Math.max(1, ...visiblePoints.map((p) => p.total_players));
|
||
const axisMax = Math.ceil((maxValue * 1.15) / 5) * 5 || 5;
|
||
|
||
const slotWidth = visiblePoints.length > 0 ? plotWidth / visiblePoints.length : 0;
|
||
const barWidth = Math.max(2, slotWidth * 0.6);
|
||
|
||
function barX(i: number) {
|
||
return PAD_LEFT + i * slotWidth + (slotWidth - barWidth) / 2;
|
||
}
|
||
function barY(value: number) {
|
||
const h = (value / axisMax) * plotHeight;
|
||
return PAD_TOP + (plotHeight - h);
|
||
}
|
||
function barHeight(value: number) {
|
||
return Math.max(value > 0 ? 2 : 0, (value / axisMax) * plotHeight);
|
||
}
|
||
function indexForX(x: number): number {
|
||
if (slotWidth === 0) return 0;
|
||
return Math.max(0, Math.min(visiblePoints.length - 1, Math.floor((x - PAD_LEFT) / slotWidth)));
|
||
}
|
||
|
||
function handleMouseDown(e: React.MouseEvent<SVGSVGElement>) {
|
||
const rect = e.currentTarget.getBoundingClientRect();
|
||
dragStartRef.current = { x: e.clientX - rect.left, startIdx: viewStartIdx, endIdx: viewEndIdx };
|
||
dragMovedRef.current = false;
|
||
}
|
||
|
||
function handleMouseMove(e: React.MouseEvent<SVGSVGElement>) {
|
||
const rect = e.currentTarget.getBoundingClientRect();
|
||
const x = e.clientX - rect.left;
|
||
|
||
if (dragStartRef.current) {
|
||
const dx = x - dragStartRef.current.x;
|
||
if (Math.abs(dx) > 3) dragMovedRef.current = true;
|
||
if (dragMovedRef.current && slotWidth > 0) {
|
||
const shiftBars = -Math.round(dx / slotWidth);
|
||
const windowSize = dragStartRef.current.endIdx - dragStartRef.current.startIdx;
|
||
let newStart = dragStartRef.current.startIdx + shiftBars;
|
||
let newEnd = dragStartRef.current.endIdx + shiftBars;
|
||
if (newStart < 0) {
|
||
newStart = 0;
|
||
newEnd = windowSize;
|
||
}
|
||
if (newEnd > points.length) {
|
||
newEnd = points.length;
|
||
newStart = newEnd - windowSize;
|
||
}
|
||
setViewStartIdx(newStart);
|
||
setViewEndIdx(newEnd);
|
||
ensureMoreIfNeeded(newStart);
|
||
}
|
||
} else {
|
||
setHoverIndex(indexForX(x));
|
||
}
|
||
}
|
||
|
||
function handleMouseUp() {
|
||
dragStartRef.current = null;
|
||
}
|
||
|
||
useEffect(() => {
|
||
const svg = svgRef.current;
|
||
if (!svg) return;
|
||
|
||
function onWheel(e: WheelEvent) {
|
||
e.preventDefault();
|
||
if (points.length === 0) return;
|
||
const rect = svg!.getBoundingClientRect();
|
||
const x = e.clientX - rect.left;
|
||
const anchorIdxInView = indexForX(x);
|
||
const anchorAbsIdx = viewStartIdx + anchorIdxInView;
|
||
|
||
const currentSize = viewEndIdx - viewStartIdx;
|
||
const zoomFactor = e.deltaY > 0 ? 1.2 : 1 / 1.2;
|
||
let newSize = Math.round(currentSize * zoomFactor);
|
||
newSize = Math.max(MIN_VISIBLE, Math.min(points.length, newSize));
|
||
|
||
const ratio = currentSize > 0 ? (anchorAbsIdx - viewStartIdx) / currentSize : 0.5;
|
||
let newStart = Math.round(anchorAbsIdx - ratio * newSize);
|
||
let newEnd = newStart + newSize;
|
||
|
||
if (newStart < 0) {
|
||
newStart = 0;
|
||
newEnd = newSize;
|
||
}
|
||
if (newEnd > points.length) {
|
||
newEnd = points.length;
|
||
newStart = newEnd - newSize;
|
||
}
|
||
setViewStartIdx(newStart);
|
||
setViewEndIdx(newEnd);
|
||
ensureMoreIfNeeded(newStart);
|
||
}
|
||
|
||
svg.addEventListener('wheel', onWheel, { passive: false });
|
||
return () => svg.removeEventListener('wheel', onWheel);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [points.length, viewStartIdx, viewEndIdx]);
|
||
|
||
function resetZoom() {
|
||
const startIdx = Math.max(0, points.length - DEFAULT_VISIBLE);
|
||
setViewStartIdx(startIdx);
|
||
setViewEndIdx(points.length);
|
||
}
|
||
|
||
const isZoomed = viewStartIdx > Math.max(0, points.length - DEFAULT_VISIBLE) || viewEndIdx < points.length;
|
||
const yTicks = [0, Math.round(axisMax / 2), axisMax];
|
||
|
||
return (
|
||
<div className="panel p-6">
|
||
<div className="mb-6">
|
||
<div className="stat-label mb-1">Population by map</div>
|
||
<h2 className="text-lg text-ink">
|
||
{visiblePoints.length} of {points.length}
|
||
{reachedStart ? '' : '+'} maps
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-4 mb-2">
|
||
<div className="flex items-center gap-1.5 text-xs text-accent">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M9 9l6 6M9 15l6-6" strokeLinecap="round" />
|
||
<circle cx="12" cy="12" r="9" />
|
||
</svg>
|
||
Scroll to zoom, drag to pan (all the way back to 2015), click a bar for who was online
|
||
{fetchingMore && <span className="text-ink-faint">— loading more…</span>}
|
||
</div>
|
||
{isZoomed && (
|
||
<button onClick={resetZoom} className="text-xs text-ink-muted hover:text-accent transition-colors underline">
|
||
Reset zoom
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<div ref={containerRef} className="h-72 w-full relative">
|
||
{loading ? (
|
||
<div className="h-full flex items-center justify-center text-ink-faint text-sm font-mono">
|
||
loading…
|
||
</div>
|
||
) : points.length === 0 ? (
|
||
<div className="h-full flex items-center justify-center text-ink-muted text-sm">
|
||
No map history recorded yet.
|
||
</div>
|
||
) : (
|
||
<>
|
||
<svg
|
||
ref={svgRef}
|
||
width={width}
|
||
height={HEIGHT}
|
||
style={{ cursor: 'crosshair', touchAction: 'none' }}
|
||
onMouseDown={handleMouseDown}
|
||
onMouseMove={handleMouseMove}
|
||
onMouseUp={handleMouseUp}
|
||
onMouseLeave={() => {
|
||
setHoverIndex(null);
|
||
dragStartRef.current = null;
|
||
}}
|
||
onClick={() => {
|
||
if (dragMovedRef.current) {
|
||
dragMovedRef.current = false;
|
||
return;
|
||
}
|
||
if (hoverIndex != null && visiblePoints[hoverIndex]) {
|
||
loadPlayersFor(visiblePoints[hoverIndex]);
|
||
}
|
||
}}
|
||
>
|
||
<defs>
|
||
<linearGradient id="mapBarGradient" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stopColor="#5EE596" />
|
||
<stop offset="100%" stopColor="#2A9C5C" />
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
{yTicks.map((v) => {
|
||
const y = barY(v);
|
||
return (
|
||
<g key={v}>
|
||
<line x1={PAD_LEFT} y1={y} x2={width - PAD_RIGHT} y2={y} stroke="#2A332E" />
|
||
<text x={PAD_LEFT - 6} y={y + 3} textAnchor="end" fontSize={11} fill="#8A9691">
|
||
{v}
|
||
</text>
|
||
</g>
|
||
);
|
||
})}
|
||
|
||
{visiblePoints.map((p, i) => (
|
||
<rect
|
||
key={p.map_id}
|
||
x={barX(i)}
|
||
y={barY(p.total_players)}
|
||
width={barWidth}
|
||
height={barHeight(p.total_players)}
|
||
rx={3}
|
||
fill="url(#mapBarGradient)"
|
||
fillOpacity={hoverIndex === i ? 1 : 0.8}
|
||
style={hoverIndex === i ? { filter: 'drop-shadow(0 0 6px rgba(63, 211, 122, 0.55))' } : undefined}
|
||
/>
|
||
))}
|
||
|
||
<line
|
||
x1={PAD_LEFT}
|
||
y1={PAD_TOP + plotHeight}
|
||
x2={width - PAD_RIGHT}
|
||
y2={PAD_TOP + plotHeight}
|
||
stroke="#4C5652"
|
||
/>
|
||
</svg>
|
||
|
||
{hoverIndex != null && visiblePoints[hoverIndex] && (
|
||
<div
|
||
className="absolute pointer-events-none"
|
||
style={{
|
||
left: Math.min(width - 200, Math.max(0, barX(hoverIndex) - 60)),
|
||
top: barY(visiblePoints[hoverIndex].total_players) - 70,
|
||
background: '#121715',
|
||
border: '1px solid #1F2723',
|
||
borderRadius: 6,
|
||
fontSize: 12,
|
||
padding: '8px 10px',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
<div style={{ color: '#E4EBE7' }}>{visiblePoints[hoverIndex].map_name}</div>
|
||
<div style={{ color: '#8A9691' }}>
|
||
{new Date(visiblePoints[hoverIndex].map_start_dt.replace(' ', 'T')).toLocaleString()}
|
||
</div>
|
||
<div style={{ color: '#3FD37A' }}>
|
||
{visiblePoints[hoverIndex].total_players} total players during this session
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{points.length > 0 && (
|
||
<div className="mt-2 text-xs text-ink-faint">
|
||
Visit the{' '}
|
||
<Link href="/maps" className="text-accent hover:underline">
|
||
maps page
|
||
</Link>{' '}
|
||
for full detail (votes, prev/next map).
|
||
</div>
|
||
)}
|
||
|
||
{selectedMap && (
|
||
<div className="mt-4 pt-4 border-t-2 border-base-divider">
|
||
<div className="stat-label mb-1">
|
||
Players during{' '}
|
||
<Link href={`/maps/period/${selectedMap.map_id}`} className="text-accent hover:underline">
|
||
{selectedMap.map_name}
|
||
</Link>{' '}
|
||
({selectedPlayers.length} player{selectedPlayers.length === 1 ? '' : 's'})
|
||
</div>
|
||
<div className="text-xs text-ink-faint mb-3">
|
||
{new Date(selectedMap.map_start_dt.replace(' ', 'T')).toLocaleString()}
|
||
{' – '}
|
||
{selectedMap.map_end_dt
|
||
? new Date(selectedMap.map_end_dt.replace(' ', 'T')).toLocaleString()
|
||
: 'still running'}
|
||
</div>
|
||
<PlayerChipList players={selectedPlayers} loading={loadingPlayers} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|