Skip to content

Commit

Permalink
Merge pull request #1 from ssewell/main
Browse files Browse the repository at this point in the history 
Merge recent community changes into branch with adjustments
  • Loading branch information
@ssewell
ssewell authored Nov 3, 2024
2 parents 20bec8a + f18621a commit ec4827b
Show file tree
Hide file tree
Showing 90 changed files with 41,630 additions and 14,470 deletions.
36 changes: 29 additions & 7 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
{
"root": true,
"env": { "browser": true },
"extends": "@flybywiresim/eslint-config",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"plugins": ["@typescript-eslint"],
"parser": "@typescript-eslint/parser",
"ignorePatterns" : [
Expand All @@ -27,23 +31,41 @@
"parserOptions": { "sourceType": "module" }
},
{
"files": ["*.ts", "*.tsx"],
"files": ["*.js"],
"rules": {
"no-undef": "off"
"@typescript-eslint/no-var-requires": "off"
}
}
],
// overrides airbnb, use sparingly
"rules": {
"object-curly-newline": ["error", { "multiline": true }],
// Required for dependency injection
"no-useless-constructor": "off",
"no-empty-function": "off",

"@typescript-eslint/no-unused-vars": [
"error",
{
"varsIgnorePattern": "^_.+$",
"argsIgnorePattern": "^_.+$"
}
],

"prettier/prettier": [
"error",
{
"singleQuote": true,
"parser": "typescript",
"printWidth": 120
}
],

"@typescript-eslint/no-explicit-any": "off",

// Annoying shit
"linebreak-style": "off",
// "linebreak-style": ["error", "unix"],
"no-undef": "off",
"no-redeclare": "off",
"no-await-in-loop":"off",
"no-constant-condition":"off",
"strict": "off",
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/no-static-element-interactions": "off"
Expand Down
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,3 +152,4 @@ lerna-debug.log*

# Secrets
/secrets
tools/output/
4 changes: 2 additions & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"source.fixAll.eslint": "explicit"
},
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
Expand Down
253 changes: 120 additions & 133 deletions apps/mcdu/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,152 +15,139 @@ let soundParam = false;
let aspect43Param = false;
const params = window.location.href.split('?');
if (params.length > 1) {
params[1].split('&').forEach((p) => {
switch (p) {
case 'fullscreen':
fullscreenParam = true;
break;
case 'sound':
soundParam = true;
break;
case '43':
aspect43Param = true;
fullscreenParam = true;
break;
default:
console.error('wrong param provided');
}
});
params[1].split('&').forEach((p) => {
switch (p) {
case 'fullscreen':
fullscreenParam = true;
break;
case 'sound':
soundParam = true;
break;
case '43':
aspect43Param = true;
fullscreenParam = true;
break;
default:
console.error('wrong param provided');
}
});
}

