Start adding image cache logic
This commit is contained in:
parent
3f975e0d10
commit
df70f34e7a
6 changed files with 39 additions and 10 deletions
|
@ -1,4 +1,5 @@
|
|||
import Vue from "vue";
|
||||
import "./plugins/axios";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
|
|
|
@ -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}`;
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
31
src/mlpccg/images.ts
Normal file
31
src/mlpccg/images.ts
Normal file
|
@ -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);
|
||||
}
|
|
@ -2,3 +2,4 @@ export * from "./card";
|
|||
export * from "./database";
|
||||
export * from "./set";
|
||||
export * from "./types";
|
||||
export * from "./images";
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue