From 5b8cb759216b7c6ff8829bb351bee3778e0b25bb Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Wed, 18 Sep 2019 13:04:43 +0200
Subject: [PATCH 1/6] Add worker for downloading images

---
 package.json                            |  5 +-
 src/mlpccg/database.ts                  | 16 +++--
 src/mlpccg/images.ts                    | 30 --------
 src/network/Client.ts                   |  5 +-
 src/tests/unit/database.spec.ts         |  2 +-
 src/tests/unit/draft.spec.ts            |  2 +-
 src/views/Lobby.vue                     | 13 +++-
 src/worker.d.ts                         |  8 +++
 src/workers/tasks/downloadCardImages.ts | 95 +++++++++++++++++++++++++
 tsconfig.json                           | 22 ++----
 yarn.lock                               | 54 +++++++++++++-
 11 files changed, 194 insertions(+), 58 deletions(-)
 create mode 100644 src/worker.d.ts
 create mode 100644 src/workers/tasks/downloadCardImages.ts

diff --git a/package.json b/package.json
index 953faba..9ed7263 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@types/jszip": "^3.1.6",
     "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -17,6 +18,7 @@
     "core-js": "^2.6.5",
     "dexie": "^2.0.4",
     "eventemitter3": "^4.0.0",
+    "jszip": "^3.2.2",
     "node-sass": "^4.9.0",
     "peerjs": "^1.0.4",
     "register-service-worker": "^1.6.2",
