Race Results
+
+
+
+
+
+
+
+
+ Loading leaderboard...
+{error}
+ +| Pos | -Color | -Driver | -Initials | -Points | +Pos | +Color | +Driver | +Initials | +Points |
|---|---|---|---|---|---|---|---|---|---|
| {pos} | - + | {driver.name} | {driver.initials} | diff --git a/src/app/components/PointsKey.tsx b/src/components/PointsKey.tsx similarity index 72% rename from src/app/components/PointsKey.tsx rename to src/components/PointsKey.tsx index a4a6702..7287f31 100644 --- a/src/app/components/PointsKey.tsx +++ b/src/components/PointsKey.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react'; import { PointStyle } from '@/lib/types'; interface PointsKeyProps { @@ -8,23 +9,27 @@ interface PointsKeyProps { } export default function PointsKey({ pointsTable, flPoints, flColor, flTextColor }: PointsKeyProps) { - const sortedPoints = [...pointsTable].sort((a, b) => (a.priority || 99) - (b.priority || 99)); + const sortedPoints = useMemo( + () => [...pointsTable].sort((a, b) => (a.priority || 99) - (b.priority || 99)), + [pointsTable] + ); return (
| Points | +|||
|---|---|---|---|
|
@@ -36,13 +41,13 @@ export default function PointsKey({ pointsTable, flPoints, flColor, flTextColor
))}
- |
diff --git a/src/app/components/RaceResultsTable.tsx b/src/components/RaceResultsTable.tsx
similarity index 66%
rename from src/app/components/RaceResultsTable.tsx
rename to src/components/RaceResultsTable.tsx
index a1a8259..69a2f92 100644
--- a/src/app/components/RaceResultsTable.tsx
+++ b/src/components/RaceResultsTable.tsx
@@ -1,11 +1,32 @@
-import { AppData } from "@/lib/types";
-import { parsePoints, findStyleByPoints } from "@/lib/leaderboard";
+import { useMemo } from 'react';
+import { AppData } from '@/lib/types';
+import { parsePoints, findStyleByPoints } from '@/lib/leaderboard';
interface RaceResultsTableProps {
appData: AppData;
}
export default function RaceResultsTable({ appData }: RaceResultsTableProps) {
+ const driverById = useMemo(() => {
+ const map = new Map
+
FL (+{flPoints})
{driver.name}
@@ -36,28 +57,20 @@ export default function RaceResultsTable({ appData }: RaceResultsTableProps) {
{track.name}
|
- {flDriver?.initials || ""}
+ {flDriver?.initials || ''}
|
{appData.drivers.map((driver) => {
- const raceResult = track.results.find(
- (r) => r.driverId === driver.id
- );
- let result = raceResult?.score;
- // DNS fallback
- if (result === undefined || result === null || result === "") {
- result = "DNS";
- }
+ const driverMap = resultsByTrackAndDriver.get(track.id);
+ const score = driverMap?.get(driver.id);
+ const result = score === null || score === undefined ? 'DNS' : score;
const pointsNum = parsePoints(result);
const style = findStyleByPoints(appData, pointsNum);
@@ -66,9 +79,10 @@ export default function RaceResultsTable({ appData }: RaceResultsTableProps) {
color: style.textColor,
};
- let hasFL = false;
- if (track.fastestLapDriverId === driver.id && appData.flPoints) {
- hasFL = true;
+ const hasFL =
+ track.fastestLapDriverId === driver.id && appData.flPoints;
+
+ if (hasFL) {
const flColor = appData.flColor;
if (pointsNum === 0) {
cellStyles = {
@@ -86,17 +100,17 @@ export default function RaceResultsTable({ appData }: RaceResultsTableProps) {
if (hasFL) {
cellStyles = {
...cellStyles,
- display: "flex",
- justifyContent: "space-between",
- alignItems: "center",
- flexDirection: "row",
- paddingLeft: "0.75rem",
- paddingRight: "0.75rem",
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ flexDirection: 'row',
+ paddingLeft: '0.75rem',
+ paddingRight: '0.75rem',
};
} else {
cellStyles = {
...cellStyles,
- textAlign: "center",
+ textAlign: 'center',
};
}
@@ -105,10 +119,11 @@ export default function RaceResultsTable({ appData }: RaceResultsTableProps) {
key={driver.id}
className="py-3 px-4 font-mono"
style={cellStyles}
+ title={`${result} - ${style.label}`}
>
{hasFL ? (
<>
-
+
{result}
{
- const API_BASE = process.env.NEXT_PUBLIC_API_BASE || '';
- const SERVER_ID = process.env.NEXT_PUBLIC_SERVER_ID || '';
- const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || '';
+ const API_BASE = import.meta.env.VITE_API_BASE || '';
+ const SERVER_ID = import.meta.env.VITE_SERVER_ID || '';
+ const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN || '';
if (!API_BASE || !SERVER_ID || !ACCESS_TOKEN) {
- console.warn('Missing API configuration');
- return null;
+ console.warn('Missing API configuration, using default data');
+ return defaultAppData;
}
try {
const res = await fetch(`${API_BASE}/server/${SERVER_ID}/leaderboard`, {
headers: {
- "Access-Key": ACCESS_TOKEN
- }
+ 'Access-Key': ACCESS_TOKEN,
+ },
});
- if (!res.ok) return null;
+ if (!res.ok) {
+ console.warn('API request failed, using default data');
+ return defaultAppData;
+ }
const data = await res.json();
// Treat empty leaderboard (no drivers) as null to fall back to defaults
- if (!data || !data.drivers || data.drivers.length === 0) return null;
+ if (!data || !data.drivers || data.drivers.length === 0) {
+ console.warn('Empty API response, using default data');
+ return defaultAppData;
+ }
return data;
} catch (e) {
- console.error("Failed to load leaderboard from API:", e);
- return null;
+ console.error('Failed to load leaderboard from API:', e);
+ return defaultAppData;
}
}
diff --git a/src/lib/defaultData.ts b/src/lib/defaultData.ts
old mode 100644
new mode 100755
diff --git a/src/lib/leaderboard.ts b/src/lib/leaderboard.ts
old mode 100644
new mode 100755
index f22b291..757ec14
--- a/src/lib/leaderboard.ts
+++ b/src/lib/leaderboard.ts
@@ -1,8 +1,12 @@
-import { AppData, PointStyle, DriverStanding, RaceHistoryEntry } from "./types";
+import { AppData, PointStyle, DriverStanding, RaceHistoryEntry } from './types';
-export function parsePoints(value: any): number {
- const num = parseInt(value, 10);
- return isNaN(num) ? 0 : num;
+export function parsePoints(value: number | string | null): number {
+ if (typeof value === 'number') return value;
+ if (typeof value === 'string') {
+ const num = parseInt(value, 10);
+ return isNaN(num) ? 0 : num;
+ }
+ return 0;
}
export function findStyleByPoints(
@@ -11,34 +15,44 @@ export function findStyleByPoints(
): PointStyle {
return (
appData.pointsTable.find((p) => p.points === points) || {
- id: "unknown",
+ id: 'unknown',
points: 0,
- label: "???",
- color: "#374151",
- textColor: "#e5e7eb",
+ label: '???',
+ color: '#374151',
+ textColor: '#e5e7eb',
priority: 99,
}
);
}
export function calculateStandingsData(appData: AppData): DriverStanding[] {
+ const resultsByTrackAndDriver = new Map<
+ string,
+ Map |