fix: Chart not rendering on htmx request and other bugs (#19)

The chart now renders when navigating to scoreboard via HTMX
requests. Problem was listening on the wrong htmx event.

Also fixed some bugs/issues around the admin start and stop game form,
as well as the chart cleanup logic filtering out the wrong data points.

src/client/client.ts

@@ -58,6 +58,19 @@ declare global {
 
 let chart: Chart<"line">;
 
+function cleanChart() {
+	const now = new Date().getTime();
+
+	for (const dataset of chart.data.datasets) {
+		dataset.data = dataset.data.filter((point) => {
+			const x = (point as Point).x;
+			console.log("X", now - x < 5 * 60 * 1000);
+			return now - x < 5 * 60 * 1000;
+		});
+	}
+	chart.update();
+}
+
 function renderChart(datasets: ChartConfiguration<"line">["data"]["datasets"]) {
 	console.log("Rendering chart with datasets", datasets);
 
@@ -124,19 +137,9 @@ function renderChart(datasets: ChartConfiguration<"line">["data"]["datasets"]) {
 		});
 
 		// Every minute clear out old data
-		setInterval(() => {
-			const now = new Date();
-			const fiveMinutesAgo = now.getTime() - 5 * 60 * 1000;
-
-			for (const dataset of chart.data.datasets) {
-				dataset.data = dataset.data.filter((point) => {
-					const x = (point as Point).x;
-					console.log("X", x);
-					return x > fiveMinutesAgo;
-				});
-			}
-			chart.update();
-		}, 60 * 1000);
+		setInterval(cleanChart, 60 * 1000);
+		cleanChart();
+		chart.update();
 	}
 }
 

src/pages/admin.tsx

@@ -107,7 +107,7 @@ const PlayOrStop = ({ state }: RoundProps) => {
 	const { status } = state;
 
 	return (
-		<form class="flex flex-row gap-8" method="POST" action="">
+		<form class="flex flex-row gap-8" method="POST" action="" hx-target="this">
 			{status === "stopped" ? (
 				<>
 					<div class="flex flex-row gap-2">
@@ -419,9 +419,14 @@ export const plugin = basePluginSetup()
 	)
 	.post(
 		"/admin/start-game",
-		({ set, store: { state }, query: { mode } }) => {
+		({ set, store: { state }, query: { mode }, htmx }) => {
 			startGame(state, mode);
-			set.redirect = "/admin";
+
+			if (htmx.is) {
+				htmx.location({ path: "/admin", target: "#main" });
+			} else {
+				set.redirect = "/admin";
+			}
 		},
 		{
 			query: t.Object({
@@ -430,18 +435,13 @@ export const plugin = basePluginSetup()
 		},
 	)
 	.post("/admin/stop-game", ({ htmx, set, store: { state } }) => {
-		const Layout = htmx.is ? HXLayout : HTMLLayout;
 		stopGame(state);
 
 		if (htmx.is) {
-			return (
-				<Layout page="Admin">
-					<PlayOrStop state={state} />
-				</Layout>
-			);
+			htmx.location({ path: "/admin", target: "#main" });
+		} else {
+			set.redirect = "/admin";
 		}
-
-		set.redirect = "/admin";
 	})
 	.post("/admin/pause-game", ({ htmx, set, store: { state } }) => {
 		pauseGame(state);

src/pages/scoreboard/scoreboard.tsx

@@ -92,7 +92,9 @@ export const scoreboardPlugin = basePluginSetup()
 				</div>
 				<script>
 					{htmx.is
-						? `htmx.onLoad(() => renderChart(${JSON.stringify(datasets)}))`
+						? `htmx.on("htmx:afterSettle", () => renderChart(${JSON.stringify(
+								datasets,
+							)}))`
 						: `renderChart(${JSON.stringify(datasets)})`}
 				</script>
 			</Layout>