From df70f34e7a6478c01b3a2b75cfee924a105aea1d Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 8 Sep 2019 20:24:23 +0200
Subject: [PATCH] Start adding image cache logic

---
 src/main.ts            |  1 +
 src/mlpccg/card.ts     |  6 ------
 src/mlpccg/database.ts |  2 ++
 src/mlpccg/images.ts   | 31 +++++++++++++++++++++++++++++++
 src/mlpccg/index.ts    |  1 +
 src/mlpccg/set.ts      |  8 ++++----
 6 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 src/mlpccg/images.ts

diff --git a/src/main.ts b/src/main.ts
index 9ee82ad..5e90873 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import Vue from "vue";
+import "./plugins/axios";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
diff --git a/src/mlpccg/card.ts b/src/mlpccg/card.ts
index 19f0cba..e83139c 100644
--- a/src/mlpccg/card.ts
+++ b/src/mlpccg/card.ts
@@ -1,11 +1,5 @@
 import { Card } from "./types";
 
-const imgBaseURL = "https://mcg.zyg.ovh/images/cards/";
-
-export function cardImageURL(cardid: string): string {
-  return `${imgBaseURL}${cardid}.webp`;
-}
-
 export function cardFullName(card: Card): string {
   if (card.Subname != "") {
     return `${card.Name}, ${card.Subname}`;
diff --git a/src/mlpccg/database.ts b/src/mlpccg/database.ts
index 9923fd5..9e4502d 100644
--- a/src/mlpccg/database.ts
+++ b/src/mlpccg/database.ts
@@ -4,6 +4,7 @@ import { cardFullName } from "./card";
 
 class CardDatabase extends Dexie {
   public cards: Dexie.Table<Card, string>;
+  public images: Dexie.Table<Blob, string>;
 
   public constructor() {
     super("CardDatabase");
@@ -11,6 +12,7 @@ class CardDatabase extends Dexie {
       cards: "ID,Set,Type,Cost,Power"
     });
     this.cards = this.table("cards");
+    this.images = this.table("images");
   }
 }
 
diff --git a/src/mlpccg/images.ts b/src/mlpccg/images.ts
new file mode 100644
index 0000000..1bbd3b1
--- /dev/null
+++ b/src/mlpccg/images.ts
@@ -0,0 +1,31 @@
+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() {
+  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(req.data, img);
+  });
+  return await Promise.all(promises);
+}
diff --git a/src/mlpccg/index.ts b/src/mlpccg/index.ts
index 5c33687..322722a 100644
--- a/src/mlpccg/index.ts
+++ b/src/mlpccg/index.ts
@@ -2,3 +2,4 @@ export * from "./card";
 export * from "./database";
 export * from "./set";
 export * from "./types";
+export * from "./images";
diff --git a/src/mlpccg/set.ts b/src/mlpccg/set.ts
index e6a5538..5d2ebaf 100644
--- a/src/mlpccg/set.ts
+++ b/src/mlpccg/set.ts
@@ -1,5 +1,6 @@
 import { SetFile } from "./types";
 import { Database } from "./database";
+import axios from "axios";
 
 const baseURL = "https://mcg.zyg.ovh/setdata/";
 export const allSets = [
@@ -34,11 +35,10 @@ export async function loadSets() {
 }
 
 async function downloadSet(setid: string): Promise<SetFile> {
-  const setfile = await fetch(`${baseURL}${setid.toLowerCase()}.json`);
-  const setdata: SetFile = await setfile.json();
-  setdata.Cards = setdata.Cards.map(c => {
+  const setdata = await axios(`${baseURL}${setid.toLowerCase()}.json`);
+  setdata.data.Cards = (setdata.data as SetFile).Cards.map(c => {
     c.Set = setid;
     return c;
   });
-  return setdata;
+  return setdata.data;
 }