@@ -28,7 +30,8 @@
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1",
-    "vuex-class": "^0.3.2"
+    "vuex-class": "^0.3.2",
+    "worker-loader": "^2.0.0"
   },
   "devDependencies": {
     "@types/jest": "^23.1.4",
diff --git a/src/mlpccg/database.ts b/src/mlpccg/database.ts
index c4b9aae..b2d03e2 100644
--- a/src/mlpccg/database.ts
+++ b/src/mlpccg/database.ts
@@ -19,10 +19,18 @@ class CardDatabase extends Dexie {
 
 export let Database: CardDatabase | null = null;
 
-export function initDB() {
-  if (Database == null) {
-    Database = new CardDatabase();
-  }
+export async function initDB(): Promise<void> {
+  return new Promise(resolve => {
+    if (Database == null) {
+      Database = new CardDatabase();
+      Database.on("ready", async () => {
+        resolve();
+      });
+      Database.open();
+    } else {
+      resolve();
+    }
+  });
 }
 
 export async function getCards(filter: CardFilter) {
diff --git a/src/mlpccg/images.ts b/src/mlpccg/images.ts
index eb35fb1..00966da 100644
--- a/src/mlpccg/images.ts
+++ b/src/mlpccg/images.ts
@@ -1,35 +1,5 @@
-import axios from "axios";
-import { Database } from "./database";
-
 const imgBaseURL = "https://mcg.zyg.ovh/images/cards/";
 
 export function cardImageURL(cardid: string): string {
   return `${imgBaseURL}${cardid}.webp`;
 }
-
-async function getCardImageList(): Promise<string[]> {
-  const req = await axios(`${imgBaseURL}list.txt`);
-  return req.data;
-}
-
-export async function getImages() {
-  if (Database == null) {
-    throw new Error("Database was not initialized, init with 'initDB()'");
-  }
-  const itemcount = await Database.images.count();
-  if (itemcount > 100) {
-    // DB already filled, exit early
-    return;
-  }
-  const imglist = await getCardImageList();
-
-  let table = Database.images;
-  const promises = imglist.map(async img => {
-    const req = await axios({
-      url: `${imgBaseURL}${img}`,
-      responseType: "blob"
-    });
-    return table.put({ id: img, image: req.data });
-  });
-  return await Promise.all(promises);
-}
diff --git a/src/network/Client.ts b/src/network/Client.ts
index a6a43c1..d8da32d 100644
--- a/src/network/Client.ts
+++ b/src/network/Client.ts
@@ -48,7 +48,7 @@ export abstract class Client extends EventEmitter {
         this.players.push(data.name);
         this.emit("player-joined", data.name);
         break;
-      case "player-left":
+      case "player-left": {
         let idx = this.players.indexOf(data.name);
         if (idx < 0) {
           // Weird
@@ -58,8 +58,11 @@ export abstract class Client extends EventEmitter {
           break;
         }
         this.players.splice(idx, 1);
+        break;
+      }
       case "password-req":
         this.emit("password-required");
+        break;
       default:
         // For most cases, we can just use the kind as event type
         this.emit(data.kind, data);
diff --git a/src/tests/unit/database.spec.ts b/src/tests/unit/database.spec.ts
index d1d77ff..d1ecec4 100644
--- a/src/tests/unit/database.spec.ts
+++ b/src/tests/unit/database.spec.ts
@@ -6,7 +6,7 @@ setupIDBShim();
 describe("mlpccg/Database", () => {
   beforeAll(async () => {
     jest.setTimeout(15000);
-    initDB();
+    await initDB();
     await loadSets();
   });
 
diff --git a/src/tests/unit/draft.spec.ts b/src/tests/unit/draft.spec.ts
index 1db04e2..d96a3d4 100644
--- a/src/tests/unit/draft.spec.ts
+++ b/src/tests/unit/draft.spec.ts
@@ -22,7 +22,7 @@ const testSessionOptions: DraftOptions = {
 describe("mlpccg/draft", () => {
   beforeAll(async () => {
     jest.setTimeout(15000);
-    initDB();
+    await initDB();
     await loadSets();
   });
 
diff --git a/src/views/Lobby.vue b/src/views/Lobby.vue
index 041677a..51779a7 100644
--- a/src/views/Lobby.vue
+++ b/src/views/Lobby.vue
@@ -16,11 +16,22 @@
 <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";
 
 @Component({
   components: {
     TopNav
   }
 })
-export default class Lobby extends Vue {}
+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);
+    });
+    */
+  }
+}
 </script>
diff --git a/src/worker.d.ts b/src/worker.d.ts
new file mode 100644
index 0000000..dcebcff
--- /dev/null
+++ b/src/worker.d.ts
@@ -0,0 +1,8 @@
+// typings/custom.d.ts
+declare module "worker-loader!*" {
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  export default WebpackWorker;
+}
diff --git a/src/workers/tasks/downloadCardImages.ts b/src/workers/tasks/downloadCardImages.ts
new file mode 100644
index 0000000..e93778c
--- /dev/null
+++ b/src/workers/tasks/downloadCardImages.ts
@@ -0,0 +1,95 @@
+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));
+}
+
+async function downloadImages() {
+  if (!Database) {
+    await initDB();
+  }
+
+  let table = Database!.images;
+
+  const itemcount = await table.count();
+  if (itemcount > 1900) {
+    // DB already filled, exit early
+    send({
+      type: "svc-already-done"
+    });
+    return;
+  }
+
+  const zipdata = await axios({
+    url: "https://mcg.zyg.ovh/cards.zip",
+    responseType: "blob",
+    onDownloadProgress: (progressEvent: ProgressEvent) => {
+      send({
+        type: "svc-dl-progress",
+        progress: progressEvent.loaded,
+        total: progressEvent.total
+      });
+    }
+  });
+
+  const zipfile = await JSZip.loadAsync(zipdata.data);
+  const cards = zipfile.folder("Cards");
+
+  let loadingState = 0;
+  let totalLoading = 0;
+  cards.forEach(async () => {
+    totalLoading += 2;
+  });
+  let waitgroup = new Promise(resolve => {
+    let timer = setInterval(() => {
+      if (loadingState >= totalLoading) {
+        clearInterval(timer);
+        resolve();
+      }
+    }, 1000);
+  });
+  cards.forEach(async (filename, filedata) => {
+    const data = await filedata.async("blob");
+    loadingState += 1;
+    send({
+      type: "svc-ex-progress",
+      progress: loadingState,
+      total: totalLoading
+    });
+    const result = await table.put({ id: filename, image: data });
+    loadingState += 1;
+    send({
+      type: "svc-ex-progress",
+      progress: loadingState,
+      total: totalLoading
+    });
+  });
+  await waitgroup;
+}
+
+async function run() {
+  send({
+    type: "svc-start"
+  });
+
+  try {
+    await downloadImages();
+  } catch (e) {
+    console.error(e);
+    send({
+      type: "svc-err",
+      error: e.message
+    });
+    return;
+  }
+
+  send({
+    type: "svc-end"
+  });
+}
+
+run();
diff --git a/tsconfig.json b/tsconfig.json
index 52cfe29..a2eba52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,21 +11,11 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env",
-      "jest"
-    ],
+    "types": ["webpack-env", "jest"],
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "include": [
     "src/**/*.ts",
@@ -34,7 +24,5 @@
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],
-  "exclude": [
-    "node_modules"
-  ]
-}
\ No newline at end of file
+  "exclude": ["node_modules"]
+}
diff --git a/yarn.lock b/yarn.lock
index fdfc99e..e22f988 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -770,6 +770,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
   integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
 
