From 682feeacf77e9d9477a5154d83a568f969ad6105 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Wed, 18 Jan 2023 01:01:27 +0000
Subject: [PATCH] Display pinball scores on LCARS1

---
 apiserver/apiserver/api/views.py | 17 +++++++++++
 webclient/src/Debug.js           |  2 ++
 webclient/src/Display.js         | 52 +++++++++++++++++++++++++++-----
 webclient/src/light.css          | 19 ++++++++++--
 4 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/apiserver/apiserver/api/views.py b/apiserver/apiserver/api/views.py
index bbcbfec..aae21de 100644
--- a/apiserver/apiserver/api/views.py
+++ b/apiserver/apiserver/api/views.py
@@ -1345,6 +1345,23 @@ class PinballViewSet(Base):
         )
         return Response(res)
 
+    @action(detail=False, methods=['get'])
+    def high_scores(self, request):
+        members = models.Member.objects.all()
+        members = members.annotate(
+            pinball_score=Max('user__scores__score'),
+        ).exclude(pinball_score__isnull=True).order_by('-pinball_score')[:5]
+
+        scores = []
+
+        for member in members:
+            scores.append(dict(
+                name=member.preferred_name + ' ' + member.last_name[0],
+                score=member.pinball_score,
+            ))
+
+        return Response(scores)
+
 
 class RegistrationView(RegisterView):
     serializer_class = serializers.MyRegisterSerializer
diff --git a/webclient/src/Debug.js b/webclient/src/Debug.js
index ce62fc4..de288af 100644
--- a/webclient/src/Debug.js
+++ b/webclient/src/Debug.js
@@ -26,6 +26,8 @@ export function Debug(props) {
 
 			<p><Link to='/usage/trotec'>Trotec Usage</Link></p>
 
+			<p><Link to='/display/lcars1'>LCARS1 Display</Link></p>
+
 
 		</Container>
 	);
diff --git a/webclient/src/Display.js b/webclient/src/Display.js
index 471cbc4..bb1bf62 100644
--- a/webclient/src/Display.js
+++ b/webclient/src/Display.js
@@ -34,7 +34,9 @@ export function LCARS1Display(props) {
 					</p>
 				}
 
-				<div></div>
+				<div className='display-scores'>
+					<DisplayScores />
+				</div>
 
 				<div className='display-usage'>
 					<DisplayUsage token={token} name={'trotec'} />
@@ -71,17 +73,51 @@ export function DisplayUsage(props) {
 
 	return (
 		<>
+			<Header size='large'>Trotec Usage</Header>
+
 			{showUsage ?
 				<TrotecUsage usage={usage} />
 			:
-				<>
-					<Header size='medium'>Trotec Usage</Header>
-
-					<p className='stat'>
-						Waiting for job
-					</p>
-				</>
+				<p className='stat'>
+					Waiting for job
+				</p>
 			}
 		</>
 	);
 };
+
+export function DisplayScores(props) {
+	const { token, name } = props;
+	const [scores, setScores] = useState(false);
+
+	const getScores = () => {
+		requester('/pinball/high_scores/', 'GET')
+		.then(res => {
+			setScores(res);
+		})
+		.catch(err => {
+			console.log(err);
+			setScores(false);
+		});
+	};
+
+	useEffect(() => {
+		getScores();
+		const interval = setInterval(getScores, 60000);
+		return () => clearInterval(interval);
+	}, []);
+
+	return (
+		<>
+			<Header size='large'>Pinball High Scores</Header>
+
+			{scores && scores.map((x, i) =>
+				<div key={i}>
+					<Header size='medium'>#{i+1} — {x.name}.</Header>
+					<p>{x.score.toLocaleString()}</p>
+				</div>
+			)}
+
+		</>
+	);
+};
diff --git a/webclient/src/light.css b/webclient/src/light.css
index be09837..a2d17e5 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -179,15 +179,28 @@ body {
 	height: 100vh;
 	background-color: black;
 	color: white;
-	font-size: 1em;
+	font-size: 1.5em;
 }
 
 .display-usage {
 	border: 1px solid white;
 	padding: 0.5em;
 	align-self: flex-end;
-	width: 240px;
-	height: 383px;
+	width: 25vw;
+	height: 75vh;
+}
+
+.display-scores {
+	border: 1px solid white;
+	padding: 0.5em;
+	align-self: flex-end;
+	width: 25vw;
+	height: 75vh;
+}
+
+.display-scores p {
+	font-size: 1.5em;
+	text-align: right;
 }
 
 .usage {