From d7aa8c824e43d20065c53f5d8ebdd4280151ba73 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Wed, 5 Apr 2023 04:54:49 +0000
Subject: [PATCH] Add LCARS2 display

---
 webclient/src/App.js     |  6 +++++-
 webclient/src/Debug.js   |  2 ++
 webclient/src/Display.js | 41 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/webclient/src/App.js b/webclient/src/App.js
index 3bdcf9e..1d6d8ac 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -29,7 +29,7 @@ import { NotFound, PleaseLogin } from './Misc.js';
 import { Debug } from './Debug.js';
 import { Garden } from './Garden.js';
 import { Footer } from './Footer.js';
-import { LCARS1Display } from './Display.js';
+import { LCARS1Display, LCARS2Display } from './Display.js';
 
 const APP_VERSION = 5;  // TODO: automate this
 
@@ -130,6 +130,10 @@ function App() {
 					<LCARS1Display token={token} />
 				</Route>
 
+				<Route exact path='/display/lcars2'>
+					<LCARS2Display token={token} />
+				</Route>
+
 				<Route path='/'>
 					<Container>
 						<div className='hero'>
diff --git a/webclient/src/Debug.js b/webclient/src/Debug.js
index de288af..350719f 100644
--- a/webclient/src/Debug.js
+++ b/webclient/src/Debug.js
@@ -28,6 +28,8 @@ export function Debug(props) {
 
 			<p><Link to='/display/lcars1'>LCARS1 Display</Link></p>
 
+			<p><Link to='/display/lcars2'>LCARS2 Display</Link></p>
+
 
 		</Container>
 	);
diff --git a/webclient/src/Display.js b/webclient/src/Display.js
index 72939f0..92df7cc 100644
--- a/webclient/src/Display.js
+++ b/webclient/src/Display.js
@@ -50,6 +50,47 @@ export function LCARS1Display(props) {
 	);
 };
 
+export function LCARS2Display(props) {
+	const { token } = props;
+	const [fullElement, setFullElement] = useState(false);
+	const ref = useRef(null);
+
+	const goFullScreen = () => {
+		if ('wakeLock' in navigator) {
+			navigator.wakeLock.request('screen');
+		}
+
+		ref.current.requestFullscreen({ navigationUI: 'hide' }).then(() => {
+			setFullElement(true);
+		});
+	};
+
+	return (
+		<Container>
+			<div className='display' ref={ref}>
+
+				{!fullElement &&
+					<p>
+						<Button onClick={goFullScreen}>Fullscreen</Button>
+					</p>
+				}
+
+				<div className='display-scores'>
+					<DisplayScores />
+				</div>
+
+				<div className='display-scores'>
+					<DisplayHosting />
+				</div>
+
+				<div className='display-usage'>
+					<DisplayUsage token={token} name={'trotec'} />
+				</div>
+			</div>
+		</Container>
+	);
+};
+
 export function DisplayUsage(props) {
 	const { token, name } = props;
 	const title = deviceNames[name].title;