style(bench): small cleanup (#546)

* fix(bench): await benchmark loop and adjust outline styles in templates

Signed-off-by: Jason Cameron <git@jasoncameron.dev>

* refactor: remove unused showContinueBar function and clean up video error handling

Signed-off-by: Jason Cameron <git@jasoncameron.dev>

* style: format code for consistency and readability using prettier

Signed-off-by: Jason Cameron <git@jasoncameron.dev>

---------

Signed-off-by: Jason Cameron <git@jasoncameron.dev>

web/index.templ

@@ -42,11 +42,9 @@ templ base(title string, body templ.Component, challenge any, ogTags map[string]
             border-radius: 1rem;
             overflow: hidden;
             margin: 1rem 0 2rem;
-            outline-color: #b16286;
+			outline-offset: 2px;
-            outline-offset: 2px;
+			outline: #b16286 solid 4px;
-            outline-style: solid;
+		}
-            outline-width: 4px;
-        }
 
         .bar-inner {
             background-color: #b16286;

web/index_templ.go

@@ -96,7 +96,7 @@ func base(title string, body templ.Component, challenge any, ogTags map[string]s
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<style>\n        body,\n        html {\n            height: 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .centered-div {\n            text-align: center;\n        }\n\n        #status {\n            font-variant-numeric: tabular-nums;\n        }\n\n        #progress {\n            display: none;\n            width: min(20rem, 90%);\n            height: 2rem;\n            border-radius: 1rem;\n            overflow: hidden;\n            margin: 1rem 0 2rem;\n            outline-color: #b16286;\n            outline-offset: 2px;\n            outline-style: solid;\n            outline-width: 4px;\n        }\n\n        .bar-inner {\n            background-color: #b16286;\n            height: 100%;\n            width: 0;\n            transition: width 0.25s ease-in;\n        }\n    </style>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<style>\n        body,\n        html {\n            height: 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .centered-div {\n            text-align: center;\n        }\n\n        #status {\n            font-variant-numeric: tabular-nums;\n        }\n\n        #progress {\n            display: none;\n            width: min(20rem, 90%);\n            height: 2rem;\n            border-radius: 1rem;\n            overflow: hidden;\n            margin: 1rem 0 2rem;\n\t\t\toutline-offset: 2px;\n\t\t\toutline: #b16286 solid 4px;\n\t\t}\n\n        .bar-inner {\n            background-color: #b16286;\n            height: 100%;\n            width: 0;\n            transition: width 0.25s ease-in;\n        }\n    </style>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -121,7 +121,7 @@ func base(title string, body templ.Component, challenge any, ogTags map[string]s
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 67, Col: 49}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 65, Col: 49}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -171,7 +171,7 @@ func index() templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 87, Col: 165}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 85, Col: 165}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -184,7 +184,7 @@ func index() templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 88, Col: 174}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 86, Col: 174}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -197,7 +197,7 @@ func index() templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 90, Col: 136}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 88, Col: 136}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -210,7 +210,7 @@ func index() templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 126, Col: 67}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 124, Col: 67}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -252,7 +252,7 @@ func errorPage(message string, mail string) templ.Component {
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/reject.webp?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 141, Col: 181}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 139, Col: 181}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
@@ -265,7 +265,7 @@ func errorPage(message string, mail string) templ.Component {
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(message)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 142, Col: 14}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 140, Col: 14}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
@@ -292,7 +292,7 @@ func errorPage(message string, mail string) templ.Component {
 			var templ_7745c5c3_Var16 string
 			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(mail)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 148, Col: 11}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 146, Col: 11}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 			if templ_7745c5c3_Err != nil {
@@ -345,7 +345,7 @@ func StaticHappy() templ.Component {
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs("/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
 			anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 163, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 161, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
@@ -387,7 +387,7 @@ func bench() templ.Component {
 		var templ_7745c5c3_Var20 string
 		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 192, Col: 166}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 190, Col: 166}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 		if templ_7745c5c3_Err != nil {
@@ -400,7 +400,7 @@ func bench() templ.Component {
 		var templ_7745c5c3_Var21 string
 		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(anubis.BasePrefix + "/.within.website/x/cmd/anubis/static/js/bench.mjs?cacheBuster=" + anubis.Version)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 194, Col: 138}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 192, Col: 138}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 		if templ_7745c5c3_Err != nil {

web/js/bench.mjs

@@ -118,7 +118,7 @@ const benchmarkLoop = async (controller) => {
     return;
   }
 
-  benchmarkLoop(controller);
+  await benchmarkLoop(controller);
 };
 
 let controller = null;
@@ -142,11 +142,11 @@ const reset = () => {
     controller.abort();
   }
   controller = new AbortController();
-  benchmarkLoop(controller);
+  void benchmarkLoop(controller);
 };
 
 setupControls();
 difficultyInput.addEventListener("change", reset);
 algorithmSelect.addEventListener("change", reset);
 compareSelect.addEventListener("change", reset);
-reset();
+reset();

web/js/main.mjs

@@ -1,10 +1,9 @@
 import processFast from "./proof-of-work.mjs";
 import processSlow from "./proof-of-work-slow.mjs";
-import { testVideo } from "./video.mjs";
 
 const algorithms = {
-  "fast": processFast,
+  fast: processFast,
-  "slow": processSlow,
+  slow: processSlow,
 };
 
 // from Xeact
@@ -15,7 +14,9 @@ const u = (url = "", params = {}) => {
 };
 
 const imageURL = (mood, cacheBuster, basePrefix) =>
-  u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, { cacheBuster });
+  u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, {
+    cacheBuster,
+  });
 
 const dependencies = [
   {
@@ -35,59 +36,18 @@ const dependencies = [
   },
 ];
 
-function showContinueBar(hash, nonce, t0, t1) {
-  const barContainer = document.createElement("div");
-  barContainer.style.marginTop = "1rem";
-  barContainer.style.width = "100%";
-  barContainer.style.maxWidth = "32rem";
-  barContainer.style.background = "#3c3836";
-  barContainer.style.borderRadius = "4px";
-  barContainer.style.overflow = "hidden";
-  barContainer.style.cursor = "pointer";
-  barContainer.style.height = "2rem";
-  barContainer.style.marginLeft = "auto";
-  barContainer.style.marginRight = "auto";
-  barContainer.title = "Click to continue";
-
-  const barInner = document.createElement("div");
-  barInner.className = "bar-inner";
-  barInner.style.display = "flex";
-  barInner.style.alignItems = "center";
-  barInner.style.justifyContent = "center";
-  barInner.style.color = "white";
-  barInner.style.fontWeight = "bold";
-  barInner.style.height = "100%";
-  barInner.style.width = "0";
-  barInner.innerText = "I've finished reading, continue →";
-
-  barContainer.appendChild(barInner);
-  document.body.appendChild(barContainer);
-
-  requestAnimationFrame(() => {
-    barInner.style.width = "100%";
-  });
-
-  barContainer.onclick = () => {
-    const redir = window.location.href;
-    window.location.replace(
-      u("/.within.website/x/cmd/anubis/api/pass-challenge", {
-        response: hash,
-        nonce,
-        redir,
-        elapsedTime: t1 - t0
-      })
-    );
-  };
-}
-
 (async () => {
-  const status = document.getElementById('status');
+  const status = document.getElementById("status");
-  const image = document.getElementById('image');
+  const image = document.getElementById("image");
-  const title = document.getElementById('title');
+  const title = document.getElementById("title");
-  const progress = document.getElementById('progress');
+  const progress = document.getElementById("progress");
-  const anubisVersion = JSON.parse(document.getElementById('anubis_version').textContent);
+  const anubisVersion = JSON.parse(
-  const basePrefix = JSON.parse(document.getElementById('anubis_base_prefix').textContent);
+    document.getElementById("anubis_version").textContent,
-  const details = document.querySelector('details');
+  );
+  const basePrefix = JSON.parse(
+    document.getElementById("anubis_base_prefix").textContent,
+  );
+  const details = document.querySelector("details");
   let userReadDetails = false;
 
   if (details) {
@@ -114,20 +74,7 @@ function showContinueBar(hash, nonce, t0, t1) {
     return;
   }
 
-  // const testarea = document.getElementById('testarea');
+  status.innerHTML = "Calculating...";
-
-  // const videoWorks = await testVideo(testarea);
-  // console.log(`videoWorks: ${videoWorks}`);
-
-  // if (!videoWorks) {
-  //   title.innerHTML = "Oh no!";
-  //   status.innerHTML = "Checks failed. Please check your browser's settings and try again.";
-  //   image.src = imageURL("reject");
-  //   progress.style.display = "none";
-  //   return;
-  // }
-
-  status.innerHTML = 'Calculating...';
 
   for (const { value, name, msg } of dependencies) {
     if (!value) {
@@ -140,7 +87,9 @@ function showContinueBar(hash, nonce, t0, t1) {
     }
   }
 
-  const { challenge, rules } = JSON.parse(document.getElementById('anubis_challenge').textContent);
+  const { challenge, rules } = JSON.parse(
+    document.getElementById("anubis_challenge").textContent,
+  );
 
   const process = algorithms[rules.algorithm];
   if (!process) {
@@ -234,14 +183,13 @@ function showContinueBar(hash, nonce, t0, t1) {
             response: hash,
             nonce,
             redir,
-            elapsedTime: t1 - t0
+            elapsedTime: t1 - t0,
           }),
         );
       }
 
       container.onclick = onDetailsExpand;
       setTimeout(onDetailsExpand, 30000);
-
     } else {
       setTimeout(() => {
         const redir = window.location.href;
@@ -250,12 +198,11 @@ function showContinueBar(hash, nonce, t0, t1) {
             response: hash,
             nonce,
             redir,
-            elapsedTime: t1 - t0
+            elapsedTime: t1 - t0,
           }),
         );
       }, 250);
     }