const App = () => {
const [fullscreen, setFullscreen] = useState(fullscreenParam);
const [soundEnabled] = useState(soundParam);
const [dark, setDark] = useState(false);

// as http and websocket port are always the same we can read it from the URL
let socketUrl = `ws://${window.location.host}/interfaces/v1/mcdu`;
const [fullscreen, setFullscreen] = useState(fullscreenParam);
const [soundEnabled] = useState(soundParam);
const [dark, setDark] = useState(false);

// automaticaly upgrate to wss if the page is served over https
if (window.location.protocol === 'https:') {
socketUrl = socketUrl.replace('ws', 'wss');
}
// as http and websocket port are always the same we can read it from the URL
let socketUrl = `ws://${window.location.host}/interfaces/v1/mcdu`;

const [content, setContent] = useState(
{
lines: [
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
],
scratchpad: '',
title: '',
titleLeft: '',
page: '',
arrows: [false, false, false, false],
},
);
// automaticaly upgrate to wss if the page is served over https
if (window.location.protocol === 'https:') {
socketUrl = socketUrl.replace('ws', 'wss');
}

const {
sendMessage,
lastMessage,
readyState,
} = useWebSocket(socketUrl, {
shouldReconnect: () => true,
reconnectAttempts: Infinity,
reconnectInterval: 500,
});
const [content, setContent] = useState({
lines: [
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
['', '', ''],
],
scratchpad: '',
title: '',
titleLeft: '',
page: '',
arrows: [false, false, false, false],
});

const { onKeyboardInput } = new McduKeyboardEvents(sendMessage);
const rootPanelRef = useRef(null);
const { sendMessage, lastMessage, readyState } = useWebSocket(socketUrl, {
shouldReconnect: () => true,
reconnectAttempts: Infinity,
reconnectInterval: 500,
});

useEffect(() => {
rootPanelRef.current.focus();
}, []);
const { onKeyboardInput } = new McduKeyboardEvents(sendMessage);
const rootPanelRef = useRef(null);

useEffect(() => {
if (readyState === ReadyState.OPEN) {
sendMessage('requestUpdate');
}
}, [readyState]);
useEffect(() => {
rootPanelRef.current.focus();
}, []);

useEffect(() => {
if (lastMessage != null) {
const messageType = lastMessage.data.split(':')[0];
if (messageType === 'update') {
setContent(JSON.parse(lastMessage.data.substring(lastMessage.data.indexOf(':') + 1)).left);
}
}
}, [lastMessage]);
useEffect(() => {
if (readyState === ReadyState.OPEN) {
sendMessage('requestUpdate');
}
}, [readyState]);

let backgroundImageUrl = bg;
if (dark) {
backgroundImageUrl = darkBg;
useEffect(() => {
if (lastMessage != null) {
const messageType = lastMessage.data.split(':')[0];
if (messageType === 'update') {
setContent(JSON.parse(lastMessage.data.substring(lastMessage.data.indexOf(':') + 1)).left);
}
}
}, [lastMessage]);

let backgroundImageUrl = bg;
if (dark) {
backgroundImageUrl = darkBg;
}

return (
<div ref={rootPanelRef} tabIndex={-1} onKeyDown={onKeyboardInput}>
{!fullscreen && (
<>
<div className="normal">
<div className="App" style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
<WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
<McduScreen content={content} />
<McduButtons soundEnabled={soundEnabled} />
<div
className="button-grid"
style={{
left: `${184 / 10.61}%`,
top: `${158 / 16.50}%`,
width: `${706 / 10.61}%`,
height: `${60 / 16.50}%`,
}}
>
<div className="button-row">
<div
className="button"
title="Fullscreen"
onClick={() => setFullscreen(!fullscreen)}
/>
</div>
</div>
<div
className="button-grid"
style={{ left: '82%', top: '50%', width: '8%', height: '8%' }}
>
<div className="button-row">
<div className="button" title="Dark" onClick={() => setDark(!dark)} />
</div>
</div>
</WebsocketContext.Provider>
</div>
</div>
</>
)}
{fullscreen && (
<>
<div className={aspect43Param ? 'fullscreen aspect43' : 'fullscreen'}>
<div className="App">
<WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
<div title="Exit fullscreen" onClick={() => setFullscreen(false)}>
<McduScreen content={content} aspect43={aspect43Param} />
</div>
</WebsocketContext.Provider>
</div>
</div>
</>
)}
</div>
);
return (
<div ref={rootPanelRef} tabIndex={-1} onKeyDown={onKeyboardInput}>
{!fullscreen && (
<>
<div className="normal">
<div className="App" style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
<WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
<McduScreen content={content} />
<McduButtons soundEnabled={soundEnabled} />
<div
className="button-grid"
style={{
left: `${184 / 10.61}%`,
top: `${158 / 16.5}%`,
width: `${706 / 10.61}%`,
height: `${60 / 16.5}%`,
}}
>
<div className="button-row">
<div className="button" title="Fullscreen" onClick={() => setFullscreen(!fullscreen)} />
</div>
</div>
<div className="button-grid" style={{ left: '82%', top: '50%', width: '8%', height: '8%' }}>
<div className="button-row">
<div className="button" title="Dark" onClick={() => setDark(!dark)} />
</div>
</div>
</WebsocketContext.Provider>
</div>
</div>
</>
)}
{fullscreen && (
<>
<div className={aspect43Param ? 'fullscreen aspect43' : 'fullscreen'}>
<div className="App">
<WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
<div title="Exit fullscreen" onClick={() => setFullscreen(false)}>
<McduScreen content={content} aspect43={aspect43Param} />
</div>
</WebsocketContext.Provider>
</div>
</div>
</>
)}
</div>
);
};

export default App;
Loading

0 comments on commit ec4827b

Please sign in to comment.