+"@types/jszip@^3.1.6":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@types/jszip/-/jszip-3.1.6.tgz#0512574a2b35f3194b41769c56e4b35065e67000"
+  integrity sha512-m8uFcI+O2EupCfbEVQWsBM/4nhbegjOHL7cQgBpM95FeF98kdFJXzy9/8yhx4b3lCRl/gMBhcvyh30Qt3X+XPQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -5147,6 +5154,11 @@ immediate@^3.2.2:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.2.3.tgz#d140fa8f614659bd6541233097ddaac25cdd991c"
   integrity sha1-0UD6j2FGWb1lQSMwl92qwlzdmRw=
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -6362,6 +6374,16 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jszip@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.2.2.tgz#b143816df7e106a9597a94c77493385adca5bd1d"
+  integrity sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    set-immediate-shim "~1.0.1"
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -6443,6 +6465,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -6482,7 +6511,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -7685,7 +7714,7 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pako@~1.0.5:
+pako@~1.0.2, pako@~1.0.5:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
   integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
@@ -9098,6 +9127,14 @@ sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -9204,6 +9241,11 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-immediate-shim@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+  integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -10979,6 +11021,14 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
-- 
2.40.1


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 2/6] 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);
+}
-- 
2.40.1


From 00c43b59364659354c86fad927eae8b1928866ec Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Wed, 18 Sep 2019 15:00:53 +0200
Subject: [PATCH 3/6] Create settings page

---
 src/components/Navigation/TopNav.vue | 53 ++++++++++++++++++++++------
 src/router.ts                        |  9 +++++
 src/views/Lobby.vue                  | 21 +----------
 src/views/Settings.vue               | 36 +++++++++++++++++++
 4 files changed, 88 insertions(+), 31 deletions(-)
 create mode 100644 src/views/Settings.vue

diff --git a/src/components/Navigation/TopNav.vue b/src/components/Navigation/TopNav.vue
index a03f37c..504ff0b 100644
--- a/src/components/Navigation/TopNav.vue
+++ b/src/components/Navigation/TopNav.vue
@@ -1,18 +1,36 @@
 <template>
   <nav>
-    <router-link
-      :class="routeClass(route)"
-      v-for="route in routes"
-      :key="route"
-      :to="{ name: route }"
-      >{{ prettyTitle(route) }}</router-link
-    >
+    <section class="pages">
+      <router-link
+        :class="routeClass(route)"
+        v-for="route in mainRoutes"
+        :key="route"
+        :to="{ name: route }"
+        >{{ prettyTitle(route) }}</router-link
+      >
+    </section>
+    <section class="icons">
+      <router-link
+        :class="routeClass(route)"
+        v-for="route in iconRoutes"
+        :key="route"
+        :to="{ name: route }"
+        ><b-icon
+          :icon="prettyTitle(route)"
+          class="route-icon"
+          custom-size="mdi-36px"
+      /></router-link>
+    </section>
   </nav>
 </template>
 
 <style lang="scss" scoped>
 @import "@/assets/scss/_variables.scss";
 
