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>

src/workers/index.ts

@@ -0,0 +1 @@
+export * from "./runner";

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);
+    });
+  }
+}

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();

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);
+}