src/views/DeckBuilder.vue

@@ -15,6 +15,14 @@
               :src="elementIconURL(color)"
             />
           </div>
+          <div class="divider" />
+          <div class="typefilter" v-for="type in types" :key="type">
+            <img
+              @click="toggleTypeFilter(type)"
+              :class="typeIconClass(type)"
+              :src="typeIconURL(type)"
+            />
+          </div>
         </div>
         <div class="row">
           <b-input
@@ -91,7 +99,8 @@
 }
 
 .colorfilter,
-.setfilter {
+.setfilter,
+.typefilter {
   cursor: pointer;
   img {
     opacity: 0.4;
@@ -114,6 +123,11 @@
   height: 32px;
 }
 
+.typefilter {
+  width: 42px;
+  height: 42px;
+}
+
 .prev,
 .next {
   opacity: 0.5;
@@ -131,6 +145,11 @@
 .next img {
   transform: scaleX(-1);
 }
+
+.divider {
+  width: 10px;
+  height: 10px;
+}
 </style>
 
 <script lang="ts">
@@ -281,6 +300,7 @@ export default class DeckBuilder extends Vue {
   // Names
   private colors!: string[];
   private sets!: string[];
+  private types!: string[];
 
   // Card picker size
   private rows!: number;
@@ -291,6 +311,7 @@ export default class DeckBuilder extends Vue {
   private ruleFilter!: string;
   private setFilters!: string[];
   private elementFilters!: string[];
+  private typeFilters!: string[];
 
   // Navigation
   private offset!: number;
@@ -306,8 +327,10 @@ export default class DeckBuilder extends Vue {
       ruleFilter: "",
       setFilters: [],
       elementFilters: [],
+      typeFilters: [],
       colors: colorNames,
-      sets: allSets.slice(0, -1)
+      sets: allSets.slice(0, -1),
+      types: typeNames
     };
   }
 
@@ -323,6 +346,9 @@ export default class DeckBuilder extends Vue {
     if (this.elementFilters.length > 0) {
       filters.Elements = this.elementFilters;
     }
+    if (this.typeFilters.length > 0) {
+      filters.Types = this.typeFilters;
+    }
     if (this.nameFilter.length > 0) {
       filters.Name = this.nameFilter;
     }
@@ -356,6 +382,14 @@ export default class DeckBuilder extends Vue {
     return `/images/sets/${set.toUpperCase()}.webp`;
   }
 
+  private typeIconURL(type: string): string {
+    let urltype = type.toLowerCase();
+    if (urltype == "mane character") {
+      urltype = "mane-char";
+    }
+    return `/images/cardtypes/${urltype}.webp`;
+  }
+
   private elementIconClass(element: string) {
     return {
       selected: this.elementFilters.includes(element)
@@ -368,6 +402,12 @@ export default class DeckBuilder extends Vue {
     };
   }
 
+  private typeIconClass(type: string) {
+    return {
+      selected: this.typeFilters.includes(type)
+    };
+  }
+
   private toggleElementFilter(element: string) {
     const idx = this.elementFilters.indexOf(element);
     if (idx >= 0) {
@@ -388,6 +428,16 @@ export default class DeckBuilder extends Vue {
     this.applyFilters();
   }
 
+  private toggleTypeFilter(set: string) {
+    const idx = this.typeFilters.indexOf(set);
+    if (idx >= 0) {
+      this.typeFilters.splice(idx, 1);
+    } else {
+      this.typeFilters.push(set);
+    }
+    this.applyFilters();
+  }
+
   private nameChanged() {
     this.applyFilters();
   }