+.route-icon {
+  width: 50px;
+}
+
 nav {
   margin-bottom: 1rem;
   display: flex;
@@ -22,13 +40,23 @@ nav {
     rgba(100, 180, 255, 0.1)
   );
 
+  .pages {
+    flex: 1;
+    display: flex;
+  }
+
+  .icons {
+    flex-grow: 0;
+    display: flex;
+  }
+
   .entry {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 50px;
-    max-width: 300px;
+    max-width: 250px;
     text-align: center;
     color: $grey-lighter;
 
@@ -61,17 +89,20 @@ nav {
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
-const routes = ["lobby", "deck-editor"];
+const mainRoutes = ["lobby", "deck-editor"];
+const iconRoutes = ["settings"];
 
 @Component({
   components: {}
 })
 export default class TopNav extends Vue {
-  private routes!: string[];
+  private mainRoutes!: string[];
+  private iconRoutes!: string[];
 
   private data() {
     return {
-      routes
+      mainRoutes,
+      iconRoutes
     };
   }
 
diff --git a/src/router.ts b/src/router.ts
index 43ad90d..98f83a2 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -6,6 +6,7 @@ import GameView from "@/views/Game.vue";
 import DraftView from "@/views/Draft.vue";
 import Lobby from "@/views/Lobby.vue";
 import RoomView from "@/views/Room.vue";
+import SettingsView from "@/views/Settings.vue";
 
 Vue.use(Router);
 
@@ -48,6 +49,14 @@ export default new Router({
       path: "/room",
       name: "room",
       component: RoomView
+    },
+    {
+      path: "/settings",
+      name: "settings",
+      component: SettingsView,
+      meta: {
+        topnav: "settings"
+      }
     }
   ]
 });
diff --git a/src/views/Lobby.vue b/src/views/Lobby.vue
index 155ecde..041677a 100644
--- a/src/views/Lobby.vue
+++ b/src/views/Lobby.vue
@@ -16,30 +16,11 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
-import { TaskRunner } from "@/workers";
 
 @Component({
   components: {
     TopNav
   }
 })
-export default class Lobby extends Vue {
-  private mounted() {
-    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)}%)`
-      );
-    });
-  }
-}
+export default class Lobby extends Vue {}
 </script>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000..af1bb25
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,36 @@
+<template>
+  <section class="settings">
+    <TopNav />
+  </section>
+</template>
+
+<style lang="scss" scoped></style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import TopNav from "@/components/Navigation/TopNav.vue";
+import { TaskRunner } from "@/workers";
+
+@Component({
+  components: { TopNav }
+})
+export default class SettingsView extends Vue {
+  private downloadSets() {
+    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>
-- 
2.40.1


From e0bf8c39dfa8f930553921f7f535a014dc43b4f3 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Fri, 20 Sep 2019 10:52:34 +0200
Subject: [PATCH 4/6] Add image downloading in the UI

---
 src/assets/scss/app.scss |  23 +++++
 src/mlpccg/images.ts     |  10 +++
 src/views/Settings.vue   | 182 ++++++++++++++++++++++++++++++++++++---
 3 files changed, 202 insertions(+), 13 deletions(-)

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index c5efe9d..f3b386b 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -15,4 +15,27 @@ html {
 
 body {
     color: $white;
+}
+
+.modal-background {
+    background: rgba($black, 0.6);
+}
+
+.modal-content {
+    border: 1px solid rgba($primary, 0.4);
+    box-shadow: 0 0 30px rgba($black, 0.3);
+}
+
+.modal-card-body {
+    background: rgba($black, 0.7);
+}
+
+.modal-card-head,
+.modal-card-foot {
+    background: rgba($black, 0.9);
+}
+
+
+progress.progress {
+    filter: invert(90%);
 }
\ No newline at end of file
diff --git a/src/mlpccg/images.ts b/src/mlpccg/images.ts
index 00966da..c9e40df 100644
--- a/src/mlpccg/images.ts
+++ b/src/mlpccg/images.ts
@@ -1,5 +1,15 @@
+import { Database } from "./database";
+
 const imgBaseURL = "https://mcg.zyg.ovh/images/cards/";
 
 export function cardImageURL(cardid: string): string {
   return `${imgBaseURL}${cardid}.webp`;
 }
+
+export async function cardImageSource() {
+  if (!Database) {
+    return "remote";
+  }
+  const count = await Database.images.count();
+  return count > 1900 ? "local" : "remote";
+}
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index af1bb25..81bb11f 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,36 +1,192 @@
 <template>
   <section class="settings">
-    <TopNav />
+    <TopNav class="top" />
+    <section class="settings-box download">
+      <header>
+        <h1>Storage settings</h1>
+      </header>
+      <div class="rows">
+        <article>
+          <div class="name">
+            Card image source
+          </div>
+          <div class="value">
+            {{ imageSource }}
+          </div>
+          <div class="actions">
+            <b-button
+              class="is-primary"
+              @click="downloadImages"
+              :disabled="cardImageSource == 'local'"
+              >Download images</b-button
+            >
+          </div>
+        </article>
+      </div>
+    </section>
+    <b-modal :active.sync="isDownloading" :can-cancel="false">
+      <div class="modal-card" style="width: auto">
+        <header class="modal-card-head">
+          <p class="modal-card-title">
+            {{ downloadStatus }}
+          </p>
+        </header>
+        <section class="modal-card-body">
+          <b-progress
+            size="is-large"
+            type="is-danger"
+            v-if="downloadProgress"
+            :max="downloadProgress.total"
+            :value="downloadProgress.progress"
+            show-value
+          >
+            {{ downloadProgressString }}
+          </b-progress>
+        </section>
+      </div>
+    </b-modal>
   </section>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
+.settings {
+  display: grid;
+}
+
+.top {
+  grid-column: 1 / end;
+}
+
+.settings-box {
+  margin: 20px;
+  padding: 20px;
+  background: rgba($white, 0.1);
+  border-radius: 6px;
+
+  header {
+    h1 {
+      font-family: $fantasy;
+      font-size: 17pt;
+    }
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    article {
+      margin: 10px 0;
+      font-size: 12pt;
+      display: flex;
+      align-items: center;
+      & > div {
+        margin: 5px;
+      }
+
+      .value {
+        border: 1px solid rgba($black, 0.4);
+        border-radius: 3px;
+        padding: 5px 10px;
+      }
+    }
+  }
+}
+</style>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
 import { TaskRunner } from "@/workers";
+import { cardImageSource } from "@/mlpccg";
 
 @Component({
   components: { TopNav }
 })
 export default class SettingsView extends Vue {
-  private downloadSets() {
+  private cardImageSource!: "local" | "remote";
+  private downloadState!: "starting" | "download" | "extract" | null;
+  private downloadProgress!: { progress: number; total: number } | null;
+
+  private downloadImages() {
+    this.downloadState = "starting";
     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)}%)`
-      );
+      if (this.downloadState != "download") {
+        this.downloadState = "download";
+      }
+      this.downloadProgress = progress;
     });
     worker.on("ex-progress", progress => {
-      console.log(
-        `Extraction progress: ${progress.progress}/${
-          progress.total
-        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
-      );
+      if (this.downloadState != "extract") {
+        this.downloadState = "extract";
+      }
+      this.downloadProgress = progress;
     });
+    worker.on("finish", async _ => {
+      this.downloadState = null;
+      this.cardImageSource = await cardImageSource();
+    });
+  }
+
+  private data() {
+    return {
+      cardImageSource: "remote",
+      downloadState: null,
+      downloadProgress: null
+    };
+  }
+
+  private async mounted() {
+    this.cardImageSource = await cardImageSource();
+  }
+
+  private get imageSource() {
+    switch (this.cardImageSource) {
+      case "local":
+        return "Local saved copy";
+      case "remote":
+        return "Remote server";
+    }
+    return "Unknown";
+  }
+
+  private get isDownloading(): boolean {
+    return this.downloadState !== null;
+  }
+
+  private get downloadStatus(): string {
+    switch (this.downloadState) {
+      case "starting":
+        return "Starting download...";
+      case "download":
+        return `Downloading image archive (${Math.round(
+          this.downloadProgress!.total / 10485.76
+        ) / 100} MB)`;
+      case "extract":
+        return `Extracting images`;
+    }
+    return "";
+  }
+
+  private get downloadProgressString(): string {
+    if (!this.downloadProgress) {
+      return "";
+    }
+    let current = "";
+    let total = "";
+    if (this.downloadState == "extract") {
+      current = `${(this.downloadProgress.progress / 2) | 0}`;
+      total = `${(this.downloadProgress.total / 2) | 0}`;
+    } else {
+      current = `${Math.round(this.downloadProgress.progress / 10485.76) /
+        100}`;
+      total = `${Math.round(this.downloadProgress.total / 10485.76) / 100} MB`;
+    }
+    const percent = Math.round(
+      (this.downloadProgress.progress / this.downloadProgress.total) * 100
+    );
+    return `${percent}% (${current}/${total})`;
   }
 }
 </script>
-- 
2.40.1


From 916af31051e03847924afdb9fc10448326e7a730 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Fri, 20 Sep 2019 11:30:30 +0200
Subject: [PATCH 5/6] Use locally stored images for cards when possible

---
 src/App.vue                               |  6 +--
 src/components/Cards/CardImage.vue        | 50 +++++++++++++++++++++++
 src/components/DeckBuilder/CardPicker.vue |  7 +++-
 src/mlpccg/images.ts                      | 30 ++++++++++++--
 src/views/Settings.vue                    | 10 ++---
 5 files changed, 87 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Cards/CardImage.vue

diff --git a/src/App.vue b/src/App.vue
index 0210d76..c1fb32d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,9 +28,8 @@ h1.loading-message {
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { Action, Getter } from "vuex-class";
-import { loadSets } from "@/mlpccg/set";
-import { AppState } from "./store/types";
-import { getCards } from "./mlpccg/database";
+import { AppState } from "@/store/types";
+import { refreshCardSource, loadSets, getCards } from "@/mlpccg";
 
 @Component({
   components: {}
@@ -54,6 +53,7 @@ export default class App extends Vue {
   private async loadCards() {
     this.showLoading("Downloading data for all sets");
     await loadSets();
+    await refreshCardSource();
     this.hideLoading();
     this.setLoaded(true);
   }
diff --git a/src/components/Cards/CardImage.vue b/src/components/Cards/CardImage.vue
new file mode 100644
index 0000000..ef14af9
--- /dev/null
+++ b/src/components/Cards/CardImage.vue
@@ -0,0 +1,50 @@
+<template>
+  <img :src="imageURL" />
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { cardImageURL } from "../../mlpccg";
+
+@Component({
+  components: {}
+})
+export default class CardImage extends Vue {
+  @Prop()
+  private id!: string;
+
+  private loaded!: boolean;
+  private loadedURL!: string;
+
+  private data() {
+    return {
+      loaded: false,
+      loadedURL: ""
+    };
+  }
+
+  private mounted() {
+    this.fetchImage();
+    this.$watch("id", () => {
+      this.loaded = false;
+      this.fetchImage();
+    });
+  }
+
+  private async fetchImage() {
+    const url = await cardImageURL(this.id);
+    this.loaded = true;
+    this.loadedURL = url;
+  }
+
+  private get imageURL(): string {
+    if (this.loaded) {
+      return this.loadedURL;
+    }
+    return require("@/assets/images/cardback.webp");
+  }
+}
+</script>
diff --git a/src/components/DeckBuilder/CardPicker.vue b/src/components/DeckBuilder/CardPicker.vue
index 90b7fc5..726f24c 100644
--- a/src/components/DeckBuilder/CardPicker.vue
+++ b/src/components/DeckBuilder/CardPicker.vue
@@ -6,7 +6,7 @@
       v-for="(card, i) in cards"
       :key="i + card.data.ID"
     >
-      <img :src="imageURL(card.data.ID)" />
+      <CardImage :id="card.data.ID" />
     </article>
   </section>
 </template>
@@ -45,9 +45,12 @@ $padding: 10px;
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
 import { Card, CardSlot, cardImageURL } from "@/mlpccg";
+import CardImage from "@/components/Cards/CardImage.vue";
 
 @Component({
-  components: {}
+  components: {
+    CardImage
+  }
 })
 export default class CardPicker extends Vue {
   @Prop()
diff --git a/src/mlpccg/images.ts b/src/mlpccg/images.ts
index c9e40df..66d3102 100644
--- a/src/mlpccg/images.ts
+++ b/src/mlpccg/images.ts
@@ -1,15 +1,37 @@
 import { Database } from "./database";
 
 const imgBaseURL = "https://mcg.zyg.ovh/images/cards/";
+let imageSource: "local" | "remote" = "remote";
 
-export function cardImageURL(cardid: string): string {
+export function remoteImageURL(cardid: string): string {
   return `${imgBaseURL}${cardid}.webp`;
 }
 
-export async function cardImageSource() {
+export async function cardImageURL(cardid: string): Promise<string> {
   if (!Database) {
-    return "remote";
+    return remoteImageURL(cardid);
+  }
+  switch (cardImageSource()) {
+    case "local":
+      const card = await Database.images.get(`${cardid}.webp`);
+      if (!card) {
+        return remoteImageURL(cardid);
+      }
+      return URL.createObjectURL(card.image);
+    //TODO
+    case "remote":
+      return remoteImageURL(cardid);
+  }
+}
+
+export function cardImageSource() {
+  return imageSource;
+}
+
+export async function refreshCardSource() {
+  if (!Database) {
+    return;
   }
   const count = await Database.images.count();
-  return count > 1900 ? "local" : "remote";
+  imageSource = count > 1900 ? "local" : "remote";
 }
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 81bb11f..04a9181 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -98,7 +98,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
 import { TaskRunner } from "@/workers";
-import { cardImageSource } from "@/mlpccg";
+import { cardImageSource, refreshCardSource } from "@/mlpccg";
 
 @Component({
   components: { TopNav }
@@ -125,22 +125,18 @@ export default class SettingsView extends Vue {
     });
     worker.on("finish", async _ => {
       this.downloadState = null;
-      this.cardImageSource = await cardImageSource();
+      await refreshCardSource();
     });
   }
 
   private data() {
     return {
-      cardImageSource: "remote",
+      cardImageSource: cardImageSource(),
       downloadState: null,
       downloadProgress: null
     };
   }
 
-  private async mounted() {
-    this.cardImageSource = await cardImageSource();
-  }
-
   private get imageSource() {
     switch (this.cardImageSource) {
       case "local":
-- 
2.40.1


From 9b639a52d14aaba0219ee85a70ddb4796832a18a Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Fri, 20 Sep 2019 12:48:57 +0200
Subject: [PATCH 6/6] Fix tests

---
 jest.config.js                               |  2 +-
 src/testing/index.ts                         |  1 +
 src/testing/sync-utils.ts                    |  5 +++++
 src/tests/unit/components/CardPicker.spec.ts | 21 +++++++++++++++++---
 4 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src/testing/sync-utils.ts

diff --git a/jest.config.js b/jest.config.js
index c1b9492..6f67976 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,7 +2,7 @@ module.exports = {
   moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
   transform: {
     "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2|webp)$":
       "jest-transform-stub",
     "^.+\\.tsx?$": "ts-jest"
   },
diff --git a/src/testing/index.ts b/src/testing/index.ts
index a9aa129..f3ad69d 100644
--- a/src/testing/index.ts
+++ b/src/testing/index.ts
@@ -3,3 +3,4 @@ export * from "./MockPeer";
 export * from "./MockHelper";
 export * from "./EventHook";
 export * from "./IDBShim";
+export * from "./sync-utils";
diff --git a/src/testing/sync-utils.ts b/src/testing/sync-utils.ts
new file mode 100644
index 0000000..0bfc811
--- /dev/null
+++ b/src/testing/sync-utils.ts
@@ -0,0 +1,5 @@
+export function seconds(ms: number): Promise<void> {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms * 1000);
+  });
+}
diff --git a/src/tests/unit/components/CardPicker.spec.ts b/src/tests/unit/components/CardPicker.spec.ts
index 6a93cd6..d5ce123 100644
--- a/src/tests/unit/components/CardPicker.spec.ts
+++ b/src/tests/unit/components/CardPicker.spec.ts
@@ -1,5 +1,7 @@
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
-import { shallowMount } from "@vue/test-utils";
+import CardImage from "@/components/Cards/CardImage.vue";
+import { shallowMount, mount } from "@vue/test-utils";
+import { seconds } from "@/testing";
 
 // Generate 10 test cards
 const testCards = new Array(10)
@@ -8,8 +10,8 @@ const testCards = new Array(10)
 const testSlots = testCards.map(c => ({ data: c, limit: 3, howmany: 1 }));
 
 describe("components/DeckBuilder/CardPicker", () => {
-  test("CardPicker correctly creates images for each card", () => {
-    const wrapper = shallowMount(CardPicker, {
+  test("CardPicker correctly instances images for each card", () => {
+    const wrapper = mount(CardPicker, {
       propsData: {
         rows: 2,
         columns: 5,
@@ -20,6 +22,19 @@ describe("components/DeckBuilder/CardPicker", () => {
     expect(cards.contains("img")).toBe(true);
   });
 
+  test("CardImage correctly resolves to an URL after a while", async () => {
+    const wrapper = mount(CardImage, {
+      propsData: {
+        id: "sb1"
+      }
+    });
+    let src = wrapper.attributes("src");
+    expect(src).toBe(""); // Should be placeholder but it gets stubbed
+    await seconds(0.5);
+    src = wrapper.attributes("src");
+    expect(src).toMatch(/^https?:|^blob:/);
+  });
+
   test("CardPicker correctly aligns items in a grid", () => {
     const wrapper = shallowMount(CardPicker, {
       propsData: {
-- 
2.40.1