feat(efb): tabbed settings page and new autobrightness option (flybywiresim#5524)

* changelog

* init commit

* add margin

* I forgor 💀

* remove the div and change styling

* add duration

* create a ternary

* remove the test div

* darker grey color

* get rid of OtherSettings and move it into FlyPadPage component

* refactor: change layout

* rename hooks and display names to be more appropriate

* remove _, and replace with empty comma

* feat: add autobrightness option

* change b value

* refactor: drastically improve autobrightness brightness calculation

* fix: wrong navbar option showing and flickering brightness slider

Author: ErickSharp

.github/CHANGELOG.md

@@ -163,6 +163,7 @@
 1. [MISC] Change back to airliner hud in external view for SU5 - @donstim (donbikes#4084)
 1. [TEXTURE] Improved cockpit textures and screen reflections - @MoreRightRudder (Mike), @tyler58546 (tyler58546)
 1. [MCDU] DEST EFOB and ALT DEST EFOB amber coloring fixed - @erso44 (Ersin Karakilic)
+1. [EFB] Add tabbed settings page to EFB - @ErickSharp (Erick [Z-6]#6484)
 1. [FCU] Added LVAR for selected speed and only fill active LVAR for VS or FPA mode
 1. [MODEL] Removed unused material to fix potential crash to desktop - @aguther (Andreas Guther)
 1. [ARCH] Failures are supported - @davidwalschots (David Walschots)

src/instruments/src/EFB/Efb.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useReducer } from 'react';
 
 import { Provider } from 'react-redux';
 import { Route, Switch, useHistory } from 'react-router-dom';
+import { useSimVar } from '@instruments/common/simVars';
 import { usePersistentProperty } from '../Common/persistence';
 import NavigraphClient, { NavigraphContext } from './ChartsApi/Navigraph';
 import { getSimbriefData, IFuel, IWeights } from './SimbriefApi';
@@ -118,9 +119,24 @@ const navigraph = new NavigraphClient();
 const Efb = () => {
     const history = useHistory();
 
+    const [currentLocalTime] = useSimVar('E:LOCAL TIME', 'seconds', 3000);
+    const [, setBrightness] = useSimVar('L:A32NX_EFB_BRIGHTNESS', 'number');
+    const [usingAutobrightness] = useSimVar('L:A32NX_EFB_USING_AUTOBRIGHTNESS', 'bool', 5000);
+
+    // handle setting brightness if user is using autobrightness
+    useEffect(() => {
+        if (usingAutobrightness) {
+            const localTime = currentLocalTime / 3600;
+            // the below code defines a semicircular function.
+            // eslint-disable-next-line no-restricted-properties
+            setBrightness(((Math.sqrt(48 - Math.pow((localTime - 14), 2))) * 14.431) || 0);
+        }
+    }, [currentLocalTime]);
+
     const [performanceState, performanceDispatch] = useReducer(PerformanceReducer, performanceInitialState);
     const [simbriefData, setSimbriefData] = useState<SimbriefData>(emptySimbriefData);
     const [simbriefUsername, setSimbriefUsername] = usePersistentProperty('SimbriefUsername');
+
     const [timeState, setTimeState] = useState<TimeState>({
         currentTime: new Date(),
         initTime: new Date(),