barf: better network transactions, and make people wait for clippy

This commit is contained in:
Luke Granger-Brown 2024-03-12 01:53:33 +00:00
parent a25ba9aef6
commit 5a3e9173c6

View file

@ -500,6 +500,19 @@ body.all-done .now-safe {
bottom: 5px; bottom: 5px;
right: 100%; 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) { @media (max-width: 1000px) {
#page { #page {
@ -571,6 +584,7 @@ body.all-done .now-safe {
</style> </style>
</head> </head>
<body> <body>
<div id="clickshield"></div>
<div id="page"> <div id="page">
<div id="header"> <div id="header">
BARF<span class="xp">xp</span> 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() { runAssistant() {
if (this.assistantQueue.length === 0) { if (this.assistantQueue.length === 0) {
this.assistantRunning = false; this.assistantRunning = false;
@ -935,10 +966,12 @@ class BARF {
const assistantActuallyRendering = window.getComputedStyle(document.querySelector('#assistant')).display !== 'none'; const assistantActuallyRendering = window.getComputedStyle(document.querySelector('#assistant')).display !== 'none';
if (!this.assistantShown) { if (!this.assistantShown) {
if (assistantActuallyRendering) { if (assistantActuallyRendering) {
this.setNetworkTransaction(true);
this.assistantQueue.splice(0, 0, { this.assistantQueue.splice(0, 0, {
what: 'playVideo', what: 'playVideo',
video: 'intro', video: 'intro',
callback: () => { callback: () => {
this.setNetworkTransaction(false);
this.assistantShown = true; this.assistantShown = true;
}, },
}); });
@ -1092,13 +1125,13 @@ class BARF {
} }
doSave() { doSave() {
document.body.classList.add('network-transaction'); this.setNetworkTransaction(true);
return fetch(window.location, { return fetch(window.location, {
method: 'PUT', method: 'PUT',
headers: {'Content-Type': 'application/json'}, headers: {'Content-Type': 'application/json'},
body: JSON.stringify(this.dataset), body: JSON.stringify(this.dataset),
}).finally(() => { }).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);
}); });
} }