added mrt, dev

apps/dispatch/app/pilot/_components/mrt/Mrt.tsx

@@ -0,0 +1,183 @@
+import { CSSProperties } from "react";
+import MrtImage from "./MRT.png";
+import { useButtons } from "./useButtons";
+import { useSounds } from "./useSounds";
+import "./mrt.css";
+import Image from "next/image";
+import { useMrtStore } from "_store/pilot/MrtStore";
+
+const MRT_BUTTON_STYLES: CSSProperties = {
+	cursor: "pointer",
+	zIndex: "9999",
+	backgroundColor: "transparent",
+	border: "none",
+};
+const MRT_DISPLAYLINE_STYLES: CSSProperties = {
+	color: "white",
+	zIndex: 1,
+};
+
+export interface DisplayLineProps {
+	style?: CSSProperties;
+	textLeft?: string;
+	textMid?: string;
+	textRight?: string;
+	textSize: "1" | "2" | "3" | "4";
+}
+
+const DisplayLine = ({
+	style = {},
+	textLeft,
+	textMid,
+	textRight,
+	textSize,
+}: DisplayLineProps) => {
+	const INNER_TEXT_PARTS: CSSProperties = {
+		fontFamily: "Melder",
+		flex: "1",
+		flexBasis: "auto",
+		overflowWrap: "break-word",
+	};
+
+	return (
+		<div
+			className={`text-${textSize}`}
+			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 Mrt = () => {
+	useSounds();
+	const { handleButton } = useButtons();
+	const lines = useMrtStore((state) => state.lines);
+
+	return (
+		<div
+			id="mrt-container"
+			style={{
+				containerName: "mrtContainer",
+				display: "grid",
+				aspectRatio: "1466 / 760",
+				height: "auto",
+				width: "auto",
+				maxHeight: "100%",
+				maxWidth: "100%",
+				overflow: "hidden",
+				color: "white",
+				gridTemplateColumns:
+					"21.83% 4.43% 24.42% 18.08% 5.93% 1.98% 6.00% 1.69% 6.00% 9.35%",
+				gridTemplateRows:
+					"21.58% 11.87% 3.55% 5.00% 6.84% 0.53% 3.03% 11.84% 3.55% 11.84% 20.39%",
+			}}
+		>
+			<Image
+				src={MrtImage}
+				alt="MrtImage"
+				style={{
+					zIndex: 0,
+					height: "100%",
+					width: "100%",
+					gridArea: "1 / 1 / 13 / 13",
+				}}
+			/>
+			<button
+				onClick={handleButton("1")}
+				style={{ gridArea: "2 / 5 / 3 / 6", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("2")}
+				style={{ gridArea: "2 / 7 / 3 / 7", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("3")}
+				style={{ gridArea: "2 / 9 / 3 / 10", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("4")}
+				style={{ gridArea: "4 / 5 / 6 / 6", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("5")}
+				style={{ gridArea: "4 / 7 / 6 / 7", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("6")}
+				style={{ gridArea: "4 / 9 / 6 / 10", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("7")}
+				style={{ gridArea: "8 / 5 / 9 / 6", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("8")}
+				style={{ gridArea: "8 / 7 / 9 / 7", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("9")}
+				style={{ gridArea: "8 / 9 / 9 / 10", ...MRT_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("0")}
+				style={{ gridArea: "10 / 7 / 11 / 8", ...MRT_BUTTON_STYLES }}
+			/>
+
+			{lines[0] && (
+				<DisplayLine
+					{...lines[0]}
+					style={{
+						gridArea: "4 / 3 / 5 / 4",
+						marginLeft: "9px",
+						marginTop: "auto",
+						...MRT_DISPLAYLINE_STYLES,
+						...lines[0]?.style,
+					}}
+				/>
+			)}
+			{lines[1] && (
+				<DisplayLine
+					{...lines[1]}
+					style={{
+						gridArea: "5 / 3 / 7 / 4",
+						marginLeft: "3px",
+						marginTop: "auto",
+						...MRT_DISPLAYLINE_STYLES,
+						...lines[1].style,
+					}}
+				/>
+			)}
+			{lines[2] && (
+				<DisplayLine
+					{...lines[2]}
+					style={{
+						gridArea: "8 / 2 / 9 / 4",
+						...MRT_DISPLAYLINE_STYLES,
+						...lines[2]?.style,
+					}}
+				/>
+			)}
+			{lines[3] && (
+				<DisplayLine
+					{...lines[3]}
+					style={{
+						gridArea: "9 / 2 / 10 / 4",
+						marginRight: "10px",
+						...MRT_DISPLAYLINE_STYLES,
+						...lines[3]?.style,
+					}}
+				/>
+			)}
+		</div>
+	);
+};