state.lapCount);
const track = useDataStore((state) => state.trackStatus);
- const currentTrackStatus = getTrackStatusMessage(track?.status ? parseInt(track?.status) : undefined);
+ const currentTrackStatus = useMemo(
+ () => getTrackStatusMessage(track?.status ? parseInt(track?.status) : undefined),
+ [track],
+ );
+ const computedTrackStyle = useMemo(
+ () => (currentTrackStatus ? getComputedFlagStyle(currentTrackStatus.flagType) : null),
+ [currentTrackStatus],
+ );
return (
@@ -22,9 +30,9 @@ export default function TrackInfo() {
{!!currentTrackStatus ? (
{currentTrackStatus.message}
diff --git a/dash/src/components/map/CornerNumber3D.tsx b/dash/src/components/map/CornerNumber3D.tsx
new file mode 100644
index 00000000..f3d632c1
--- /dev/null
+++ b/dash/src/components/map/CornerNumber3D.tsx
@@ -0,0 +1,35 @@
+import { useLookAt } from "@/hooks/useLookAt";
+import { theme } from "@/styles/tailwindTheme";
+import { Text as Text3D } from "@react-three/drei";
+import { useThree } from "@react-three/fiber";
+import { useRef } from "react";
+
+import { Mesh } from "three";
+
+type CornerNumberProps = {
+ number: number;
+ x: number;
+ y: number;
+};
+
+export default function CornerNumber({ number, x, y }: CornerNumberProps) {
+ const { camera } = useThree();
+
+ const mesh = useRef
();
+
+ useLookAt({ object: mesh.current, target: camera.position });
+
+ return (
+
+ {number}
+
+ );
+}
diff --git a/dash/src/components/map/DriverIndicator.tsx b/dash/src/components/map/DriverIndicator.tsx
new file mode 100644
index 00000000..e0a35d64
--- /dev/null
+++ b/dash/src/components/map/DriverIndicator.tsx
@@ -0,0 +1,218 @@
+import { rotate } from "@/lib/map";
+import { toVector3 } from "@/lib/r3f";
+import { theme } from "@/styles/tailwindTheme";
+import { PositionCar } from "@/types/state.type";
+import { Billboard, Line, Sphere } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import { Container, Root, Text as TextUI } from "@react-three/uikit";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Color, MeshBasicMaterial, Vector3 } from "three";
+
+function calculateAverageUpdateTime(history: number[]) {
+ if (history.length < 2) return 0;
+
+ let totalAmount = 0;
+ for (let i = 0; i < history.length; ++i) {
+ const current = history[i];
+ const previous = history[i - 1];
+ const delta = current - previous;
+ totalAmount += delta;
+ }
+
+ return totalAmount / (history.length - 1);
+}
+
+type DriverIndicatorProps = {
+ name: string;
+ color: string | undefined;
+ racingNumber: string;
+ favoriteDriver: boolean;
+
+ pit: boolean;
+ hidden: boolean;
+
+ pos: PositionCar;
+ rotation: number;
+
+ centerX: number;
+ centerY: number;
+};
+
+export function DriverIndicator({
+ pos,
+ name,
+ color,
+ racingNumber,
+ favoriteDriver,
+ pit,
+ hidden,
+ rotation,
+ centerX,
+ centerY,
+}: DriverIndicatorProps) {
+ const rotatedPos = rotate(pos.X, pos.Y, rotation, centerX, centerY);
+
+ const opacity = useMemo(() => {
+ if (pit) return 0.3;
+ return hidden ? 0 : 1;
+ }, [pit, hidden]);
+
+ const material = useMemo(() => {
+ const m = new MeshBasicMaterial();
+ m.transparent = true;
+ m.opacity = opacity;
+ m.color = new Color(`#${color}`);
+ return m;
+ }, [color, opacity]);
+
+ const styles = useMemo(
+ () => ({
+ renderPriority: favoriteDriver ? 40 : 20,
+ billboardHeight: favoriteDriver ? 800 : 400,
+ billboardSize: {
+ x: favoriteDriver ? 1050 * 1.5 : 1050,
+ y: favoriteDriver ? 350 * 1.5 : 350,
+ },
+ fontSize: favoriteDriver ? 24000 * 1.5 : 24000,
+ fontWeight: favoriteDriver ? 600 : 500,
+ dotSize: favoriteDriver ? 180 : 120,
+ }),
+ [favoriteDriver],
+ );
+
+ if (hidden) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+
+ {racingNumber}
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+ );
+}
+
+type InterpolatedDriverIndicatorProps = DriverIndicatorProps & {
+ interpolationLength?: number;
+};
+
+export function InterpolatedDriverIndicator({
+ pos,
+ interpolationLength = 8,
+ ...props
+}: InterpolatedDriverIndicatorProps) {
+ const incomingPosition = useMemo(() => new Vector3(pos.X, 0, pos.Y), [pos]);
+ const [currentPosition, setCurrentPosition] = useState(new Vector3());
+ const [previousPosition, setPreviousPosition] = useState(new Vector3());
+ const [interpolatedPosition, setInterpolatedPosition] = useState(new Vector3());
+ const [interpolationFactor, setInterpolationFactor] = useState(0);
+ const [shouldUpdatePosition, setShouldUpdatePosition] = useState(false);
+ const updatesHistoryRef = useRef([]);
+
+ useEffect(() => {
+ // Delegate update to the next frame
+ setShouldUpdatePosition(true);
+ }, [incomingPosition]);
+
+ const updatePosition = useCallback(() => {
+ const { current: updatesHistory } = updatesHistoryRef;
+
+ // Only set previous position if current position is valid
+ if (currentPosition.length() > 0) {
+ setPreviousPosition(currentPosition.clone());
+ }
+ setCurrentPosition(incomingPosition.clone());
+ setInterpolationFactor(0);
+
+ // Record timestamp in history
+ const timestamp = performance.now();
+ updatesHistory.push(timestamp);
+ if (updatesHistory.length > interpolationLength) {
+ updatesHistory.shift();
+ }
+
+ // Clear position update flag
+ setShouldUpdatePosition(false);
+ }, [currentPosition, incomingPosition, updatesHistoryRef]);
+
+ useFrame((_, delta) => {
+ shouldUpdatePosition && updatePosition();
+
+ const { current: updatesHistory } = updatesHistoryRef;
+
+ const averageTimeBetweenUpdatesInMillis = calculateAverageUpdateTime(updatesHistory) / 1000;
+ const interpolationRate = 1 / averageTimeBetweenUpdatesInMillis;
+ const interpolationSpeed = averageTimeBetweenUpdatesInMillis > 0 ? interpolationRate : 1;
+
+ if (interpolationFactor < 1) {
+ // Interpolate position
+ const newInterpolatedPosition = new Vector3().lerpVectors(previousPosition, currentPosition, interpolationFactor);
+ setInterpolatedPosition(newInterpolatedPosition);
+ setInterpolationFactor((prev) => Math.min(1, prev + delta * interpolationSpeed));
+ } else {
+ // Clamp to last known position
+ setInterpolatedPosition(currentPosition);
+ }
+ });
+
+ return (
+
+ );
+}
diff --git a/dash/src/components/Map.tsx b/dash/src/components/map/Map.tsx
similarity index 89%
rename from dash/src/components/Map.tsx
rename to dash/src/components/map/Map.tsx
index 46a20a42..570ee441 100644
--- a/dash/src/components/Map.tsx
+++ b/dash/src/components/map/Map.tsx
@@ -1,14 +1,12 @@
-import { useEffect, useMemo, useState } from "react";
import clsx from "clsx";
+import { useEffect, useMemo, useState } from "react";
+import type { TrackPosition } from "@/types/map.type";
import type { PositionCar } from "@/types/state.type";
-import type { Map, TrackPosition } from "@/types/map.type";
-import { fetchMap } from "@/lib/fetchMap";
import { objectEntries } from "@/lib/driverHelper";
-import { useDataStore, usePositionStore } from "@/stores/useDataStore";
-import { useSettingsStore } from "@/stores/useSettingsStore";
-import { getTrackStatusMessage } from "@/lib/getTrackStatusMessage";
+import { fetchMap } from "@/lib/fetchMap";
+import { getComputedFlagStyle, getTrackStatusMessage } from "@/lib/getTrackStatusMessage";
import {
createSectors,
findYellowSectors,
@@ -18,6 +16,9 @@ import {
rad,
rotate,
} from "@/lib/map";
+import { useDataStore, usePositionStore } from "@/stores/useDataStore";
+import { useSettingsStore } from "@/stores/useSettingsStore";
+import MapLoader from "./MapLoader";
// This is basically fearlessly copied from
// https://github.com/tdjsnelling/monaco
@@ -45,7 +46,7 @@ export default function Map() {
const [[minX, minY, widthX, widthY], setBounds] = useState<(null | number)[]>([null, null, null, null]);
const [[centerX, centerY], setCenter] = useState<(null | number)[]>([null, null]);
- const [points, setPoints] = useState(null);
+ const [points, setPoints] = useState(null);
const [sectors, setSectors] = useState([]);
const [corners, setCorners] = useState([]);
const [rotation, setRotation] = useState(0);
@@ -105,24 +106,21 @@ export default function Map() {
return sectors
.map((sector) => {
- const color = getSectorColor(sector, status?.bySector, status?.trackColor, yellowSectors);
+ const flagType = getSectorColor(sector, status?.bySector, status?.flagType, yellowSectors);
+ const { stroke } = getComputedFlagStyle(flagType);
return {
- color,
+ color: stroke,
pulse: status?.pulse,
number: sector.number,
- strokeWidth: color === "stroke-white" ? 60 : 120,
- d: `M${sector.points[0].x},${sector.points[0].y} ${sector.points.map((point) => `L${point.x},${point.y}`).join(" ")}`,
+ strokeWidth: flagType === "GREEN" ? 60 : 120,
+ d: generateDrawnSVGPath(sector.points),
};
})
.sort(prioritizeColoredSectors);
}, [trackStatus, sectors]);
if (!points || !minX || !minY || !widthX || !widthY) {
- return (
-
- );
+ return ;
}
return (
@@ -136,7 +134,7 @@ export default function Map() {
strokeWidth={300}
strokeLinejoin="round"
fill="transparent"
- d={`M${points[0].x},${points[0].y} ${points.map((point) => `L${point.x},${point.y}`).join(" ")}`}
+ d={generateDrawnSVGPath(points)}
/>
{renderedSectors.map((sector) => {
@@ -269,3 +267,10 @@ const CarDot = ({ pos, name, color, favoriteDriver, pit, hidden, rotation, cente
);
};
+
+function generateDrawnSVGPath(points: TrackPosition[]) {
+ const formattedCoords = points.map((point) => `${point.x},${point.y}`);
+ const origin = `M${formattedCoords[0]}`;
+ const spline = formattedCoords.map((coord) => `L${coord}`);
+ return `${origin} ${spline.join(" ")}`;
+}
diff --git a/dash/src/components/map/Map3D.tsx b/dash/src/components/map/Map3D.tsx
new file mode 100644
index 00000000..a6d21d8f
--- /dev/null
+++ b/dash/src/components/map/Map3D.tsx
@@ -0,0 +1,252 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import type { FlagType, TrackPosition } from "@/types/map.type";
+
+import { objectEntries } from "@/lib/driverHelper";
+import { fetchMap } from "@/lib/fetchMap";
+import { getComputedFlagStyle, getTrackStatusMessage } from "@/lib/getTrackStatusMessage";
+import { createSectors, findYellowSectors, getSectorColor, MapSector, rad, rotate } from "@/lib/map";
+import { toVector3 } from "@/lib/r3f";
+import { useDataStore, usePositionStore } from "@/stores/useDataStore";
+import { useSettingsStore } from "@/stores/useSettingsStore";
+import { theme } from "@/styles/tailwindTheme";
+import { Line, OrbitControls } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { Vector3 } from "three";
+import CornerNumber from "./CornerNumber3D";
+import { InterpolatedDriverIndicator } from "./DriverIndicator";
+import MapLoader from "./MapLoader";
+
+const SPACE = 1000;
+const ROTATION_FIX = 90;
+const CAMERA_FOV = 35;
+
+type Corner = {
+ number: number;
+ pos: TrackPosition;
+ labelPos: TrackPosition;
+};
+
+type RenderedSector3D = {
+ number: number;
+ points: TrackPosition[];
+ flagType: FlagType;
+ hex: string;
+ strokeWidth: number;
+ pulse?: number;
+};
+
+function prioritizeColoredSectors3D(a: RenderedSector3D, b: RenderedSector3D) {
+ if (a.flagType === "GREEN" && b.flagType !== "GREEN") {
+ return -1;
+ }
+ if (a.flagType !== "GREEN" && b.flagType === "GREEN") {
+ return 1;
+ }
+ return a.number - b.number;
+}
+
+function getCenter(xPoints: number[], yPoints: number[]) {
+ const maxBounds = {
+ x: Math.max(...xPoints),
+ y: Math.max(...yPoints),
+ };
+
+ const minBounds = {
+ x: Math.min(...xPoints),
+ y: Math.min(...yPoints),
+ };
+
+ return {
+ x: (maxBounds.x - minBounds.x) * 0.5 + minBounds.x,
+ y: (maxBounds.y - minBounds.y) * 0.5 + minBounds.y,
+ };
+}
+
+export default function Map3D() {
+ const showCornerNumbers = useSettingsStore((state) => state.showCornerNumbers);
+ const favoriteDrivers = useSettingsStore((state) => state.favoriteDrivers);
+
+ const positions = usePositionStore((state) => state.positions);
+ const drivers = useDataStore((state) => state?.driverList);
+ const trackStatus = useDataStore((state) => state?.trackStatus);
+ const timingDrivers = useDataStore((state) => state?.timingData);
+ const raceControlMessages = useDataStore((state) => state?.raceControlMessages?.messages);
+ const circuitKey = useDataStore((state) => state?.sessionInfo?.meeting.circuit.key);
+
+ const [[minX, minY, widthX, widthY], setBounds] = useState<(null | number)[]>([null, null, null, null]);
+ const [[centerX, centerY], setCenter] = useState([0, 0]);
+
+ const [points, setPoints] = useState(null);
+ const [sectors, setSectors] = useState([]);
+ const [corners, setCorners] = useState([]);
+ const [rotation, setRotation] = useState(0);
+
+ // FIXME: This is garbage but I am struggling finding the proper type
+ const controlsRef = useRef(null);
+
+ const defaultCameraDistance = useMemo(() => Math.max(widthX ?? 0, widthY ?? 0), [widthX, widthY]);
+ const defaultCameraPosition = useMemo(
+ () => [centerX, defaultCameraDistance, centerY + defaultCameraDistance] as const,
+ [centerX, centerY, defaultCameraDistance],
+ );
+ const yellowSectors = useMemo(() => findYellowSectors(raceControlMessages), [raceControlMessages]);
+ const renderedSectors = useMemo(() => {
+ const status = getTrackStatusMessage(trackStatus?.status ? parseInt(trackStatus.status) : undefined);
+ return sectors
+ .map((sector) => {
+ const flagType = getSectorColor(sector, status?.bySector, status?.flagType, yellowSectors);
+ const { trackHex } = getComputedFlagStyle(flagType);
+ return {
+ hex: trackHex,
+ flagType: flagType,
+ pulse: status?.pulse,
+ number: sector.number,
+ strokeWidth: flagType === "GREEN" ? 2 : 5,
+ points: sector.points,
+ };
+ })
+ .sort(prioritizeColoredSectors3D);
+ }, [trackStatus, sectors]);
+
+ useEffect(() => {
+ const loadMap = async () => {
+ if (!circuitKey) return;
+ const mapJson = await fetchMap(circuitKey);
+
+ const { x: mapCenterX, y: mapCenterY } = getCenter(mapJson.x, mapJson.y);
+
+ const fixedRotation = mapJson.rotation + ROTATION_FIX;
+
+ const sectors = createSectors(mapJson).map((s) => ({
+ ...s,
+ start: rotate(s.start.x, s.start.y, fixedRotation, mapCenterX, mapCenterY),
+ end: rotate(s.end.x, s.end.y, fixedRotation, mapCenterX, mapCenterY),
+ points: s.points.map((p) => rotate(p.x, p.y, fixedRotation, mapCenterX, mapCenterY)),
+ }));
+
+ const cornerPositions = mapJson.corners.map((corner) => ({
+ number: corner.number,
+ pos: rotate(corner.trackPosition.x, corner.trackPosition.y, fixedRotation, mapCenterX, mapCenterY),
+ labelPos: rotate(
+ corner.trackPosition.x + 540 * Math.cos(rad(corner.angle)),
+ corner.trackPosition.y + 540 * Math.sin(rad(corner.angle)),
+ fixedRotation,
+ mapCenterX,
+ mapCenterY,
+ ),
+ }));
+
+ const rotatedPoints = mapJson.x.map((x, index) =>
+ rotate(x, mapJson.y[index], fixedRotation, mapCenterX, mapCenterY),
+ );
+
+ const pointsX = rotatedPoints.map((item) => item.x);
+ const pointsY = rotatedPoints.map((item) => item.y);
+
+ const cMinX = Math.min(...pointsX) - SPACE;
+ const cMinY = Math.min(...pointsY) - SPACE;
+ const cWidthX = Math.max(...pointsX) - cMinX + SPACE * 2;
+ const cWidthY = Math.max(...pointsY) - cMinY + SPACE * 2;
+
+ setCenter([mapCenterX, mapCenterY]);
+ setBounds([cMinX, cMinY, cWidthX, cWidthY]);
+ setSectors(sectors);
+ setPoints(rotatedPoints);
+ setRotation(fixedRotation);
+ setCorners(cornerPositions);
+ };
+
+ loadMap();
+ }, [circuitKey]);
+
+ if (!points || !minX || !minY || !widthX || !widthY) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+
+