From b9c8fd5b4c451054442765fd90512cf37547a57b Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Tue, 2 May 2023 06:09:58 +0000
Subject: [PATCH] Display monthly high pinball scores

---
 apiserver/apiserver/api/views.py | 21 +++++++++++++++++
 webclient/src/Display.js         | 40 ++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/apiserver/apiserver/api/views.py b/apiserver/apiserver/api/views.py
index 2519339..5736887 100644
--- a/apiserver/apiserver/api/views.py
+++ b/apiserver/apiserver/api/views.py
@@ -1570,6 +1570,27 @@ class PinballViewSet(Base):
 
         return Response(scores)
 
+    @action(detail=False, methods=['get'])
+    def monthly_high_scores(self, request):
+        now = utils.now_alberta_tz()
+        current_month_start = now.replace(day=1, hour=0, minute=0, second=0, microsecond=0)
+
+        members = models.Member.objects.all()
+        members = members.annotate(
+            pinball_score=Max('user__scores__score', filter=Q(user__scores__finished_at__gte=current_month_start)),
+        ).exclude(pinball_score__isnull=True).order_by('-pinball_score')
+
+        scores = []
+
+        for member in members:
+            scores.append(dict(
+                name=member.preferred_name + ' ' + member.last_name[0],
+                score=member.pinball_score,
+                member_id=member.id,
+            ))
+
+        return Response(scores)
+
 
 class HostingViewSet(Base):
     @action(detail=False, methods=['post'])
diff --git a/webclient/src/Display.js b/webclient/src/Display.js
index cb9ebe2..a4388f9 100644
--- a/webclient/src/Display.js
+++ b/webclient/src/Display.js
@@ -38,6 +38,10 @@ export function LCARS1Display(props) {
 					<DisplayScores />
 				</div>
 
+				<div className='display-scores'>
+					<DisplayMonthlyScores />
+				</div>
+
 				<div className='display-scores'>
 					<DisplayHosting />
 				</div>
@@ -164,6 +168,42 @@ export function DisplayScores(props) {
 	);
 };
 
+export function DisplayMonthlyScores(props) {
+	const { token, name } = props;
+	const [scores, setScores] = useState(false);
+
+	const getScores = () => {
+		requester('/pinball/monthly_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'>Monthly High Scores</Header>
+
+			{scores && scores.slice(0, 5).map((x, i) =>
+				<div key={i}>
+					<Header size='medium'>#{i+1} — {x.name}. {i === 0 ? '🧙' : ''}</Header>
+					<p>{x.score.toLocaleString()}</p>
+				</div>
+			)}
+
+		</>
+	);
+};
+
 export function DisplayHosting(props) {
 	const { token, name } = props;
 	const [scores, setScores] = useState(false);