Please wait for {delay - maxDelay} seconds.
Or make your delay smaller.
+ {/* Blurred dummy background that hints at the dashboard UI */}
+
+
+ {/* Fake sidebar */}
+
+
+
+ {/* Fake top bar */}
+
+
+ {/* Fake content grid */}
+
+
+ {/* Fake bottom panels */}
+
+
-
-
- );
-}
-
-function MobileDynamicBar() {
- return (
-
- );
-}
-
-function MobileStaticBar({ show, connected }: { show: boolean; connected: boolean }) {
- const open = useSidebarStore((state) => state.open);
-
- return (
-
-
- open()} />
-
-
-
-
-
-
-
- {show &&
}
-
- );
-}
-
-function DesktopStaticBar({ show }: { show: boolean }) {
- const pinned = useSidebarStore((state) => state.pinned);
- const pin = useSidebarStore((state) => state.pin);
-
- return (
-
-
-
- {!pinned && pin()} />}
-
-
-
-
-
-
{show && }
-
-
{show && }
+
);
}
diff --git a/dashboard/src/app/dashboard/standings/page.tsx b/dashboard/src/app/dashboard/standings/page.tsx
index b0318d80..45e6a89c 100644
--- a/dashboard/src/app/dashboard/standings/page.tsx
+++ b/dashboard/src/app/dashboard/standings/page.tsx
@@ -1,127 +1,186 @@
"use client";
-import { useDataStore } from "@/stores/useDataStore";
-
-import NumberDiff from "@/components/NumberDiff";
+import { useEffect, useState } from "react";
import Image from "next/image";
-export default function Standings() {
- const driverStandings = useDataStore((state) => state.state?.ChampionshipPrediction?.Drivers);
- const teamStandings = useDataStore((state) => state.state?.ChampionshipPrediction?.Teams);
+type DriverStanding = {
+ position: string;
+ points: string;
+ Driver: {
+ givenName: string;
+ familyName: string;
+ permanentNumber: string;
+ };
+ Constructors: {
+ constructorId: string;
+ name: string;
+ }[];
+};
- const drivers = useDataStore((state) => state.state?.DriverList);
+type ConstructorStanding = {
+ position: string;
+ points: string;
+ Constructor: {
+ constructorId: string;
+ name: string;
+ };
+};
- const isRace = useDataStore((state) => state.state?.SessionInfo?.Type === "Race");
+const logoMapper: Record
= {
+ red_bull: "red-bull-racing",
+ mercedes: "mercedes",
+ ferrari: "ferrari",
+ mclaren: "mclaren",
+ alpine: "alpine",
+ rb: "racing-bulls",
+ haas: "haas-f1-team",
+ williams: "williams",
+ aston_martin: "aston-martin",
+ kick_sauber: "kick-sauber",
+ sauber: "kick-sauber",
+ alfa: "kick-sauber",
+};
- if (!isRace) {
- return (
-
-
championship standings unavailable
-
currently only available during a race
-
Driver Championship Standings
+ {error &&
{error}
}
+
{!driverStandings &&
- new Array(20).fill("").map((_, index) =>
)}
+ !error &&
+ new Array(20).fill("").map((_, index) =>
)}
{driverStandings &&
- drivers &&
- Object.values(driverStandings)
- .sort((a, b) => a.PredictedPosition - b.PredictedPosition)
- .map((driver) => {
- const driverDetails = drivers[driver.RacingNumber];
-
- if (!driverDetails) {
- return null;
- }
-
- return (
-
-
-
{driver.PredictedPosition}
-
-
- {driverDetails.FirstName} {driverDetails.LastName}
-
-
-
{driver.PredictedPoints}
-
-
-
- );
- })}
+ driverStandings.map((driver) => {
+ return (
+
+
{driver.position}
+
+
+ {driver.Driver.givenName} {driver.Driver.familyName}
+
+
+
{driver.points} pts
+
+ );
+ })}
Team Championship Standings
+ {error &&
{error}
}
+
- {!teamStandings && new Array(10).fill("").map((_, index) =>
)}
+ {!teamStandings &&
+ !error &&
+ new Array(10).fill("").map((_, index) =>
)}
{teamStandings &&
- Object.values(teamStandings)
- .sort((a, b) => a.PredictedPosition - b.PredictedPosition)
- .map((team) => (
-
(
+
+
{team.position}
+
+
{
+ // Fallback if image not found
+ (e.currentTarget as HTMLImageElement).style.visibility = "hidden";
}}
- key={team.TeamName}
- >
-
- {team.PredictedPosition}
-
-
-
- {team.TeamName}
+ />
- {team.PredictedPoints}
+ {team.Constructor.name}
-
-
- ))}
+
{team.points} pts
+
+ ))}
);
}
-const SkeletonItem = () => {
+const DriverSkeletonItem = () => {
return (
+ );
+};
+
+const TeamSkeletonItem = () => {
+ return (
+
);
};
diff --git a/dashboard/src/app/dashboard/weather/map.tsx b/dashboard/src/app/dashboard/weather/map.tsx
index 9bf9f015..e27eb4fb 100644
--- a/dashboard/src/app/dashboard/weather/map.tsx
+++ b/dashboard/src/app/dashboard/weather/map.tsx
@@ -27,9 +27,7 @@ export function WeatherMap() {
const [frames, setFrames] = useState<{ id: number; time: number }[]>([]);
const currentFrameRef = useRef(0);
- const handleMapLoad = async () => {
- if (!mapRef.current) return;
-
+ const handleMapLoad = async (map: Map) => {
const rainviewer = await getRainviewer();
if (!rainviewer) return;
@@ -38,14 +36,21 @@ export function WeatherMap() {
for (let i = 0; i < pathFrames.length; i++) {
const frame = pathFrames[i];
- mapRef.current.addLayer({
+ if (map.getLayer(`rainviewer-frame-${i}`)) {
+ continue;
+ }
+
+ map.addLayer({
id: `rainviewer-frame-${i}`,
type: "raster",
source: {
type: "raster",
- tiles: [`${rainviewer.host}/${frame.path}/256/{z}/{x}/{y}/8/1_0.webp`],
+ tiles: [`${rainviewer.host}${frame.path}/256/{z}/{x}/{y}/8/1_0.webp`],
tileSize: 256,
},
+ layout: {
+ visibility: i <= 1 ? "visible" : "none",
+ },
paint: {
"raster-opacity": 0,
"raster-fade-duration": 200,
@@ -58,6 +63,9 @@ export function WeatherMap() {
};
useEffect(() => {
+ let isMounted = true;
+ let mapInstance: Map | null = null;
+
(async () => {
if (!mapContainerRef.current) return;
@@ -69,34 +77,58 @@ export function WeatherMap() {
]);
const coords = coordsC || coordsA;
+ if (!isMounted) return;
const libMap = new maplibregl.Map({
container: mapContainerRef.current,
style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
center: coords ? [coords.lon, coords.lat] : undefined,
- zoom: 10,
+ zoom: 6,
canvasContextAttributes: {
antialias: true,
},
});
libMap.on("load", async () => {
+ if (!isMounted) return;
setLoading(false);
if (coords) {
new Marker().setLngLat([coords.lon, coords.lat]).addTo(libMap);
}
- await handleMapLoad();
+ await handleMapLoad(libMap);
});
+ mapInstance = libMap;
mapRef.current = libMap;
})();
+
+ return () => {
+ isMounted = false;
+ if (mapInstance) {
+ mapInstance.remove();
+ }
+ };
}, [meeting]);
const setFrame = (idx: number) => {
- mapRef.current?.setPaintProperty(`rainviewer-frame-${currentFrameRef.current}`, "raster-opacity", 0);
- mapRef.current?.setPaintProperty(`rainviewer-frame-${idx}`, "raster-opacity", 0.8);
+ if (mapRef.current) {
+ mapRef.current.setLayoutProperty(`rainviewer-frame-${idx}`, "visibility", "visible");
+
+ if (idx + 1 < frames.length) {
+ mapRef.current.setLayoutProperty(`rainviewer-frame-${idx + 1}`, "visibility", "visible");
+ }
+
+ mapRef.current.setPaintProperty(`rainviewer-frame-${currentFrameRef.current}`, "raster-opacity", 0);
+ mapRef.current.setPaintProperty(`rainviewer-frame-${idx}`, "raster-opacity", 0.8);
+
+ if (currentFrameRef.current !== idx && currentFrameRef.current !== idx + 1) {
+ // Optional: hide old frames if needed, but keeping them visible (with 0 opacity)
+ // allows them to stay cached in Mapbox's render tree without re-requesting if panned.
+ }
+ }
+
currentFrameRef.current = idx;
};
diff --git a/dashboard/src/components/PinModal.tsx b/dashboard/src/components/PinModal.tsx
new file mode 100644
index 00000000..76aaac0d
--- /dev/null
+++ b/dashboard/src/components/PinModal.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { useState, useTransition, type FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'motion/react';
+
+import { verifyPin } from '@/app/actions/pin';
+
+export default function PinModal() {
+ const router = useRouter();
+ const [pin, setPin] = useState('');
+ const [error, setError] = useState(false);
+ const [isPending, startTransition] = useTransition();
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ setError(false);
+
+ startTransition(async () => {
+ const ok = await verifyPin(pin);
+ if (ok) {
+ router.refresh();
+ } else {
+ setError(true);
+ setPin('');
+ }
+ });
+ };
+
+ return (
+
+
+
+
+
+
Dashboard Locked
+
Enter PIN to access the dashboard
+
+
- > {
client
.stream
@@ -193,32 +290,96 @@ pub fn listen(client: SignalrClient) -> impl Stream
- > {
trace!("message received");
match message {
- Ok(message) => match message {
- Message::Text(txt) => serde_json::from_str::(txt.as_str()).ok(),
- _ => None,
- },
+ Ok(Message::Text(txt)) => {
+ let mut all_updates = Vec::new();
+
+ for part in txt.split(RECORD_SEPARATOR) {
+ let part = part.trim();
+ if part.is_empty() {
+ continue;
+ }
+
+ let parsed: SignalRMessage = match serde_json::from_str(part) {
+ Ok(m) => m,
+ Err(_) => continue,
+ };
+
+ match parsed.msg_type {
+ MSG_INVOCATION => {
+ // Feed updates come as invocations with target "feed"
+ let target = parsed.target.as_deref().unwrap_or("");
+ if target != "feed" {
+ trace!(target, "ignoring non-feed invocation");
+ continue;
+ }
+
+ // Arguments format: [topic, data, timestamp]
+ // OR the arguments may be a single list: [[topic, data, timestamp]]
+ if let Some(args) = parsed.arguments {
+ if args.len() == 3 {
+ // Direct format: arguments = [topic, data, timestamp]
+ let topic = args[0].as_str().unwrap_or("").to_string();
+ let data = args[1].clone();
+ let timestamp = args[2].as_str().unwrap_or("").to_string();
+ if !topic.is_empty() {
+ all_updates.push(UpdateArgs {
+ topic,
+ data,
+ timestamp,
+ });
+ }
+ } else if args.len() == 1 {
+ // Wrapped format: arguments = [[topic, data, timestamp]]
+ if let Some(inner) = args[0].as_array() {
+ if inner.len() == 3 {
+ let topic = inner[0].as_str().unwrap_or("").to_string();
+ let data = inner[1].clone();
+ let timestamp = inner[2].as_str().unwrap_or("").to_string();
+ if !topic.is_empty() {
+ all_updates.push(UpdateArgs {
+ topic,
+ data,
+ timestamp,
+ });
+ }
+ }
+ }
+ }
+ }
+ }
+ MSG_PING => {
+ trace!("ping received");
+ }
+ MSG_CLOSE => {
+ if let Some(err) = parsed.error {
+ error!("server closed connection: {}", err);
+ } else {
+ info!("server closed connection gracefully");
+ }
+ }
+ _ => {
+ trace!(msg_type = parsed.msg_type, "ignoring message");
+ }
+ }
+ }
+
+ if all_updates.is_empty() {
+ None
+ } else {
+ Some(all_updates)
+ }
+ }
+ Ok(_) => None,
Err(err) => {
error!(?err, "ws error");
None
}
}
})
- .filter_map(|update| {
- let mut updates = Vec::new();
-
- for args in update.m {
- let (topic, data, timestamp) = args.a;
- updates.push(UpdateArgs {
- topic,
- data,
- timestamp,
- });
- }
-
- Some(updates)
- })
}
+// โโโโโโโโโโโโโโโโโโโโโโโโโโโโ Listen Raw โโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
/// Listen to raw WebSocket messages without parsing them.
/// Returns the raw text messages as-is, useful for saving to a file for replay.
pub fn listen_raw(client: SignalrClient) -> impl Stream
- {
diff --git a/simulator/.env.example b/simulator/.env.example
new file mode 100644
index 00000000..44842a5b
--- /dev/null
+++ b/simulator/.env.example
@@ -0,0 +1,10 @@
+# ==============================================================================
+# F1-DASH SIMULATOR ENVIRONMENT VARIABLES
+# ==============================================================================
+# INSTRUCTIONS: Copy or rename this file to `.env` in this directory
+# (or export these variables in your terminal) before starting the replay.
+# ==============================================================================
+
+# IP address and port where the F1 simulator will listen for websocket connections
+# when running the replay action.
+ADDRESS=127.0.0.1:8000
diff --git a/simulator/src/save.rs b/simulator/src/save.rs
index 17db0a36..82e916f7 100644
--- a/simulator/src/save.rs
+++ b/simulator/src/save.rs
@@ -8,7 +8,7 @@ use anyhow::Error;
use tokio_stream::StreamExt;
use tracing::{debug, info};
-const URL: &str = "livetiming.formula1.com/signalr";
+const URL: &str = "livetiming.formula1.com/signalrcore";
const HUB: &str = "Streaming";
const TOPICS: [&str; 17] = [