1 files changed, 47 insertions, 10 deletions

diff --git a/web/js/main.mjs b/web/js/main.mjs
index daaafcf..01f21f0 100644
--- a/web/js/main.mjs
+++ b/web/js/main.mjs
@@ -37,7 +37,7 @@ const dependencies = [
   const status = document.getElementById('status');
   const image = document.getElementById('image');
   const title = document.getElementById('title');
-  const spinner = document.getElementById('spinner');
+  const progress = document.getElementById('progress');
   const anubisVersion = JSON.parse(document.getElementById('anubis_version').textContent);
 
   const ohNoes = ({
@@ -46,8 +46,7 @@ const dependencies = [
     title.innerHTML = titleMsg;
     status.innerHTML = statusMsg;
     image.src = imageSrc;
-    spinner.innerHTML = "";
-    spinner.style.display = "none";
+    progress.style.display = "none";
   };
 
   if (!window.isSecureContext) {
@@ -68,8 +67,7 @@ const dependencies = [
   //   title.innerHTML = "Oh no!";
   //   status.innerHTML = "Checks failed. Please check your browser's settings and try again.";
   //   image.src = imageURL("sad");
-  //   spinner.innerHTML = "";
-  //   spinner.style.display = "none";
+  //   progress.style.display = "none";
   //   return;
   // }
 
@@ -112,20 +110,59 @@ const dependencies = [
     return;
   }
 
-  status.innerHTML = `Calculating...<br/>Difficulty: ${rules.report_as}`;
-  spinner.style.display = "block";
+  status.innerHTML = `Calculating...<br/>Difficulty: ${rules.report_as}, `;
+  progress.style.display = "inline-block";
 
+  // the whole text, including "Speed:", as a single node, because some browsers
+  // (Firefox mobile) present screen readers with each node as a separate piece
+  // of text.
+  const rateText = document.createTextNode("Speed: 0kH/s");
+  status.appendChild(rateText);
+
+  let lastSpeedUpdate = 0;
+  let showingApology = false;
+  const likelihood = Math.pow(16, -rules.report_as);
   try {
     const t0 = Date.now();
-    const { hash, nonce } = await process(challenge, rules.difficulty);
+    const { hash, nonce } = await process(
+      challenge,
+      rules.difficulty,
+      (iters) => {
+        const delta = Date.now() - t0;
+        // only update the speed every second so it's less visually distracting
+        if (delta - lastSpeedUpdate > 1000) {
+          lastSpeedUpdate = delta;
+          rateText.data = `Speed: ${(iters / delta).toFixed(3)}kH/s`;
+        }
+
+        // the probability of still being on the page is (1 - likelihood) ^ iters.
+        // by definition, half of the time the progress bar only gets to half, so
+        // apply a polynomial ease-out function to move faster in the beginning
+        // and then slow down as things get increasingly unlikely. quadratic felt
+        // the best in testing, but this may need adjustment in the future.
+        const probability = Math.pow(1 - likelihood, iters);
+        const distance = (1 - Math.pow(probability, 2)) * 100;
+        progress["aria-valuenow"] = distance;
+        progress.firstElementChild.style.width = `${distance}%`;
+
+        if (probability < 0.1 && !showingApology) {
+          status.append(
+            document.createElement("br"),
+            document.createTextNode(
+              "Verification is taking longer than expected. Please do not refresh the page.",
+            ),
+          );
+          showingApology = true;
+        }
+      },
+    );
     const t1 = Date.now();
     console.log({ hash, nonce });
 
     title.innerHTML = "Success!";
     status.innerHTML = `Done! Took ${t1 - t0}ms, ${nonce} iterations`;
     image.src = imageURL("happy", anubisVersion);
-    spinner.innerHTML = "";
-    spinner.style.display = "none";
+    progress.style.display = "none";
 
     setTimeout(() => {
       const redir = window.location.href;