From 25874e972ad95d55225c1f7f144318a257facbb0 Mon Sep 17 00:00:00 2001 From: sim Date: Thu, 27 Mar 2025 15:59:53 -0600 Subject: [PATCH 01/17] added cricel --- .../components/molecules/MapMolecules/Map.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index e38dcc10..5e58b44d 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -166,6 +166,32 @@ export default function Map({ [setDataPoints], ); + const geojson: FeatureCollection = { + features: [ + { + geometry: { + coordinates: [lapLocation.long, lapLocation.lat], + type: "Point", + }, + properties: { title: "Finish Line !!!" }, + type: "Feature", + }, + ], + type: "FeatureCollection", + }; + + const layerStyle: LayerProps = { + id: "finish-line", + paint: { + "circle-color": "#B94A6C", + "circle-opacity": 0.8, + "circle-radius": 20, + "circle-stroke-color": "#9C0534", + "circle-stroke-width": 2, + }, + type: "circle", + }; + return (
+ + + + ; {dataPoints.map((packetMarker, index) => ( Date: Thu, 27 Mar 2025 16:41:56 -0600 Subject: [PATCH 02/17] fixed flags --- .../components/molecules/MapMolecules/Map.tsx | 36 ++----------------- .../molecules/MapMolecules/PacketMarker.tsx | 36 ++++++++++++++++++- 2 files changed, 37 insertions(+), 35 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 5e58b44d..9b24080f 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -17,7 +17,6 @@ import ReactMapGL, { import HeliosModel from "@/assets/HeliosBirdseye.png"; import { useAppState } from "@/contexts/AppStateContext"; -import SportsScoreIcon from "@mui/icons-material/SportsScore"; import { type Coords, ITelemetryData, @@ -166,32 +165,6 @@ export default function Map({ [setDataPoints], ); - const geojson: FeatureCollection = { - features: [ - { - geometry: { - coordinates: [lapLocation.long, lapLocation.lat], - type: "Point", - }, - properties: { title: "Finish Line !!!" }, - type: "Feature", - }, - ], - type: "FeatureCollection", - }; - - const layerStyle: LayerProps = { - id: "finish-line", - paint: { - "circle-color": "#B94A6C", - "circle-opacity": 0.8, - "circle-radius": 20, - "circle-stroke-color": "#9C0534", - "circle-stroke-width": 2, - }, - type: "circle", - }; - return (
- - - - - - ; + > + {dataPoints.map((packetMarker, index) => ( {open && {data.TimeStamp}} @@ -25,6 +56,9 @@ export default function PacketMarker(props: { onMouseLeave={() => onMouseLeaveDataPoint(index)} /> + + + ); } From b5a8177d148db1f3c679b4e3f71ebb24f333138b Mon Sep 17 00:00:00 2001 From: sim Date: Sat, 29 Mar 2025 13:18:13 -0600 Subject: [PATCH 03/17] dots instead of flags --- .../components/molecules/MapMolecules/Map.tsx | 51 +++++++++++++++---- .../molecules/MapMolecules/PacketMarker.tsx | 46 +++-------------- .../client/src/contexts/AppStateContext.tsx | 2 +- .../LapController/LapController.ts | 4 +- 4 files changed, 52 insertions(+), 51 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 9b24080f..5428fd24 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -17,6 +17,7 @@ import ReactMapGL, { import HeliosModel from "@/assets/HeliosBirdseye.png"; import { useAppState } from "@/contexts/AppStateContext"; +import SportsScoreIcon from "@mui/icons-material/SportsScore"; import { type Coords, ITelemetryData, @@ -165,6 +166,32 @@ export default function Map({ [setDataPoints], ); + const geojson: FeatureCollection = { + features: [ + { + geometry: { + coordinates: [lapLocation.long, lapLocation.lat], + type: "Point", + }, + properties: { title: "Finish Line" }, + type: "Feature", + }, + ], + type: "FeatureCollection", + }; + + const layerStyle: LayerProps = { + id: "finish-line", + paint: { + "circle-color": "#B94A6C", + "circle-opacity": 0.8, + "circle-radius": 20, + "circle-stroke-color": "#9C0534", + "circle-stroke-width": 2, + }, + type: "circle", + }; + return (
- + + : darkMode + ? "white" + : "black", + }} + /> + + + + {dataPoints.map((packetMarker, index) => ( {open && {data.TimeStamp}} - - + onMouseEnterDataPoint(index)} onMouseLeave={() => onMouseLeaveDataPoint(index)} /> - - - ); } diff --git a/packages/client/src/contexts/AppStateContext.tsx b/packages/client/src/contexts/AppStateContext.tsx index 4b531115..475b2f9a 100644 --- a/packages/client/src/contexts/AppStateContext.tsx +++ b/packages/client/src/contexts/AppStateContext.tsx @@ -58,7 +58,7 @@ export function AppStateContextProvider({ children }: Props) { displayLoading: true, error: false, favourites: [], - lapCoords: { lat: 51.081021, long: -114.136084 }, + lapCoords: { lat: 37.004657904, long: -86.363013541 }, // random point from raceTrackGeoJSON_GRAND_FULL_COURSE loading: true, playbackSwitch: false, radioConnected: false, diff --git a/packages/server/src/controllers/LapController/LapController.ts b/packages/server/src/controllers/LapController/LapController.ts index 58c1c0bf..ff72e037 100644 --- a/packages/server/src/controllers/LapController/LapController.ts +++ b/packages/server/src/controllers/LapController/LapController.ts @@ -19,8 +19,8 @@ export class LapController implements LapControllerType { public previouslyInFinishLineProximity: boolean = false; public lapNumber: number = 0; public finishLineLocation: Coords = { - lat: 51.081021, - long: -114.136084, + lat: 37.004657904, + long: -86.363013541, // coords from grand race track }; backendController: BackendController; From 174864809ab1776007aab7cc4944147a072655c4 Mon Sep 17 00:00:00 2001 From: sim Date: Thu, 3 Apr 2025 15:11:52 -0600 Subject: [PATCH 04/17] make nicer --- .../src/components/molecules/MapMolecules/Map.tsx | 15 ++++++++++----- .../components/molecules/MapMolecules/MapSetup.ts | 6 ------ .../molecules/MapMolecules/PacketMarker.tsx | 6 +++--- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 5428fd24..509d05d4 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -113,7 +113,6 @@ export default function Map({ animateCarMarker(); return () => cancelAnimationFrame(animationFrameId); }, [carLocation]); - useEffect(() => { const coordinates: Coords[] = [carLocation, carLocation, lapLocation]; if (!mapRef.current) return; @@ -186,6 +185,7 @@ export default function Map({ "circle-color": "#B94A6C", "circle-opacity": 0.8, "circle-radius": 20, + "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, }, @@ -213,7 +213,9 @@ export default function Map({ if (!mapRef.current) return; fitBounds(mapRef.current, carLocation, lapLocation); }} - onMove={(evt) => setViewState(evt.viewState)} + onMove={(evt) => { + setViewState(evt.viewState); + }} ref={(instance) => { if (instance) { mapRef.current = instance; @@ -256,9 +258,11 @@ export default function Map({ width={20} /> - + - {dataPoints.map((packetMarker, index) => ( ))} + {TRACK_LIST.map(({ layerProps, sourceProps }, index) => { if (!viewTracks[index]) return null; return ( diff --git a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts index f9cd2c0d..bb255025 100644 --- a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts +++ b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts @@ -694,12 +694,6 @@ const GRAND_FULL_COURSE_GEO_JSON = { properties: {}, type: "Feature", }, - { - geometry: { coordinates: [-86.363013541, 37.004657904], type: "Point" }, - id: "sm0ccceba4", - properties: {}, - type: "Feature", - }, { geometry: { coordinates: [-86.36270777, 37.004837829], type: "Point" }, id: "sm0c2176b8", diff --git a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx b/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx index 1bef1c3f..329387a2 100644 --- a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx +++ b/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx @@ -1,7 +1,7 @@ import { JSX } from "react"; import { Marker, Popup } from "react-map-gl"; -import PanoramaFishEyeIcon from "@mui/icons-material/PanoramaFishEye"; +import CircleIcon from "@mui/icons-material/Circle"; import type { PacketMarkerData } from "./Map"; @@ -23,10 +23,10 @@ export default function PacketMarker(props: { latitude={packetMarker.markerCoords.latitude} longitude={packetMarker.markerCoords.longitude} > - onMouseEnterDataPoint(index)} onMouseLeave={() => onMouseLeaveDataPoint(index)} + sx={{ fontSize: "8px" }} /> From 9342b69649457675290df32828fd333db7303293 Mon Sep 17 00:00:00 2001 From: sim Date: Thu, 3 Apr 2025 16:51:04 -0600 Subject: [PATCH 05/17] circle is smaller --- packages/client/src/components/molecules/MapMolecules/Map.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 509d05d4..c08f7bed 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -184,7 +184,7 @@ export default function Map({ paint: { "circle-color": "#B94A6C", "circle-opacity": 0.8, - "circle-radius": 20, + "circle-radius": 10, "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, From f7f16fbff45da36582bc92e5d2a9ead011d9f0bd Mon Sep 17 00:00:00 2001 From: sim Date: Sat, 17 May 2025 14:02:23 -0400 Subject: [PATCH 06/17] add radius on fullscreen and zoom everything in --- .../components/molecules/MapMolecules/Map.tsx | 52 ++++++++++++++----- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index c08f7bed..1721ee5b 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -72,6 +72,7 @@ export default function Map({ const [mapStates, setMapStates] = useState({ centered: true, currentCarLocation: carLocation, + isFullscreen: false, satelliteMode: false, }); const [popupOpen, setPopupOpen] = useState(true); @@ -89,7 +90,27 @@ export default function Map({ } useEffect(() => { - const time = 1 / 60; // run at 60fps + const handleFullscreenChange = () => { + const isFullscreen = document.fullscreenElement !== null; + setMapStates((prev) => ({ ...prev, isFullscreen })); + }; + + document.addEventListener("fullscreenchange", handleFullscreenChange); + + return () => { + document.removeEventListener("fullscreenchange", handleFullscreenChange); + }; + }, []); + + useEffect(() => { + setViewState((prev) => ({ + ...prev, + zoom: mapStates.isFullscreen ? 16 : 14, + })); + }, [mapStates.isFullscreen]); + + useEffect(() => { + const time = mapStates.isFullscreen ? 1 : 1 / 60; let animationFrameId: number; const animateCarMarker = () => { setMapStates((prevMapStates) => { @@ -112,7 +133,7 @@ export default function Map({ }; animateCarMarker(); return () => cancelAnimationFrame(animationFrameId); - }, [carLocation]); + }, [carLocation, mapStates.isFullscreen]); useEffect(() => { const coordinates: Coords[] = [carLocation, carLocation, lapLocation]; if (!mapRef.current) return; @@ -132,10 +153,10 @@ export default function Map({ curve: 1, // Adjust the curve of the animation easing: (t) => t, // Easing function for the animation speed: speedFactor * dist, - zoom: 16, + zoom: mapStates.isFullscreen ? 16 : 14, }); } - }, [carLocation, lapLocation, mapStates.centered]); + }, [carLocation, lapLocation, mapStates.centered, mapStates.isFullscreen]); const toggleMapStyle = useCallback(() => { setMapStates((prev) => ({ ...prev, satelliteMode: !prev.satelliteMode })); @@ -184,7 +205,7 @@ export default function Map({ paint: { "circle-color": "#B94A6C", "circle-opacity": 0.8, - "circle-radius": 10, + "circle-radius": 30, "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, @@ -193,7 +214,7 @@ export default function Map({ }; return ( -
+
map-pin setPopupOpen(true)} onMouseLeave={() => setPopupOpen(false)} src={HeliosModel} style={{ transform: `rotate(${calculateBearing(mapStates.currentCarLocation, carLocation)}deg)`, }} - width={20} + width={mapStates.isFullscreen ? 40 : 20} /> - - - + {mapStates.isFullscreen && ( + + + + )} + {dataPoints.map((packetMarker, index) => ( Date: Sat, 17 May 2025 17:04:10 -0400 Subject: [PATCH 07/17] no more packet markers and fullscreen bigger for radius accuracy --- .../components/molecules/MapMolecules/Map.tsx | 62 +- .../molecules/MapMolecules/MapSetup.ts | 583 ++++-------------- .../molecules/MapMolecules/PacketMarker.tsx | 34 - 3 files changed, 149 insertions(+), 530 deletions(-) delete mode 100644 packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 1721ee5b..e1450cee 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -30,7 +30,6 @@ import { TRACK_LIST, mapCameraControls, } from "./MapSetup"; -import PacketMarker from "./PacketMarker"; const { distance, fitBounds, isOutsideBounds, lerp } = mapCameraControls; // @ts-expect-error:next-line @@ -102,13 +101,6 @@ export default function Map({ }; }, []); - useEffect(() => { - setViewState((prev) => ({ - ...prev, - zoom: mapStates.isFullscreen ? 16 : 14, - })); - }, [mapStates.isFullscreen]); - useEffect(() => { const time = mapStates.isFullscreen ? 1 : 1 / 60; let animationFrameId: number; @@ -148,12 +140,19 @@ export default function Map({ map.getCenter().lng, ); const speedFactor = 80; + + const maxSpeed = 5; + const minSpeed = 1.5; + const rawSpeed = speedFactor * dist; + const speed = Math.min(Math.max(rawSpeed, minSpeed), maxSpeed); map.flyTo({ + bearing: map.getBearing(), center: [carLocation.long, carLocation.lat], curve: 1, // Adjust the curve of the animation easing: (t) => t, // Easing function for the animation - speed: speedFactor * dist, - zoom: mapStates.isFullscreen ? 16 : 14, + pitch: map.getPitch(), + speed, + zoom: mapStates.isFullscreen ? 20 : 14, }); } }, [carLocation, lapLocation, mapStates.centered, mapStates.isFullscreen]); @@ -165,26 +164,6 @@ export default function Map({ const toggleCentred = useCallback(() => { setMapStates((prev) => ({ ...prev, centered: !prev.centered })); }, [setMapStates]); - const onMouseEnterDataPoint = useCallback( - (index: number) => { - setDataPoints((prevDataPoints) => - prevDataPoints.map((point, i) => - i === index ? { ...point, open: true } : point, - ), - ); - }, - [setDataPoints], - ); - const onMouseLeaveDataPoint = useCallback( - (index: number) => { - setDataPoints((prevDataPoints) => - prevDataPoints.map((point, i) => - i === index ? { ...point, open: false } : point, - ), - ); - }, - [setDataPoints], - ); const geojson: FeatureCollection = { features: [ @@ -205,7 +184,7 @@ export default function Map({ paint: { "circle-color": "#B94A6C", "circle-opacity": 0.8, - "circle-radius": 30, + "circle-radius": 150, "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, @@ -269,19 +248,19 @@ export default function Map({ > map-pin setPopupOpen(true)} onMouseLeave={() => setPopupOpen(false)} src={HeliosModel} style={{ transform: `rotate(${calculateBearing(mapStates.currentCarLocation, carLocation)}deg)`, }} - width={mapStates.isFullscreen ? 40 : 20} + width={mapStates.isFullscreen ? 60 : 20} /> {mapStates.isFullscreen && ( @@ -300,17 +279,6 @@ export default function Map({ )} - {dataPoints.map((packetMarker, index) => ( - - ))} - {TRACK_LIST.map(({ layerProps, sourceProps }, index) => { if (!viewTracks[index]) return null; return ( diff --git a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts index bb255025..25877a43 100644 --- a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts +++ b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts @@ -680,464 +680,149 @@ const GRAND_MAX_STRAIGHT_GEO_JSON = { id: "root", type: "FeatureCollection", }; +const GRAND_FULL_COURSE_ORIGINAL = [ + [-86.363608991, 37.003595476], + [-86.363525842, 37.004265921], + [-86.36270777, 37.004837829], + [-86.362694359, 37.005386171], + [-86.362514652, 37.005653915], + [-86.36207477, 37.00575887], + [-86.361728765, 37.005591798], + [-86.361498095, 37.005178401], + [-86.361648299, 37.004884951], + [-86.361849464, 37.00446084], + [-86.361669756, 37.004139542], + [-86.361197687, 37.0040303], + [-86.360677338, 37.004278771], + [-86.360570052, 37.004632199], + [-86.360500311, 37.004912795], + [-86.360390341, 37.005356181], + [-86.360344743, 37.005645345], + [-86.36043862, 37.005945216], + [-86.360819493, 37.006125139], + [-86.361404215, 37.006365035], + [-86.362300073, 37.006446429], + [-86.362911616, 37.006262223], + [-86.363415872, 37.00589381], + [-86.363786017, 37.005251225], + [-86.364220534, 37.00460435], + [-86.364719425, 37.004171671], + [-86.365277324, 37.003691863], + [-86.365845952, 37.003130656], + [-86.366473589, 37.002629422], + [-86.368034635, 37.001926832], + [-86.368689093, 37.001665502], + [-86.369606408, 37.001691207], + [-86.370078477, 37.001695491], + [-86.370443257, 37.001348477], + [-86.370743665, 37.001091428], + [-86.371446404, 37.000778684], + [-86.371945295, 37.000555907], + [-86.372192058, 37.000598749], + [-86.372256431, 37.000855799], + [-86.372127685, 37.001151406], + [-86.371811184, 37.001545547], + [-86.371280107, 37.001832583], + [-86.370362791, 37.00211105], + [-86.369971189, 37.002380947], + [-86.369702968, 37.002903603], + [-86.369381103, 37.003353427], + [-86.368785652, 37.00345196], + [-86.368383321, 37.003254895], + [-86.367879066, 37.002916455], + [-86.367546472, 37.002903603], + [-86.366940292, 37.00316493], + [-86.36650041, 37.00366616], + [-86.366505775, 37.003974608], + [-86.367691311, 37.004313043], + [-86.368447694, 37.004467266], + [-86.369000229, 37.004394438], + [-86.369456204, 37.004175956], + [-86.369922909, 37.003691865], + [-86.370829495, 37.002663696], + [-86.372068676, 37.001948254], + [-86.372841153, 37.001271363], + [-86.374214444, 36.999823309], + [-86.37438074, 36.999564113], + [-86.374321731, 36.999242794], + [-86.374192985, 36.999009302], + [-86.373747739, 36.998990023], + [-86.37298063, 36.999154968], + [-86.372288617, 36.999343474], + [-86.371164771, 36.999844729], + [-86.36983976, 37.000433808], + [-86.367600115, 37.001491996], + [-86.364697966, 37.002854337], + [-86.363914762, 37.003231334], + [-86.363608991, 37.003595476], // loop back to start +]; + +function interpolatePoints(a: number[], b: number[], steps: number) { + const points = []; + for (let i = 1; i < steps; i++) { + const t = i / steps; + if ( + a && + b && + a[0] !== undefined && + a[1] !== undefined && + b[0] !== undefined && + b[1] !== undefined + ) { + points.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]); + } + } + return points; +} + +const GRAND_FULL_COURSE_DENSE: unknown[] = []; +let idCounter = 0; +for (let i = 0; i < GRAND_FULL_COURSE_ORIGINAL.length - 1; i++) { + const a = GRAND_FULL_COURSE_ORIGINAL[i]; + const b = GRAND_FULL_COURSE_ORIGINAL[i + 1]; + GRAND_FULL_COURSE_DENSE.push({ + geometry: { coordinates: a, type: "Point" }, + id: `dense${idCounter++}`, + properties: {}, + type: "Feature", + }); + // Add 4 interpolated points between each pair + if (a && b) { + interpolatePoints(a, b, 5).forEach((coords) => { + GRAND_FULL_COURSE_DENSE.push({ + geometry: { coordinates: coords, type: "Point" }, + id: `dense${idCounter++}`, + properties: {}, + type: "Feature", + }); + }); + } +} + +// Add the last point +GRAND_FULL_COURSE_DENSE.push({ + geometry: { coordinates: GRAND_FULL_COURSE_ORIGINAL.at(-1)!, type: "Point" }, + id: `dense${idCounter++}`, + properties: {}, + type: "Feature", +}); + const GRAND_FULL_COURSE_GEO_JSON = { - features: [ - { - geometry: { coordinates: [-86.363608991, 37.003595476], type: "Point" }, - id: "sma85350e6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363525842, 37.004265921], type: "Point" }, - id: "sm7270301a", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36270777, 37.004837829], type: "Point" }, - id: "sm0c2176b8", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362694359, 37.005386171], type: "Point" }, - id: "sme0fd315c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362514652, 37.005653915], type: "Point" }, - id: "sm02710934", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36207477, 37.00575887], type: "Point" }, - id: "sm3d2e60bd", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361728765, 37.005591798], type: "Point" }, - id: "sm8ca40e45", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361498095, 37.005178401], type: "Point" }, - id: "sm7eabddd0", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361648299, 37.004884951], type: "Point" }, - id: "sm20b9ada9", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361849464, 37.00446084], type: "Point" }, - id: "sm8dc776ea", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361669756, 37.004139542], type: "Point" }, - id: "smf243ba54", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361197687, 37.0040303], type: "Point" }, - id: "sm8ec26ec5", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360677338, 37.004278771], type: "Point" }, - id: "sm271a0c2e", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360570052, 37.004632199], type: "Point" }, - id: "sm51becaf8", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360500311, 37.004912795], type: "Point" }, - id: "sm45a8ac64", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360390341, 37.005356181], type: "Point" }, - id: "sm04eb3d03", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360344743, 37.005645345], type: "Point" }, - id: "sm465d5bbd", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36043862, 37.005945216], type: "Point" }, - id: "sm42d287ef", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360819493, 37.006125139], type: "Point" }, - id: "sma0ecb2c4", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361404215, 37.006365035], type: "Point" }, - id: "sm74d18684", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362300073, 37.006446429], type: "Point" }, - id: "sm52a30982", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362911616, 37.006262223], type: "Point" }, - id: "smb17c50e8", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363415872, 37.00589381], type: "Point" }, - id: "smf0bb72ef", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363786017, 37.005251225], type: "Point" }, - id: "sm9ac9ffed", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.364220534, 37.00460435], type: "Point" }, - id: "smc9c2ad47", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.364719425, 37.004171671], type: "Point" }, - id: "sm94cca9a9", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.365277324, 37.003691863], type: "Point" }, - id: "sm641fc855", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.365845952, 37.003130656], type: "Point" }, - id: "sm046db624", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.366473589, 37.002629422], type: "Point" }, - id: "sm7a3043c1", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368034635, 37.001926832], type: "Point" }, - id: "sm54c39eea", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368689093, 37.001665502], type: "Point" }, - id: "sm6991b5aa", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369606408, 37.001691207], type: "Point" }, - id: "sm7ad11996", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370078477, 37.001695491], type: "Point" }, - id: "smedf14920", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370443257, 37.001348477], type: "Point" }, - id: "sm67431388", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370743665, 37.001091428], type: "Point" }, - id: "smaf2eee8b", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371446404, 37.000778684], type: "Point" }, - id: "sm9a5158f7", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371945295, 37.000555907], type: "Point" }, - id: "smb584eea4", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372192058, 37.000598749], type: "Point" }, - id: "sm427af187", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372256431, 37.000855799], type: "Point" }, - id: "smcd26cfbd", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372127685, 37.001151406], type: "Point" }, - id: "sma7945d34", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371811184, 37.001545547], type: "Point" }, - id: "sm1c38f1d4", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371280107, 37.001832583], type: "Point" }, - id: "sm4ea18f36", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370362791, 37.00211105], type: "Point" }, - id: "smdb30d270", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369971189, 37.002380947], type: "Point" }, - id: "sm9c482eac", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369702968, 37.002903603], type: "Point" }, - id: "sm2d668b8e", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369381103, 37.003353427], type: "Point" }, - id: "sm43ee265f", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368785652, 37.00345196], type: "Point" }, - id: "sm7eeb1071", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368383321, 37.003254895], type: "Point" }, - id: "sm0fe86ac3", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367879066, 37.002916455], type: "Point" }, - id: "sme40c2b8d", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367546472, 37.002903603], type: "Point" }, - id: "sm873274a6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.366940292, 37.00316493], type: "Point" }, - id: "sme62aa6c3", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36650041, 37.00366616], type: "Point" }, - id: "sm8ec06207", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.366505775, 37.003974608], type: "Point" }, - id: "smaf8b045c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367691311, 37.004313043], type: "Point" }, - id: "smb5843186", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368447694, 37.004467266], type: "Point" }, - id: "sma2e94d94", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369000229, 37.004394438], type: "Point" }, - id: "smb91bcaf6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369456204, 37.004175956], type: "Point" }, - id: "sm7f70cc04", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369922909, 37.003691865], type: "Point" }, - id: "smfc42c285", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370829495, 37.002663696], type: "Point" }, - id: "sma6c5c962", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372068676, 37.001948254], type: "Point" }, - id: "sm2f1dfe11", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372841153, 37.001271363], type: "Point" }, - id: "smfd15f9d6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.374214444, 36.999823309], type: "Point" }, - id: "smb46027b1", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.37438074, 36.999564113], type: "Point" }, - id: "sm0e9e66c5", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.374321731, 36.999242794], type: "Point" }, - id: "sm83364f72", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.374192985, 36.999009302], type: "Point" }, - id: "sm09cb4e0c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.373747739, 36.998990023], type: "Point" }, - id: "sme1d98c0c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.37298063, 36.999154968], type: "Point" }, - id: "sm496a41a7", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372288617, 36.999343474], type: "Point" }, - id: "sm197bb154", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371164771, 36.999844729], type: "Point" }, - id: "smbdcde48f", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36983976, 37.000433808], type: "Point" }, - id: "sm6ef753fb", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367600115, 37.001491996], type: "Point" }, - id: "sm20de3f1b", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.364697966, 37.002854337], type: "Point" }, - id: "smbbe4046c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363914762, 37.003231334], type: "Point" }, - id: "sm93f01508", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363608991, 37.003595476], type: "Point" }, - id: "sma85350e6", - properties: {}, - type: "Feature", - }, - ], + features: GRAND_FULL_COURSE_DENSE, id: "root", type: "FeatureCollection", }; const CORVETTE_RACE_LOOP = CORVETTE_RACE_LOOP_GEO_JSON.features.map( - (feature) => feature.geometry.coordinates, + (feature) => + (feature as { geometry: { coordinates: number[] } }).geometry.coordinates, ); const GRAND_MAX_STRAIGHT = GRAND_MAX_STRAIGHT_GEO_JSON.features.map( - (feature) => feature.geometry.coordinates, + (feature) => + (feature as { geometry: { coordinates: number[] } }).geometry.coordinates, ); const GRAND_FULL_COURSE = GRAND_FULL_COURSE_GEO_JSON.features.map( - (feature) => feature.geometry.coordinates, + (feature) => + (feature as { geometry: { coordinates: number[] } }).geometry.coordinates, ); const raceTrackGeoJSON = { features: [ diff --git a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx b/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx deleted file mode 100644 index 329387a2..00000000 --- a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { JSX } from "react"; -import { Marker, Popup } from "react-map-gl"; - -import CircleIcon from "@mui/icons-material/Circle"; - -import type { PacketMarkerData } from "./Map"; - -export default function PacketMarker(props: { - packetMarker: PacketMarkerData; - index: number; - setDataPoints: React.Dispatch>; - onMouseEnterDataPoint: (index: number) => void; - onMouseLeaveDataPoint: (index: number) => void; -}): JSX.Element { - const { index, onMouseEnterDataPoint, onMouseLeaveDataPoint, packetMarker } = - props; - const { data, markerCoords, open } = packetMarker; - - return ( - <> - {open && {data.TimeStamp}} - - onMouseEnterDataPoint(index)} - onMouseLeave={() => onMouseLeaveDataPoint(index)} - sx={{ fontSize: "8px" }} - /> - - - ); -} From 23826a2d9ad1c463e156a7b8095cbf3963b502b3 Mon Sep 17 00:00:00 2001 From: sim Date: Thu, 27 Mar 2025 15:59:53 -0600 Subject: [PATCH 08/17] added cricel --- .../components/molecules/MapMolecules/Map.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index e38dcc10..5e58b44d 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -166,6 +166,32 @@ export default function Map({ [setDataPoints], ); + const geojson: FeatureCollection = { + features: [ + { + geometry: { + coordinates: [lapLocation.long, lapLocation.lat], + type: "Point", + }, + properties: { title: "Finish Line !!!" }, + type: "Feature", + }, + ], + type: "FeatureCollection", + }; + + const layerStyle: LayerProps = { + id: "finish-line", + paint: { + "circle-color": "#B94A6C", + "circle-opacity": 0.8, + "circle-radius": 20, + "circle-stroke-color": "#9C0534", + "circle-stroke-width": 2, + }, + type: "circle", + }; + return (
+ + + + ; {dataPoints.map((packetMarker, index) => ( Date: Thu, 27 Mar 2025 16:41:56 -0600 Subject: [PATCH 09/17] fixed flags --- .../components/molecules/MapMolecules/Map.tsx | 36 ++----------------- .../molecules/MapMolecules/PacketMarker.tsx | 36 ++++++++++++++++++- 2 files changed, 37 insertions(+), 35 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 5e58b44d..9b24080f 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -17,7 +17,6 @@ import ReactMapGL, { import HeliosModel from "@/assets/HeliosBirdseye.png"; import { useAppState } from "@/contexts/AppStateContext"; -import SportsScoreIcon from "@mui/icons-material/SportsScore"; import { type Coords, ITelemetryData, @@ -166,32 +165,6 @@ export default function Map({ [setDataPoints], ); - const geojson: FeatureCollection = { - features: [ - { - geometry: { - coordinates: [lapLocation.long, lapLocation.lat], - type: "Point", - }, - properties: { title: "Finish Line !!!" }, - type: "Feature", - }, - ], - type: "FeatureCollection", - }; - - const layerStyle: LayerProps = { - id: "finish-line", - paint: { - "circle-color": "#B94A6C", - "circle-opacity": 0.8, - "circle-radius": 20, - "circle-stroke-color": "#9C0534", - "circle-stroke-width": 2, - }, - type: "circle", - }; - return (
- - - - - - ; + > + {dataPoints.map((packetMarker, index) => ( {open && {data.TimeStamp}} @@ -25,6 +56,9 @@ export default function PacketMarker(props: { onMouseLeave={() => onMouseLeaveDataPoint(index)} /> + + + ); } From d0ad774acfb4f19f803b0dbf85478ccddf6f711f Mon Sep 17 00:00:00 2001 From: sim Date: Sat, 29 Mar 2025 13:18:13 -0600 Subject: [PATCH 10/17] dots instead of flags --- .../components/molecules/MapMolecules/Map.tsx | 51 +++++++++++++++---- .../molecules/MapMolecules/PacketMarker.tsx | 46 +++-------------- .../client/src/contexts/AppStateContext.tsx | 2 +- .../LapController/LapController.ts | 4 +- 4 files changed, 52 insertions(+), 51 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 9b24080f..5428fd24 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -17,6 +17,7 @@ import ReactMapGL, { import HeliosModel from "@/assets/HeliosBirdseye.png"; import { useAppState } from "@/contexts/AppStateContext"; +import SportsScoreIcon from "@mui/icons-material/SportsScore"; import { type Coords, ITelemetryData, @@ -165,6 +166,32 @@ export default function Map({ [setDataPoints], ); + const geojson: FeatureCollection = { + features: [ + { + geometry: { + coordinates: [lapLocation.long, lapLocation.lat], + type: "Point", + }, + properties: { title: "Finish Line" }, + type: "Feature", + }, + ], + type: "FeatureCollection", + }; + + const layerStyle: LayerProps = { + id: "finish-line", + paint: { + "circle-color": "#B94A6C", + "circle-opacity": 0.8, + "circle-radius": 20, + "circle-stroke-color": "#9C0534", + "circle-stroke-width": 2, + }, + type: "circle", + }; + return (
- + + : darkMode + ? "white" + : "black", + }} + /> + + + + {dataPoints.map((packetMarker, index) => ( {open && {data.TimeStamp}} - - + onMouseEnterDataPoint(index)} onMouseLeave={() => onMouseLeaveDataPoint(index)} /> - - - ); } diff --git a/packages/client/src/contexts/AppStateContext.tsx b/packages/client/src/contexts/AppStateContext.tsx index 4b531115..475b2f9a 100644 --- a/packages/client/src/contexts/AppStateContext.tsx +++ b/packages/client/src/contexts/AppStateContext.tsx @@ -58,7 +58,7 @@ export function AppStateContextProvider({ children }: Props) { displayLoading: true, error: false, favourites: [], - lapCoords: { lat: 51.081021, long: -114.136084 }, + lapCoords: { lat: 37.004657904, long: -86.363013541 }, // random point from raceTrackGeoJSON_GRAND_FULL_COURSE loading: true, playbackSwitch: false, radioConnected: false, diff --git a/packages/server/src/controllers/LapController/LapController.ts b/packages/server/src/controllers/LapController/LapController.ts index 58c1c0bf..ff72e037 100644 --- a/packages/server/src/controllers/LapController/LapController.ts +++ b/packages/server/src/controllers/LapController/LapController.ts @@ -19,8 +19,8 @@ export class LapController implements LapControllerType { public previouslyInFinishLineProximity: boolean = false; public lapNumber: number = 0; public finishLineLocation: Coords = { - lat: 51.081021, - long: -114.136084, + lat: 37.004657904, + long: -86.363013541, // coords from grand race track }; backendController: BackendController; From 263dbfba651ff22b8ee37b8889d0b15c016b27e4 Mon Sep 17 00:00:00 2001 From: sim Date: Thu, 3 Apr 2025 15:11:52 -0600 Subject: [PATCH 11/17] make nicer --- .../src/components/molecules/MapMolecules/Map.tsx | 15 ++++++++++----- .../components/molecules/MapMolecules/MapSetup.ts | 6 ------ .../molecules/MapMolecules/PacketMarker.tsx | 6 +++--- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 5428fd24..509d05d4 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -113,7 +113,6 @@ export default function Map({ animateCarMarker(); return () => cancelAnimationFrame(animationFrameId); }, [carLocation]); - useEffect(() => { const coordinates: Coords[] = [carLocation, carLocation, lapLocation]; if (!mapRef.current) return; @@ -186,6 +185,7 @@ export default function Map({ "circle-color": "#B94A6C", "circle-opacity": 0.8, "circle-radius": 20, + "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, }, @@ -213,7 +213,9 @@ export default function Map({ if (!mapRef.current) return; fitBounds(mapRef.current, carLocation, lapLocation); }} - onMove={(evt) => setViewState(evt.viewState)} + onMove={(evt) => { + setViewState(evt.viewState); + }} ref={(instance) => { if (instance) { mapRef.current = instance; @@ -256,9 +258,11 @@ export default function Map({ width={20} /> - + - {dataPoints.map((packetMarker, index) => ( ))} + {TRACK_LIST.map(({ layerProps, sourceProps }, index) => { if (!viewTracks[index]) return null; return ( diff --git a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts index f9cd2c0d..bb255025 100644 --- a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts +++ b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts @@ -694,12 +694,6 @@ const GRAND_FULL_COURSE_GEO_JSON = { properties: {}, type: "Feature", }, - { - geometry: { coordinates: [-86.363013541, 37.004657904], type: "Point" }, - id: "sm0ccceba4", - properties: {}, - type: "Feature", - }, { geometry: { coordinates: [-86.36270777, 37.004837829], type: "Point" }, id: "sm0c2176b8", diff --git a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx b/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx index 1bef1c3f..329387a2 100644 --- a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx +++ b/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx @@ -1,7 +1,7 @@ import { JSX } from "react"; import { Marker, Popup } from "react-map-gl"; -import PanoramaFishEyeIcon from "@mui/icons-material/PanoramaFishEye"; +import CircleIcon from "@mui/icons-material/Circle"; import type { PacketMarkerData } from "./Map"; @@ -23,10 +23,10 @@ export default function PacketMarker(props: { latitude={packetMarker.markerCoords.latitude} longitude={packetMarker.markerCoords.longitude} > - onMouseEnterDataPoint(index)} onMouseLeave={() => onMouseLeaveDataPoint(index)} + sx={{ fontSize: "8px" }} /> From 220bc359eb48b17266c99aafccf1e946613deb37 Mon Sep 17 00:00:00 2001 From: sim Date: Thu, 3 Apr 2025 16:51:04 -0600 Subject: [PATCH 12/17] circle is smaller --- packages/client/src/components/molecules/MapMolecules/Map.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 509d05d4..c08f7bed 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -184,7 +184,7 @@ export default function Map({ paint: { "circle-color": "#B94A6C", "circle-opacity": 0.8, - "circle-radius": 20, + "circle-radius": 10, "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, From be2600be764fd4ef6682aec48d06b1e1331e504a Mon Sep 17 00:00:00 2001 From: sim Date: Sat, 17 May 2025 14:02:23 -0400 Subject: [PATCH 13/17] add radius on fullscreen and zoom everything in --- .../components/molecules/MapMolecules/Map.tsx | 52 ++++++++++++++----- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index c08f7bed..1721ee5b 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -72,6 +72,7 @@ export default function Map({ const [mapStates, setMapStates] = useState({ centered: true, currentCarLocation: carLocation, + isFullscreen: false, satelliteMode: false, }); const [popupOpen, setPopupOpen] = useState(true); @@ -89,7 +90,27 @@ export default function Map({ } useEffect(() => { - const time = 1 / 60; // run at 60fps + const handleFullscreenChange = () => { + const isFullscreen = document.fullscreenElement !== null; + setMapStates((prev) => ({ ...prev, isFullscreen })); + }; + + document.addEventListener("fullscreenchange", handleFullscreenChange); + + return () => { + document.removeEventListener("fullscreenchange", handleFullscreenChange); + }; + }, []); + + useEffect(() => { + setViewState((prev) => ({ + ...prev, + zoom: mapStates.isFullscreen ? 16 : 14, + })); + }, [mapStates.isFullscreen]); + + useEffect(() => { + const time = mapStates.isFullscreen ? 1 : 1 / 60; let animationFrameId: number; const animateCarMarker = () => { setMapStates((prevMapStates) => { @@ -112,7 +133,7 @@ export default function Map({ }; animateCarMarker(); return () => cancelAnimationFrame(animationFrameId); - }, [carLocation]); + }, [carLocation, mapStates.isFullscreen]); useEffect(() => { const coordinates: Coords[] = [carLocation, carLocation, lapLocation]; if (!mapRef.current) return; @@ -132,10 +153,10 @@ export default function Map({ curve: 1, // Adjust the curve of the animation easing: (t) => t, // Easing function for the animation speed: speedFactor * dist, - zoom: 16, + zoom: mapStates.isFullscreen ? 16 : 14, }); } - }, [carLocation, lapLocation, mapStates.centered]); + }, [carLocation, lapLocation, mapStates.centered, mapStates.isFullscreen]); const toggleMapStyle = useCallback(() => { setMapStates((prev) => ({ ...prev, satelliteMode: !prev.satelliteMode })); @@ -184,7 +205,7 @@ export default function Map({ paint: { "circle-color": "#B94A6C", "circle-opacity": 0.8, - "circle-radius": 10, + "circle-radius": 30, "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, @@ -193,7 +214,7 @@ export default function Map({ }; return ( -
+
map-pin setPopupOpen(true)} onMouseLeave={() => setPopupOpen(false)} src={HeliosModel} style={{ transform: `rotate(${calculateBearing(mapStates.currentCarLocation, carLocation)}deg)`, }} - width={20} + width={mapStates.isFullscreen ? 40 : 20} /> - - - + {mapStates.isFullscreen && ( + + + + )} + {dataPoints.map((packetMarker, index) => ( Date: Sat, 17 May 2025 17:04:10 -0400 Subject: [PATCH 14/17] no more packet markers and fullscreen bigger for radius accuracy --- .../components/molecules/MapMolecules/Map.tsx | 62 +- .../molecules/MapMolecules/MapSetup.ts | 583 ++++-------------- .../molecules/MapMolecules/PacketMarker.tsx | 34 - 3 files changed, 149 insertions(+), 530 deletions(-) delete mode 100644 packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 1721ee5b..e1450cee 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -30,7 +30,6 @@ import { TRACK_LIST, mapCameraControls, } from "./MapSetup"; -import PacketMarker from "./PacketMarker"; const { distance, fitBounds, isOutsideBounds, lerp } = mapCameraControls; // @ts-expect-error:next-line @@ -102,13 +101,6 @@ export default function Map({ }; }, []); - useEffect(() => { - setViewState((prev) => ({ - ...prev, - zoom: mapStates.isFullscreen ? 16 : 14, - })); - }, [mapStates.isFullscreen]); - useEffect(() => { const time = mapStates.isFullscreen ? 1 : 1 / 60; let animationFrameId: number; @@ -148,12 +140,19 @@ export default function Map({ map.getCenter().lng, ); const speedFactor = 80; + + const maxSpeed = 5; + const minSpeed = 1.5; + const rawSpeed = speedFactor * dist; + const speed = Math.min(Math.max(rawSpeed, minSpeed), maxSpeed); map.flyTo({ + bearing: map.getBearing(), center: [carLocation.long, carLocation.lat], curve: 1, // Adjust the curve of the animation easing: (t) => t, // Easing function for the animation - speed: speedFactor * dist, - zoom: mapStates.isFullscreen ? 16 : 14, + pitch: map.getPitch(), + speed, + zoom: mapStates.isFullscreen ? 20 : 14, }); } }, [carLocation, lapLocation, mapStates.centered, mapStates.isFullscreen]); @@ -165,26 +164,6 @@ export default function Map({ const toggleCentred = useCallback(() => { setMapStates((prev) => ({ ...prev, centered: !prev.centered })); }, [setMapStates]); - const onMouseEnterDataPoint = useCallback( - (index: number) => { - setDataPoints((prevDataPoints) => - prevDataPoints.map((point, i) => - i === index ? { ...point, open: true } : point, - ), - ); - }, - [setDataPoints], - ); - const onMouseLeaveDataPoint = useCallback( - (index: number) => { - setDataPoints((prevDataPoints) => - prevDataPoints.map((point, i) => - i === index ? { ...point, open: false } : point, - ), - ); - }, - [setDataPoints], - ); const geojson: FeatureCollection = { features: [ @@ -205,7 +184,7 @@ export default function Map({ paint: { "circle-color": "#B94A6C", "circle-opacity": 0.8, - "circle-radius": 30, + "circle-radius": 150, "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, @@ -269,19 +248,19 @@ export default function Map({ > map-pin setPopupOpen(true)} onMouseLeave={() => setPopupOpen(false)} src={HeliosModel} style={{ transform: `rotate(${calculateBearing(mapStates.currentCarLocation, carLocation)}deg)`, }} - width={mapStates.isFullscreen ? 40 : 20} + width={mapStates.isFullscreen ? 60 : 20} /> {mapStates.isFullscreen && ( @@ -300,17 +279,6 @@ export default function Map({ )} - {dataPoints.map((packetMarker, index) => ( - - ))} - {TRACK_LIST.map(({ layerProps, sourceProps }, index) => { if (!viewTracks[index]) return null; return ( diff --git a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts index bb255025..25877a43 100644 --- a/packages/client/src/components/molecules/MapMolecules/MapSetup.ts +++ b/packages/client/src/components/molecules/MapMolecules/MapSetup.ts @@ -680,464 +680,149 @@ const GRAND_MAX_STRAIGHT_GEO_JSON = { id: "root", type: "FeatureCollection", }; +const GRAND_FULL_COURSE_ORIGINAL = [ + [-86.363608991, 37.003595476], + [-86.363525842, 37.004265921], + [-86.36270777, 37.004837829], + [-86.362694359, 37.005386171], + [-86.362514652, 37.005653915], + [-86.36207477, 37.00575887], + [-86.361728765, 37.005591798], + [-86.361498095, 37.005178401], + [-86.361648299, 37.004884951], + [-86.361849464, 37.00446084], + [-86.361669756, 37.004139542], + [-86.361197687, 37.0040303], + [-86.360677338, 37.004278771], + [-86.360570052, 37.004632199], + [-86.360500311, 37.004912795], + [-86.360390341, 37.005356181], + [-86.360344743, 37.005645345], + [-86.36043862, 37.005945216], + [-86.360819493, 37.006125139], + [-86.361404215, 37.006365035], + [-86.362300073, 37.006446429], + [-86.362911616, 37.006262223], + [-86.363415872, 37.00589381], + [-86.363786017, 37.005251225], + [-86.364220534, 37.00460435], + [-86.364719425, 37.004171671], + [-86.365277324, 37.003691863], + [-86.365845952, 37.003130656], + [-86.366473589, 37.002629422], + [-86.368034635, 37.001926832], + [-86.368689093, 37.001665502], + [-86.369606408, 37.001691207], + [-86.370078477, 37.001695491], + [-86.370443257, 37.001348477], + [-86.370743665, 37.001091428], + [-86.371446404, 37.000778684], + [-86.371945295, 37.000555907], + [-86.372192058, 37.000598749], + [-86.372256431, 37.000855799], + [-86.372127685, 37.001151406], + [-86.371811184, 37.001545547], + [-86.371280107, 37.001832583], + [-86.370362791, 37.00211105], + [-86.369971189, 37.002380947], + [-86.369702968, 37.002903603], + [-86.369381103, 37.003353427], + [-86.368785652, 37.00345196], + [-86.368383321, 37.003254895], + [-86.367879066, 37.002916455], + [-86.367546472, 37.002903603], + [-86.366940292, 37.00316493], + [-86.36650041, 37.00366616], + [-86.366505775, 37.003974608], + [-86.367691311, 37.004313043], + [-86.368447694, 37.004467266], + [-86.369000229, 37.004394438], + [-86.369456204, 37.004175956], + [-86.369922909, 37.003691865], + [-86.370829495, 37.002663696], + [-86.372068676, 37.001948254], + [-86.372841153, 37.001271363], + [-86.374214444, 36.999823309], + [-86.37438074, 36.999564113], + [-86.374321731, 36.999242794], + [-86.374192985, 36.999009302], + [-86.373747739, 36.998990023], + [-86.37298063, 36.999154968], + [-86.372288617, 36.999343474], + [-86.371164771, 36.999844729], + [-86.36983976, 37.000433808], + [-86.367600115, 37.001491996], + [-86.364697966, 37.002854337], + [-86.363914762, 37.003231334], + [-86.363608991, 37.003595476], // loop back to start +]; + +function interpolatePoints(a: number[], b: number[], steps: number) { + const points = []; + for (let i = 1; i < steps; i++) { + const t = i / steps; + if ( + a && + b && + a[0] !== undefined && + a[1] !== undefined && + b[0] !== undefined && + b[1] !== undefined + ) { + points.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]); + } + } + return points; +} + +const GRAND_FULL_COURSE_DENSE: unknown[] = []; +let idCounter = 0; +for (let i = 0; i < GRAND_FULL_COURSE_ORIGINAL.length - 1; i++) { + const a = GRAND_FULL_COURSE_ORIGINAL[i]; + const b = GRAND_FULL_COURSE_ORIGINAL[i + 1]; + GRAND_FULL_COURSE_DENSE.push({ + geometry: { coordinates: a, type: "Point" }, + id: `dense${idCounter++}`, + properties: {}, + type: "Feature", + }); + // Add 4 interpolated points between each pair + if (a && b) { + interpolatePoints(a, b, 5).forEach((coords) => { + GRAND_FULL_COURSE_DENSE.push({ + geometry: { coordinates: coords, type: "Point" }, + id: `dense${idCounter++}`, + properties: {}, + type: "Feature", + }); + }); + } +} + +// Add the last point +GRAND_FULL_COURSE_DENSE.push({ + geometry: { coordinates: GRAND_FULL_COURSE_ORIGINAL.at(-1)!, type: "Point" }, + id: `dense${idCounter++}`, + properties: {}, + type: "Feature", +}); + const GRAND_FULL_COURSE_GEO_JSON = { - features: [ - { - geometry: { coordinates: [-86.363608991, 37.003595476], type: "Point" }, - id: "sma85350e6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363525842, 37.004265921], type: "Point" }, - id: "sm7270301a", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36270777, 37.004837829], type: "Point" }, - id: "sm0c2176b8", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362694359, 37.005386171], type: "Point" }, - id: "sme0fd315c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362514652, 37.005653915], type: "Point" }, - id: "sm02710934", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36207477, 37.00575887], type: "Point" }, - id: "sm3d2e60bd", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361728765, 37.005591798], type: "Point" }, - id: "sm8ca40e45", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361498095, 37.005178401], type: "Point" }, - id: "sm7eabddd0", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361648299, 37.004884951], type: "Point" }, - id: "sm20b9ada9", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361849464, 37.00446084], type: "Point" }, - id: "sm8dc776ea", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361669756, 37.004139542], type: "Point" }, - id: "smf243ba54", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361197687, 37.0040303], type: "Point" }, - id: "sm8ec26ec5", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360677338, 37.004278771], type: "Point" }, - id: "sm271a0c2e", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360570052, 37.004632199], type: "Point" }, - id: "sm51becaf8", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360500311, 37.004912795], type: "Point" }, - id: "sm45a8ac64", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360390341, 37.005356181], type: "Point" }, - id: "sm04eb3d03", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360344743, 37.005645345], type: "Point" }, - id: "sm465d5bbd", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36043862, 37.005945216], type: "Point" }, - id: "sm42d287ef", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.360819493, 37.006125139], type: "Point" }, - id: "sma0ecb2c4", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.361404215, 37.006365035], type: "Point" }, - id: "sm74d18684", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362300073, 37.006446429], type: "Point" }, - id: "sm52a30982", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.362911616, 37.006262223], type: "Point" }, - id: "smb17c50e8", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363415872, 37.00589381], type: "Point" }, - id: "smf0bb72ef", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363786017, 37.005251225], type: "Point" }, - id: "sm9ac9ffed", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.364220534, 37.00460435], type: "Point" }, - id: "smc9c2ad47", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.364719425, 37.004171671], type: "Point" }, - id: "sm94cca9a9", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.365277324, 37.003691863], type: "Point" }, - id: "sm641fc855", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.365845952, 37.003130656], type: "Point" }, - id: "sm046db624", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.366473589, 37.002629422], type: "Point" }, - id: "sm7a3043c1", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368034635, 37.001926832], type: "Point" }, - id: "sm54c39eea", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368689093, 37.001665502], type: "Point" }, - id: "sm6991b5aa", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369606408, 37.001691207], type: "Point" }, - id: "sm7ad11996", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370078477, 37.001695491], type: "Point" }, - id: "smedf14920", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370443257, 37.001348477], type: "Point" }, - id: "sm67431388", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370743665, 37.001091428], type: "Point" }, - id: "smaf2eee8b", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371446404, 37.000778684], type: "Point" }, - id: "sm9a5158f7", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371945295, 37.000555907], type: "Point" }, - id: "smb584eea4", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372192058, 37.000598749], type: "Point" }, - id: "sm427af187", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372256431, 37.000855799], type: "Point" }, - id: "smcd26cfbd", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372127685, 37.001151406], type: "Point" }, - id: "sma7945d34", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371811184, 37.001545547], type: "Point" }, - id: "sm1c38f1d4", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371280107, 37.001832583], type: "Point" }, - id: "sm4ea18f36", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370362791, 37.00211105], type: "Point" }, - id: "smdb30d270", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369971189, 37.002380947], type: "Point" }, - id: "sm9c482eac", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369702968, 37.002903603], type: "Point" }, - id: "sm2d668b8e", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369381103, 37.003353427], type: "Point" }, - id: "sm43ee265f", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368785652, 37.00345196], type: "Point" }, - id: "sm7eeb1071", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368383321, 37.003254895], type: "Point" }, - id: "sm0fe86ac3", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367879066, 37.002916455], type: "Point" }, - id: "sme40c2b8d", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367546472, 37.002903603], type: "Point" }, - id: "sm873274a6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.366940292, 37.00316493], type: "Point" }, - id: "sme62aa6c3", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36650041, 37.00366616], type: "Point" }, - id: "sm8ec06207", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.366505775, 37.003974608], type: "Point" }, - id: "smaf8b045c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367691311, 37.004313043], type: "Point" }, - id: "smb5843186", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.368447694, 37.004467266], type: "Point" }, - id: "sma2e94d94", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369000229, 37.004394438], type: "Point" }, - id: "smb91bcaf6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369456204, 37.004175956], type: "Point" }, - id: "sm7f70cc04", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.369922909, 37.003691865], type: "Point" }, - id: "smfc42c285", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.370829495, 37.002663696], type: "Point" }, - id: "sma6c5c962", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372068676, 37.001948254], type: "Point" }, - id: "sm2f1dfe11", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372841153, 37.001271363], type: "Point" }, - id: "smfd15f9d6", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.374214444, 36.999823309], type: "Point" }, - id: "smb46027b1", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.37438074, 36.999564113], type: "Point" }, - id: "sm0e9e66c5", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.374321731, 36.999242794], type: "Point" }, - id: "sm83364f72", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.374192985, 36.999009302], type: "Point" }, - id: "sm09cb4e0c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.373747739, 36.998990023], type: "Point" }, - id: "sme1d98c0c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.37298063, 36.999154968], type: "Point" }, - id: "sm496a41a7", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.372288617, 36.999343474], type: "Point" }, - id: "sm197bb154", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.371164771, 36.999844729], type: "Point" }, - id: "smbdcde48f", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.36983976, 37.000433808], type: "Point" }, - id: "sm6ef753fb", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.367600115, 37.001491996], type: "Point" }, - id: "sm20de3f1b", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.364697966, 37.002854337], type: "Point" }, - id: "smbbe4046c", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363914762, 37.003231334], type: "Point" }, - id: "sm93f01508", - properties: {}, - type: "Feature", - }, - { - geometry: { coordinates: [-86.363608991, 37.003595476], type: "Point" }, - id: "sma85350e6", - properties: {}, - type: "Feature", - }, - ], + features: GRAND_FULL_COURSE_DENSE, id: "root", type: "FeatureCollection", }; const CORVETTE_RACE_LOOP = CORVETTE_RACE_LOOP_GEO_JSON.features.map( - (feature) => feature.geometry.coordinates, + (feature) => + (feature as { geometry: { coordinates: number[] } }).geometry.coordinates, ); const GRAND_MAX_STRAIGHT = GRAND_MAX_STRAIGHT_GEO_JSON.features.map( - (feature) => feature.geometry.coordinates, + (feature) => + (feature as { geometry: { coordinates: number[] } }).geometry.coordinates, ); const GRAND_FULL_COURSE = GRAND_FULL_COURSE_GEO_JSON.features.map( - (feature) => feature.geometry.coordinates, + (feature) => + (feature as { geometry: { coordinates: number[] } }).geometry.coordinates, ); const raceTrackGeoJSON = { features: [ diff --git a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx b/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx deleted file mode 100644 index 329387a2..00000000 --- a/packages/client/src/components/molecules/MapMolecules/PacketMarker.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { JSX } from "react"; -import { Marker, Popup } from "react-map-gl"; - -import CircleIcon from "@mui/icons-material/Circle"; - -import type { PacketMarkerData } from "./Map"; - -export default function PacketMarker(props: { - packetMarker: PacketMarkerData; - index: number; - setDataPoints: React.Dispatch>; - onMouseEnterDataPoint: (index: number) => void; - onMouseLeaveDataPoint: (index: number) => void; -}): JSX.Element { - const { index, onMouseEnterDataPoint, onMouseLeaveDataPoint, packetMarker } = - props; - const { data, markerCoords, open } = packetMarker; - - return ( - <> - {open && {data.TimeStamp}} - - onMouseEnterDataPoint(index)} - onMouseLeave={() => onMouseLeaveDataPoint(index)} - sx={{ fontSize: "8px" }} - /> - - - ); -} From 1516ee8582f5e658af1166e4e85b65d5db778393 Mon Sep 17 00:00:00 2001 From: Justin Pham <113923596+justin-phxm@users.noreply.github.com> Date: Mon, 19 May 2025 21:28:41 -0600 Subject: [PATCH 15/17] fullscreen bearing fix? --- .../components/molecules/MapMolecules/Map.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index e1450cee..511f6efb 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -25,11 +25,7 @@ import { } from "@shared/helios-types"; import MapControls from "./MapControls"; -import { - Hydrated_Grand_Full_course, - TRACK_LIST, - mapCameraControls, -} from "./MapSetup"; +import { TRACK_LIST, mapCameraControls } from "./MapSetup"; const { distance, fitBounds, isOutsideBounds, lerp } = mapCameraControls; // @ts-expect-error:next-line @@ -74,11 +70,8 @@ export default function Map({ isFullscreen: false, satelliteMode: false, }); - const [popupOpen, setPopupOpen] = useState(true); + const [popupOpen, setPopupOpen] = useState(false); const [viewTracks, setViewTracks] = useState(TRACK_LIST.map(() => true)); - const [dataPoints, setDataPoints] = useState( - Hydrated_Grand_Full_course, - ); const [mapControlsAdded, setMapControlsAdded] = useState(false); const mapRef = useRef(undefined); @@ -102,7 +95,7 @@ export default function Map({ }, []); useEffect(() => { - const time = mapStates.isFullscreen ? 1 : 1 / 60; + const time = 1 / 60; let animationFrameId: number; const animateCarMarker = () => { setMapStates((prevMapStates) => { @@ -125,7 +118,7 @@ export default function Map({ }; animateCarMarker(); return () => cancelAnimationFrame(animationFrameId); - }, [carLocation, mapStates.isFullscreen]); + }, [carLocation]); useEffect(() => { const coordinates: Coords[] = [carLocation, carLocation, lapLocation]; if (!mapRef.current) return; @@ -152,7 +145,7 @@ export default function Map({ easing: (t) => t, // Easing function for the animation pitch: map.getPitch(), speed, - zoom: mapStates.isFullscreen ? 20 : 14, + zoom: mapStates.isFullscreen ? 16 : 14, }); } }, [carLocation, lapLocation, mapStates.centered, mapStates.isFullscreen]); From 0ce8e7cea8e8bcc4ade3fef354106bd9acb0af9a Mon Sep 17 00:00:00 2001 From: sim Date: Sat, 24 May 2025 13:10:39 -0400 Subject: [PATCH 16/17] fullscreen radius --- .../src/components/molecules/MapMolecules/Map.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/client/src/components/molecules/MapMolecules/Map.tsx b/packages/client/src/components/molecules/MapMolecules/Map.tsx index 511f6efb..83919465 100644 --- a/packages/client/src/components/molecules/MapMolecules/Map.tsx +++ b/packages/client/src/components/molecules/MapMolecules/Map.tsx @@ -145,7 +145,7 @@ export default function Map({ easing: (t) => t, // Easing function for the animation pitch: map.getPitch(), speed, - zoom: mapStates.isFullscreen ? 16 : 14, + zoom: mapStates.isFullscreen ? 20 : 14, }); } }, [carLocation, lapLocation, mapStates.centered, mapStates.isFullscreen]); @@ -177,8 +177,17 @@ export default function Map({ paint: { "circle-color": "#B94A6C", "circle-opacity": 0.8, - "circle-radius": 150, - + "circle-radius": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + 10, + 15, + 10, + 20, + 150, + ], "circle-stroke-color": "#9C0534", "circle-stroke-width": 2, }, From 08966c16aeec033d5bf9b3c8ab212880343702d8 Mon Sep 17 00:00:00 2001 From: burtonjong Date: Sat, 31 May 2025 11:49:20 -0600 Subject: [PATCH 17/17] add prod and dev flag --- .../controllers/BackendController/BackendController.ts | 8 ++++++-- .../server/src/controllers/LapController/LapController.ts | 4 ++-- packages/shared/src/prodFlag.ts | 2 ++ 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/server/src/controllers/BackendController/BackendController.ts b/packages/server/src/controllers/BackendController/BackendController.ts index abf834e5..cf366f4c 100644 --- a/packages/server/src/controllers/BackendController/BackendController.ts +++ b/packages/server/src/controllers/BackendController/BackendController.ts @@ -9,7 +9,7 @@ import { SolarMQTTClient } from "@/datasources/SolarMQTTClient/SolarMQTTClient"; import { options } from "@/datasources/SolarMQTTClient/SolarMQTTClient.types"; import { logger } from "@/index"; -import { ILapData, type ITelemetryData } from "@shared/helios-types"; +import { type ITelemetryData, devFlag } from "@shared/helios-types"; //getDriverInfo export class BackendController implements BackendControllerTypes { @@ -45,7 +45,11 @@ export class BackendController implements BackendControllerTypes { public async handlePacketReceive(message: ITelemetryData) { // Insert the packet into the database - this.dynamoDB.insertPacketData(message); + console.log(process.env.NODE_ENV); + if (!devFlag) { + this.dynamoDB.insertPacketData(message); + logger.info("Inserting packet data into DynamoDB"); + } // Broadcast the packet to the frontend this.socketIO.broadcastPacket(message); diff --git a/packages/server/src/controllers/LapController/LapController.ts b/packages/server/src/controllers/LapController/LapController.ts index ff72e037..2f88cd7e 100644 --- a/packages/server/src/controllers/LapController/LapController.ts +++ b/packages/server/src/controllers/LapController/LapController.ts @@ -4,7 +4,7 @@ import { type LapControllerType } from "@/controllers/LapController/LapControlle import { convertToDecimalDegrees, getDistance } from "@/utils/lapCalculations"; import { createLightweightApplicationLogger } from "@/utils/logger"; -import { calculateVehicleVelocity } from "@shared/helios-types"; +import { calculateVehicleVelocity, devFlag } from "@shared/helios-types"; import type { CoordInfoUpdate, CoordUpdateResponse, @@ -58,7 +58,7 @@ export class LapController implements LapControllerType { public async handleLapData(lapData: ILapData) { await this.backendController.socketIO.broadcastLapData(lapData); - await this.backendController.dynamoDB.insertLapData(lapData); + if (!devFlag) await this.backendController.dynamoDB.insertLapData(lapData); } public async handlePacket(packet: ITelemetryData) { diff --git a/packages/shared/src/prodFlag.ts b/packages/shared/src/prodFlag.ts index 0ca6433c..c05b3980 100644 --- a/packages/shared/src/prodFlag.ts +++ b/packages/shared/src/prodFlag.ts @@ -7,3 +7,5 @@ export const prodURL = process.env.NODE_ENV === "production" ? "https://aedes.calgarysolarcar.ca:3001" : "http://localhost:3001"; + +export const devFlag = process.env.NODE_ENV === "development" ? true : false;