src/views/DeckBuilder.vue

@@ -303,6 +303,17 @@ function sortByColor(a: Card, b: Card) {
   return 0;
 }
 
+function cardLimit(type: string) {
+  switch (type) {
+    case "Mane Character":
+      return 1;
+    case "Problem":
+      return 2;
+    default:
+      return 3;
+  }
+}
+
 @Component({
   components: {
     DeckList,
@@ -388,11 +399,17 @@ export default class DeckBuilder extends Vue {
   private get currentPage(): CardSlot[] {
     return this.filtered
       .slice(this.offset, this.offset + this.itemsPerPage)
-      .map(card => ({
+      .map(card => {
-        data: card,
+        const res = this.decklist.find(c => c.data.ID == card.ID);
-        limit: card.Type == "Problem" ? 2 : 3,
+        if (res) {
-        howmany: this.decklist.filter(c => c.data.ID == card.ID).length
+          return res;
-      }));
+        }
+        return {
+          data: card,
+          limit: cardLimit(card.Type),
+          howmany: 0
+        };
+      });
   }
 
   private elementIconURL(element: string): string {
@@ -466,7 +483,7 @@ export default class DeckBuilder extends Vue {
     } else {
       this.decklist.push({
         data: card,
-        limit: card.Type == "Problem" ? 2 : 3,
+        limit: cardLimit(card.Type),
         howmany: 1
       });
     }