Merge pull request #147 from mitallast/master

Fix: ensuring worker is ready

templates/widget/index.html

@@ -21,7 +21,7 @@ SPDX-License-Identifier: MIT OR Apache-2.0
         <label class="widget__verification-container" for="widget__verification-checkbox">
           <span id="widget__verification-text"
             >I'm not a robot</span>
-          <input 
+          <input disabled
               id="widget__verification-checkbox"
               aria-valuenow="I'm not a robot"
                 aria-checked="false"

templates/widget/index.ts

@@ -3,7 +3,7 @@
 //
 // SPDX-License-Identifier: MIT OR Apache-2.0
 
-import { Work, ServiceWorkerMessage } from "./types";
+import {Work, ServiceWorkerMessage} from "./types";
 import fetchPoWConfig from "./fetchPoWConfig";
 import sendWork from "./sendWork";
 import sendToParent from "./sendToParent";
@@ -12,7 +12,17 @@ import * as CONST from "./const";
 import "./main.scss";
 
 let LOCK = false;
-const worker = new Worker("/bench.js");
+
+const workerPromise = new Promise<Worker>((res) => {
+  const worker = new Worker("/bench.js");
+  worker.onmessage = (event: MessageEvent) => {
+    const message: ServiceWorkerMessage = event.data;
+    if(message.type === "ready") {
+      console.log("worker ready");
+      res(worker);
+    }
+  };
+});
 
 /** add  mcaptcha widget element to DOM */
 export const registerVerificationEventHandler = (): void => {
@@ -20,10 +30,14 @@ export const registerVerificationEventHandler = (): void => {
     document.querySelector(".widget__verification-container")
   );
   verificationContainer.style.display = "flex";
-  CONST.btn().addEventListener("click", (e) => solveCaptchaRunner(e));
+  workerPromise.then((worker: Worker) => {
+    const btn = CONST.btn();
+    btn.disabled = false;
+    btn.addEventListener("click", (e) => solveCaptchaRunner(worker, e));
+  });
 };
 
-export const solveCaptchaRunner = async (e: Event): Promise<void> => {
+export const solveCaptchaRunner = async (worker: Worker, e: Event): Promise<void> => {
   const PROGRESS_FILL = <HTMLElement>document.querySelector(".progress__fill");
 
   const setWidth = (width: number) => {
@@ -94,7 +108,7 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
       }
       if (resp.type === "progress") {
         if (width < 80) {
-          width = Number(resp.nonce / max_recorded_nonce) * 100;
+          width = resp.nonce / max_recorded_nonce * 100;
           setWidth(width);
         }
         console.log(`received nonce ${resp.nonce}`);

templates/widget/prove.ts

@@ -30,7 +30,7 @@ const prove = async (
       config.string,
       config.difficulty_factor,
       STEPS,
-      progress
+      (nonce: BigInt | number) => progress(Number(nonce))
     );
     const t1 = performance.now();
     time = t1 - t0;

templates/widget/service-worker.ts

@@ -9,6 +9,12 @@ import prove from "./prove";
 import { PoWConfig, ServiceWorkerMessage, ServiceWorkerWork } from "./types";
 
 log.log("worker registered");
+
+const ready: ServiceWorkerMessage = {
+  type: "ready",
+};
+postMessage(ready);
+
 onmessage = async (e) => {
   console.debug("message received at worker");
   const config: PoWConfig = e.data;

templates/widget/types.ts

@@ -40,5 +40,6 @@ export type Token = {
 };
 
 export type ServiceWorkerMessage =
+  | { type: "ready" }
   | { type: "work"; value: ServiceWorkerWork }
   | { type: "progress"; nonce: number };