Use locally stored images for cards when possible

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

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>

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

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

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