Properly initialize images database

src/mlpccg/database.ts

@@ -1,15 +1,16 @@
 import Dexie from "dexie";
-import { Card, CardFilter } from "./types";
+import { Card, CardFilter, StoredImages } from "./types";
 import { cardFullName } from "./card";
 
 class CardDatabase extends Dexie {
   public cards: Dexie.Table<Card, string>;
-  public images: Dexie.Table<Blob, string>;
+  public images: Dexie.Table<StoredImages, string>;
 
   public constructor() {
     super("CardDatabase");
     this.version(1).stores({
-      cards: "ID,Set,Type,Cost,Power"
+      cards: "ID,Set,Type,Cost,Power",
+      images: "id"
     });
     this.cards = this.table("cards");
     this.images = this.table("images");

src/mlpccg/images.ts

@@ -25,7 +25,7 @@ export async function getImages() {
       url: `${imgBaseURL}${img}`,
       responseType: "blob"
     });
-    return table.put(req.data, img);
+    return table.put({ id: img, image: req.data });
   });
   return await Promise.all(promises);
 }

src/mlpccg/types.ts

@@ -2,6 +2,11 @@ export type Rarity = "C" | "U" | "R" | "SR" | "UR" | "RR";
 
 export type PowerRequirement = { [key: string]: number };
 
+export interface StoredImages {
+  id: string;
+  image: Blob;
+}
+
 export interface SetFile {
   Name: string;
   Cards: Card[];

src/views/DeckBuilder.vue

@@ -187,6 +187,7 @@ function sortByColor(a: Card, b: Card) {
   switch (a.Type) {
     case "Friend":
     case "Mane Character":
+      {
         const elemA = multiElemStr(a.Element);
         const elemB = multiElemStr(b.Element);
         if (elemA > elemB) {
@@ -195,16 +196,19 @@ function sortByColor(a: Card, b: Card) {
         if (elemB > elemA) {
           return -1;
         }
+      }
       break;
     case "Problem":
-      const preqA = multiElemStr(Object.keys(a.ProblemRequirement!));
+      if (a.ProblemRequirement && b.ProblemRequirement) {
-      const preqB = multiElemStr(Object.keys(b.ProblemRequirement!));
+        const preqA = multiElemStr(Object.keys(a.ProblemRequirement));
+        const preqB = multiElemStr(Object.keys(b.ProblemRequirement));
         if (preqA > preqB) {
           return 1;
         }
         if (preqB > preqA) {
           return -1;
         }
+      }
       break;
     case "Event":
     case "Resource":