From 94e1eef91e96204c812ff881af84b1a9f7db8037 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Wed, 18 Sep 2019 14:42:17 +0200
Subject: [PATCH] add TaskRunner and worker utils

---
 src/{worker.d.ts => shims-worker.d.ts}  |  0
 src/views/Lobby.vue                     | 22 ++++++++----
 src/workers/index.ts                    |  1 +
 src/workers/runner.ts                   | 17 ++++++++++
 src/workers/tasks/downloadCardImages.ts | 45 ++++++-------------------
 src/workers/worker-utils.ts             |  9 +++++
 6 files changed, 53 insertions(+), 41 deletions(-)
 rename src/{worker.d.ts => shims-worker.d.ts} (100%)
 create mode 100644 src/workers/index.ts
 create mode 100644 src/workers/runner.ts
 create mode 100644 src/workers/worker-utils.ts

diff --git a/src/worker.d.ts b/src/shims-worker.d.ts
similarity index 100%
rename from src/worker.d.ts
rename to src/shims-worker.d.ts
diff --git a/src/views/Lobby.vue b/src/views/Lobby.vue
index 51779a7..155ecde 100644
--- a/src/views/Lobby.vue
+++ b/src/views/Lobby.vue
@@ -16,7 +16,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
-import DownloadWorker from "worker-loader!@/workers/tasks/downloadCardImages";
+import { TaskRunner } from "@/workers";
 
 @Component({
   components: {
@@ -25,13 +25,21 @@ import DownloadWorker from "worker-loader!@/workers/tasks/downloadCardImages";
 })
 export default class Lobby extends Vue {
   private mounted() {
-    /*
-    const worker = new DownloadWorker();
-    worker.addEventListener("message", (ev: MessageEvent) => {
-      const data = JSON.parse(ev.data);
-      console.log(data);
+    const worker = new TaskRunner("downloadCardImages");
+    worker.on("dl-progress", progress => {
+      console.log(
+        `Download progress: ${progress.progress}/${
+          progress.total
+        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
+      );
+    });
+    worker.on("ex-progress", progress => {
+      console.log(
+        `Extraction progress: ${progress.progress}/${
+          progress.total
+        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
+      );
     });
-    */
   }
 }
 </script>
diff --git a/src/workers/index.ts b/src/workers/index.ts
new file mode 100644
index 0000000..bd2b893
--- /dev/null
+++ b/src/workers/index.ts
@@ -0,0 +1 @@
+export * from "./runner";
diff --git a/src/workers/runner.ts b/src/workers/runner.ts
new file mode 100644
index 0000000..27cab61
--- /dev/null
+++ b/src/workers/runner.ts
@@ -0,0 +1,17 @@
+import EventEmitter from "eventemitter3";
+
+export class TaskRunner extends EventEmitter {
+  public class: any;
+  public instance: Worker;
+
+  constructor(taskName: string) {
+    super();
+    this.class = require(`worker-loader!@/workers/tasks/${taskName}`);
+    this.instance = new this.class() as Worker;
+    this.instance.addEventListener("error", ev => this.emit("error", ev));
+    this.instance.addEventListener("message", ev => {
+      const message = JSON.parse(ev.data);
+      this.emit(message.type, message.data);
+    });
+  }
+}
diff --git a/src/workers/tasks/downloadCardImages.ts b/src/workers/tasks/downloadCardImages.ts
index e93778c..e1542f1 100644
--- a/src/workers/tasks/downloadCardImages.ts
+++ b/src/workers/tasks/downloadCardImages.ts
@@ -1,12 +1,7 @@
 import { Database, initDB } from "@/mlpccg";
 import axios from "axios";
 import JSZip from "jszip";
-
-const ctx: Worker = self as any;
-
-function send(data: object) {
-  ctx.postMessage(JSON.stringify(data));
-}
+import { send, runAsync } from "../worker-utils";
 
 async function downloadImages() {
   if (!Database) {
@@ -18,18 +13,14 @@ async function downloadImages() {
   const itemcount = await table.count();
   if (itemcount > 1900) {
     // DB already filled, exit early
-    send({
-      type: "svc-already-done"
-    });
-    return;
+    return "already-done";
   }
 
   const zipdata = await axios({
     url: "https://mcg.zyg.ovh/cards.zip",
     responseType: "blob",
     onDownloadProgress: (progressEvent: ProgressEvent) => {
-      send({
-        type: "svc-dl-progress",
+      send("dl-progress", {
         progress: progressEvent.loaded,
         total: progressEvent.total
       });
@@ -55,41 +46,27 @@ async function downloadImages() {
   cards.forEach(async (filename, filedata) => {
     const data = await filedata.async("blob");
     loadingState += 1;
-    send({
-      type: "svc-ex-progress",
+    send("ex-progress", {
       progress: loadingState,
       total: totalLoading
     });
     const result = await table.put({ id: filename, image: data });
     loadingState += 1;
-    send({
-      type: "svc-ex-progress",
+    send("ex-progress", {
       progress: loadingState,
       total: totalLoading
     });
   });
   await waitgroup;
+
+  return "downloaded";
 }
 
-async function run() {
-  send({
-    type: "svc-start"
-  });
-
+runAsync(async () => {
   try {
-    await downloadImages();
+    return await downloadImages();
   } catch (e) {
     console.error(e);
-    send({
-      type: "svc-err",
-      error: e.message
-    });
-    return;
+    return new Error(e.message);
   }
-
-  send({
-    type: "svc-end"
-  });
-}
-
-run();
+});
diff --git a/src/workers/worker-utils.ts b/src/workers/worker-utils.ts
new file mode 100644
index 0000000..6872d63
--- /dev/null
+++ b/src/workers/worker-utils.ts
@@ -0,0 +1,9 @@
+export function send(type: string, data?: any) {
+  const ctx: Worker = self as any;
+  ctx.postMessage(JSON.stringify({ type, data }));
+}
+
+export async function runAsync(fn: () => Promise<any>) {
+  const val = await fn();
+  send("finish", val);
+}