From 5a3e9173c6ff292280fb4aff3efbe05f91fbc824 Mon Sep 17 00:00:00 2001
From: Luke Granger-Brown <hg@lukegb.com>
Date: Tue, 12 Mar 2024 01:53:33 +0000
Subject: [PATCH] barf: better network transactions, and make people wait for
 clippy

---
 web/barf/frontend/index.html | 39 ++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)
diff --git a/web/barf/frontend/index.html b/web/barf/frontend/index.html
index 1970703ef1..62c7a52e55 100644
--- a/web/barf/frontend/index.html
+++ b/web/barf/frontend/index.html
@@ -500,6 +500,19 @@ body.all-done .now-safe {
 	bottom: 5px;
 	right: 100%;
 }
+#clickshield {
+	display: none;
+}
+.network-transaction #clickshield {
+	display: block;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 99999;
+	cursor: wait;
+}
 
 @media (max-width: 1000px) {
 	#page {
@@ -571,6 +584,7 @@ body.all-done .now-safe {
 </style>
 </head>
 <body>
+<div id="clickshield"></div>
 <div id="page">
 	<div id="header">
 		BARF<span class="xp">xp</span>
@@ -926,6 +940,23 @@ class BARF {
 		}
 	}
 
+	setNetworkTransaction(state) {
+		if (state) {
+			document.body.classList.add('network-transaction');
+		} else {
+			document.body.classList.remove('network-transaction');
+		}
+		for (const el of document.body.querySelectorAll('input, textarea, button')) {
+			if (state) {
+				if (!el.dataset.previouslyDisabled) el.dataset.previouslyDisabled = el.disabled;
+				el.disabled = state;
+			} else {
+				el.disabled = el.dataset.previouslyDisabled === 'true';
+				delete el.dataset.previouslyDisabled;
+			}
+		}
+	}
+
 	runAssistant() {
 		if (this.assistantQueue.length === 0) {
 			this.assistantRunning = false;
@@ -935,10 +966,12 @@ class BARF {
 		const assistantActuallyRendering = window.getComputedStyle(document.querySelector('#assistant')).display !== 'none';
 		if (!this.assistantShown) {
 			if (assistantActuallyRendering) {
+				this.setNetworkTransaction(true);
 				this.assistantQueue.splice(0, 0, {
 					what: 'playVideo',
 					video: 'intro',
 					callback: () => {
+						this.setNetworkTransaction(false);
 						this.assistantShown = true;
 					},
 				});
@@ -1092,13 +1125,13 @@ class BARF {
 	}
 
 	doSave() {
-		document.body.classList.add('network-transaction');
+		this.setNetworkTransaction(true);
 		return fetch(window.location, {
 			method: 'PUT',
 			headers: {'Content-Type': 'application/json'},
 			body: JSON.stringify(this.dataset),
 		}).finally(() => {
-			document.body.classList.remove('network-transaction');
+			this.setNetworkTransaction(false);
 		});
 	}
 
@@ -1162,6 +1195,8 @@ class BARF {
 					}
 				}
 			}
+		}, (err) => {
+			this.panic('Something went wrong saving your form responses: ' + err);
 		});
 	}
 	
