AfonsoCMSousa/ACPlayer_Webpage
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Live Map and Events Tab

Browse Source
This commit is contained in:
AfonsoCMSousa
2025-11-02 20:59:28 +00:00
parent 4a8d6bc5d7
commit 8de538cc29
13 changed files with 1391 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/live/LiveRefreshWrapper.tsx
+1 -2
View File
@@ -8,10 +8,9 @@ export default function LiveRefreshWrapper({ children }: { children: React.React
const router = useRouter();
useEffect(() => {
// Refresh every 3 seconds for live updates
const interval = setInterval(() => {
router.refresh();
}, 3000);
}, 500);
return () => clearInterval(interval);
}, [router]);
components/live/LiveTiming.tsx
+55 -7
View File
@@ -1,7 +1,7 @@
// components/live/LiveTiming.tsx
'use client';
import { BoltIcon } from '@/components/ui/icons';
import { BoltIcon, TrophyIcon } from '@/components/ui/icons';
interface TimingEntry {
position: number;
@@ -13,6 +13,8 @@ interface TimingEntry {
best_lap_time: number | null;
gap_to_leader: string;
avg_lap_time: number | null;
user_rank?: number | null; // Driver's position in rankings (1st, 2nd, etc.)
user_rating?: number | null; // Driver's rating score (ELO-style)
}
interface LiveTimingProps {
@@ -23,7 +25,7 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
// Format lap time from milliseconds
const formatLapTime = (ms: number | null) => {
if (!ms || ms === 0) return '-:--.---';
if (!ms || ms === 0) return '--:--.---';
const minutes = Math.floor(ms / 60000);
const seconds = Math.floor((ms % 60000) / 1000);
@@ -32,14 +34,36 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
return `${minutes}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
};
// Format position with fallback
const formatPosition = (position: number | null | undefined) => {
if (!position || position === 0) return '--';
return String(position).padStart(2, '0');
};
// Format lap count with fallback
const formatLapCount = (laps: number | null | undefined) => {
if (!laps || laps === 0) return '--';
return laps;
};
// Get position color
const getPositionColor = (position: number) => {
if (!position || position === 0) return 'text-white/40 border-white/10';
if (position === 1) return 'text-white border-white';
if (position === 2) return 'text-white/90 border-white/70';
if (position === 3) return 'text-white/80 border-white/50';
return 'text-white/60 border-white/20';
};
// Get rank badge color
const getRankColor = (rank: number | null | undefined) => {
if (!rank) return 'bg-white/10 text-white/40';
if (rank <= 10) return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
if (rank <= 50) return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
if (rank <= 100) return 'bg-green-500/20 text-green-400 border-green-500/30';
return 'bg-white/10 text-white/60 border-white/20';
};
return (
<div className="space-y-2">
{/* Header */}
@@ -56,7 +80,8 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
{entries.map((entry) => {
const isLeader = entry.position === 1;
const isFastestLap = entries.length > 0 &&
entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time).map(e => e.best_lap_time!));
entry.best_lap_time && entry.best_lap_time > 0 &&
entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time && e.best_lap_time > 0).map(e => e.best_lap_time!));
return (
<div
@@ -71,19 +96,35 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
{/* Position */}
<div className="col-span-1 flex items-center">
<span className="text-lg font-bold">
{String(entry.position).padStart(2, '0')}
{formatPosition(entry.position)}
</span>
</div>
{/* Driver Info */}
<div className="col-span-4 flex flex-col justify-center">
<div className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>{entry.driver_name}</div>
<div className="flex items-center space-x-2">
<span className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>
{entry.driver_name}
</span>
{entry.user_rank && (
<div className="flex items-center space-x-1">
<span className={`text-[10px] px-1.5 py-0.5 border rounded ${getRankColor(entry.user_rank)}`}>
#{entry.user_rank}
</span>
{entry.user_rating && (
<span className="text-[10px] text-white/40 font-mono">
{entry.user_rating}
</span>
)}
</div>
)}
</div>
<div className="text-xs text-white/40 font-mono truncate">{entry.car_model}</div>
</div>
{/* Current Lap */}
<div className="col-span-2 flex items-center justify-end">
<span className="font-mono text-sm">{entry.current_lap}</span>
<span className="font-mono text-sm">{formatLapCount(entry.current_lap)}</span>
</div>
{/* Last Lap Time */}
@@ -91,7 +132,7 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
<div className="font-mono text-sm">
{formatLapTime(entry.last_lap_time)}
</div>
{entry.avg_lap_time && (
{entry.avg_lap_time && entry.avg_lap_time > 0 && (
<div className="text-xs text-white/40 font-mono">
Avg: {formatLapTime(entry.avg_lap_time)}
</div>
@@ -118,7 +159,14 @@ export default function LiveTiming({ entries }: LiveTimingProps) {
<BoltIcon className="w-3 h-3" />
<span>Fastest lap overall</span>
</div>
<div className="flex items-center space-x-2">
<span className="text-[10px] px-1.5 py-0.5 border rounded bg-yellow-500/20 text-yellow-400 border-yellow-500/30">
#1-10
</span>
<span>Top 10 ranked driver</span>
</div>
<div>Times updated in real-time from server telemetry</div>
<div className="text-white/30 text-[11px]">-- indicates driver has not started or is in pits</div>
</div>
</div>
);
components/live/LiveTrackMap.tsx
+82 -26
View File
@@ -3,6 +3,7 @@
import { useEffect, useState } from 'react';
import { getTrackMapUrl, cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';
import { getTrackMapConfig, worldToMapCoords, type TrackMapConfig } from '@/lib/trackMapConfig';
interface Car {
carID: number;
@@ -12,6 +13,7 @@ interface Car {
position: number;
lap_time?: number;
best_lap_time?: number;
world_position?: { x: number; y: number; z: number };
}
interface LiveTrackMapProps {
@@ -22,31 +24,79 @@ interface LiveTrackMapProps {
export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapProps) {
const [imageError, setImageError] = useState(false);
const [mapConfig, setMapConfig] = useState<TrackMapConfig | null>(null);
// Get cleaned track map URL
// Static track bounds - set once and never change
const [trackBounds, setTrackBounds] = useState<{
minX: number;
maxX: number;
minZ: number;
maxZ: number;
} | null>(null);
// Add mouse position state
const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null);
// Define event handlers
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
setMousePos({ x, y });
};
const handleMouseLeave = () => {
setMousePos(null);
};
const trackMapUrl = getTrackMapUrl(track, trackConfig);
const displayTrackName = cleanTrackName(track);
const displayTrackConfig = cleanTrackConfig(trackConfig);
// Calculate position on track (circular approximation)
const getCarPosition = (normalizedPos: number) => {
// normalizedPos is 0.0 to 1.0 around the track
// We'll place cars in a circular path for now
const angle = normalizedPos * Math.PI * 2 - Math.PI / 2; // Start at top
// Position relative to center (percentage)
const centerX = 50;
const centerY = 50;
const radius = 40; // 40% from center
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;
return { x, y };
useEffect(() => {
getTrackMapConfig(track, trackConfig).then(config => {
setMapConfig(config);
if (config) {
const halfWidth = config.width / 2;
const halfHeight = config.height / 2;
setTrackBounds({
minX: config.xOffset - halfWidth,
maxX: config.xOffset + halfWidth,
minZ: config.zOffset - halfHeight,
maxZ: config.zOffset + halfHeight,
});
}
});
}, [track, trackConfig]);
// Convert world position to screen position
const getCarPosition = (car: Car) => {
// Use AC's formula with map.ini config
if (car.world_position && car.world_position.x !== undefined && mapConfig) {
const pos = worldToMapCoords(
car.world_position.x,
car.world_position.y,
car.world_position.z,
mapConfig
);
// Debug first car only
if (cars.indexOf(car) === 0) {
console.log(`[Map] World: (${car.world_position.x.toFixed(1)}, ${car.world_position.z.toFixed(1)}) -> Screen: (${pos.x.toFixed(1)}%, ${pos.y.toFixed(1)}%)`);
}
return pos;
}
// Fallback: distribute along diagonal based on normalizedSplinePos
const fallbackX = car.normalizedSplinePos * 100;
const fallbackY = car.normalizedSplinePos * 100;
return { x: fallbackX, y: fallbackY };
};
// Get color based on position
const getPositionColor = (position: number) => {
if (!position || position === 0) return '#6b7280'; // Gray for no position
if (position === 1) return '#ffffff'; // P1 - White
if (position === 2) return '#d1d5db'; // P2 - Light gray
if (position === 3) return '#9ca3af'; // P3 - Gray
@@ -54,7 +104,11 @@ export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapP
};
return (
<div className="relative w-full aspect-square bg-black border border-white/10 overflow-hidden">
<div
className="relative w-full aspect-square bg-black border border-white/10 overflow-hidden"
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
{/* Track Map Background */}
{!imageError ? (
<img
@@ -84,9 +138,9 @@ export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapP
{/* Car Positions */}
<div className="absolute inset-0">
{cars.map((car) => {
const pos = getCarPosition(car.normalizedSplinePos);
const pos = getCarPosition(car);
const color = getPositionColor(car.position);
return (
<div
key={car.carID}
@@ -106,14 +160,16 @@ export default function LiveTrackMap({ track, trackConfig, cars }: LiveTrackMapP
boxShadow: `0 0 10px ${color}`,
}}
/>
{/* Position number */}
<div
className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs font-bold whitespace-nowrap px-2 py-1 bg-black/80 border"
style={{ borderColor: color, color: color }}
>
P{car.position}
</div>
{car.position > 0 && (
<div
className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs font-bold whitespace-nowrap px-2 py-1 bg-black/80 border"
style={{ borderColor: color, color: color }}
>
P{car.position}
</div>
)}
{/* Driver name on hover */}
<div className="absolute top-6 left-1/2 transform -translate-x-1/2 opacity-0 hover:opacity-100 transition-opacity whitespace-nowrap">