Feature: Map compass and north alignment

dash/src/app/(nav)/settings/page.tsx

@@ -56,6 +56,16 @@ export default function SettingsPage() {
 				<p className="text-zinc-500">Show Drivers Mini Sectors</p>
 			</div>
 
+			<div className="flex gap-2">
+				<Toggle enabled={settings.showCompass} setEnabled={(v) => settings.setShowCompass(v)} />
+				<p className="text-zinc-500">Show Compass on Track Map</p>
+			</div>
+
+			<div className="flex gap-2">
+				<Toggle enabled={settings.rotateTrackNorth} setEnabled={(v) => settings.setRotateTrackNorth(v)} />
+				<p className="text-zinc-500">Rotate the Track Map to Face North</p>
+			</div>
+
 			<div className="flex gap-2">
 				<Toggle enabled={settings.raceControlChime} setEnabled={(v) => settings.setRaceControlChime(v)} />
 				<p className="text-zinc-500">Play Race Control Chime</p>

dash/src/components/Map.tsx

@@ -33,6 +33,8 @@ type Corner = {
 
 export default function Map() {
 	const showCornerNumbers = useSettingsStore((state) => state.showCornerNumbers);
+	const showCompass = useSettingsStore((state) => state.showCompass);
+	const rotateTrackNorth = useSettingsStore((state) => state.rotateTrackNorth);
 	const favoriteDrivers = useSettingsStore((state) => state.favoriteDrivers);
 
 	const positions = usePositionStore((state) => state.positions);
@@ -49,6 +51,7 @@ export default function Map() {
 	const [sectors, setSectors] = useState<MapSector[]>([]);
 	const [corners, setCorners] = useState<Corner[]>([]);
 	const [rotation, setRotation] = useState<number>(0);
+	const [compass, setCompass] = useState<null | CompassProps>(null);
 
 	useEffect(() => {
 		(async () => {
@@ -58,7 +61,7 @@ export default function Map() {
 			const centerX = (Math.max(...mapJson.x) - Math.min(...mapJson.x)) / 2;
 			const centerY = (Math.max(...mapJson.y) - Math.min(...mapJson.y)) / 2;
 
-			const fixedRotation = mapJson.rotation + ROTATION_FIX;
+			const fixedRotation = rotateTrackNorth ? 90 : mapJson.rotation + ROTATION_FIX;
 
 			const sectors = createSectors(mapJson).map((s) => ({
 				...s,
@@ -86,17 +89,21 @@ export default function Map() {
 
 			const cMinX = Math.min(...pointsX) - SPACE;
 			const cMinY = Math.min(...pointsY) - SPACE;
-			const cWidthX = Math.max(...pointsX) - cMinX + SPACE * 2;
+			const cWidthX = Math.max(...pointsX) - cMinX + SPACE * 2 + 1000;
 			const cWidthY = Math.max(...pointsY) - cMinY + SPACE * 2;
 
+			const compassX = cMinX + cWidthX - 1500;
+			const compassY = cMinY + 1500;
+
+			setCompass({ x: compassX, y: compassY, angle: fixedRotation });
 			setCenter([centerX, centerY]);
 			setBounds([cMinX, cMinY, cWidthX, cWidthY]);
 			setSectors(sectors);
 			setPoints(rotatedPoints);
 			setRotation(fixedRotation);
 			setCorners(cornerPositions);
 		})();
-	}, [circuitKey]);
+	}, [circuitKey, rotateTrackNorth]);
 
 	const yellowSectors = useMemo(() => findYellowSectors(raceControlMessages), [raceControlMessages]);
 
@@ -159,6 +166,8 @@ export default function Map() {
 				);
 			})}
 
+			{showCompass && compass && <Compass x={compass.x} y={compass.y} angle={compass.angle} />}
+
 			{showCornerNumbers &&
 				corners.map((corner) => (
 					<CornerNumber
@@ -269,3 +278,38 @@ const CarDot = ({ pos, name, color, favoriteDriver, pit, hidden, rotation, cente
 		</g>
 	);
 };
+
+type CompassProps = {
+	x: number;
+	y: number;
+	angle: number;
+};
+
+const Compass = ({ x, y, angle }: CompassProps) => {
+	let northPos = rotate(0, 400, angle, 0, 0);
+	let sideDif = rotate(100, 0, angle, 0, 0);
+	return (
+		<>
+			<text
+				x={x + northPos.x * 1.5}
+				y={y + northPos.y * 1.5}
+				textAnchor={"middle"}
+				dominantBaseline={"middle"}
+				className={"fill-zinc-700"}
+				fontSize={300}
+				fontWeight={"semibold"}
+			>
+				N
+			</text>
+
+			<polygon
+				points={`${x + northPos.x},${y + northPos.y} ${x - sideDif.x},${y - sideDif.y} ${x + sideDif.x},${y + sideDif.y}`}
+				fill={"red"}
+			/>
+			<polygon
+				points={`${x - northPos.x},${y - northPos.y} ${x - sideDif.x},${y - sideDif.y} ${x + sideDif.x},${y + sideDif.y}`}
+				fill={"white"}
+			/>
+		</>
+	);
+};

dash/src/stores/useSettingsStore.ts

@@ -25,6 +25,12 @@ type SettingsStore = {
 	showMiniSectors: boolean;
 	setShowMiniSectors: (showMiniSectors: boolean) => void;
 
+	showCompass: boolean;
+	setShowCompass: (showCompass: boolean) => void;
+
+	rotateTrackNorth: boolean;
+	setRotateTrackNorth: (rotateTrackNorth: boolean) => void;
+
 	favoriteDrivers: string[];
 	setFavoriteDrivers: (favoriteDrivers: string[]) => void;
 	removeFavoriteDriver: (driver: string) => void;
@@ -61,6 +67,12 @@ export const useSettingsStore = create(
 				showMiniSectors: true,
 				setShowMiniSectors: (showMiniSectors: boolean) => set({ showMiniSectors }),
 
+				showCompass: false,
+				setShowCompass: (showCompass: boolean) => set({ showCompass }),
+
+				rotateTrackNorth: false,
+				setRotateTrackNorth: (rotateTrackNorth: boolean) => set({ rotateTrackNorth }),
+
 				favoriteDrivers: [],
 				setFavoriteDrivers: (favoriteDrivers: string[]) => set({ favoriteDrivers }),
 				removeFavoriteDriver: (driver: string) =>