added DME, fixed sync and bugs. Rewrote setDisplay logic

2025-05-19 22:23:15 -07:00
parent 46c58ae127
commit 61e7caf6c8
23 changed files with 776 additions and 242 deletions
--- a/apps/dispatch/app/pilot/_components/dme/Dme.tsx
+++ b/apps/dispatch/app/pilot/_components/dme/Dme.tsx
@@ -0,0 +1,130 @@
+import { CSSProperties } from "react";
+import sQuadImageNoReflections from "./Melder_NoReflections.png";
+import sQuadReflection from "./reflektion.png";
+import { useButtons } from "./useButtons";
+import { useSounds } from "./useSounds";
+import Image from "next/image";
+import { useDmeStore } from "_store/pilot/dmeStore";
+
+const DME_BUTTON_STYLES: CSSProperties = {
+	cursor: "pointer",
+	zIndex: "9999",
+	backgroundColor: "transparent",
+	border: "none",
+};
+
+export interface DisplayLineProps {
+	style?: CSSProperties;
+	textLeft?: string;
+	textMid?: string;
+	textRight?: string;
+}
+
+const DisplayLine = ({
+	style = {},
+	textLeft,
+	textMid,
+	textRight,
+}: DisplayLineProps) => {
+	const INNER_TEXT_PARTS: CSSProperties = {
+		fontFamily: "Melder",
+		flex: "1",
+		flexBasis: "auto",
+		overflowWrap: "break-word",
+	};
+
+	return (
+		<div
+			style={{
+				fontFamily: "Famirids",
+				display: "flex",
+				flexWrap: "wrap",
+				...style,
+			}}
+		>
+			<span style={INNER_TEXT_PARTS}>{textLeft}</span>
+			<span style={{ textAlign: "center", ...INNER_TEXT_PARTS }}>
+				{textMid}
+			</span>
+			<span style={{ textAlign: "end", ...INNER_TEXT_PARTS }}>{textRight}</span>
+		</div>
+	);
+};
+
+export const Dme = () => {
+	useSounds();
+	const { handleButton } = useButtons();
+	const lines = useDmeStore((state) => state.lines);
+
+	return (
+		<div
+			style={{
+				display: "grid",
+				aspectRatio: "1037 / 800",
+				color: "black",
+				height: "auto",
+				width: "auto",
+				maxHeight: "100%",
+				maxWidth: "100%",
+				overflow: "hidden",
+				gridTemplateColumns:
+					"25.84% 6.08% 10.99% 11.57% 11.28% 10.90% 18.71% 4.63%",
+				gridTemplateRows: "2.66% 9.3% 8.9% 7.2% 45.05% 27%",
+			}}
+		>
+			<Image
+				src={sQuadImageNoReflections}
+				alt="sQuadImage"
+				style={{
+					zIndex: 0,
+					height: "100%",
+					width: "100%",
+					gridArea: "1 / 1 / 10 / 10",
+				}}
+			/>
+			<button
+				onClick={handleButton("main")}
+				style={{ gridArea: "2 / 7 / 4 / 8", ...DME_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("menu")}
+				style={{ gridArea: "3 / 2 / 4 / 3", ...DME_BUTTON_STYLES }}
+			/>
+			{/* <button
+                    onClick={handleButton('left')}
+                    style={{ gridArea: '3 / 4 / 4 / 5', ...DME_BUTTON_STYLES }}
+                />
+                <button
+                    onClick={handleButton('right')}
+                    style={{ gridArea: '3 / 5 / 4 / 6', ...DME_BUTTON_STYLES }}
+                /> */}
+			<Image
+				src={sQuadReflection}
+				alt="sQuadImage"
+				style={{
+					zIndex: 1,
+					height: "100%",
+					width: "100%",
+					gridArea: "1 / 1 / 10 / 10",
+				}}
+			/>
+			<div
+				id="display"
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "space-between",
+					zIndex: "2",
+					gridArea: "5 / 2 / 6 / 6",
+					padding: "5px",
+					overflowX: "hidden",
+					overflowY: "auto",
+				}}
+			>
+				{lines.map((l, i) => {
+					return <DisplayLine key={`line-${i}`} {...l} />;
+				})}
+			</div>
+		</div>
+	);
+};