133 lines
3.0 KiB
TypeScript
133 lines
3.0 KiB
TypeScript
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",
|
|
paddingTop: "10px",
|
|
paddingLeft: "2px",
|
|
paddingRight: "2px",
|
|
overflowX: "hidden",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
{lines.map((l, i) => {
|
|
return <DisplayLine key={`line-${i}`} {...l} />;
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|