Start adding image cache logic

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";

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}`;

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

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

src/mlpccg/index.ts

@@ -2,3 +2,4 @@ export * from "./card";
 export * from "./database";
 export * from "./set";
 export * from "./types";
+export * from "./images";

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 = await axios(`${baseURL}${setid.toLowerCase()}.json`);
-  const setdata: SetFile = await setfile.json();
+  setdata.data.Cards = (setdata.data as SetFile).Cards.map(c => {
-  setdata.Cards = setdata.Cards.map(c => {
     c.Set = setid;
     return c;
   });
-  return setdata;
+  return setdata.data;
 }