-
   } catch (err) {
     ohNoes({
       titleMsg: "Calculation error!",
@@ -263,4 +210,4 @@ function showContinueBar(hash, nonce, t0, t1) {
       imageSrc: imageURL("reject", anubisVersion, basePrefix),
     });
   }
-})();
+})();

web/js/proof-of-work-slow.mjs

@@ -9,9 +9,9 @@ export default function process(
 ) {
   console.debug("slow algo");
   return new Promise((resolve, reject) => {
-    let webWorkerURL = URL.createObjectURL(new Blob([
+    let webWorkerURL = URL.createObjectURL(
-      '(', processTask(), ')()'
+      new Blob(["(", processTask(), ")()"], { type: "application/javascript" }),
-    ], { type: 'application/javascript' }));
+    );
 
     let worker = new Worker(webWorkerURL);
     const terminate = () => {
@@ -45,7 +45,7 @@ export default function process(
 
     worker.postMessage({
       data,
-      difficulty
+      difficulty,
     });
 
     URL.revokeObjectURL(webWorkerURL);
@@ -56,26 +56,27 @@ function processTask() {
   return function () {
     const sha256 = (text) => {
       const encoded = new TextEncoder().encode(text);
-      return crypto.subtle.digest("SHA-256", encoded.buffer)
+      return crypto.subtle.digest("SHA-256", encoded.buffer).then((result) =>
-        .then((result) =>
+        Array.from(new Uint8Array(result))
-          Array.from(new Uint8Array(result))
+          .map((c) => c.toString(16).padStart(2, "0"))
-            .map((c) => c.toString(16).padStart(2, "0"))
+          .join(""),
-            .join(""),
+      );
-        );
     };
 
-    addEventListener('message', async (event) => {
+    addEventListener("message", async (event) => {
       let data = event.data.data;
       let difficulty = event.data.difficulty;
 
       let hash;
       let nonce = 0;
       do {
-        if (nonce & 1023 === 0) {
+        if (nonce & (1023 === 0)) {
           postMessage(nonce);
         }
         hash = await sha256(data + nonce++);
-      } while (hash.substring(0, difficulty) !== Array(difficulty + 1).join('0'));
+      } while (
+        hash.substring(0, difficulty) !== Array(difficulty + 1).join("0")
+      );
 
       nonce -= 1; // last nonce was post-incremented
 
@@ -87,4 +88,4 @@ function processTask() {
       });
     });
   }.toString();
-}
+}

web/js/proof-of-work.mjs

@@ -3,13 +3,13 @@ export default function process(
   difficulty = 5,
   signal = null,
   progressCallback = null,
-  threads = (navigator.hardwareConcurrency || 1),
+  threads = navigator.hardwareConcurrency || 1,
 ) {
   console.debug("fast algo");
   return new Promise((resolve, reject) => {
-    let webWorkerURL = URL.createObjectURL(new Blob([
+    let webWorkerURL = URL.createObjectURL(
-      '(', processTask(), ')()'
+      new Blob(["(", processTask(), ")()"], { type: "application/javascript" }),
-    ], { type: 'application/javascript' }));
+    );
 
     const workers = [];
     const terminate = () => {
@@ -71,7 +71,7 @@ function processTask() {
         .join("");
     }
 
-    addEventListener('message', async (event) => {
+    addEventListener("message", async (event) => {
       let data = event.data.data;
       let difficulty = event.data.difficulty;
       let hash;
@@ -89,7 +89,8 @@ function processTask() {
           const byteIndex = Math.floor(j / 2); // which byte we are looking at
           const nibbleIndex = j % 2; // which nibble in the byte we are looking at (0 is high, 1 is low)
 
-          let nibble = (thisHash[byteIndex] >> (nibbleIndex === 0 ? 4 : 0)) & 0x0F; // Get the nibble
+          let nibble =
+            (thisHash[byteIndex] >> (nibbleIndex === 0 ? 4 : 0)) & 0x0f; // Get the nibble
 
           if (nibble !== 0) {
             valid = false;
@@ -113,7 +114,7 @@ function processTask() {
         // update and they will get behind the others. this is slightly more
         // complicated but ensures an even distribution between threads.
         if (
-          nonce > oldNonce | 1023 && // we've wrapped past 1024
+          (nonce > oldNonce) | 1023 && // we've wrapped past 1024
           (nonce >> 10) % threads === threadId // and it's our turn
         ) {
           postMessage(nonce);
@@ -129,4 +130,3 @@ function processTask() {
     });
   }.toString();
 }
-

web/js/video.mjs

@@ -2,15 +2,15 @@ const videoElement = `<video id="videotest" width="0" height="0" src="/.within.w
 
 export const testVideo = async (testarea) => {
   testarea.innerHTML = videoElement;
-  return (await new Promise((resolve) => {
+  return await new Promise((resolve) => {
-    const video = document.getElementById('videotest');
+    const video = document.getElementById("videotest");
     video.oncanplay = () => {
       testarea.style.display = "none";
       resolve(true);
     };
-    video.onerror = (ev) => {
+    video.onerror = () => {
       testarea.style.display = "none";
       resolve(false);
     };
-  }));
+  });
-};
+};